/* ============================================================
   관리자 편집 패널 (?admin=1 또는 Ctrl+Shift+E)
   ============================================================ */
/* ---------------------------------------------------------------- 화면 틀
   미리보기 없이 편집만 하는 한 장짜리 화면입니다.
   왼쪽 섹션 목록 + 오른쪽 편집 영역, 위에는 고정 머리띠. */
html, body.admin-page{ height:auto; }
body.admin-page{ margin:0; background:var(--mist); color:var(--ink); font-size:13.5px; }

.adm-bar{ position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--line); }
.adm-bar-in{ max-width:1180px; margin:0 auto; padding:13px 22px; display:flex; align-items:center; gap:12px; }
.adm-bar-t b{ font-size:15px; font-weight:700; letter-spacing:-.03em; }
.adm-bar-t span{ margin-left:7px; font-size:12px; color:var(--ink-3); }
.adm-bar-acts{ margin-left:auto; display:flex; gap:6px; }
.adm-bar-acts .adm-btn{ display:inline-flex; align-items:center; }

.adm{ position:relative; max-width:1180px; margin:0 auto; padding:22px;
  display:grid; grid-template-columns:186px minmax(0,1fr); gap:20px; align-items:start; }
.adm-main{ min-width:0; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:6px 20px 26px; }
@media (max-width:860px){
  .adm{ grid-template-columns:1fr; padding:14px; gap:14px; }
  .adm-main{ padding:6px 14px 22px; }
}

.adm-top{ padding:16px 18px; border-bottom:1px solid var(--line); }
.adm-top h2{ margin:0; font-size:15px; font-weight:700; letter-spacing:-.03em; }
.adm-top p{ margin:5px 0 0; font-size:12px; color:var(--ink-3); line-height:1.5; }
.adm-acts{ display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
.adm-btn{
  border:1px solid var(--line); border-radius:7px; padding:8px 12px; font-size:12.5px;
  font-weight:600; letter-spacing:-.02em; transition:background .2s, border-color .2s, color .2s;
}
.adm-btn:hover{ background:var(--mist); }
.adm-btn.pri{ background:var(--brand); border-color:var(--brand); color:#fff; }
.adm-btn.pri:hover{ filter:brightness(1.12); }
.adm-btn.gh{ color:var(--ink-3); }

.adm-theme{ padding:14px 0 0; }
.adm-theme > p{ margin:0 0 9px; font-size:11.5px; font-weight:700; color:var(--ink-3); }
.adm-theme > div{ display:flex; gap:7px; flex-wrap:wrap; }
.adm-sw{ display:flex; align-items:center; gap:7px; padding:6px 11px 6px 7px; border-radius:999px;
  border:1px solid var(--line); font-size:12px; font-weight:600; color:var(--ink-2);
  transition:border-color .25s, color .25s; }
.adm-sw:hover{ border-color:var(--ink-3); }
.adm-sw.on{ border-color:currentColor; }
.adm-sw i{ width:15px; height:15px; border-radius:50%; display:block; position:relative; }
/* label은 기본이 inline이라 지정하지 않으면 줄이 넘어갈 때 테두리가 조각나고
   글자가 상자 밖으로 흘러나옵니다. 반드시 block으로 둡니다. */
.adm-drop{
  display:block; margin:16px 0 0; padding:14px;
  border:1.5px dashed var(--line); border-radius:9px;
  text-align:center; font-size:12.5px; color:var(--ink-3); line-height:1.55;
}
.adm-drop.hot{ border-color:var(--brand); background:rgba(14,80,73,.05); color:var(--brand); }

.adm-body{ padding:6px 0 0; }
.adm-grp{ margin-top:20px; font-size:11.5px; font-weight:700; letter-spacing:.02em;
  color:var(--ink-3); padding-bottom:7px; border-bottom:1px solid var(--line); }
.adm-grp-row{ margin-top:22px; padding-bottom:8px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.adm-grp-row .adm-grp{ margin:0; padding:0; border:0; min-width:0; }
.adm-grp-title{ display:flex; align-items:baseline; gap:7px; min-width:0; }
.adm-grp-title strong{ font-size:11.5px; font-weight:700; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-grp-title span{ flex:none; font-size:10.5px; font-weight:600; color:var(--brand); }
.adm-add-photo{ flex:none; padding:6px 10px; border:1px solid var(--brand); border-radius:7px; color:var(--brand); font-size:11.5px; font-weight:700; transition:background .2s,color .2s; }
.adm-add-photo:hover{ background:var(--brand); color:var(--paper); }
.adm-mini button[data-a=slot-del]{ color:color-mix(in srgb,var(--ink) 66%,transparent); border-style:dashed; }
.adm-mini button[data-a=slot-del]:hover{ color:var(--brand); border-color:var(--brand); background:var(--tint); }
.adm-mini button[disabled]{ opacity:.3; pointer-events:none; }
.adm-slot-no{ display:inline-block; margin-left:6px; font-size:10.5px; font-weight:600; color:var(--brand); }

.adm-row{ display:grid; grid-template-columns:96px 1fr; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.adm-thumb{
  position:relative; aspect-ratio:4/3; border-radius:6px; overflow:hidden; cursor:crosshair;
  background:var(--mist) center/cover no-repeat; box-shadow:inset 0 0 0 1px var(--line);
  display:grid; place-items:center; font-size:10px; color:var(--ink-3); text-align:center;
}
.adm-thumb.has em{ display:none; }
.adm-thumb .dot{ position:absolute; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:50%;
  border:2px solid #fff; background:rgba(14,80,73,.9); box-shadow:0 0 0 1px rgba(0,0,0,.3); display:none; }
.adm-thumb.has .dot{ display:block; }
.adm-meta b{ display:block; font-size:12.5px; font-weight:700; letter-spacing:-.02em; }
.adm-meta span{ display:block; margin-top:3px; font-size:11.5px; color:var(--ink-3); line-height:1.5; }
.adm-mini{ display:flex; gap:5px; margin-top:8px; flex-wrap:wrap; }
.adm-mini button{ font-size:11.5px; padding:5px 9px; border:1px solid var(--line); border-radius:6px; color:var(--ink-2); }
.adm-mini button:hover{ background:var(--mist); }
.adm-ctl{ grid-column:1/-1; display:none; gap:10px; margin-top:2px; }
.adm-row.open .adm-ctl{ display:grid; }
.adm-ctl label{ display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--ink-2); }
.adm-ctl input[type=range]{ flex:1; accent-color:var(--brand); }
.adm-ctl .val{ font-family:var(--font-en); font-size:11px; color:var(--ink-3); width:40px; text-align:right; }
.adm-align{ display:grid; grid-template-columns:repeat(3,26px); gap:4px; }
.adm-align button{ height:22px; border:1px solid var(--line); border-radius:4px; }
.adm-align button.on{ background:var(--brand); border-color:var(--brand); }
.adm-hint{ font-size:11px; color:var(--ink-3); line-height:1.5; }
.adm-toast{
  position:fixed; z-index:210; left:50%; bottom:26px; transform:translate(-50%,14px);
  background:var(--ink); color:#fff; padding:11px 18px; border-radius:8px; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;
}
.adm-toast.on{ opacity:1; transform:translate(-50%,0); }
@media (max-width:820px){
  :root{ --adm-w:100%; }
  body.is-admin{ width:100%; overflow:hidden; height:100vh; }
}


/* ============================================================
   클라우드 저장 · 로그인 · 글 편집
   ============================================================ */
.adm-cloud{ padding:18px 20px; border-bottom:1px solid rgba(20,30,40,.12); }
.adm-cloud h3{ margin:0; font-size:15px; font-weight:700; letter-spacing:-.02em; }
.adm-cloud-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.adm-cloud-head h3{ margin-right:auto; }
.adm-cloud-help{ margin:8px 0 0; font-size:12px; line-height:1.65; color:rgba(20,30,40,.6); }
.adm-cloud-off{ margin:0; font-size:12px; line-height:1.65; color:rgba(20,30,40,.6); }
.adm-cloud-msg{ margin:10px 0 0; font-size:12px; line-height:1.6; color:#b4443a; word-break:break-all; }
.adm-cloud-form{ display:grid; gap:8px; margin-top:12px; }
.adm-cloud-form input{ width:100%; padding:9px 11px; font:inherit; font-size:13px;
  border:1px solid rgba(20,30,40,.18); border-radius:9px; background:#fff; }
.adm-cloud-group{ margin:22px 0 8px; padding-top:12px; border-top:1px solid rgba(20,30,40,.12);
  font-size:12px; font-weight:700; letter-spacing:.03em; color:rgba(20,30,40,.75); }
.adm-cloud-field{ display:block; margin-top:9px; }
.adm-cloud-field > span{ display:block; margin-bottom:4px; font-size:11.5px; color:rgba(20,30,40,.55); }
.adm-cloud-field input,
.adm-cloud-field textarea{ width:100%; padding:8px 10px; font:inherit; font-size:12.5px; line-height:1.6;
  border:1px solid rgba(20,30,40,.18); border-radius:8px; background:#fff; resize:vertical; }
.adm-cloud-item{ margin-top:10px; padding:12px; border:1px solid rgba(20,30,40,.12);
  border-radius:11px; background:rgba(20,30,40,.02); }
.adm-cloud-save{ position:sticky; bottom:0; margin-top:18px; padding:12px 0 4px;
  background:linear-gradient(to top, #fff 62%, rgba(255,255,255,0)); }
.adm-cloud-save .adm-btn{ width:100%; }

/* 로그인 전 잠금 화면 — 관리자 패널 전체를 덮습니다.
   단, 닫기(×) 버튼은 z-index를 더 높여 항상 누를 수 있게 둡니다. */
.adm-gate{ position:absolute; inset:0; z-index:30; background:#fff;
  display:flex; flex-direction:column; justify-content:center;
  padding:26px 22px; overflow-y:auto; }
.adm-gate[hidden]{ display:none; }
.adm-gate .adm-btn.gh{ margin-top:14px; width:100%; }
.adm-gate h3{ margin:0; font-size:16px; font-weight:700; letter-spacing:-.02em; }
.adm-gate .adm-cloud-help{ margin-top:9px; }
.adm-gate .adm-cloud-form{ margin-top:16px; }

/* ============================================================
   내용 편집 — 항목 추가 · 삭제 · 순서 조작 버튼
   ============================================================ */
.adm-btn.sm{ padding:5px 10px; font-size:11.5px; }
.adm-cloud-rowbtns{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.adm-cloud-body > .adm-btn.sm{ margin:8px 0 4px; }
.adm-cloud-bar{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px;
  margin-top:10px; padding-top:10px; border-top:1px dashed rgba(20,30,40,.16); }
.adm-cloud-bar .adm-cloud-field{ margin:0; }
.adm-cloud-bar .adm-cloud-field.sm{ width:74px; flex:none; }
.adm-cloud-bar .adm-cloud-field:not(.sm){ flex:1 1 140px; }
.adm-cloud-field.sm input{ width:100%; }

/* ============================================================
   섹션 단추 — 고른 섹션의 문구와 사진만 보여 줍니다
   ============================================================ */
[hidden]{ display:none !important; }
.adm-nav{ display:flex; flex-wrap:wrap; gap:5px; padding:12px 18px;
  border-bottom:1px solid var(--line); background:#fff;
  position:sticky; top:0; z-index:20; }
.adm-nav button{ padding:6px 11px; font-size:11.5px; line-height:1.2;
  border:1px solid rgba(20,30,40,.16); border-radius:999px; background:#fff; color:var(--ink-2);
  transition:background .2s, color .2s, border-color .2s; }
.adm-nav button:hover{ border-color:var(--brand); color:var(--brand); }
.adm-nav button.on{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:700; }

/* ============================================================
   섹션 목록 (왼쪽) · 사진 카드 · 고급 설정
   ============================================================ */
.adm-nav{ display:flex; flex-direction:column; gap:3px; position:sticky; top:74px;
  padding:0; border:0; background:transparent; }
.adm-nav button{ text-align:left; padding:9px 12px; font-size:12.5px; font-weight:600;
  color:var(--ink-2); border:1px solid transparent; border-radius:9px; background:transparent;
  transition:background .18s, color .18s; }
.adm-nav button:hover{ background:#fff; color:var(--brand); }
.adm-nav button.on{ background:var(--brand); border-color:var(--brand); color:#fff; }
@media (max-width:860px){
  .adm-nav{ position:sticky; top:52px; z-index:30; flex-direction:row; flex-wrap:wrap; gap:5px;
    padding:10px; background:var(--mist); border-radius:10px; }
  .adm-nav button{ padding:7px 11px; font-size:11.5px; border-radius:999px; background:#fff;
    border-color:var(--line); }
}

.adm-more{ margin-top:26px; padding-top:16px; border-top:1px solid var(--line); }
.adm-more summary{ cursor:pointer; font-size:12.5px; font-weight:700; color:var(--ink-3); }
.adm-more summary::marker{ color:var(--ink-3); }
.adm-more-help{ margin:12px 0 0; font-size:11.5px; line-height:1.6; color:var(--ink-3); }
.adm-more .adm-acts{ margin-top:14px; }

.adm-gate{ border-radius:14px; }

/* 넓은 화면에서는 사진 자리를 두 칸으로 늘어놓습니다 */
@media (min-width:1000px){
  .adm-body{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; align-items:start; }
  .adm-body > .adm-grp,
  .adm-body > .adm-grp-row{ grid-column:1 / -1; }
  .adm-row{ grid-template-columns:120px 1fr; }
}

/* ════════════════════════════════════════════════════════════
   관리자 화면 다듬기
   홈페이지의 색·글꼴을 그대로 쓰되, 편집 도구답게 조용하게.
   왼쪽 섹션 목록의 화살촉은 홈페이지 좌측 사업 목록과 같은 모양입니다.
   ════════════════════════════════════════════════════════════ */
body.admin-page{ background:#EDF1F3; font-family:var(--font-kr); }

/* ── 위 머리띠 ── */
.adm-bar{ border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(22,38,46,.02); }
.adm-bar-in{ padding:14px 24px; }
.adm-bar-t b{ font-size:14.5px; letter-spacing:-.03em; color:var(--ink); }
.adm-bar-t span{ margin-left:8px; padding:3px 8px; border-radius:999px;
  background:var(--tint); color:var(--brand); font-size:10.5px; font-weight:700; letter-spacing:.02em; }

/* ── 단추 공통 ── */
.adm-btn{ border-radius:9px; padding:8px 13px; font-size:12.5px; font-weight:600;
  border:1px solid var(--line); color:var(--ink-2); background:#fff; }
.adm-btn:hover{ background:var(--mist); border-color:rgba(22,38,46,.22); color:var(--ink); }
.adm-btn.pri{ background:var(--brand); border-color:var(--brand); color:#fff; }
.adm-btn.gh{ background:transparent; color:var(--ink-3); }
.adm-btn.gh:hover{ color:var(--ink-2); }
.adm-btn:focus-visible, .adm-nav button:focus-visible,
.adm-cloud-field input:focus-visible, .adm-cloud-field textarea:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; }

/* ── 왼쪽 섹션 목록 ── */
.adm-nav{ gap:1px; }
.adm-nav button{ position:relative; display:grid; grid-template-columns:26px 1fr; align-items:center;
  gap:9px; padding:10px 13px; border-radius:10px; font-size:13px; font-weight:600;
  letter-spacing:-.02em; color:var(--ink-2); }
.adm-nav button i{ font-family:var(--font-en); font-style:normal; font-size:11px; font-weight:500;
  font-variant-numeric:tabular-nums; color:var(--ink-3); }
.adm-nav button.on{ background:var(--brand); color:#fff; box-shadow:0 6px 16px -10px rgba(30,144,210,.9); }
.adm-nav button.on i{ color:rgba(255,255,255,.7); }
/* 홈페이지 사업 목록과 같은 화살촉 */
.adm-nav button.on::after{ content:""; position:absolute; left:100%; top:50%;
  width:9px; height:16px; transform:translateY(-50%);
  background:var(--brand); clip-path:polygon(0 0, 100% 50%, 0 100%); }
@media (max-width:860px){ .adm-nav button.on::after{ display:none; } }

/* ── 편집 영역 ── */
.adm-main{ border-radius:16px; border-color:var(--line); box-shadow:0 24px 48px -44px rgba(22,38,46,.5); }
.adm-cloud{ padding:20px 0 4px; border-bottom:0; }
.adm-cloud-head{ padding-bottom:14px; border-bottom:1px solid var(--line); }
.adm-cloud h3{ font-size:16px; letter-spacing:-.035em; }
.adm-cloud-help{ font-size:12px; color:var(--ink-3); }

/* 묶음 제목 — 얇은 줄 하나로 구분 */
.adm-cloud-group{ margin:26px 0 2px; padding-top:14px; border-top:1px solid var(--line);
  font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--brand); text-transform:none; }

.adm-cloud-field{ margin-top:12px; }
.adm-cloud-field > span{ margin-bottom:5px; font-size:11px; font-weight:600; color:var(--ink-3); }
.adm-cloud-field input, .adm-cloud-field textarea{ padding:10px 12px; font-size:13px;
  border-color:var(--line); border-radius:10px; transition:border-color .18s, box-shadow .18s; }
.adm-cloud-field input:focus, .adm-cloud-field textarea:focus{ outline:0;
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(30,144,210,.12); }
.adm-cloud-item{ margin-top:14px; padding:16px; border-radius:13px;
  border-color:var(--line); background:#FAFCFC; }
.adm-cloud-item .adm-cloud-field:first-child{ margin-top:0; }

/* ── 저장 띠 ── */
.adm-cloud-save{ margin-top:22px; padding:14px 0;
  background:linear-gradient(to top, #fff 68%, rgba(255,255,255,0)); }
.adm-cloud-save .adm-btn{ padding:12px; font-size:13.5px; border-radius:11px; }

/* ── 사진 ── */
.adm-grp{ margin:26px 0 2px; padding-top:14px; border-top:1px solid var(--line);
  font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--brand); }
.adm-row{ padding:16px; margin-top:12px; border:1px solid var(--line); border-radius:13px;
  background:#FAFCFC; align-items:start; }
.adm-thumb{ border-radius:9px; }

/* ── 사진 끌어다 놓기 ── */
.adm-drop{ display:block; border-radius:13px; border:1.5px dashed var(--line); background:#FAFCFC;
  padding:20px; font-size:12.5px; }

/* ── 로그인 ── */
.adm-gate{ border-radius:16px; padding:40px 32px; }
.adm-gate > *{ max-width:340px; margin-left:auto; margin-right:auto; width:100%; }

/* ════════════════════════════════════════════════════════════
   미리보기 켠 상태 — 왼쪽 홈페이지 + 오른쪽 편집
   끄면 편집 영역이 화면 가운데로 넓게 펼쳐집니다.
   ════════════════════════════════════════════════════════════ */
.admin-preview{ display:none; }
.admin-preview iframe{ display:block; width:100%; height:100%; border:0; background:var(--paper); }

body.with-preview{ overflow:hidden; }
body.with-preview .adm-shell{ display:grid; grid-template-columns:minmax(0,1fr) minmax(440px,46vw);
  height:calc(100vh - 57px); }
body.with-preview .admin-preview{ display:block; min-width:0; height:100%;
  background:var(--paper); border-right:1px solid var(--line); }
body.with-preview .adm{ max-width:none; margin:0; height:100%; overflow-y:auto;
  overscroll-behavior:contain; padding:18px; grid-template-columns:150px minmax(0,1fr); gap:16px; }
body.with-preview .adm-nav{ top:0; }
body.with-preview .adm-nav button{ padding:9px 11px; font-size:12.5px; }
body.with-preview .adm-main{ box-shadow:none; }
body.with-preview .adm-body{ grid-template-columns:1fr; }

@media (max-width:1100px){
  body.with-preview .adm-shell{ grid-template-columns:1fr; height:auto; }
  body.with-preview{ overflow:auto; }
  body.with-preview .admin-preview{ height:52vh; min-height:360px; position:sticky; top:57px; z-index:5;
    border-right:0; border-bottom:1px solid var(--line); }
  body.with-preview .adm{ height:auto; overflow:visible; grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════
   저장 띠 — 편집 영역 맨 아래에 붙어 화면 하단에 고정됩니다
   ════════════════════════════════════════════════════════════ */
#admSaveBar{ position:sticky; bottom:0; z-index:40; margin:24px -20px -26px; }
.adm-cloud-save{ position:static; display:flex; align-items:center; gap:14px;
  margin:0; padding:14px 20px; border-top:1px solid var(--line);
  border-radius:0 0 16px 16px; background:rgba(255,255,255,.94); }
@supports (backdrop-filter:blur(2px)){ .adm-cloud-save{ backdrop-filter:blur(10px); } }
.adm-cloud-save .adm-btn{ width:auto; min-width:200px; margin-left:auto;
  padding:12px 22px; font-size:13.5px; border-radius:11px; }
.adm-cloud-msg{ margin:0; flex:1; min-width:0; font-size:12px; line-height:1.5; }
@media (max-width:860px){
  #admSaveBar{ margin:20px -14px -22px; }
  .adm-cloud-save{ padding:12px 14px; }
  .adm-cloud-save .adm-btn{ min-width:150px; }
}

/* ════════════════════════════════════════════════════════════
   편집 항목을 묶음 카드로 — 어디부터 어디까지가 한 덩어리인지
   ════════════════════════════════════════════════════════════ */
.adm-card{ margin:18px 0 0; padding:0 0 18px;
  border:1px solid var(--line); border-radius:14px; background:#fff;
  box-shadow:0 1px 0 rgba(22,38,46,.03); overflow:hidden; }
.adm-card-head{ display:flex; align-items:baseline; gap:9px;
  padding:14px 18px; margin-bottom:4px;
  background:linear-gradient(to bottom, #F6F9FA, #fff);
  border-bottom:1px solid var(--line); }
.adm-card-head h4{ margin:0; font-size:15px; font-weight:700; letter-spacing:-.035em; color:var(--ink); }
/* 카드 제목 옆의 요약 — 알약 배지 대신 조용한 회색 글씨로 */
.adm-card-kind{ font-size:11.5px; font-weight:600; color:var(--ink-3); }
.adm-card-head h4{ font-size:15.5px; }
.adm-card > *:not(.adm-card-head){ margin-left:18px; margin-right:18px; }

/* 카드 안 입력 칸 — 글씨를 키우고 이름을 또렷하게 */
.adm-card .adm-cloud-field > span{ font-size:12px; font-weight:700; color:var(--ink-2); }
.adm-card .adm-cloud-field input,
.adm-card .adm-cloud-field textarea{ font-size:13.5px; }
.adm-card .adm-cloud-item{ background:#F7FAFB; }
.adm-card .adm-cloud-help{ margin-top:10px; }
.adm-cloud-group{ display:none; }   /* 옛 제목 줄은 카드 머리로 대체됐습니다 */

/* ════════════════════════════════════════════════════════════
   사진 줄 — 아이콘 단추와 끌어서 순서 변경
   ════════════════════════════════════════════════════════════ */
.adm-mini{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.adm-mini button.ic{ display:grid; place-items:center; width:32px; height:32px; padding:0;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink-3);
  transition:color .18s, border-color .18s, background .18s; }
.adm-mini button.ic svg{ width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.adm-mini button.ic:hover{ color:var(--brand); border-color:var(--brand); background:var(--tint); }
.adm-mini button.ic[data-a="del"]:hover,
.adm-mini button.ic[data-a="slot-del"]:hover{ color:#c0392b; border-color:#e0b4ad; background:#fdf3f1; }

/* 끌기 손잡이 */
.adm-drag{ display:grid; place-items:center; width:26px; height:32px; padding:0;
  border:0; background:none; color:var(--ink-3); cursor:grab; }
.adm-drag svg{ width:18px; height:18px; fill:currentColor; stroke:none; }
.adm-drag:active{ cursor:grabbing; }
.adm-row.is-dragging{ opacity:.45; }
.adm-row.is-over{ border-color:var(--brand); box-shadow:0 0 0 2px var(--tint) inset; }

/* 끌기 손잡이는 다른 단추와 달리 안쪽 여백이 없어야 점이 가운데 옵니다 */
.adm-mini button.adm-drag{ padding:0; border:0; background:none; }

/* 사업 순서 줄 */
.adm-order-row{ display:flex; align-items:center; gap:12px; }
.adm-order-row b{ font-size:13.5px; font-weight:600; letter-spacing:-.02em; }
.adm-order-row .adm-cloud-rowbtns{ margin:0 0 0 auto; }

/* ════════════════════════════════════════════════════════════
   사진 관리 — 묶음별 썸네일 그리드 + 오른쪽 편집 패널
   ════════════════════════════════════════════════════════════ */
.pg-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:22px; align-items:start; }
@media (max-width:1180px){ .pg-wrap{ grid-template-columns:1fr; } }

.pg-group{ margin-top:20px; }
.pg-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pg-head h5{ margin:0; display:flex; align-items:baseline; gap:8px; }
.pg-head h5 b{ font-size:13.5px; font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.pg-count{ font-size:11.5px; font-weight:600; color:var(--ink-3); }
.pg-multi{ margin-left:auto; padding:6px 11px; font-size:11.5px; font-weight:600;
  border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink-2); }
.pg-multi:hover{ border-color:var(--brand); color:var(--brand); background:var(--tint); }

/* 칸 수를 고정하지 않고 '한 칸 최소 200px'로 둡니다.
   화면이 넓으면 칸이 늘고, 좁으면 칸 수가 줄어 썸네일이 작아지지 않습니다. */
.pg-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }

.pg-tile{ position:relative; border:1px solid var(--line); border-radius:11px; overflow:hidden;
  background:#fff; cursor:pointer; text-align:left; padding:0;
  transition:border-color .18s, box-shadow .18s; }
.pg-tile:hover{ border-color:var(--brand); }
.pg-tile.on{ border-color:var(--brand); box-shadow:0 0 0 2px var(--tint); }
.pg-shot{ aspect-ratio:4/3; background:var(--mist) center/cover no-repeat; }
.pg-tile.empty .pg-shot{ background:
  repeating-linear-gradient(135deg, rgba(22,38,46,.05) 0 1px, transparent 1px 9px), #EEF3F4; }
.pg-cap{ padding:9px 11px 11px; }
.pg-cap b{ display:block; font-family:var(--font-en); font-size:10.5px; color:var(--ink-3); }
.pg-cap span{ display:block; margin-top:3px; font-size:12px; line-height:1.5; color:var(--ink-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pg-grip{ position:absolute; top:6px; left:6px; width:24px; height:24px; padding:0;
  border:0; border-radius:7px; background:rgba(255,255,255,.9); color:var(--ink-3);
  font-size:13px; line-height:1; cursor:grab; }
.pg-grip:active{ cursor:grabbing; }
.pg-tile.is-dragging{ opacity:.4; }
.pg-tile.is-over{ border-color:var(--brand); box-shadow:0 0 0 2px var(--tint) inset; }
.pg-tile.drop-on{ border-color:var(--brand); background:var(--tint); }

.pg-add{ display:grid; place-content:center; gap:4px; min-height:172px;
  border:1.5px dashed var(--line); background:#FAFCFC; color:var(--ink-3); }
.pg-add span{ font-size:20px; line-height:1; }
.pg-add em{ font-style:normal; font-size:11.5px; font-weight:600; }
.pg-add:hover{ border-color:var(--brand); color:var(--brand); background:var(--tint); }

/* 오른쪽 패널 */
.pg-panel{ position:sticky; top:78px; padding:16px; border:1px solid var(--line);
  border-radius:14px; background:#fff; }
.pg-panel h5{ margin:0 0 3px; font-size:13.5px; font-weight:700; letter-spacing:-.03em; }
.pg-where{ margin:0 0 12px; font-size:11.5px; color:var(--ink-3); }
.pg-panel-empty{ padding:28px 6px; font-size:12.5px; line-height:1.7; color:var(--ink-3); text-align:center; }
.pg-preview{ position:relative; aspect-ratio:4/3; border-radius:9px; overflow:hidden;
  background:var(--mist) center/cover no-repeat; cursor:crosshair; }
.pg-preview .dot{ position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px;
  border:2px solid #fff; border-radius:50%; background:var(--brand);
  box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.pg-note{ margin:9px 0 0; font-size:11px; line-height:1.5; color:var(--ink-3); }
.pg-field{ display:flex; align-items:center; gap:8px; margin-top:12px; font-size:11.5px; }
.pg-field.col{ flex-direction:column; align-items:stretch; gap:5px; }
.pg-field > span{ font-weight:700; color:var(--ink-2); flex:none; }
.pg-field input[type=range]{ flex:1; }
.pg-field em{ font-style:normal; font-family:var(--font-en); color:var(--ink-3); }
.pg-field input[type=text], .pg-field textarea{ width:100%; padding:8px 10px; font-size:12.5px;
  border:1px solid var(--line); border-radius:9px; font-family:inherit; resize:vertical; }
.pg-acts{ display:flex; gap:6px; margin-top:16px; }
.pg-acts .adm-btn{ flex:1; padding:9px; font-size:12px; }
.pg-acts .adm-btn:hover{ color:#c0392b; border-color:#e0b4ad; background:#fdf3f1; }

.pg-none{ margin:24px 0; padding:26px; text-align:center; font-size:12.5px; color:var(--ink-3);
  border:1px dashed var(--line); border-radius:12px; background:#FAFCFC; }

/* ════════════════════════════════════════════════════════════
   문구 편집기 — 태그 대신 버튼으로
   ════════════════════════════════════════════════════════════ */
.adm-cloud-field.rich{ display:block; }
.rich-bar{ display:flex; align-items:center; gap:6px; margin:5px 0 6px; }
.rich-btn{ padding:5px 11px; font-size:11.5px; font-weight:700;
  border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink-2); }
.rich-btn:hover{ border-color:var(--brand); color:var(--brand); background:var(--tint); }
.rich-hint{ font-style:normal; font-size:11px; color:var(--ink-3); margin-left:2px; }
.rich-box{ min-height:64px; padding:10px 12px; font-size:13.5px; line-height:1.7;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  white-space:pre-wrap; word-break:keep-all; transition:border-color .18s, box-shadow .18s; }
.rich-box:focus{ outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(30,144,210,.12); }
.rich-box b{ font-weight:800; }
.rich-box .up{ font-size:1.18em; font-style:normal; }
.rich-box .dn{ font-size:.85em; font-style:normal; }
.rich-btn.gh{ color:var(--ink-3); font-weight:600; }
.rich-btn.gh:hover{ color:#c0392b; border-color:#e0b4ad; background:#fdf3f1; }

/* ── 가끔 쓰는 설정 — 평소에는 접혀 있습니다 ── */
.adm-rare{ margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }
.adm-rare > summary{ cursor:pointer; font-size:12.5px; font-weight:700; color:var(--ink-3);
  list-style:none; }
.adm-rare > summary::-webkit-details-marker{ display:none; }
.adm-rare > summary::before{ content:"▸ "; color:var(--ink-3); }
.adm-rare[open] > summary::before{ content:"▾ "; }
.adm-rare > summary:hover{ color:var(--brand); }
.adm-rare .adm-card{ margin-top:14px; }

/* 미리보기를 켜면 편집 폭이 절반이라 패널을 아래로 내려 사진을 크게 씁니다 */
@media (max-width:1500px){
  body.with-preview .pg-wrap{ grid-template-columns:1fr; }
  body.with-preview .pg-panel{ position:static; }
}

/* ============================================================
   2026-08-19 관리자 UI 재설계
   - 왼쪽 홈페이지 미리보기 유지
   - 오른쪽은 페이지 선택 + 업무 탭 방식
   - 사진 탭은 목록 70% + 고른 사진 편집 30%
   ============================================================ */

/* 전체 톤 */
body.admin-page{
  --adm-blue:var(--brand, #2196d2);
  --adm-blue-soft:color-mix(in srgb, var(--adm-blue) 9%, #fff);
  --adm-bg:#F4F7F9;
  --adm-card:#fff;
  --adm-border:#DDE5EA;
  --adm-muted:#7A8B96;
  background:var(--adm-bg);
}
.adm-bar-in{ max-width:none; padding:10px 18px; min-height:56px; }
.adm-bar-t{ display:flex; align-items:center; }
.adm-bar-t b{ font-size:15px; }
.adm-bar-acts .adm-btn{ min-height:36px; padding:8px 12px; }

/* 왼쪽 미리보기 + 오른쪽 편집 패널 */
body.with-preview .adm-shell{
  grid-template-columns:minmax(0,1fr) clamp(600px,45vw,900px);
  height:calc(100vh - 57px);
  background:#fff;
}
body.with-preview .admin-preview{ background:#fff; }
body.with-preview .adm{
  display:block;
  max-width:none;
  height:100%;
  overflow-y:auto;
  padding:0;
  background:var(--adm-bg);
  border-left:1px solid var(--adm-border);
}
.adm{ max-width:980px; grid-template-columns:1fr; padding:18px; }
.adm-main{
  position:relative;
  min-width:0;
  padding:0 18px 78px;
  border:0;
  border-radius:0;
  background:var(--adm-bg);
  box-shadow:none;
  container-type:inline-size;
}
body:not(.with-preview) .adm-main{ border:1px solid var(--adm-border); border-radius:18px; background:var(--adm-bg); }

/* 페이지 제목 + 페이지 전환 */
.adm-workhead{
  position:sticky;
  top:0;
  z-index:45;
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 -18px;
  padding:16px 18px 13px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--adm-border);
}
@supports (backdrop-filter:blur(8px)){ .adm-workhead{ backdrop-filter:blur(12px); } }
.adm-worktitle{ min-width:0; flex:1; }
.adm-worktitle > span{ display:block; margin-bottom:2px; font-size:10.5px; font-weight:700; color:var(--adm-muted); letter-spacing:.03em; }
.adm-worktitle strong{ display:block; max-width:100%; font-size:20px; line-height:1.25; font-weight:800; color:var(--ink); letter-spacing:-.045em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-worktitle small{ display:block; margin-top:3px; font-size:11px; color:var(--adm-muted); }
.adm-page-btn{
  flex:none;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:8px 11px;
  border:1px solid var(--adm-border);
  border-radius:10px;
  background:#fff;
  color:var(--ink-2);
  font-size:12px;
  font-weight:700;
}
.adm-page-btn:hover{ border-color:var(--adm-blue); color:var(--adm-blue); background:var(--adm-blue-soft); }
.adm-page-btn span{ font-size:14px; transition:transform .18s; }
.adm-workhead.menu-open .adm-page-btn span{ transform:rotate(180deg); }

/* 페이지 목록은 편집 폭을 차지하지 않는 팝오버로 */
.adm-nav{
  display:none;
  position:absolute;
  top:calc(100% - 5px);
  right:18px;
  z-index:80;
  width:min(330px, calc(100vw - 36px));
  padding:8px;
  grid-template-columns:1fr 1fr;
  gap:4px;
  background:#fff;
  border:1px solid var(--adm-border);
  border-radius:14px;
  box-shadow:0 18px 48px rgba(31,52,64,.18);
}
.adm-workhead.menu-open .adm-nav{ display:grid; }
.adm-nav button{
  display:grid;
  grid-template-columns:24px 1fr;
  gap:7px;
  align-items:center;
  min-width:0;
  padding:9px 10px;
  border-radius:9px;
  font-size:12px;
  text-align:left;
}
.adm-nav button span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-nav button.on{ background:var(--adm-blue-soft); border-color:transparent; color:var(--adm-blue); box-shadow:none; }
.adm-nav button.on i{ color:var(--adm-blue); }
.adm-nav button.on::after{ display:none; }

/* 문구/세부사업/사진/기타 업무 탭 */
.adm-tabs{
  position:sticky;
  top:82px;
  z-index:40;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  margin:0 -18px;
  padding:8px 18px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--adm-border);
}
@supports (backdrop-filter:blur(8px)){ .adm-tabs{ backdrop-filter:blur(12px); } }
.adm-tabs button{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:40px;
  padding:7px 8px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#667883;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:-.02em;
}
.adm-tabs button:hover{ background:#F3F6F8; color:var(--ink); }
.adm-tabs button.on{ background:var(--adm-blue-soft); color:var(--adm-blue); }
.adm-tabs button.on::after{
  content:"";
  position:absolute;
  left:24%; right:24%; bottom:-8px;
  height:2px;
  border-radius:999px;
  background:var(--adm-blue);
}
.adm-tabs button:disabled{ opacity:.35; cursor:not-allowed; background:transparent; }
.adm-tab-icon{ display:grid; place-items:center; width:19px; height:19px; font-size:11px; line-height:1; font-family:var(--font-en); }
.adm-tabs em{ font-style:normal; font-size:10px; font-weight:650; color:var(--adm-muted); white-space:nowrap; }
.adm-tabs button.on em{ color:color-mix(in srgb,var(--adm-blue) 70%, #777); }

/* 탭별 내용 필터 */
body[data-adm-tab="text"] #admCloud .adm-card[data-type]:not([data-type="text"]),
body[data-adm-tab="program"] #admCloud .adm-card[data-type]:not([data-type="program"]),
body[data-adm-tab="more"] #admCloud > .adm-cloud-body > .adm-card:not([data-type="more"]){ display:none !important; }
body[data-adm-tab="text"] #admCloud .adm-rare,
body[data-adm-tab="program"] #admCloud .adm-rare{ display:none !important; }

/* 내용 편집 공통 */
.adm-cloud{ padding:16px 0 0; border:0; }
.adm-cloud-head{
  min-height:28px;
  padding:0 0 8px;
  border:0;
  justify-content:flex-end;
}
.adm-cloud-head h3{ display:none; }
.adm-cloud-head .adm-btn.gh{ padding:5px 8px; font-size:10.5px; color:var(--adm-muted); }
.adm-cloud-body > .adm-cloud-help:first-child{ display:none; }
.adm-card{
  margin:0;
  padding:0 0 16px;
  border:1px solid var(--adm-border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(25,52,66,.035);
}
.adm-card + .adm-card{ margin-top:12px; }
.adm-card-head{
  padding:13px 15px;
  margin-bottom:1px;
  align-items:center;
  background:#fff;
  border-bottom:1px solid #EDF1F3;
}
.adm-card-head h4{ font-size:14.5px; }
.adm-card-kind{ margin-left:auto; padding:3px 7px; border-radius:999px; background:#F1F5F7; color:var(--adm-muted); font-size:10.5px; }
.adm-card > *:not(.adm-card-head){ margin-left:15px; margin-right:15px; }
.adm-card .adm-cloud-help{ margin-top:9px; }

/* 입력칸: 좁은 사이드 패널에서도 읽기 쉽게 */
.adm-cloud-field{ margin-top:10px; }
.adm-cloud-field > span{ margin-bottom:5px; font-size:11.5px !important; font-weight:700 !important; color:#51636E !important; }
.adm-cloud-field input,
.adm-cloud-field textarea{
  min-height:40px;
  padding:9px 10px;
  border-color:#DCE4E8;
  border-radius:9px;
  background:#fff;
  font-size:13px !important;
  line-height:1.55;
}
.adm-cloud-field textarea{ min-height:72px; }
.rich-bar{ gap:4px; margin:5px 0; }
.rich-btn{ min-height:29px; padding:4px 9px; border-radius:7px; }
.rich-hint{ display:none; }
.rich-box{ min-height:72px; padding:9px 10px; border-color:#DCE4E8; border-radius:9px; font-size:13px; line-height:1.65; }

/* 세부사업: 한 줄 요약 + 한 개만 펼치는 아코디언 */
.adm-card[data-type="program"]{ padding-bottom:14px; }
.adm-card[data-type="program"] > .adm-cloud-help{ margin-bottom:10px; }
.adm-program-item{
  margin:7px 15px !important;
  padding:0 !important;
  border:1px solid var(--adm-border) !important;
  border-radius:11px !important;
  background:#fff !important;
  overflow:hidden;
}
.adm-program-item > summary{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto 18px;
  align-items:center;
  gap:7px;
  min-height:46px;
  padding:9px 11px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.adm-program-item > summary::-webkit-details-marker{ display:none; }
.adm-program-item > summary:hover{ background:#F8FAFB; }
.adm-program-item[open] > summary{ background:var(--adm-blue-soft); border-bottom:1px solid color-mix(in srgb,var(--adm-blue) 14%, #E4EAED); }
.adm-program-no{ font-family:var(--font-en); font-size:10.5px; font-weight:700; color:var(--adm-blue); }
.adm-program-item summary strong{ min-width:0; font-size:12.5px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-program-item summary em{ font-style:normal; font-size:10.5px; color:var(--adm-muted); white-space:nowrap; }
.adm-program-item summary i{ font-style:normal; color:var(--adm-muted); transition:transform .18s; }
.adm-program-item[open] summary i{ transform:rotate(180deg); }
.adm-program-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 10px;
  padding:4px 12px 13px;
}
.adm-program-form > .wide,
.adm-program-form > .adm-cloud-rowbtns{ grid-column:1 / -1; }
.adm-program-form .adm-cloud-field{ min-width:0; }
.adm-program-form .adm-cloud-field textarea{ min-height:64px; }
.adm-program-form .adm-cloud-rowbtns{ justify-content:flex-end; padding-top:8px; margin-top:10px; border-top:1px solid #EDF1F3; }
.adm-program-form .adm-cloud-rowbtns .adm-btn:last-child{ color:#B84B42; }
.adm-card[data-type="program"] > .adm-btn.sm{ margin:9px 15px 0; width:calc(100% - 30px); min-height:38px; border-style:dashed; color:var(--adm-blue); background:var(--adm-blue-soft); }

/* 사진 탭 */
.adm-photo-tab{ padding:15px 0 0; }
.adm-photo-intro{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:4px;
}
.adm-photo-intro > div{ min-width:0; flex:1; }
.adm-photo-intro b{ display:block; font-size:14px; letter-spacing:-.03em; }
.adm-photo-intro > div span{ display:block; margin-top:3px; font-size:11px; color:var(--adm-muted); }
.adm-drop{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:152px;
  margin:0;
  padding:8px 11px;
  border:1px solid var(--adm-border);
  border-radius:10px;
  background:#fff;
  text-align:left;
  color:var(--ink-2);
  cursor:pointer;
}
.adm-drop span{ font-size:11.5px; font-weight:750; color:var(--adm-blue); }
.adm-drop small{ margin-top:2px; font-size:9.5px; color:var(--adm-muted); }
.adm-drop:hover,.adm-drop.hot{ border-color:var(--adm-blue); background:var(--adm-blue-soft); }
.adm-body{ display:block !important; padding:0; }
.pg-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,30%); gap:15px; align-items:start; }
.pg-left{ min-width:0; }
.pg-group{ margin-top:16px; padding-top:14px; border-top:1px solid #E9EEF1; }
.pg-group:first-child{ margin-top:8px; padding-top:0; border-top:0; }
.pg-head{ margin-bottom:8px; }
.pg-head h5 b{ font-size:12.5px; }
.pg-count{ font-size:10.5px; color:var(--adm-muted); }
.pg-multi{ padding:5px 8px; border-radius:7px; font-size:10.5px; }
.pg-grid{ grid-template-columns:repeat(auto-fill,minmax(138px,1fr)); gap:8px; }
.pg-tile{ border-radius:9px; }
.pg-shot{ aspect-ratio:4/3; }
.pg-cap{ padding:6px 8px 8px; }
.pg-cap b{ font-size:9.5px; }
.pg-cap span{
  margin-top:2px;
  font-size:10.5px;
  line-height:1.35;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pg-grip{ width:22px; height:22px; top:5px; left:5px; }
.pg-add{ min-height:126px; }
.pg-panel{
  position:sticky;
  top:148px;
  padding:13px;
  border-color:var(--adm-border);
  border-radius:12px;
  box-shadow:0 8px 22px rgba(25,52,66,.045);
}
.pg-panel h5{ font-size:13px; }
.pg-where{ margin-bottom:9px; font-size:10.5px; }
.pg-panel-empty{ min-height:180px; display:grid; place-content:center; padding:18px 4px; font-size:11.5px; }
.pg-preview{ border-radius:8px; }
.pg-field{ margin-top:10px; }
.pg-field input[type=text], .pg-field textarea{ padding:7px 8px; font-size:11.5px; border-radius:8px; }
.pg-acts{ margin-top:12px; }
.pg-acts .adm-btn{ padding:7px 5px; font-size:10.5px; }

/* 기타 탭 */
.adm-rare{
  margin:0;
  padding:0;
  border:0;
}
.adm-rare > summary{ display:none; }
.adm-rare > .adm-card{ margin-top:0; }
.adm-more{
  margin:12px 0 0;
  padding:14px 15px;
  border:1px solid var(--adm-border);
  border-radius:14px;
  background:#fff;
}
.adm-more summary{ font-size:12px; }

/* 저장 바 */
#admSaveBar{
  position:sticky;
  bottom:0;
  z-index:50;
  margin:18px -18px -78px;
}
.adm-cloud-save{
  min-height:64px;
  padding:10px 18px;
  border-top:1px solid var(--adm-border);
  border-radius:0;
  background:rgba(255,255,255,.97);
  box-shadow:0 -10px 24px rgba(31,52,64,.04);
}
.adm-cloud-save .adm-btn{ min-width:150px; padding:10px 18px; border-radius:10px; }
.adm-cloud-msg{ font-size:11px; color:var(--adm-muted); }

/* 좁아졌을 때만 사진 편집 패널을 아래로 */
@container (max-width:580px){
  .pg-wrap{ grid-template-columns:1fr; }
  .pg-panel{ position:static; }
  .pg-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .adm-program-form{ grid-template-columns:1fr; }
  .adm-program-form > *{ grid-column:1 !important; }
}

@media (max-width:1100px){
  body.with-preview .adm-shell{ grid-template-columns:1fr; height:auto; }
  body.with-preview .adm{ height:auto; overflow:visible; }
  .adm-workhead{ top:0; }
  .adm-tabs{ top:82px; }
}
@media (max-width:720px){
  .adm-main{ padding-left:12px; padding-right:12px; }
  .adm-workhead,.adm-tabs{ margin-left:-12px; margin-right:-12px; padding-left:12px; padding-right:12px; }
  .adm-worktitle small{ display:none; }
  .adm-worktitle strong{ font-size:18px; }
  .adm-tabs button{ gap:4px; font-size:11.5px; }
  .adm-tabs em{ display:none; }
  #admSaveBar{ margin-left:-12px; margin-right:-12px; }
}

/* 미리보기 모드에서 예전 반응형 규칙보다 새 사진 70/30 구성을 우선합니다. */
body.with-preview .adm-nav{ top:calc(100% - 5px); }
body.with-preview .pg-wrap{ grid-template-columns:minmax(0,1fr) minmax(220px,30%); }
body.with-preview .pg-panel{ position:sticky; top:148px; }
@container (max-width:580px){
  body.with-preview .pg-wrap{ grid-template-columns:1fr; }
  body.with-preview .pg-panel{ position:static; }
}


/* ============================================================
   로그인 게이트 hotfix 2026-08-19
   - 인증 전에는 탭/페이지헤더/미리보기 등 편집 UI가 로그인 폼 위로
     비치는 문제를 막습니다.
   - 로그인 화면은 viewport 전체를 덮고 가운데 카드만 보여 줍니다.
   ============================================================ */
.adm-gate:not([hidden]){
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:100vw;
  min-height:100dvh;
  padding:28px 20px !important;
  overflow:auto;
  border-radius:0 !important;
  background:#F4F7F9;
}
.adm-gate:not([hidden])::before{
  content:"인재육성실 홈페이지";
  display:block;
  width:min(380px,100%);
  margin:0 auto 10px;
  color:#71838E;
  font-size:12px;
  font-weight:700;
  letter-spacing:-.02em;
}
.adm-gate:not([hidden]) > *{
  box-sizing:border-box;
  width:min(380px,100%) !important;
  max-width:380px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.adm-gate:not([hidden]) > h3{
  margin-top:0 !important;
  margin-bottom:7px !important;
  padding:22px 22px 0;
  border:1px solid #DDE5EA;
  border-bottom:0;
  border-radius:16px 16px 0 0;
  background:#fff;
  color:#16262F;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.045em;
}
.adm-gate:not([hidden]) > h3 + .adm-cloud-help{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding:0 22px 16px;
  border-left:1px solid #DDE5EA;
  border-right:1px solid #DDE5EA;
  background:#fff;
  color:#7A8B96;
  font-size:11.5px;
  line-height:1.6;
}
.adm-gate:not([hidden]) .adm-cloud-form{
  display:grid;
  gap:9px;
  margin-top:0 !important;
  padding:0 22px 22px;
  border-left:1px solid #DDE5EA;
  border-right:1px solid #DDE5EA;
  background:#fff;
}
.adm-gate:not([hidden]) .adm-cloud-form input{
  box-sizing:border-box;
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid #D7E1E6;
  border-radius:10px;
  background:#fff;
  color:#16262F;
  font:inherit;
  font-size:13px;
  outline:none;
}
.adm-gate:not([hidden]) .adm-cloud-form input:focus{
  border-color:var(--adm-blue, #2196d2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--adm-blue, #2196d2) 12%, transparent);
}
.adm-gate:not([hidden]) .adm-cloud-form .adm-btn{
  width:100%;
  min-height:44px;
  margin-top:2px;
  border-radius:10px;
  font-size:13px;
  font-weight:750;
}
.adm-gate:not([hidden]) > .adm-cloud-msg{
  min-height:0;
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding:0 22px 14px;
  border-left:1px solid #DDE5EA;
  border-right:1px solid #DDE5EA;
  background:#fff;
  color:#B84B42;
  font-size:11px;
}
.adm-gate:not([hidden]) > .adm-btn.gh{
  display:block;
  min-height:42px;
  margin-top:0 !important;
  padding:10px 22px;
  border:1px solid #DDE5EA;
  border-top:1px solid #EEF2F4;
  border-radius:0 0 16px 16px;
  background:#fff;
  color:#71838E;
  box-shadow:0 18px 44px rgba(31,52,64,.08);
}
.adm-gate:not([hidden]) > .adm-btn.gh:hover{
  color:var(--adm-blue, #2196d2);
  background:#FAFCFD;
}
/* 오버레이가 뜨기 전 한 프레임이라도 편집 UI가 보이지 않게 안전장치 */
body.adm-locked{ overflow:hidden; }
body.adm-locked .adm-bar,
body.adm-locked .admin-preview,
body.adm-locked .adm-main > :not(.adm-gate){ visibility:hidden !important; pointer-events:none !important; }


/* ════════════════════════════════════════════════════════════
   v9 — 2번 시안형 문구 편집기 + UI 리디자인
   레이아웃은 유지하고, 입력 경험을 문서 편집기처럼 정돈합니다.
   ════════════════════════════════════════════════════════════ */
:root{
  --adm-ui-blue:#2498d3;
  --adm-ui-blue-soft:#EAF5FB;
  --adm-ui-border:#DCE5EA;
  --adm-ui-panel:#F7F9FA;
  --adm-ui-text:#1E2B32;
  --adm-ui-muted:#74858F;
}
body.admin-page{ background:#F3F6F8; }
body.with-preview .adm{ background:#F3F6F8; }
body.with-preview .adm-main,
.adm-main{ background:#fff; border-color:#E1E8EC; border-radius:18px; }

/* 페이지 머리와 탭은 더 가볍고 명확하게 */
.adm-workhead{ border-bottom-color:#E7EDF0 !important; }
.adm-worktitle > span{ color:#8A99A2 !important; font-weight:700; letter-spacing:.01em; }
.adm-worktitle > strong{ color:#17262E; letter-spacing:-.045em; }
.adm-page-btn{ border-color:#DCE5EA !important; background:#fff !important; box-shadow:0 1px 2px rgba(17,34,45,.03); }
.adm-tabs{ border-bottom-color:#E7EDF0 !important; gap:6px !important; }
.adm-tabs button{ border-radius:11px 11px 0 0 !important; min-height:48px; }
.adm-tabs button.on{ background:var(--adm-ui-blue-soft) !important; color:var(--adm-ui-blue) !important; }
.adm-tabs button.on::after{ background:var(--adm-ui-blue) !important; height:2px !important; }

/* 문구 카드 */
.adm-card{ border:1px solid #E3EAEE !important; border-radius:15px !important; box-shadow:0 5px 18px rgba(25,48,61,.035) !important; }
.adm-card-head{ min-height:49px; padding:13px 16px !important; background:#FBFCFD !important; border-bottom-color:#E9EEF1 !important; }
.adm-card-head h4{ color:#1E2B32; font-size:14px !important; }
.adm-card-kind{ background:#EFF5F8 !important; color:#71838D !important; }
.adm-card .adm-cloud-help{ color:#87969F !important; }

/* 일반 입력도 같은 디자인 언어로 */
.adm-cloud-field > span{ color:#52656F !important; }
.adm-cloud-field input,
.adm-cloud-field textarea{
  border:1px solid var(--adm-ui-border) !important;
  background:#fff !important;
  border-radius:10px !important;
  box-shadow:0 1px 0 rgba(15,35,45,.015);
}
.adm-cloud-field input:focus,
.adm-cloud-field textarea:focus{
  border-color:var(--adm-ui-blue) !important;
  box-shadow:0 0 0 3px rgba(36,152,211,.11) !important;
}

/* ── 리치 텍스트 필드: 라벨 / 글자수 / 툴바 / 편집칸이 한 덩어리 ── */
.adm-cloud-field.rich{ margin-top:15px !important; }
.rich-label-row{ display:flex; align-items:center; gap:10px; margin:0 1px 6px; }
.rich-label{ font-size:11.5px; font-weight:750; color:#465B66; }
.rich-count{ margin-left:auto; font:600 10.5px/1.2 var(--font-en, sans-serif); color:#94A2AA; font-variant-numeric:tabular-nums; }
.rich-count.over{ color:#D95B53; }
.rich-editor-shell{
  overflow:hidden;
  border:1px solid var(--adm-ui-border);
  border-radius:10px;
  background:#fff;
  transition:border-color .16s, box-shadow .16s;
}
.rich-editor-shell.focus{
  border-color:var(--adm-ui-blue);
  box-shadow:0 0 0 3px rgba(36,152,211,.11);
}
.rich-bar{
  display:flex !important;
  align-items:center;
  gap:2px !important;
  min-height:34px;
  margin:0 !important;
  padding:4px 6px !important;
  border-bottom:1px solid #E8EDF0;
  background:#F8FAFB;
}
.rich-btn{
  display:inline-grid;
  place-items:center;
  min-width:27px;
  width:27px;
  height:27px;
  min-height:27px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  color:#53656F !important;
  font-size:12px !important;
  line-height:1;
  font-family:Arial,sans-serif;
  font-weight:650 !important;
  cursor:pointer;
}
.rich-btn.is-bold{ font-weight:900 !important; }
.rich-btn.is-italic{ font-style:italic; font-family:Georgia,serif; }
.rich-btn.is-underline{ text-decoration:underline; }
.rich-btn.is-list{ font-size:11px !important; letter-spacing:-.08em; }
.rich-btn.is-link{ font-size:14px !important; }
.rich-btn.is-clear{ width:30px; color:#7F8E96 !important; font-size:10.5px !important; }
.rich-btn:hover{ background:#EDF3F6 !important; color:#1F7FB0 !important; }
.rich-btn.on{ background:#DFF0FA !important; color:#1689C3 !important; }
.rich-toolbar-spacer{ flex:1 1 auto; min-width:4px; }
.rich-hint{ display:block !important; margin:0 2px 0 6px !important; color:#A0ADB4 !important; font-size:9.5px !important; white-space:nowrap; }
.rich-box{
  min-height:78px !important;
  margin:0 !important;
  padding:10px 11px !important;
  border:0 !important;
  border-radius:0 !important;
  background:#fff !important;
  color:#21313A;
  font-size:13px !important;
  line-height:1.72 !important;
  white-space:pre-wrap;
  word-break:keep-all;
  box-shadow:none !important;
}
.rich-short .rich-box{ min-height:62px !important; }
.rich-long .rich-box{ min-height:88px !important; }
.rich-box:focus{ outline:0 !important; box-shadow:none !important; }
.rich-box:empty::before{ content:'내용을 입력해 주세요'; color:#B2BDC3; pointer-events:none; }
.rich-box b{ font-weight:800; }
.rich-box i{ font-style:italic; }
.rich-box u{ text-decoration:underline; text-underline-offset:2px; }
.rich-box a{ color:#1689C3; text-decoration:underline; text-underline-offset:2px; }
.rich-box ul,.rich-box ol{ margin:4px 0 4px 20px; padding:0; white-space:normal; }
.rich-box li{ margin:2px 0; }

/* 좁은 사이드 편집에서도 툴바가 줄바꿈되지 않게 */
@media (max-width:1250px){
  body.with-preview .rich-hint{ display:none !important; }
  body.with-preview .rich-btn{ min-width:25px; width:25px; height:25px; }
}

/* ════════════════════════════════════════════════════════════
   v11 — 리치에디터 글씨 크기 + 사이드 로그인
   ════════════════════════════════════════════════════════════ */
.rich-size-select{
  flex:none;
  height:28px;
  min-width:54px;
  padding:0 22px 0 8px;
  border:0;
  border-left:1px solid #E2E9ED;
  background:#F7F9FA;
  color:#526772;
  font:700 10.5px/1 var(--font-kr, sans-serif);
  cursor:pointer;
  outline:none;
  appearance:auto;
}
.rich-size-select:hover,
.rich-size-select:focus{ background:#EDF5F9; color:#1689C3; }
.rich-box span[style*="font-size"]{ line-height:inherit; }

/* 로그인도 홈페이지 미리보기를 보면서 오른쪽 사이드 패널에서 진행 */
body.adm-locked{ overflow:hidden; }
body.adm-locked .adm-bar,
body.adm-locked .admin-preview{ visibility:visible !important; pointer-events:auto !important; }
body.adm-locked .adm-main > :not(.adm-gate){ visibility:hidden !important; pointer-events:none !important; }
.adm-gate:not([hidden]){
  position:absolute !important;
  inset:0 !important;
  z-index:90 !important;
  width:100% !important;
  min-height:100% !important;
  padding:34px 28px !important;
  border-radius:0 !important;
  background:#F3F6F8 !important;
  justify-content:center !important;
}
.adm-gate:not([hidden])::before{
  width:min(390px,100%) !important;
  margin-bottom:10px !important;
  text-align:left;
}
.adm-gate:not([hidden]) > *{
  width:min(390px,100%) !important;
  max-width:390px !important;
}

@media (max-width:1250px){
  body.with-preview .rich-size-select{ min-width:48px; width:48px; padding-left:5px; padding-right:4px; font-size:9.5px; }
}
@media (max-width:900px){
  .adm-gate:not([hidden]){ position:fixed !important; min-height:100dvh !important; }
}

/* v12: 반응형/고정 글씨 크기 선택 메뉴 */
.rich-size-select{ min-width:56px !important; width:auto !important; }
body.with-preview .rich-size-select{ min-width:54px !important; width:54px !important; }


/* v13: 로그인 카드 제목 아래 회색 선 제거 */
.adm-gate:not([hidden]) > h3{
  padding-bottom:8px !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
.adm-gate:not([hidden]) > h3 + .adm-cloud-help{
  position:relative;
  margin-top:-1px !important;
  padding-top:0 !important;
  border-top:0 !important;
  box-shadow:none !important;
}


/* v14: 로그인 제목과 안내문 사이의 실제 7px 공백 제거 */
.adm-gate:not([hidden]) > h3{
  margin-bottom:0 !important;
  padding-bottom:8px !important;
  border-bottom:0 !important;
}
.adm-gate:not([hidden]) > h3 + .adm-cloud-help{
  margin-top:0 !important;
  border-top:0 !important;
}