/*
 * a_main — 사진 자체를 손으로 배치하는 아카이브형 게시판 스킨
 * 사이트 전역 테마(:root) 색상·폰트 토큰을 기본값으로 참고합니다.
 * 강조(accent) 버튼류는 테마의 강조 색을, 그 외 버튼류는 테마의 기본(primary)
 * 버튼 색을, 삭제 관련 표시는 테마의 오류(error) 색을 따라가고, 테마에 값이
 * 없을 때만 스킨 자체 기본색(파랑/금색/벽돌색)을 씁니다.
 */
:root{
  --am-ground: #0c0b09;
  --am-surface: var(--card-bg-color, #17150f);
  --am-surface-2: #211d15;
  --am-border: var(--card-border-color, #2c2820);
  --am-radius: 3px;
  --am-ink: var(--content-font-color, #efe8da);
  --am-ink-dim: var(--gray-400, #948d7c);
  --am-title-font: var(--title-font-family, "Noto Serif KR", "Nanum Myeongjo", Georgia, serif);
  --am-body-font: var(--content-font-family, "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif);
  --am-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --am-accent: var(--btn-accent-bg, #3652d6);
  --am-accent-ink: var(--btn-accent-text, #eef1ff);
  --am-gold: var(--btn-primary-bg, #c99a3f);
  --am-gold-ink: var(--btn-primary-text, #241a06);
  --am-brick: var(--error-color, #a8432f);
}

.am-page{
  position:relative;
  color:var(--am-ink);
  font-family:var(--am-body-font);
  /* 블록을 캔버스 경계 밖으로 자유롭게 배치할 수는 있지만, 그 때문에 메인
     화면에 가로/세로 스크롤이 생기지 않도록 화면 경계에서 잘라낸다(포커스로
     확대된 블록·오른쪽 위 고정 버튼 등은 position:fixed라 영향받지 않음) */
  overflow:hidden;
}
.am-page *{box-sizing:border-box;}
.am-page a{color:inherit;text-decoration:none;}
.am-page ::selection{background:var(--am-accent);color:var(--am-accent-ink);}
.am-mono{font-family:var(--am-mono);}

/* ---------- top bar ---------- */
.am-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 40px;position:relative;z-index:3;
}
.am-brand{display:flex;align-items:center;gap:12px;font-family:var(--am-title-font);}
.am-brand-mark{
  width:38px;height:38px;border:1px solid var(--am-ink-dim);border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-style:italic;font-size:14px;
}
.am-brand-name{font-size:15px;letter-spacing:.01em;}
.am-top-right{display:flex;align-items:center;gap:14px;justify-content:flex-end;flex:1;}
.am-btn-ghost{
  font-size:13px;color:var(--am-ink-dim);white-space:nowrap;
  background:none;border:0;padding:0;margin:0;cursor:pointer;font-family:inherit;line-height:1;
}
.am-btn-ghost:hover{color:var(--am-ink);}
.am-btn-solid{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--am-ink);color:var(--am-ground);font-size:13px;font-weight:600;
  padding:8px 16px;border-radius:20px;white-space:nowrap;
  border:0;margin:0;cursor:pointer;font-family:inherit;
}
.am-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;font-size:15px;
}

#am-edit-actions{display:none;align-items:center;gap:8px;}
.am-page.is-editing #am-edit-actions{display:flex;}
.am-page.is-editing #am-edit-btn{display:none;}

/* ---------- 글쓰기/편집: 화면 오른쪽 위 구석에 고정, 평소엔 숨어있다가 hover 시 노출 ---------- */
.am-quick-actions{
  position:fixed;top:10px;right:10px;z-index:500;
  padding:16px 14px 16px 30px;border-radius:26px;
  transition:background .15s ease;
}
.am-quick-actions::before{
  content:"";position:absolute;top:50%;right:14px;width:6px;height:6px;border-radius:50%;
  background:var(--am-ink-dim);opacity:.55;transform:translateY(-50%);
  transition:opacity .15s ease;pointer-events:none;
}
.am-qa-inner{
  display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.am-quick-actions:hover, .am-quick-actions:focus-within{
  background:rgba(12,11,9,.85);backdrop-filter:blur(6px);
}
.am-quick-actions:hover .am-qa-inner,
.am-quick-actions:focus-within .am-qa-inner{
  opacity:1;transform:translateX(0);pointer-events:auto;
}
.am-quick-actions:hover::before,
.am-quick-actions:focus-within::before{opacity:0;}

/* ---------- category pills ---------- */
.am-tags{display:flex;flex-wrap:wrap;gap:8px;padding:40px 40px 0;position:relative;z-index:2;}
.am-tag-pill{
  font-size:11.5px;letter-spacing:.03em;border:1px solid var(--am-border);border-radius:14px;
  padding:5px 13px;color:var(--am-ink-dim);
}
.am-tag-pill.is-active{border-color:var(--am-gold);color:var(--am-gold);}
.am-tag-pill:hover{color:var(--am-ink);}

.am-empty{padding:60px 40px;color:var(--am-ink-dim);font-size:13.5px;text-align:center;}

/* ---------- freeform canvas (사진 자체를 배치) ---------- */
/* aspect-ratio로 캔버스 높이를 딱 정해두면 그 경계를 넘어가는 사진이 다음
   섹션(글 목록 등)에 가려 "잘린" 것처럼 보였다. 높이를 넉넉한 고정값으로
   두고, 드래그 위치/크기 제한도 없애서 화면 밖으로 자유롭게 나갈 수 있게 함. */
.am-canvas-wrap{padding:0;position:relative;z-index:2;}
/* 이미지들이 다 로드되어 캔버스 높이(=블록들의 세로 위치 기준)가 자리잡을
   때까지 숨겨둔다(list.skin.php의 amRevealCanvas 참고) — visibility는
   레이아웃 공간/크기 계산에는 영향 없어서 숨긴 채로도 정확히 잴 수 있다. */
.am-canvas-wrap.am-settling{visibility:hidden;}
.am-canvas{
  /* HTML/타이핑 텍스트의 세로 크기(%)가 이 값을 기준으로 계산되므로
     min-height가 아니라 height로 확정된 값을 줘야 함(자식이 전부 absolute라
     min-height든 height든 캔버스 자체 크기는 똑같지만, 퍼센트 높이 계산의
     "기준이 되는 부모 높이가 정해져 있는지"는 height일 때만 확실히 보장됨) */
  position:relative;width:100%;height:900px;
}
.am-piece{
  position:absolute;
  transition:z-index 0s;
  cursor:default;
}
.am-piece-inner{
  position:relative;
  transition:transform .18s ease;
}
/* 일반 텍스트·타이핑 텍스트는 가로·세로 둘 다 내용 크기에 맞춰 자동으로
   정해짐(핸들로 조절 불가) — 가로는 짧은 내용은 좁게, 긴 내용은 최대
   너비에서 줄바꿈되며 세로로 늘어남. 타이핑 텍스트는 타이핑 도중 글자가
   하나씩 나타나며 블록이 따라 커지지 않도록, 시작 전에 JS가 최종 크기를
   재서 px로 고정해둠(list.skin.php의 타이핑 애니메이션 코드 참고) */
/* 일반 텍스트·타이핑 텍스트 둘 다 최대 너비 제한 없이 내용 길이에 맞춰
   가로로 늘어난다(줄바꿈은 작성자가 직접 문단을 나눈 곳에서만 일어남) */
.am-piece-text,
.am-piece-typing{
  width:max-content;min-width:80px;
}
.am-piece-text .am-place-resize-handle,
.am-piece-typing .am-place-resize-handle{display:none !important;}
/* 이미지 카드의 본체 사진에만 적용(다른 곳의 img까지 걸리면 텍스트 블록 안에
   있는 이미지·버튼 클릭이 막히므로 클래스로 딱 집어서 지정) */
.am-piece-photo{
  display:block;width:100%;height:auto;border-radius:2px;pointer-events:none;
}
/* 이미지에 링크가 걸려 있을 때만 이 <a>가 사진을 감싼다 */
.am-piece-photo-link{display:block;}
/* ---------- 게시글 유형별 블록 (image 외 나머지) ---------- */
.am-embed-empty{
  display:flex;align-items:center;justify-content:center;min-height:120px;
  background:var(--am-surface);border:1px dashed var(--am-border);border-radius:8px;
  color:var(--am-ink-dim);font-size:12px;text-align:center;padding:16px;
}

/* 일반 텍스트 / 타이핑 텍스트 — 둘 다 블록 자체가 내용 크기에 맞춰 자동으로
   커지므로 스크롤이 필요 없음 */
.am-text-block, .am-typing-block{
  box-sizing:border-box;height:auto;overflow:visible;
  background:var(--am-surface);border:1px solid var(--am-border);border-radius:8px;
  padding:18px;font-size:13.5px;line-height:1.75;color:var(--am-ink);
  /* 블록을 드래그로 옮길 때 글자가 텍스트 선택(드래그)되어 버리는 것을 방지 */
  user-select:none;-webkit-user-select:none;
  /* word-break:break-word는 한글도 아무 글자에서나 끊어버려서(예: "무작정"이
     "무작"/"정"으로 쪼개짐) 단어 중간에 줄이 바뀌어 보기 나쁘다. keep-all로
     띄어쓰기 단위에서만 끊고, 혹시 있을 긴 영어 URL 등만 overflow-wrap으로
     예외 처리해서 박스를 넘치지 않게 한다. */
  white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;
}
/* 일반 텍스트는 에디터 서식(색상·폰트·크기 등)을 그대로 살려서 HTML로
   출력하므로, 문단·줄바꿈은 태그가 담당함 — 원본 공백을 따로 보존할 필요가 없음.
   또한 작성자가 넣은 이미지 크기를 그대로 존중 — 강제로 줄이거나 늘리지 않음 */
.am-text-block{white-space:normal;}

/* 타이핑 텍스트 — 타이핑되듯 한 글자씩 나타나는 효과. 기본은 터미널 느낌의
   고정폭 글꼴이지만, 에디터에서 글자에 직접 준 색상·폰트·크기 등은 그대로
   우선 적용됨(글자 하나하나가 원래 태그 구조 안에 그대로 있기 때문).
   커서(.am-typing-cursor)는 JS가 실제로 마지막 글자가 들어있는 자리(문단이
   여러 개면 마지막 문단 안)를 찾아서 그 바로 뒤에 끼워 넣으므로 항상 지금까지
   타이핑된 마지막 글자 옆에 붙는다. 블록 크기 자체는 타이핑 시작 전에 JS가
   전체 내용 기준으로 재서 px로 고정해두므로(list.skin.php 참고), 타이핑
   중에 테두리가 커지거나 줄어들지 않는다. */
.am-typing-block{
  /* 문단(줄)마다 절대 줄바꿈 없이 한 줄로 그대로 나와야 하므로
     pre-wrap 대신 nowrap을 씀(문단 간 줄바꿈은 어차피 <p> 태그가 담당) */
  white-space:nowrap;
  font-family:var(--am-mono);font-size:14px;
}
.am-typing-char{display:none;}
.am-typing-char.is-shown{display:inline;}
/* 본문에 이미지가 있으면 그것도 글자와 같은 순서(reveal 목록)로 차례를
   맞아 나타난다(list.skin.php의 amSplitIntoCharSpans가 img도 순서에 넣어
   같은 is-shown 클래스로 토글함). 자기 차례가 되기 전까지는 글자와 똑같이
   display:none으로 완전히 숨겨져 있어야(자리를 차지하면 안 됨) 앞 문장이
   채워지는 동안 이미지가 밀려 보이지 않는다. 차례가 되면 JS가 먼저
   is-shown으로 display만 바꿔서 자리를 잡게 한 다음, 한 프레임 뒤에
   opacity를 0→(원래 작성자가 지정해둔 값, 없으면 1)로 올려서 타이핑과는
   별개로 부드럽게 페이드인시킨다(opacity 0/전환은 JS가 인라인 style로
   직접 관리 — 본문에 작성자가 직접 지정해둔 opacity 값을 덮어쓰지 않기
   위함이라 여기서는 opacity를 지정하지 않는다). */
.am-typing-block img.am-typing-char.is-shown{display:inline-block;}
.am-typing-block img.am-typing-char{
  max-width:280px;height:auto;vertical-align:middle;border-radius:6px;
  transition:opacity .4s ease;
}
@media (prefers-reduced-motion:reduce){
  .am-typing-block img.am-typing-char{transition:none;}
}
/* 폰트어썸 텍스트 커서 아이콘(fa-i-cursor) — color:inherit로 주변 텍스트
   색을 그대로 따라간다 */
.am-typing-cursor{
  display:inline-block;margin-left:2px;color:inherit;
  animation:am-cursor-blink 1s step-end infinite;
}
@keyframes am-cursor-blink{
  0%, 100% { opacity:1; }
  50% { opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .am-typing-cursor{animation:none;}
}
/* 타이핑 블록은 문자 span 분리·커서 삽입·최종 크기 측정이 끝날 때까지 화면에
   안 보이게 해둔다(visibility는 레이아웃 공간은 그대로 차지해서 캔버스 높이
   계산에는 영향 없음) — 이러면 처음 CSS 기본 크기로 잠깐 그려졌다가 JS가
   측정한 최종 크기로 바뀌면서 위치가 튀어 보이는 일이 없다. 준비가 끝나면
   JS(list.skin.php)가 이 클래스를 지워서 한 번에 보여준다. */
.am-piece-typing.am-typing-pending{visibility:hidden;}

/* 블록 배경 켜고 끄기 — 기본은 배경 있음(bg=1), bg=0이면 테두리·그림자까지 투명하게 */
.am-piece[data-bg="0"] .am-text-block,
.am-piece[data-bg="0"] .am-typing-block{
  background:transparent;border-color:transparent;
}

/* 편집 모드에서만 나타나는 드래그/크기/회전/초기화/레이어/삭제/수정 손잡이 */
.am-piece .am-place-drag-area,
.am-piece .am-place-resize-handle,
.am-piece .am-place-rotate-handle,
.am-piece .am-place-rotate-line,
.am-piece .am-place-reset-handle,
.am-piece .am-place-z-controls,
.am-piece .am-place-delete-handle,
.am-piece .am-place-restore-handle,
.am-piece .am-place-edit-handle{display:none;}
.am-page.is-editing .am-piece{cursor:default;}
.am-page.is-editing .am-piece .am-place-drag-area{display:block;}
.am-page.is-editing .am-piece .am-place-resize-handle,
.am-page.is-editing .am-piece .am-place-rotate-handle,
.am-page.is-editing .am-piece .am-place-rotate-line,
.am-page.is-editing .am-piece .am-place-reset-handle,
.am-page.is-editing .am-piece .am-place-delete-handle,
.am-page.is-editing .am-piece .am-place-edit-handle{display:flex;}
.am-page.is-editing .am-piece .am-place-z-controls{display:flex;}

/* 삭제 버튼은 바로 지우지 않고 "삭제 예정" 표시만 한다 — 실제 삭제는 저장을
   눌러야 반영되고, 그 전까지는 복구 버튼으로 되돌릴 수 있다 */
.am-page.is-editing .am-piece.is-pending-delete .am-place-delete-handle{display:none;}
.am-page.is-editing .am-piece.is-pending-delete .am-place-restore-handle{display:flex;}
.am-page.is-editing .am-piece.is-pending-delete .am-place-drag-area,
.am-page.is-editing .am-piece.is-pending-delete .am-place-resize-handle,
.am-page.is-editing .am-piece.is-pending-delete .am-place-rotate-handle,
.am-page.is-editing .am-piece.is-pending-delete .am-place-rotate-line,
.am-page.is-editing .am-piece.is-pending-delete .am-place-reset-handle,
.am-page.is-editing .am-piece.is-pending-delete .am-place-z-controls,
.am-page.is-editing .am-piece.is-pending-delete .am-place-edit-handle{display:none !important;}
.am-piece.is-pending-delete .am-piece-inner::after{
  content:"";position:absolute;inset:0;background:var(--am-ground);opacity:.55;
  border-radius:8px;pointer-events:none;z-index:1;
}

.am-place-reset-handle{
  position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;
  background:var(--am-surface-2);border:2px solid var(--am-ground);color:var(--am-ink);
  align-items:center;justify-content:center;font-size:10px;line-height:1;cursor:pointer;padding:0;
}
.am-place-delete-handle, .am-place-restore-handle, .am-place-edit-handle{
  position:absolute;right:-9px;top:-9px;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--am-ground);align-items:center;justify-content:center;
  font-size:9px;line-height:1;cursor:pointer;padding:0;z-index:6;text-decoration:none;
}
.am-place-delete-handle{background:var(--am-brick);color:#fff;}
.am-place-restore-handle{background:var(--am-accent);color:var(--am-accent-ink);font-size:11px;}
/* 수정(✎) 손잡이는 삭제/복구 손잡이(오른쪽 위 모서리) 바로 아래에 세로로 쌓아둠 */
.am-place-edit-handle{background:var(--am-gold);color:var(--am-gold-ink);top:14px;font-size:9px;}
.am-place-z-controls{
  position:absolute;left:-9px;bottom:-9px;flex-direction:column;
  border-radius:9px;overflow:hidden;border:2px solid var(--am-ground);
}
.am-place-z-controls button{
  width:18px;height:14px;background:var(--am-surface-2);color:var(--am-ink);
  border:0;font-size:8px;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.am-place-z-controls button:hover{background:var(--am-accent);color:var(--am-accent-ink);}

/* 이미지 없는 글(.am-card)의 편집 모드 삭제/수정 배지 — 삭제는 마찬가지로 저장
   전까지는 "삭제 예정" 표시만 하고 복구 버튼으로 되돌릴 수 있다 */
.am-card-delete-handle, .am-card-restore-handle, .am-card-edit-handle{
  display:none;position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;
  color:#fff;align-items:center;justify-content:center;font-size:10px;cursor:pointer;
  border:2px solid var(--am-ground);z-index:5;text-decoration:none;padding:0;
}
.am-card-delete-handle{background:var(--am-brick);}
.am-card-restore-handle{background:var(--am-accent);color:var(--am-accent-ink);font-size:12px;}
/* 수정(✎) 배지는 삭제 배지 왼쪽에 나란히 배치 */
.am-card-edit-handle{background:var(--am-gold);color:var(--am-gold-ink);right:20px;}
.am-page.is-editing .am-card-delete-handle,
.am-page.is-editing .am-card-edit-handle{display:flex;}
.am-page.is-editing .am-card.is-pending-delete .am-card-delete-handle,
.am-page.is-editing .am-card.is-pending-delete .am-card-edit-handle{display:none;}
.am-page.is-editing .am-card.is-pending-delete .am-card-restore-handle{display:flex;}
.am-card.is-pending-delete::after{
  content:"";position:absolute;inset:0;background:var(--am-ground);opacity:.55;
  border-radius:inherit;pointer-events:none;z-index:1;
}

/* ---------- 글 목록(이미지 없는 글) ---------- */
.am-plain-wrap{padding:10px 40px 10px;position:relative;z-index:2;}
.am-plain-label{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--am-ink-dim);margin-bottom:16px;}
.am-plain-list{display:flex;flex-wrap:wrap;gap:16px;}
.am-card{
  position:relative;width:230px;border-radius:var(--am-radius);padding:16px;
  background:var(--am-surface);border:1px solid var(--am-border);
  transition:transform .15s ease, box-shadow .15s ease;
}
.am-card:hover{
  transform:translateY(-4px);box-shadow:0 20px 34px -20px rgba(0,0,0,.7);z-index:40;
}
.am-idx{font-size:10.5px;color:var(--am-ink-dim);letter-spacing:.05em;margin-bottom:10px;}
.am-tag{
  display:inline-block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--am-gold);border:1px solid var(--am-gold);border-radius:10px;padding:2px 8px;margin-bottom:10px;
}
.am-card h3{font-size:15px;line-height:1.4;margin:0 0 6px;font-weight:600;}
.am-card h3 a{cursor:pointer;}
.am-card h3 a:hover{text-decoration:underline;}
.am-card .am-sub{font-size:12px;color:var(--am-ink-dim);line-height:1.6;}

/* ---------- paging ---------- */
.am-paging{display:flex;justify-content:center;gap:6px;padding:50px 40px 10px;position:relative;z-index:2;}
.am-page-link{
  min-width:30px;height:30px;padding:0 8px;border:1px solid var(--am-border);border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--am-ink-dim);
}
.am-page-link.is-active{border-color:var(--am-gold);color:var(--am-gold);}

/* ---------- footer ---------- */
.am-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 40px;border-top:1px solid var(--am-border);
  font-size:11.5px;color:var(--am-ink-dim);position:relative;z-index:2;margin-top:20px;
}

/* ---------- view (post detail) ---------- */
.am-view{max-width:760px;margin:0 auto;padding:40px 24px 80px;position:relative;z-index:2;}
.am-view-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;}
.am-view-cover{
  /* object-fit:cover는 박스에 맞춰 이미지를 잘라내므로, 잘리지 않고 전체가
     다 보이도록 높이를 이미지 원본 비율 그대로 따라가게 함 */
  width:100%;height:auto;border-radius:var(--am-radius);
  border:1px solid var(--am-border);margin-bottom:26px;display:block;
}
.am-view-crumb{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--am-ink-dim);margin-bottom:14px;}
.am-view h1{font-family:var(--am-title-font);font-size:34px;line-height:1.3;margin:0 0 12px;text-wrap:balance;}
.am-view-meta{font-size:12px;color:var(--am-ink-dim);margin-bottom:30px;display:flex;gap:10px;flex-wrap:wrap;}
.am-view-body{font-size:15px;line-height:1.9;}
.am-view-body img{max-width:100%;height:auto;border-radius:var(--am-radius);}
.am-view-actions{display:flex;gap:10px;margin-top:40px;border-top:1px solid var(--am-border);padding-top:24px;}
.am-btn{
  border:1px solid var(--am-border);border-radius:20px;padding:8px 16px;font-size:13px;color:var(--am-ink-dim);
  background:none;
}
.am-btn:hover{color:var(--am-ink);}

/* ---------- write form ---------- */
.am-write{max-width:640px;margin:0 auto;padding:40px 24px 80px;position:relative;z-index:2;}
.am-write-title{font-family:var(--am-title-font);font-size:26px;margin:0 0 26px;}
.am-field{margin-bottom:20px;}
.am-label{display:block;font-size:12.5px;color:var(--am-ink-dim);margin-bottom:7px;}
.am-label-hint{opacity:.75;font-weight:400;}
.am-input, .am-textarea, .am-select{
  width:100%;background:var(--am-surface);border:1px solid var(--am-border);border-radius:var(--am-radius);
  padding:11px 13px;color:var(--am-ink);font-size:14px;font-family:var(--am-body-font);
}
.am-input:focus, .am-textarea:focus, .am-select:focus{outline:2px solid var(--am-accent);outline-offset:1px;}
.am-textarea{resize:vertical;min-height:70px;line-height:1.6;}
.am-char-count{font-size:11px;color:var(--am-ink-dim);text-align:right;margin-top:4px;}
.am-checkbox-label{
  display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--am-ink);cursor:pointer;
}
.am-checkbox-label input{width:16px;height:16px;accent-color:var(--am-accent);cursor:pointer;}
.am-write-actions{display:flex;gap:10px;margin-top:32px;}
.am-btn-write{
  background:var(--am-gold);color:var(--am-gold-ink);font-weight:700;font-size:14px;border:0;
  padding:11px 22px;border-radius:22px;cursor:pointer;
}

/* ---------- 드래그/크기/회전 손잡이 (목록 편집 모드에서 .am-piece-inner 안에 재사용) ---------- */
.am-place-drag-area{position:absolute;inset:0;cursor:move;touch-action:none;}
.am-place-resize-handle{
  position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;border-radius:50%;
  background:var(--am-gold);border:2px solid var(--am-ground);cursor:nwse-resize;touch-action:none;
}
.am-place-rotate-line{
  position:absolute;left:50%;bottom:100%;width:1px;height:26px;background:var(--am-ink-dim);
  transform:translateX(-50%);
}
.am-place-rotate-handle{
  position:absolute;left:50%;bottom:calc(100% + 26px);width:16px;height:16px;border-radius:50%;
  background:var(--am-accent);border:2px solid var(--am-ground);cursor:grab;touch-action:none;
  transform:translateX(-50%);
}

/* 블록을 옮길 때 캔버스 가운데에 가까워지면 나타나는 스냅 기준선 */
.am-snap-guide{
  position:absolute;background:var(--am-accent);pointer-events:none;z-index:9700;
  opacity:0;transition:opacity .08s ease;
}
.am-snap-guide.is-visible{opacity:.85;}
.am-snap-guide-v{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);}
.am-snap-guide-h{top:50%;left:0;right:0;height:1px;transform:translateY(-50%);}

/* ---------- 모바일 편집(관리자 전용): 모바일 화면 미리보기에서 블록 노출 토글 ---------- */
.am-mobile-editor-overlay{
  display:none;position:fixed;inset:0;z-index:9800;
  background:rgba(0,0,0,.7);align-items:center;justify-content:center;padding:24px;
}
.am-mobile-editor-overlay.is-open{display:flex;}
.am-mobile-editor-panel{
  width:100%;max-width:420px;max-height:88vh;display:flex;flex-direction:column;
  background:var(--am-ground);border:1px solid var(--am-border);border-radius:16px;
  overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
}
.am-mobile-editor-head{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--am-border);
  font-size:12.5px;color:var(--am-ink-dim);
}
.am-mobile-editor-actions{display:flex;align-items:center;gap:8px;align-self:flex-end;}
.am-mobile-frame{flex:1;overflow-y:auto;padding:16px;background:var(--am-ground);}
.am-mobile-preview-wrap{margin-bottom:18px;transition:opacity .15s ease;}
.am-mobile-preview-wrap.is-hidden-on-mobile{opacity:.35;}
.am-mobile-toggle-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.am-mobile-toggle-label{font-size:11.5px;color:var(--am-ink-dim);}
.am-mobile-toggle-btn{
  font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:12px;
  background:var(--am-surface-2);color:var(--am-ink);border:1px solid var(--am-border);cursor:pointer;
}
.am-mobile-toggle-btn.is-on{background:var(--am-accent);color:var(--am-accent-ink);border-color:var(--am-accent);}
.am-mobile-preview-item{
  position:static !important;width:100% !important;height:auto !important;
  cursor:default;pointer-events:none;
}
.am-mobile-preview-item .am-piece-inner{transform:none !important;}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .am-top{padding:14px 18px;}
  .am-brand-name, .am-btn-ghost{display:none;}
  .am-tags{padding:24px 18px 0;}

  .am-canvas-wrap{padding:30px 18px 6px;}
  .am-canvas{
    min-height:auto;height:auto;display:flex;flex-direction:column;gap:18px;
  }
  .am-piece{position:static !important;width:100% !important;height:auto !important;}
  .am-piece:nth-child(odd) .am-piece-inner{transform:rotate(-.8deg) !important;}
  .am-piece:nth-child(even) .am-piece-inner{transform:rotate(.8deg) !important;}
  .am-piece[data-mob="0"]{display:none !important;}

  /* hover가 없는 화면이라 글쓰기/편집 버튼을 숨겨두지 않고 항상 보이게 함 */
  .am-quick-actions{padding:10px;}
  .am-quick-actions::before{display:none;}
  .am-qa-inner{opacity:1;transform:none;pointer-events:auto;}

  .am-plain-wrap{padding:6px 18px 10px;}
  .am-plain-list{flex-direction:column;}
  .am-card{width:100% !important;}

  .am-foot{padding:18px;}
  .am-view, .am-write{padding:28px 16px 60px;}
  .am-view h1{font-size:26px;}
}

@media (prefers-reduced-motion:reduce){
  .am-card, .am-piece-inner{transition:none;}
}