/*
 * 체험(데모) 전용 스타일 — planreq005 part004 SC-1·2·3·5·7·13
 *
 * 원칙
 *  - 모든 클래스에 demo- 접두어. 기존 화면의 스타일과 겹치지 않는다.
 *  - 페이지마다 폰트·색 토큰이 달라(에디터=파랑, 랜딩=베이지+먹색) 여기서는 자체 값만 쓴다.
 *  - 기존 요소를 건드리는 규칙은 전부 html.demo-banner-on 아래에만 둔다.
 *    → 체험 띠가 없는 화면(정식 회원 포함)에서는 어떤 규칙도 적용되지 않는다.
 */

:root {
  --demo-ink: #15140F;
  --demo-cream: #FAFAF7;
  --demo-line: #E6E3DA;
  --demo-line-2: #D4D0C4;
  --demo-ink-3: #6B6860;
  --demo-warn: #B45309;
  --demo-danger: #B42318;
  --demo-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --demo-banner-h: 0px;
}
html.demo-banner-on { --demo-banner-h: 44px; }
@media (max-width: 768px) {
  html.demo-banner-on { --demo-banner-h: 40px; }
}

/* ══════════ SC-3. 상단 띠 ══════════ */
.demo-banner {
  position: sticky; top: 0; z-index: 1000;
  height: 44px; box-sizing: border-box;
  background: var(--demo-ink); color: var(--demo-cream);
  font-family: var(--demo-font); font-size: 13.5px; line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}
.demo-banner[hidden] { display: none; }
.demo-banner.is-warn { background: var(--demo-warn); }
.demo-banner__inner {
  height: 100%; box-sizing: border-box; max-width: 1400px; margin: 0 auto;
  padding: 0 12px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.demo-banner__msg { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.demo-banner__icon { flex-shrink: 0; font-size: 15px; }
.demo-banner__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; letter-spacing: -0.01em; }
.demo-banner__actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.demo-banner__btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 12px; border-radius: 6px; box-sizing: border-box;
  font: 600 12.5px/1 var(--demo-font); text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid rgba(250, 250, 247, .4); background: transparent; color: var(--demo-cream);
}
.demo-banner__btn:hover { border-color: var(--demo-cream); }
.demo-banner__btn--primary { background: var(--demo-cream); border-color: var(--demo-cream); color: var(--demo-ink); }
.demo-banner__btn--primary:hover { background: #fff; }
/* 1순위 행동(가입)을 다른 버튼보다 한 단계 더 도드라지게 — 같은 색·크기 체계 안에서 굵기와 옅은 테두리 링만 더한다 */
.demo-banner__btn--primary { font-weight: 800; box-shadow: 0 0 0 3px rgba(250, 250, 247, .22); }
/* 보조 동작(이어쓰기 링크 복사): 테두리 없이 밑줄 글자로 낮춰 1순위와 경쟁하지 않게 한다 */
.demo-banner__btn--quiet { border-color: transparent; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; opacity: .9; }
.demo-banner__btn--quiet:hover { border-color: transparent; background: rgba(250, 250, 247, .14); opacity: 1; }
.demo-banner__close {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent;
  color: var(--demo-cream); font-size: 18px; line-height: 1; cursor: pointer; opacity: .8;
}
.demo-banner__close:hover { opacity: 1; background: rgba(250, 250, 247, .14); }
.demo-banner a:focus-visible, .demo-banner button:focus-visible { outline: 2px solid var(--demo-cream); outline-offset: 2px; }

/* 데스크톱/모바일 문구 전환 */
.demo-m { display: none; }
@media (max-width: 768px) {
  .demo-banner { height: 40px; font-size: 13px; }
  .demo-banner__inner { padding: 0 8px 0 12px; gap: 10px; }
  .demo-d { display: none; }
  .demo-m { display: inline; }
  .demo-banner__btn--login { display: none; }
  .demo-banner__btn { height: 26px; padding: 0 10px; }
}

/* ── 띠가 있는 화면에서 기존 레이아웃 보정 (띠는 흐름 안에 있어 본문이 밀린다) ── */
html.demo-banner-on .editor-app { height: calc(100vh - var(--demo-banner-h)); height: calc(100dvh - var(--demo-banner-h)); }
html.demo-banner-on .trash-app { min-height: calc(100vh - var(--demo-banner-h)); }
html.demo-banner-on .versions-panel { top: var(--demo-banner-h); height: calc(100% - var(--demo-banner-h)); }
/* sticky 내비는 띠 바로 아래에 붙는다 */
html.demo-banner-on .nav,
html.demo-banner-on .site-nav { top: var(--demo-banner-h); }
html.demo-banner-on .nav-mobile,
html.demo-banner-on .site-nav-mobile { inset: calc(64px + var(--demo-banner-h)) 0 0 0; }
html.demo-banner-on .gallery-wrap .sidebar { top: calc(80px + var(--demo-banner-h)); max-height: calc(100vh - 100px - var(--demo-banner-h)); }
@media (max-width: 768px) {
  html.demo-banner-on .editor-sidebar { top: calc(52px + var(--demo-banner-h)); height: calc(100% - 52px - var(--demo-banner-h)); }
}

/* ══════════ SC-1. 랜딩 체험 CTA ══════════ */
.demo-cta { text-align: center; padding-top: 22px; padding-bottom: 32px; }
.demo-cta__row { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.demo-cta__form { margin: 0; }
.demo-cta__hint { margin: 12px 0 0; font-size: 13.5px; color: var(--demo-ink-3); }
.demo-cta__error {
  display: inline-block; margin: 0 0 12px; padding: 9px 14px; border-radius: 8px;
  background: #FFF8EC; border: 1px solid #F2D9A8; color: #7A4B00; font-size: 13.5px;
}
@media (max-width: 640px) {
  .demo-cta__row { flex-direction: column; align-items: stretch; }
  .demo-cta__row .btn, .demo-cta__form, .demo-cta__form .btn { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* ══════════ SC-2. 템플릿 상세 체험 폼 ══════════ */
.demo-form-block { margin: 0; display: flex; }
.demo-form-block > .btn { flex: 1; }

/* ══════════ SC-5 · 7 · 13. 모달 ══════════ */
.demo-modal-overlay {
  position: fixed; inset: 0; z-index: 9500; padding: 16px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: rgba(21, 20, 15, .5); font-family: var(--demo-font);
}
.demo-modal-overlay[hidden] { display: none; }
.demo-modal {
  width: 100%; max-width: 400px; box-sizing: border-box; padding: 28px 26px 22px;
  background: #fff; color: var(--demo-ink); border-radius: 16px; text-align: center;
  box-shadow: 0 12px 40px rgba(21, 20, 15, .22), 0 0 0 1px rgba(21, 20, 15, .06);
  max-height: calc(100vh - 32px); overflow-y: auto; -webkit-font-smoothing: antialiased;
}
.demo-modal__icon { font-size: 30px; line-height: 1; margin-bottom: 12px; }
.demo-modal__title { margin: 0 0 10px; font-size: 18px; line-height: 1.4; font-weight: 750; letter-spacing: -0.015em; word-break: keep-all; }
.demo-modal__body { margin: 0; font-size: 14px; line-height: 1.65; color: var(--demo-ink-3); word-break: keep-all; }
.demo-modal__body strong { color: var(--demo-ink); }
.demo-modal__list {
  list-style: none; margin: 14px 0 0; padding: 12px 14px; text-align: left;
  background: #FAFAF7; border: 1px solid var(--demo-line); border-radius: 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--demo-ink);
}
.demo-modal__list li { padding: 3px 0 3px 14px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-modal__list li::before { content: "·"; position: absolute; left: 2px; font-weight: 700; }
.demo-modal__list li.is-more { color: var(--demo-ink-3); white-space: normal; }
.demo-modal__note { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--demo-ink-3); }
.demo-modal__actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.demo-modal__actions form { margin: 0; }

.demo-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 42px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--demo-line-2);
  background: #fff; color: var(--demo-ink); font: 600 14px/1 var(--demo-font);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.demo-btn:hover { border-color: var(--demo-ink); }
.demo-btn--primary { background: var(--demo-ink); border-color: var(--demo-ink); color: var(--demo-cream); }
.demo-btn--primary:hover { background: #000; }
/* 파괴적 동작: 채움 없이 흰 배경 + 붉은 테두리 (색만이 아니라 문구로도 구분) */
.demo-btn--danger { background: #fff; border: 1.5px solid var(--demo-danger); color: var(--demo-danger); }
.demo-btn--danger:hover { background: #FEF3F2; border-color: var(--demo-danger); }
.demo-modal a:focus-visible, .demo-modal button:focus-visible { outline: 2px solid var(--demo-ink); outline-offset: 2px; }
.demo-btn--danger:focus-visible { outline-color: var(--demo-danger); }
@media (max-width: 480px) {
  .demo-modal { padding: 24px 18px 18px; }
  .demo-modal__actions { flex-direction: column; } /* 문서 순서 그대로: 취소 → 가입 → (파괴적) 종료 — 파괴적 버튼이 가장 멀리 */
  .demo-modal__actions .demo-btn, .demo-modal__actions form { width: 100%; }
  .demo-modal__actions form .demo-btn { width: 100%; }
}

/* ══════════ SC-6. 가입 화면 전환 배너 ══════════ */
.demo-signup-note {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 13px 14px;
  background: #FFF8EC; border: 1px solid #F2D9A8; border-radius: 10px; color: #5C3A00;
  font-size: 13.5px; line-height: 1.6; text-align: left;
}
.demo-signup-note__icon { font-size: 18px; line-height: 1.3; flex-shrink: 0; }
.demo-signup-note p { margin: 0; }
.demo-signup-note strong { font-weight: 750; }