/* ARCHIVE PRO APP — manage-preview.css (added 2026-08-03, revised 2026-08-05)
   로그인 전 Manage 프리뷰(js/manage-preview.js) 전용 스타일.
   기존 artist-cms.css의 .ap-cms-* 클래스는 그대로 재사용하고 건드리지
   않는다 — 이 파일은 프리뷰에서만 쓰는 추가 클래스(.ap-preview-*)와,
   .ap-preview-panel 한정 오버라이드만 담는다. 로그인 후 실제 Manage
   화면(cms-ui.js/artist-cms.js)이 쓰는 .ap-cms-panel 기본값(artist-
   cms.css)은 이 파일에서 전혀 손대지 않는다 — 다른 화면은 이 파일을
   전혀 참조하지 않는다. */

.ap-preview-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--gold, #d4b46d);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold, #d4b46d);
  vertical-align: middle;
}

/* ==========================================================================
   2026-08-05 추가 — Manage Preview 창 확대(요청 원문 §2). 로그인 전
   Guest Preview 패널(.ap-preview-panel)에만 적용되는 오버라이드다 —
   artist-cms.css의 .ap-cms-panel 기본값(로그인 후 Admin/Artist 화면)은
   그대로 유지된다. 100vh 단독 사용 금지 원칙에 따라 dvh를 우선하고
   지원하지 않는 구형 브라우저를 위해 vh를 fallback으로 먼저 선언한다.
   ========================================================================== */

/* 기본값(데스크톱/노트북) — 기존보다 넓게, 화면을 과도하게 비우지 않게. */
.ap-cms-panel.ap-preview-panel {
  max-width: 880px;
  width: 94%;
  max-height: 90vh;
  max-height: 90svh;
  max-height: 90dvh;
  border-radius: 20px;
}

/* 태블릿 — 화면 너비의 88~92% (§2). vw 단위를 써서 부모(오버레이)의
   padding 유무와 무관하게 실제 뷰포트 대비 비율이 정확히 유지되게 한다. */
@media (min-width: 601px) and (max-width: 1024px) {
  .ap-cms-panel.ap-preview-panel {
    width: 90vw;
    max-width: 780px;
    max-height: 92vh;
    max-height: 92svh;
    max-height: 92dvh;
  }
}

/* 모바일 — 화면 너비의 94~96%, 높이 86~92dvh, iOS 동적 주소창 대응
   (svh/dvh fallback 구조: vh → svh → dvh 순으로 덮어써서 미지원
   브라우저에서도 항상 값이 존재하게 한다). vw 단위를 써서 오버레이
   padding과 무관하게 실제 뷰포트 대비 비율을 그대로 유지한다. */
@media (max-width: 600px) {
  .ap-cms-panel.ap-preview-panel {
    width: 94.5vw;
    max-width: none;
    max-height: 90vh;
    max-height: 90svh;
    max-height: 90dvh;
    border-radius: 16px;
  }
}

/* 아주 좁은 화면(작은 폰)에서는 여백을 더 줄인다. */
@media (max-width: 380px) {
  .ap-cms-panel.ap-preview-panel { width: 96vw; }
}

/* 이 오버레이(#apManagePreviewOverlay)는 이 파일 전용 DOM으로, 로그인 후
   실제 Manage 화면이 쓰는 별도 오버레이(#apCmsOverlay, artist-cms.js/
   cms-ui.js)와는 완전히 다른 요소다 — 여기서 padding을 줄여도 로그인 후
   화면에는 전혀 영향이 없다. 공용 .ap-cms-overlay 클래스의 기본
   padding(20px)은 태블릿/모바일에서 패널을 감싼 뒤 남는 좌우 안전 여백
   역할만 하면 되므로, 패널 자체를 vw로 정확히 지정한 태블릿·모바일
   구간에서는 화면을 침범하지 않는 선(상단 상태바·하단 브라우저 UI)만
   safe-area로 지키고 나머지는 최소화한다. */
@media (max-width: 1024px) {
  #apManagePreviewOverlay {
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
             env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
}

.ap-preview-banner {
  /* ③ 카드 내부 여백 — 상하 padding을 14px→20px로 확대(+6px, 답답한 느낌 완화) */
  margin-bottom: 18px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 16px;
  padding-right: 16px;
  border: 1px solid var(--line, rgba(212,180,109,.34));
  border-radius: 10px;
  background: rgba(212,180,109,.06);
}
.ap-preview-banner-title {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--gold, #d4b46d);
  font-size: clamp(14px,3.8vw,16px);
}
/* ① 안내문 가독성 향상 — 모바일에서도 18px에 가깝게(기존 대비 약 +5~10%), line-height 1.7 유지 */
.ap-preview-banner-body {
  margin: 0 0 16px;
  color: rgba(255,255,255,.82);
  font-size: clamp(16px,4.6vw,18px);
  line-height: 1.7;
}
/* ② 문단 간격 — 두 안내 문단 사이 여백을 6px→14px로 확대 */
.ap-preview-banner-body br { content: ""; display: block; margin-top: 14px; }
/* ④ 로그인 버튼 — 이 화면(.ap-preview-signin) 한정으로만 높이/굵기 조정.
   색상·너비·다른 화면의 .ap-cms-primary 버튼은 전혀 건드리지 않는다. */
.ap-preview-signin { width: 100%; min-height: 64px; font-weight: 700; }

.ap-preview-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--muted, rgba(244,239,230,.68));
}
.ap-preview-field input[type="text"],
.ap-preview-field textarea {
  /* 2026-08-05 확대 — §11 "입력창은 현재보다 넓고 충분한 높이 / 입력
     글자 크기 확대". 패딩·최소 높이·폰트 크기를 키운다. */
  padding: 12px 14px;
  min-height: 48px;
  border: 1px solid var(--line, rgba(212,180,109,.24));
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  color: var(--text, #f4efe6);
  font-size: 16px;
  resize: none;
  width: 100%;
  box-sizing: border-box;
}
.ap-preview-field textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.ap-preview-field input[readonly],
.ap-preview-field textarea[readonly] { cursor: default; opacity: .82; }
.ap-preview-field.ap-preview-file input[type="file"] { font-size: 14px; }

.ap-preview-select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  min-height: 48px;
  border: 1px solid var(--line, rgba(212,180,109,.24));
  border-radius: 8px;
  background: var(--bg, #0b0f14);
  color: var(--text, #f4efe6);
  font-size: 16px;
  font-family: inherit;
}
.ap-preview-select-sm { min-height: 44px; }

.ap-preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.ap-preview-toolbar .ap-preview-select { flex: 1 1 140px; }
.ap-preview-search {
  flex: 2 1 200px;
  box-sizing: border-box;
  padding: 12px 14px;
  min-height: 48px;
  border: 1px solid var(--line, rgba(212,180,109,.24));
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  color: var(--text, #f4efe6);
  font-size: 16px;
}
.ap-preview-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted, rgba(244,239,230,.68));
  margin: 0 0 10px;
}

.ap-preview-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ap-preview-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line, rgba(212,180,109,.2));
  border-radius: 8px;
  font-size: 13px;
  color: var(--text, #f4efe6);
}
.ap-preview-works-list li span:first-child { flex: 1; }
.ap-preview-status { font-size: 11px; color: var(--muted, rgba(244,239,230,.6)); white-space: nowrap; }

/* Sections/Works Preview는 실제 화면(artist-cms.css)의
   .ap-cms-section-item/.ap-cms-work-item 구조를 그대로 재사용한다 —
   여기서는 체크박스 정렬만 보강. */
.ap-cms-work-item .ap-preview-work-check { flex-shrink: 0; width: 18px; height: 18px; }

/* 2026-08-05 추가 — Artwork Manager Preview 한정 보강. 요청 원문 §14는
   실제 화면(수정/삭제 2개뿐)보다 많은 버튼(수정/이동/공개·비공개 전환/
   삭제 4개)을 요구한다("이동", "공개/비공개" 구조까지 보여줄 것). 실제
   화면의 .ap-cms-work-item/.ap-cms-work-actions 한 줄 레이아웃을 그대로
   두면 좁은 화면에서 제목과 4개 버튼이 한 줄에 눌려 답답해지므로, 이
   패널(.ap-preview-panel) 안에서만 좁은 화면에서 버튼 줄을 다음 줄로
   자연스럽게 내린다. 실제 Works 화면(artist-cms.js, 버튼 2개)의 레이아웃
   자체는 이 규칙이 적용되지 않으므로 전혀 변하지 않는다. */
.ap-preview-panel .ap-cms-work-item {
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 12px 0;
}
.ap-preview-panel .ap-cms-work-info { flex-basis: 0; }
.ap-preview-panel .ap-cms-work-actions {
  flex-basis: calc(100% - 26px);
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  margin-left: 26px; /* 체크박스 폭(18px)+gap 만큼 제목과 정렬 */
  box-sizing: border-box;
}
.ap-preview-panel .ap-cms-work-actions .ap-cms-icon-btn {
  padding: 6px 10px;
  font-size: 12px;
}

.ap-preview-compare {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 16px;
  font-size: 13.5px;
}
.ap-preview-compare th, .ap-preview-compare td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line, rgba(212,180,109,.16));
  text-align: left;
}
.ap-preview-compare th { color: var(--gold, #d4b46d); font-weight: 600; font-size: 12.5px; }
.ap-preview-compare td:not(:first-child), .ap-preview-compare th:not(:first-child) { text-align: center; }
.ap-preview-compare-yes { color: #7fd6a0; }
.ap-preview-compare-no { color: var(--muted, rgba(244,239,230,.4)); }
/* 2026-08-29 추가 (Once Artist, Always Artist) — Lifetime Artist 열의
   "구독 종료 후 LOCK" 표시(🔒) 전용 색상. 기존 -yes(초록)/-no(흐림) 색은
   전혀 건드리지 않는다 — 이 클래스만 새로 추가. */
.ap-preview-compare-locked { color: var(--gold, #d4b46d); }

/* 2026-08-29 추가 — Guest·Lifetime Artist·Artist Access 3열 비교표
   (manage-preview.js 'subscription' 화면, artist-cms.js renderSubscription()
   공용). 좁은 화면에서 표가 잘리지 않도록 가로 스크롤 컨테이너로 감싸고,
   아주 좁은 화면에서는 셀 여백/글자 크기를 살짝 줄인다 — 기존
   .ap-preview-compare 2열 표(Guest/Artist Access만 쓰는 다른 화면은 없음,
   이 표는 항상 이 3열 구조로만 쓰인다)의 디자인 자체는 바꾸지 않는다. */
.ap-sub-compare-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 420px) {
  .ap-sub-compare th, .ap-sub-compare td { padding: 6px 5px; font-size: 12px; }
}

.ap-preview-qr-box {
  width: 140px;
  height: 140px;
  margin: 0 0 10px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(45deg, rgba(212,180,109,.18) 0 6px, rgba(212,180,109,.06) 6px 12px);
  border: 1px solid var(--line, rgba(212,180,109,.3));
}

.ap-preview-locked-msg {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--gold, #d4b46d);
  border-radius: 8px;
  background: rgba(212,180,109,.08);
  color: var(--gold, #d4b46d);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
}

/* 2026-08-27 추가 — 작품 업로드 화면 전용 2단 안내 구조(showLocked의
   'uploadMax7' 분기에서만 쓰인다). 박스 자체의 금색 테두리/배경/모서리
   반경(.ap-preview-locked-msg)은 위에서 전혀 바꾸지 않았다 — 다른 화면의
   locked 안내문(Save/Delete/Move/Generate 등, 자식 없이 이 클래스에
   바로 텍스트가 들어감)은 이 하위 셀렉터를 전혀 타지 않으므로 그대로다.
   고정 높이를 두지 않아 KR+EN처럼 줄이 늘어나도 박스가 내용에 맞춰
   자연스럽게 늘어난다. */
.ap-preview-locked-msg .ap-preview-locked-main {
  margin: 0;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.ap-preview-locked-msg .ap-preview-locked-sub {
  margin: 6px 0 0;
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted, rgba(244,239,230,.68));
  overflow-wrap: break-word;
}

.ap-preview-panel .ap-cms-primary:disabled,
.ap-preview-panel .ap-cms-secondary:disabled { opacity: .5; cursor: not-allowed; }

/* ⑤ 메뉴 간격 — Guest Preview 화면(.ap-preview-panel) 안에서만 메뉴 버튼
   사이 간격을 6px→14px(+8px)로 확대. 텍스트 크기는 그대로 유지하며,
   다른 화면(Admin cms-ui.js / Artist artist-cms.js)이 쓰는 공용
   .ap-cms-menu-list의 간격(artist-cms.css, gap:6px)은 전혀 변경하지
   않는다 — 이 규칙은 .ap-preview-panel 하위에서만 적용된다. */
.ap-preview-panel .ap-cms-menu-list { gap: 14px; }

/* 요청 원문 §4 — "텍스트만 눌러야 작동하는 구조는 금지" / "전체 행이
   터치 가능해야". 메뉴 행은 이미 <button> 전체(artist-cms.css
   .ap-cms-menu-list-btn)라 행 전체가 눌리지만, KR+EN 2줄 구조에서도
   행 높이가 52~60px 이상을 유지하도록 min-height을 이 패널 한정으로
   보강한다(§4 최소 52~60px). */
.ap-preview-panel .ap-cms-menu-list-btn { min-height: 60px; }

/* 2026-08-03 추가 — Manage 모달 스크롤 유도. Guest Preview 패널
   (.ap-preview-panel) 한정. 로그인 후 실제 Manage 화면(cms-ui.js/
   artist-cms.js)의 스타일·동작에는 전혀 영향을 주지 않는다. */

.ap-preview-panel { position: relative; }

.ap-preview-panel .ap-cms-body {
  /* 모바일 세로 스크롤 안정화 — 스펙 요구사항 그대로 추가.
     기존 overflow-y:auto/overscroll-behavior/-webkit-overflow-scrolling은
     artist-cms.css의 공용 .ap-cms-body 규칙에 이미 있으므로 유지되고,
     touch-action만 이 패널 한정으로 보강한다. */
  touch-action: pan-y;
}

/* 2026-09-03 수정 — 스크롤 안내 콘텐츠 겹침 제거(요청 원문). 근본 원인:
   기존엔 이 요소가 `position:absolute; bottom:0`으로 본문(.ap-cms-body)
   위에 떠 있는 오버레이였다 — pointer-events:none이라 터치는 막지 않았지만
   시각적으로는 로그인 카드/QR 안내문 등 본문 마지막 콘텐츠 위에 그대로
   겹쳐 보였다. 이제 `.ap-preview-panel`(flex-direction:column, artist-
   cms.css .ap-cms-panel 기본값)의 세 번째 flex 자식으로 바꿔, 본문과
   "겹치는 오버레이"가 아니라 본문 아래에 실제로 확보된 전용 공간이 되게
   한다 — flexbox가 자동으로 .ap-cms-body의 사용 가능 높이에서 이 공간을
   제외하므로 어떤 콘텐츠와도 절대 겹치지 않는다.
   높이는 기본 0(공간 없음 · 미사용)이었다가, 그 화면에 실제로 스크롤할
   내용이 있을 때만 JS(maybeShowScrollHint)가 .ap-space-reserved 클래스를
   붙여 약 44px(+ iPhone safe-area) 고정 높이로 확보한다. 이 클래스는
   화면이 렌더링되는 시점에 한 번만 계산되어 그 화면이 떠 있는 동안
   그대로 유지되므로(§ 아래 JS 주석), 사용자가 실제로 스크롤을 시작해
   안내 문구(.is-visible, opacity)만 사라질 때는 공간 자체가 줄어들지
   않아 콘텐츠가 튀거나 높이가 갑자기 바뀌지 않는다. height 자체는
   transition 대상이 아니므로(opacity/transform만 전환) 공간 확보/해제는
   항상 즉시 반영되고, 오직 안내 문구의 나타남/사라짐만 부드럽게 전환된다. */
.ap-preview-scroll-hint {
  flex-shrink: 0;
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none; /* 메뉴 클릭·스크롤을 절대 가리지 않음 */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.ap-preview-scroll-hint.ap-space-reserved {
  height: calc(44px + env(safe-area-inset-bottom));
}
.ap-preview-scroll-hint.is-visible { opacity: 1; transform: translateY(0); }
.ap-preview-scroll-hint-text {
  font-size: 12px;
  letter-spacing: .01em;
  color: var(--muted, rgba(244,239,230,.68));
}
.ap-preview-scroll-hint-arrow {
  font-size: 12px;
  color: var(--gold, #d4b46d);
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ap-preview-scroll-hint { transition: none; }
}

/* ==========================================================================
   2026-09-03 추가 — 관리 → 미리보기(로그인 전 Guest Preview) 가독성 핀셋
   조정. 실제 원인: 이 화면은 실제 Manage 화면(cms-ui.js/artist-cms.js)의
   .ap-cms-* 클래스를 그대로 재사용하는데(파일 상단 주석 참고), 그 공용
   기본값 상당수가 12~13.5px에 --soft(48% 명도)·opacity:.8 중첩까지 걸려
   있어 "설명 문구가 작고 흐리다"는 증상으로 나타났다. 이 파일 자체가 이미
   .ap-preview-panel 스코프 전용으로 지정돼 있으므로(파일 헤더 주석), 아래
   규칙도 전부 같은 원칙으로 .ap-preview-panel .ap-cms-xxx / .ap-preview-xxx
   형태만 쓴다 — artist-cms.css의 공용 .ap-cms-* 기본값은 단 한 줄도
   고치지 않았고, 특정도(2개 이상 클래스)만 그 위에 얹혀 로그인 후 실제
   Manage 화면과 Gallery/공개 화면에는 이 선택자가 전혀 매치되지 않는다.
   색상은 새로 만들지 않고 이미 디자인 시스템에 있는 한 단계 밝은 회색
   (--muted, 68%)만 쓴다 — 골드 포인트·다크 배경·핵심값(--text)은 그대로.
   크기·line-height·명도·문단 간격만 바꿨고, 모달 크기/위치, 버튼 padding·
   순서·터치 영역, 섹션 정렬/공개 판정 로직은 전혀 건드리지 않았다.
   ========================================================================== */

/* ① 화면 제목(h2) — 작품 업로드/섹션 관리/Artist Bio/QR/PDF/작품 관리 등.
   모바일·태블릿(<1024px)에서 24~28px를 보장한다(기존 clamp(20px,5.5vw,24px)
   는 좁은 화면에서 20px대로 떨어졌다). 데스크톱(≥1024px)은 artist-cms.css
   기존 오버라이드(29px)가 이미 요청 범위보다 크므로 그대로 두기 위해 이
   규칙 자체를 1023px 이하에서만 적용한다. */
@media (max-width: 1023px) {
  .ap-preview-panel .ap-cms-body h2 {
    font-size: clamp(24px, 6.2vw, 28px);
    font-weight: 700;
    line-height: 1.25;
  }
}

/* ② 본문 설명 문구 — 각 화면 안내문·QR/PDF 보조 문구·구독 정책 안내가
   전부 공용 .ap-cms-hint를 쓴다. color를 --soft(48%)에서 --muted(68%)로,
   opacity 중첩(.8)을 해제해 명도만 올리고, 크기는 모바일 16~17px·
   데스크톱도 같은 clamp 상한(17px, 요청 범위 16~18px 안)까지 올린다. */
.ap-preview-panel .ap-cms-hint {
  font-size: clamp(16px, 4.4vw, 17px);
  line-height: 1.6;
  color: var(--muted, rgba(244,239,230,.68));
  opacity: 1;
  font-weight: 400;
  margin: 0 0 12px;
}
.ap-preview-panel .ap-preview-locked-msg { font-size: clamp(15px, 4vw, 16px); line-height: 1.6; }
.ap-preview-panel .ap-preview-locked-msg .ap-preview-locked-main { font-size: clamp(15.5px, 4.2vw, 16.5px); }
.ap-preview-panel .ap-preview-locked-msg .ap-preview-locked-sub { font-size: clamp(13.5px, 3.6vw, 14.5px); color: var(--muted, rgba(244,239,230,.68)); }

/* Artist Bio 화면(.ap-bio-screen)의 라벨/힌트/필드 라벨은 로그인 후 실제
   Bio 화면과 공유하는 클래스라 artist-cms.css의 기존 .ap-bio-screen 규칙은
   그대로 둔다 — 여기서는 .ap-preview-panel을 한 겹 더 붙여 미리보기
   안에서만 더 높은 특정도로 겹쳐 쓴다(실제 화면엔 이 조상 클래스가 없어
   전혀 매치되지 않음). */
.ap-preview-panel .ap-bio-screen .ap-cms-label { font-size: 16px; }
.ap-preview-panel .ap-bio-screen .ap-cms-hint { font-size: clamp(16px, 4.4vw, 17px); line-height: 1.6; }
.ap-preview-panel .ap-bio-screen .ap-preview-field > span { font-size: 16px; }

/* ③ 입력 라벨(제목(KR)/제목(EN)/재료/크기/연도/상태/섹션/내 아카이브 주소
   등, sampleField()가 공통으로 쓰는 .ap-preview-field 래퍼) — 한글
   16~17px. KR+EN 2줄 구조(.ap-cms-line-kr 위·.ap-cms-line-en 아래)는 부모
   크기를 따라가므로, 영문 보조줄 비율(.9em→.95em)만 살짝 올려 15~16px
   범위에 들어오게 한다. */
.ap-preview-panel .ap-preview-field {
  font-size: clamp(16px, 4.2vw, 17px);
  line-height: 1.45;
}
.ap-preview-panel .ap-cms-line-en { font-size: .95em; opacity: .9; }

/* 2026-09-18 추가 (MANAGE PREVIEW 3-LANGUAGE MODE + DETAIL HEADER FINAL
   PINPOINT SPEC §11) — "관리로 돌아가기" 링크의 KR+EN 모드 전용: 화살표는
   KR 줄에만 붙고(manage-preview.js backLabelHtml()), EN 줄("Back to
   Manage")은 살짝 들여써서 KR 줄에 딸린 보조 줄처럼 보이게 한다. 이
   선택자는 뒤로가기 링크 안의 .ap-cms-line-en에만 한정되므로, 다른 모든
   화면의 KR+EN 2줄 표시(입력 라벨 등, 위 공용 규칙)는 전혀 영향받지
   않는다. */
.ap-preview-back .ap-cms-line-en {
  padding-left: 14px;
}

/* ④ 입력창·선택창 내부 글자 — 크기·형태·테두리·색상 체계(입력값은 기존
   --text 아이보리 유지)는 그대로 두고, 글자 크기만 모바일 기준 최소
   17px로 올린다. placeholder(작품 검색창)도 --muted로 선명하게. */
.ap-preview-panel .ap-preview-field input[type="text"],
.ap-preview-panel .ap-preview-field textarea,
.ap-preview-panel .ap-preview-select,
.ap-preview-panel .ap-preview-search {
  font-size: 17px;
}
.ap-preview-panel .ap-preview-field.ap-preview-file input[type="file"] { font-size: 15px; }
.ap-preview-panel .ap-preview-search::placeholder { color: var(--muted, rgba(244,239,230,.68)); opacity: 1; }
.ap-preview-panel .ap-preview-select-all { font-size: 15px; }
.ap-preview-panel .ap-preview-list li { font-size: 15px; }

/* ⑤ 섹션 관리 목록 / 작품 관리 목록 — 섹션명·작품명은 모바일 최소 17px.
   공개(Active)/비공개(Inactive) 배지는 기존 색상(.ap-cms-badge-published/
   -draft, artist-cms.css)은 전혀 건드리지 않고 글자 크기·굵기만 소폭
   강화한다. 수정/이동 버튼도 글자 크기만 키우고 padding(터치 영역)·정렬·
   순서 변경 기능은 전혀 건드리지 않는다. */
.ap-preview-panel .ap-cms-section-title,
.ap-preview-panel .ap-cms-work-title {
  font-size: 17px;
  line-height: 1.35;
}
.ap-preview-panel .ap-cms-work-meta {
  font-size: 13px;
  color: var(--muted, rgba(244,239,230,.68));
}
.ap-preview-panel .ap-cms-badge {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.ap-preview-panel .ap-cms-icon-btn { font-size: 13px; }

/* 2026-09-20 추가 (PUBLISH 엔진, Milestone C — 로그인 전 DISCOVER Preview,
   요청 원문 §5~§6). Golden Baseline: 위쪽의 기존 .ap-preview-* 규칙은
   전혀 건드리지 않는다 — 이 화면 전용 .ap-preview-discover-* 클래스만
   새로 추가한다. artist-cms.css의 .ap-discover-mgmt-*(실제 로그인 후
   화면)와 시각적으로 같은 언어를 쓰되, 여기서는 실제 이미지 대신 중립
   placeholder만 쓴다(§6 "실제 private data 노출 없음"). */
.ap-preview-status-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; }
.ap-preview-status-row .ap-cms-primary-sm { width: auto; margin: 0; }
/* 2026-09-20 추가 (로그인 전 COSMOS 미리보기 — DISCOVER 진입 링크 핀셋
   수정 §4-5) — .ap-cms-primary-sm 자체는 그대로 재사용하고, <a> 태그가
   <button>과 동일한 박스로 보이도록 최소 속성만 이 전용 클래스에
   추가한다(밑줄 제거, 인라인 요소 padding이 제대로 보이도록
   inline-block, 아래 데모 영역과의 간격). */
.ap-preview-discover-explore-link { display: inline-block; text-decoration: none; min-height: 44px; line-height: 30px; box-sizing: border-box; margin: 0 0 14px; }
.ap-preview-discover-summary { display: flex; gap: 12px; margin: 0 0 14px; }
.ap-preview-discover-bulkbtns { display: flex; gap: 8px; margin: 10px 0 14px; }
.ap-preview-discover-bulkbtns button { width: auto; margin: 0; }
.ap-preview-discover-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ap-preview-discover-card {
  border: 1px solid var(--line, rgba(212,180,109,.18));
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel, #101722);
}
.ap-preview-discover-imgbox {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, rgba(212,180,109,.14), rgba(11,15,20,.6));
}
.ap-preview-discover-check { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; margin: 0; }
.ap-preview-discover-body { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 6px; }
.ap-preview-discover-body .ap-cms-work-title { font-size: 13px; }
.ap-preview-discover-body button { width: auto; margin: 0; align-self: flex-start; }
@media (min-width: 768px) {
  .ap-preview-discover-grid { grid-template-columns: repeat(3, 1fr); }
}
.ap-preview-panel .ap-cms-primary-sm { font-size: 14px; }