/* =========================================================
   POST AREA
========================================================== */

.post-area {
  position: fixed;
  inset: 0;

  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100dvh;

  overflow-y: auto;

  background:
    rgba(
      255,
      255,
      255,
      0.98
    );

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);

  z-index: 50;

  padding:
    72px
    24px
    24px;
}


.post-area[hidden] {
  display: none;
}


.post-container {
  width: 100%;
  max-width: 720px;

  margin: 0 auto;
}

/* =========================================================
   POST HEADER
========================================================== */

.post-header {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;

  margin-bottom: 34px;
}


.post-page-title {
  margin: 0;

  font-size: 15px;
  font-weight: 500;

  letter-spacing: 0.12em;

  color: #444444;
}


.post-back-button,
.post-add-button {
  position: absolute;
  top: 50%;

  transform:
    translateY(-50%);

  padding: 4px;

  border: 0;

  background: transparent;

  font-family:
    "Pretendard",
    sans-serif;

  color: #999999;

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;
}


.post-back-button {
  left: 0;

  font-size: 13px;
}


.post-add-button {
  right: 0;

  font-size: 17px;
  font-weight: 300;
}


.post-back-button:hover,
.post-add-button:hover {
  color: #ee9fbd;
}


/*
  배너 카테고리의 "edit"(posts-view-banner.js)와 글 카테고리의
  "edit"(선택 삭제, posts-view-list-select.js)가 같이 씀 —
  카테고리 타입에 따라 둘 중 하나만 보임.
*/

.list-edit-toggle-button {
  position: absolute;
  top: 50%;
  right: 30px;

  transform:
    translateY(-50%);

  padding: 4px 6px;

  border: 1px solid #eeeeee;
  border-radius: 999px;

  background: transparent;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 9px;
  font-weight: 500;

  letter-spacing: 0.05em;

  color: #bbbbbb;

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}


.list-edit-toggle-button[aria-pressed="true"] {
  border-color: #f0d3de;

  background: #fff5f8;

  color: #d980a2;
}


/* =========================================================
   POST LIST
========================================================== */

.post-list {
  width: 100%;
}


.post-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  width: 100%;

  padding:
    12px
    2px;

  border-bottom:
    1px solid #f1f1f1;

  color: #555555;

  text-decoration: none;

  cursor: pointer;

  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}


.post-list-item:hover {
  color: #ee9fbd;

  padding-left: 5px;
}


.post-list-title {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 13px;

  letter-spacing: 0.03em;
}


/*
  비밀글/비공개 제목 앞 자물쇠 아이콘. 이모지 글자 자체의
  줄높이가 본문 글자보다 커서 그냥 텍스트로 붙이면 그 줄만
  세로로 도드라져 보였음(post-list-item 등 줄 높이가 늘어남)
  — 폰트 크기를 줄이고 line-height를 1로 눌러서 옆 텍스트
  세로폭과 맞춘다. post-list/post-related-item/post-detail
  제목 전부 공용으로 씀(posts-format.js의
  applyPostVisibilityTitle).
*/

.post-visibility-icon {
  display: inline-block;

  margin-right: 3px;

  font-size: 0.75em;
  line-height: 1;

  vertical-align: -0.05em;
}


.post-list-date {
  flex: 0 0 auto;

  font-size: 11px;

  letter-spacing: 0.05em;

  color: #bbbbbb;
}


/*
  글 목록 편집(선택 삭제) 모드. posts-view-list-select.js
  참고 — 이 모드에서는 .post-list-item이 <a>가 아니라
  <div>로 그려짐(눌러도 글로 안 들어가고 선택만 됨).
*/

.post-list-item-checkbox {
  flex: 0 0 auto;

  width: 16px;
  height: 16px;

  accent-color: #ee9fbd;

  cursor: pointer;
}


.post-list-select-bar {
  position: sticky;
  bottom: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-top: 10px;

  padding: 10px 12px;

  border: 1px solid #f0d3de;

  background: #fff8fa;
}


.post-list-select-bar[hidden] {
  display: none;
}


.post-list-select-count {
  font-size: 10px;

  letter-spacing: 0.04em;

  color: #d980a2;
}


.post-list-select-delete {
  padding: 6px 14px;

  border: 1px solid #ee9fbd;
  border-radius: 999px;

  background: #ffffff;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 10px;
  font-weight: 500;

  color: #ee9fbd;

  cursor: pointer;
}


.post-list-select-delete:disabled {
  opacity: 0.35;

  cursor: default;
}


.post-list-select-delete:not(:disabled):hover {
  background: #ee9fbd;

  color: #ffffff;
}


.post-empty {
  padding-top: 30px;

  text-align: center;

  font-size: 10px;

  letter-spacing: 0.05em;

  color: #bbbbbb;
}


/* =========================================================
   BANNER 카테고리

   글이 아니라 지인/사이트 배너 모음. posts-view-banner.js
   참고. 항상 가운데 정렬, 모바일 기준 적당한 크기로
   보이도록 min/max 폭을 카드에 직접 건다.
========================================================== */

.banner-grid {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;
  align-items: flex-start;

  gap: 14px;

  width: 100%;
}


.banner-grid[hidden] {
  display: none;
}


.banner-card {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  max-width: 220px;

  text-decoration: none;

  cursor: pointer;
}


.banner-card-image {
  display: block;

  width: 100%;
  height: auto;

  /*
    가로폭만 카드에 맞추고 세로는 이미지 원본 비율 그대로
    (auto) — 강제로 3:1 등에 잘라 넣지 않음.
  */

  border: 1px solid #eeeeee;

  background: #f6f6f6;
}


.banner-card-name {
  margin-top: 8px;

  font-size: 11px;

  letter-spacing: 0.03em;

  color: #777777;

  text-align: center;
}


.banner-card:hover .banner-card-name {
  color: #ee9fbd;
}


/*
  edit 모드일 때만 보이는 카드 위 컨트롤(수정/삭제/순서).
  일반 열람 상태에선 카드를 눌러도 그냥 url이 새 탭으로
  열려야 하므로, 이 버튼들은 카드 앵커 태그 밖으로 뺄 수
  없어서 stopPropagation으로 클릭 버블링만 막는다
  (posts-view-banner.js).
*/

.banner-card-controls {
  position: absolute;
  top: 4px;
  right: 4px;

  display: flex;

  gap: 3px;
}


.banner-card-control {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  padding: 0;

  border: 1px solid #eeeeee;
  border-radius: 999px;

  background: #ffffff;

  font-size: 9px;

  color: #999999;

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;
}


.banner-card-control:hover {
  color: #ee9fbd;

  border-color: #f0d3de;
}


.banner-card-control:disabled {
  opacity: 0.3;

  cursor: default;
}


/* =========================================================
   BANNER EDITOR (add / edit 폼)
========================================================== */

.banner-editor {
  display: flex;
  flex-direction: column;

  gap: 14px;

  width: 100%;
  max-width: 320px;

  margin: 0 auto;

  padding: 24px 0;
}


.banner-editor[hidden] {
  display: none;
}


.banner-editor-heading {
  font-size: 11px;
  font-weight: 500;

  letter-spacing: 0.08em;

  color: #999999;

  text-align: center;
}


.banner-editor-field {
  display: flex;
  flex-direction: column;

  gap: 6px;
}


.banner-editor-field label {
  font-size: 9px;
  font-weight: 500;

  letter-spacing: 0.08em;

  color: #bbbbbb;
}


.banner-editor-field input {
  width: 100%;

  padding: 9px 10px;

  border: 1px solid #eeeeee;

  outline: none;

  background: #ffffff;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 16px;

  color: #555555;

  transition: border-color 0.2s ease;
}


.banner-editor-field input:focus {
  border-color: #e6bdcc;
}


.banner-editor-image-row {
  display: flex;
  align-items: center;

  gap: 10px;
}


.banner-editor-preview {
  display: block;

  width: 96px;
  height: auto;

  border: 1px solid #eeeeee;

  background: #f6f6f6;
}


.banner-editor-preview[hidden] {
  display: none;
}


.banner-editor-preview-empty {
  width: 96px;

  padding: 12px 6px;

  border: 1px dashed #eeeeee;

  font-size: 8.5px;

  letter-spacing: 0.02em;

  line-height: 1.4;

  color: #bbbbbb;

  text-align: center;
}


.banner-editor-preview-empty[hidden] {
  display: none;
}


.banner-editor-change-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 30px;

  padding: 6px 14px;

  border: 1px solid #e5e5e5;
  border-radius: 999px;

  background: transparent;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 10px;
  font-weight: 500;

  letter-spacing: 0.03em;

  color: #999999;

  cursor: pointer;

  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}


.banner-editor-change-button:hover {
  border-color: #f0d3de;

  background: #fff5f8;

  color: #d980a2;
}


.banner-editor-upload-message {
  margin: 6px 0 0;

  font-size: 9px;

  letter-spacing: 0.02em;

  color: #d980a2;

  min-height: 11px;
}


.banner-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 8px;
}


.banner-editor-delete {
  margin-right: auto;

  padding: 8px 14px;

  border: 1px solid #eeeeee;
  border-radius: 999px;

  background: transparent;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 10px;

  color: #cccccc;

  cursor: pointer;
}


.banner-editor-delete:hover {
  color: #ee9fbd;

  border-color: #f0d3de;
}


.banner-editor-cancel,
.banner-editor-save {
  padding: 8px 16px;

  border: 1px solid #e5e5e5;
  border-radius: 999px;

  background: transparent;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 10px;
  font-weight: 500;

  color: #999999;

  cursor: pointer;
}


.banner-editor-save:hover {
  border-color: #f0d3de;

  background: #fff5f8;

  color: #d980a2;
}


.banner-editor-message {
  min-height: 12px;

  font-size: 10px;

  letter-spacing: 0.02em;

  color: #d98080;

  text-align: center;
}


/* =========================================================
   POST DETAIL
========================================================== */

.post-detail {
  width: 100%;
}


.post-detail[hidden] {
  display: none;
}


.post-detail-title {
  margin:
    0
    0
    10px;

  font-size: 18px;
  font-weight: 500;

  line-height: 1.5;

  letter-spacing: 0.03em;

  color: #444444;
}


.post-detail-date {
  margin-bottom: 36px;

  font-size: 11px;

  letter-spacing: 0.05em;

  color: #bbbbbb;
}


.post-detail-content-wrap {
  display: flex;
  justify-content: center;

  overflow: hidden;
}


.post-detail-content-wrap[hidden] {
  display: none;
}


.post-detail-content {
  padding-bottom: 60px;

  font-size: 13px;

  line-height: 1.9;

  letter-spacing: 0.025em;

  color: #555555;

  white-space: normal;

  word-break: keep-all;
}


/*
  HTML 모드 글이 화면보다 넓을 때 posts-view.js가
  transform: scale()로 축소한다.

  origin을 top left로 하면 축소된 결과물이 원본 박스의
  왼쪽 위 구석에 붙어버려서, wrap의 justify-content:center가
  그 "원본 크기 박스"를 중앙에 둬도 실제 보이는 이미지는
  왼쪽으로 치우쳐 보인다. top center로 축소축을 잡아야
  결과물의 중심이 박스 중심(=wrap 중심)과 일치해서
  진짜 가운데 정렬이 된다.
*/

.post-detail-content.is-html-content {
  transform-origin: top center;
}


/* =========================================================
   SECRET GATE

   비밀글을 주인이 아닌 사람이 열었을 때 본문 대신 보이는
   비밀번호 입력 폼.
========================================================== */

.post-secret-gate {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 10px;

  padding:
    70px
    20px
    90px;

  text-align: center;
}


.post-secret-gate[hidden] {
  display: none;
}


.post-secret-gate-icon {
  font-size: 22px;

  opacity: 0.55;
}


.post-secret-gate-label {
  margin-bottom: 6px;

  font-size: 11px;
  font-weight: 500;

  letter-spacing: 0.04em;

  color: #999999;
}


.post-secret-gate-input {
  width: 100%;
  max-width: 220px;

  padding: 9px 12px;

  border: 1px solid #eeeeee;
  border-radius: 0;

  outline: none;

  background: #ffffff;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 16px;

  text-align: center;

  color: #555555;

  transition: border-color 0.2s ease;
}


.post-secret-gate-input:focus {
  border-color: #e6bdcc;
}


.post-secret-gate-button {
  margin-top: 4px;

  padding: 8px 22px;

  border: 1px solid #e5e5e5;
  border-radius: 999px;

  background: transparent;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 11px;
  font-weight: 500;

  letter-spacing: 0.05em;

  color: #999999;

  cursor: pointer;

  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}


.post-secret-gate-button:hover {
  border-color: #f0d3de;

  background: #fff5f8;

  color: #d980a2;
}


.post-secret-gate-message {
  min-height: 12px;

  font-size: 10px;

  letter-spacing: 0.02em;

  color: #d98080;
}


/* =========================================================
   POST MODE
========================================================== */

body.post-mode #loveEvent {
  display: none;
}


body.post-mode #viewerArea {
  pointer-events: none;
}

body.post-mode .site-footer {
  display: none;
}

body.post-mode .menu-button,
body.post-mode .menu-panel,
body.post-mode .music-button {
  z-index: 100;
}


/* =========================================================
   POST BODY STYLE
========================================================== */

.post-body-paragraph {
  white-space: pre-wrap;
}


.post-body-paragraph:last-child {
  margin-bottom: 0 !important;
}


.post-action,
.post-dialogue {
  font-size: inherit;

  line-height: inherit;

  letter-spacing: inherit;
}


/* =========================================================
   INLINE EDITOR STYLES
   실제 글 + 미리보기 공용
========================================================== */


.post-inline-highlight {
  padding:
    0
    0.12em;

  border-radius:
    2px;

  box-decoration-break:
    clone;

  -webkit-box-decoration-break:
    clone;
}


/* =========================================================
   POST DETAIL HEADING
========================================================== */

.post-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  width: 100%;

  margin-bottom: 10px;
}


.post-detail-heading
.post-detail-title {
  flex: 1;

  min-width: 0;

  margin: 0;
}


/* =========================================================
   EDIT / DELETE
========================================================== */

.post-detail-actions {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  gap: 8px;

  padding-top: 5px;
}


.post-detail-actions[hidden] {
  display: none;
}


.post-action-button {
  padding: 0;

  border: 0;

  background: transparent;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 9px;
  font-weight: 400;

  letter-spacing: 0.05em;

  color: #bbbbbb;

  cursor: pointer;

  transition:
    color 0.2s ease;

  -webkit-tap-highlight-color:
    transparent;
}


.post-action-button:hover {
  color: #777777;
}


.post-delete-button:hover {
  color: #ee9fbd;
}


/* =========================================================
   FONT SCALE (독자용 글자 크기 +/-)

   프리셋이 정한 기준 크기에 곱해서 쓰는 방식이라
   프리셋 자체는 안 건드림. posts-reader-scale.js 참고.
========================================================== */

.post-detail-font-scale {
  display: flex;
  align-items: center;

  gap: 2px;

  flex-shrink: 0;
}


.post-detail-font-scale[hidden] {
  display: none;
}


.post-detail-font-scale-button {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  padding: 0;

  border: 1px solid #eeeeee;
  border-radius: 999px;

  background: transparent;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 11px;
  font-weight: 500;

  line-height: 1;

  color: #999999;

  cursor: pointer;

  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;

  -webkit-tap-highlight-color:
    transparent;
}


.post-detail-font-scale-button:hover {
  border-color: #f0d3de;

  background: #fff5f8;

  color: #d980a2;
}


.post-detail-font-scale-button:disabled {
  opacity: 0.35;

  cursor: default;
}


/* =========================================================
   RELATED POSTS
========================================================== */

.post-related {
  width: 100%;

  margin-top: 56px;

  padding-top: 24px;

  border-top:
    1px solid #eeeeee;
}


.post-related-title {
  margin-bottom: 12px;

  font-size: 10px;
  font-weight: 500;

  line-height: 1.4;

  letter-spacing: 0.10em;

  color: #999999;
}


.post-related-list {
  width: 100%;
}


.post-related-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  width: 100%;

  padding:
    8px
    1px;

  color: #777777;

  text-decoration: none;

  border-bottom:
    1px solid #f5f5f5;

  cursor: pointer;

  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}


.post-related-item:hover {
  padding-left: 4px;

  color: #ee9fbd;
}


.post-related-item-title {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 10.5px;

  line-height: 1.5;

  letter-spacing: 0.025em;
}


.post-related-item-date {
  flex: 0 0 auto;

  font-size: 9px;

  letter-spacing: 0.04em;

  color: #c2c2c2;
}


.post-related-item.current {
  color: #c5c5c5;

  cursor: default;

  pointer-events: none;
}


.post-related-item.current
.post-related-item-title::before {
  content: "♡";

  margin-right: 6px;

  color: #e7b3c7;
}


.post-related-empty {
  padding:
    8px
    0;

  font-size: 9px;

  letter-spacing: 0.04em;

  color: #c0c0c0;
}


/* =========================================================
   POST EDITOR
========================================================== */

.post-editor {
  width: 100%;
}


.post-editor[hidden] {
  display: none;
}


/* =========================================================
   EDITOR FIELD
========================================================== */

.post-editor-field {
  width: 100%;

  margin-bottom: 24px;
}


.post-editor-field > label {
  display: block;

  margin-bottom: 8px;

  font-size: 9px;
  font-weight: 500;

  letter-spacing: 0.10em;

  color: #999999;
}

/* =========================================================
   INPUT / SELECT
========================================================== */

.post-editor-input {
  width: 100%;

  min-height: 38px;

  padding:
    8px
    10px;

  border:
    1px solid #eeeeee;

  border-radius: 0;

  outline: none;

  background: #ffffff;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 12px;
  font-weight: 400;

  line-height: 1.5;

  letter-spacing: 0.025em;

  color: #555555;

  transition:
    border-color 0.2s ease;
}


.post-editor-input:focus {
  border-color: #e6bdcc;
}


/* =========================================================
   EDITOR TOOLBAR
========================================================== */

.post-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap:
    8px
    18px;

  width: 100%;

  margin-bottom: 9px;

  padding:
    8px
    10px;

  border:
    1px solid #eeeeee;

  background:
    rgba(
      250,
      250,
      250,
      0.55
    );
}


.post-editor-tool-group {
  display: flex;
  align-items: center;

  gap: 7px;

  min-height: 24px;
}


.post-editor-tool-label {
  margin-right: 2px;

  font-size: 8px;
  font-weight: 500;

  line-height: 1;

  letter-spacing: 0.10em;

  color: #b3b3b3;

  user-select: none;
}


/* =========================================================
   TOOL BUTTON
========================================================== */

.post-editor-tool-button {
  padding:
    4px
    6px;

  border: 0;

  background: transparent;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 9px;
  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.025em;

  color: #999999;

  cursor: pointer;

  transition:
    color 0.18s ease,
    background 0.18s ease;

  -webkit-tap-highlight-color:
    transparent;
}


.post-editor-tool-button:hover {
  color: #555555;
}


.post-editor-tool-button.active,
.post-editor-tool-button[aria-pressed="true"] {
  color: #d980a2;

  background:
    #fff5f8;
}


/* =========================================================
   PRESET SELECT
========================================================== */

.post-editor-preset-select {
  padding:
    3px
    6px;

  border:
    1px solid
    #e5e5e5;

  border-radius: 6px;

  background: #ffffff;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 9px;
  font-weight: 400;

  letter-spacing: 0.025em;

  color: #999999;

  cursor: pointer;

  max-width: 120px;
}


.post-editor-tool-button.clear {
  color: #bbbbbb;
}


.post-editor-tool-button.clear:hover {
  color: #888888;
}



/* =========================================================
   HIGHLIGHT / POINT COLOR CONTROL

   ★ 예전엔 preset(원클릭 적용) + custom(컬러피커) 두 버튼이
   있었는데, 하나로 합쳐서 이 스와치 자체가 컬러피커 트리거가
   됐다 — 초기 색은 QUOTE PRESET 값을 따름(posts-style-preset.js
   updatePresetHighlightSwatch/updatePresetPointColorSwatch).
   버튼이 하나뿐이라 텍스트 라벨 없이 스와치만 남았고, 대신
   눈에 잘 띄도록 테두리를 줬다.
========================================================== */

.post-highlight-custom-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  padding: 0;

  border:
    1px solid
    #e5e5e5;

  border-radius: 50%;

  background: transparent;

  cursor: pointer;

  transition:
    border-color 0.18s ease,
    transform 0.16s ease;

  -webkit-tap-highlight-color:
    transparent;
}


.post-highlight-custom-control:hover {
  border-color: #d5d5d5;

  transform:
    scale(1.06);
}


/* =========================================================
   HIGHLIGHT SWATCH
========================================================== */

.post-highlight-swatch {
  display: block;

  width: 15px;
  height: 15px;

  flex:
    0
    0
    15px;

  border:
    1px solid
    rgba(
      0,
      0,
      0,
      0.07
    );

  border-radius: 50%;

  background:
    #f4dce6;
}


/* =========================================================
   CUSTOM COLOR INPUT

   실제 input은 숨기고
   label을 누르면 컬러피커가 열림.
========================================================== */

.post-highlight-color-input {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;

  opacity: 0;

  pointer-events: none;
}

/* =========================================================
   MOBILE FLOATING HIGHLIGHT MENU

   본문에서 텍스트를 선택했을 때 그 근처에 뜨는
   작은 메뉴. 상단 고정 툴바까지 갈 필요가 없게 해준다.
   위치는 JS(positionEditorFloatingMenu)가 매번 계산해서
   top/left 인라인 스타일로 지정한다.
========================================================== */

.post-editor-floating-menu {
  position: fixed;

  z-index: 500;

  display: flex;
  align-items: center;

  gap: 4px;

  padding: 4px 8px;

  border:
    1px solid
    #eeeeee;

  border-radius: 999px;

  background: #ffffff;

  box-shadow:
    0
    6px
    24px
    rgba(
      0,
      0,
      0,
      0.14
    );
}


.post-editor-floating-menu[hidden] {
  display: none;
}


/*
  ★ 예전엔 이 안의 스와치만 동그라미 대신 둥근 네모로 바꿔서
  "네모 안에 또 네모" 처럼 보였다 — 고정 툴바와 똑같이 원형
  그대로 두고(위 .post-highlight-custom-control/.post-highlight-swatch
  기본값이 이미 둥근 원), 여기서 따로 각지게 덮어쓰지 않는다.
*/

/* =========================================================
   RICH TEXT EDITOR
========================================================== */

.post-editor-html-textarea[hidden] {
  display: none;
}


.post-editor-richtext,
.post-editor-html-textarea {
  display: block;

  width: 100%;
  min-height: 420px;
  max-height: 60vh;

  overflow-y: auto;

  padding:
    12px
    10px;

  border:
    1px solid #eeeeee;

  border-radius: 0;

  outline: none;

  background: #ffffff;

  font-family:
    "Pretendard",
    sans-serif;

  /*
    작성 중 글씨는 저장 후 뷰어/프리뷰에 적용되는 프리셋
    스타일과 별개 — 여기서 크게 보일 필요가 없어서 작게
    유지한다(모바일은 iOS 자동 확대 방지 때문에 16px 고정,
    posts-mobile.css 참고).
  */

  font-size: 11px;
  font-weight: 400;

  line-height: 1.8;

  letter-spacing: 0.015em;

  color: #555555;

  white-space: pre-wrap;

  word-break: keep-all;
  overflow-wrap: break-word;

  caret-color: #555555;

  transition:
    border-color 0.2s ease;
}


.post-editor-richtext:focus {
  border-color: #e6bdcc;
}


.post-editor-richtext:empty::before {
  content: attr(data-placeholder);

  color: #c5c5c5;

  pointer-events: none;
}


.post-editor-richtext > div,
.post-editor-richtext > p {
  margin: 0;
}


/* 하이라이트는 편집창에서도 바로 보임 */

.post-editor-richtext
.post-inline-highlight {
  padding:
    0
    0.12em;

  border-radius: 2px;

  box-decoration-break: clone;

  -webkit-box-decoration-break: clone;
}


/* 드래그 선택 표시 */

.post-editor-richtext::selection,
.post-editor-richtext *::selection {
  background:
    rgba(
      238,
      159,
      189,
      0.22
    );
}


.post-editor-field > label,
.post-editor-content-label {
  display: block;

  font-size: 9px;
  font-weight: 500;

  letter-spacing: 0.10em;

  color: #999999;
}


.post-editor-field > label {
  margin-bottom: 8px;
}


/* CONTENT + 안내문 */

.post-editor-content-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  width: 100%;

  margin-bottom: 8px;
}


.post-editor-content-label {
  flex: 0 0 auto;
}


/*
  OOC / HTML 토글 버튼이 나란히 놓이는 줄.
*/

.post-editor-ooc-html-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 8px;
}


/*
  CONTENT 옆의 "HTML" 모드 전환 버튼.
  누르면 리치텍스트 에디터 대신 raw HTML textarea로 바뀐다.
*/

.post-editor-content-mode-toggle,
.post-editor-ooc-toggle {
  padding:
    4px 10px;

  border:
    1px solid
    #e5e5e5;

  border-radius: 999px;

  background: transparent;

  color: #bbbbbb;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 9px;
  font-weight: 500;

  letter-spacing: 0.08em;

  cursor: pointer;

  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}


.post-editor-content-mode-toggle[aria-pressed="true"] {
  border-color: #f0d3de;

  background: #fff5f8;

  color: #d980a2;
}


/*
  HTML로 직접 작성하는 textarea.
  코드처럼 보이게 monospace + 줄바꿈 유지.
*/

.post-editor-html-textarea {
  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace;

  font-size: 11px;

  line-height: 1.6;

  white-space: pre;

  resize: vertical;
}


/* =========================================================
   OOC

   독자에게는 보이지 않는 메모. 본문과 구분되게
   살짝 다른(옅은 노란빛) 배경을 쓴다.
========================================================== */

.post-editor-ooc-field {
  margin-bottom: 16px;
}


.post-editor-ooc-toggle[aria-expanded="true"] {
  border-color: #f0d3de;

  background: #fff5f8;

  color: #d980a2;
}


.post-editor-ooc-textarea {
  margin-top: 8px;

  min-height: 90px;

  background: #fffdf5;

  resize: vertical;
}


/*
  비밀글 비밀번호 입력창. OOC와 겹치지 않게 살짝 다른
  (옅은 분홍빛) 배경으로 구분.
*/

.post-editor-secret-password-input {
  margin-top: 8px;

  background: #fff8fa;
}


.post-editor-message {
  min-width: 0;

  margin:
    10px
    0
    0;

  text-align: center;

  font-size: 10px;

  line-height: 1.4;

  letter-spacing: 0.03em;

  color: #df8eac;
}

/* =========================================================
   PREVIEW TOGGLE
   데스크톱에서는 숨김.
========================================================== */

.post-editor-preview-toggle {
  display: none;
}


/* =========================================================
   PREVIEW SECTION
   DESKTOP
========================================================== */

.post-editor-preview-section {
  width: 100%;

  margin-top: 38px;

  padding-top: 20px;

  border-top:
    1px solid #eeeeee;
}


/*
  데스크톱에서는 overlay 필요 없음.
*/

.post-editor-preview-backdrop {
  display: none;
}


.post-editor-preview-drag-handle {
  display: none;
}


.post-editor-preview-sheet {
  width: 100%;
}


/* =========================================================
   PREVIEW HEADER
========================================================== */

.post-editor-preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  margin-bottom: 8px;
}


.post-editor-preview-label {
  font-size: 9px;
  font-weight: 500;

  letter-spacing: 0.10em;

  color: #999999;
}


/* =========================================================
   TITLE / SOURCE VISIBILITY TOGGLE

   프리뷰(및 export)에서 제목/출처를 잠깐 껐다 켜서
   확인해볼 수 있는 세션 한정 스위치.
   실제 QUOTE 프리셋 설정은 건드리지 않음.
========================================================== */

.post-editor-preview-visibility-controls {
  display: flex;
  flex-direction: column;

  gap: 8px;

  margin-bottom: 12px;
}


/*
  한 줄에 해당하는 컨트롤 묶음(title/align/body, ratio,
  source 순서). 예전에는 이 전부가 하나의 flex-wrap 줄에
  뒤섞여 있었는데, 특히 ratio가 다른 컨트롤들 사이에 끼어
  모바일에서 지저분해 보여서 줄 단위로 분리했다.
*/

.post-editor-preview-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 6px;
}


.post-editor-preview-visibility-toggle {
  padding: 3px 9px;

  border:
    1px solid
    #e5e5e5;

  border-radius: 4px;

  background: transparent;

  color: #bbbbbb;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 9px;
  font-weight: 400;

  letter-spacing: 0.04em;

  cursor: pointer;

  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;

  -webkit-tap-highlight-color:
    transparent;
}


.post-editor-preview-visibility-toggle[aria-pressed="true"] {
  border-color: #f0d3de;

  background: #fff5f8;

  color: #d980a2;
}


.post-editor-preview-visibility-toggle[aria-pressed="false"] {
  color: #cccccc;

  text-decoration: line-through;
}


/*
  ratio 트리거는 on/off가 아니라 "펼침/접힘"이라
  취소선을 쓰지 않음(꺼짐 = 그냥 접힌 상태).
*/

.post-editor-preview-ratio-trigger[aria-pressed="false"] {
  color: #bbbbbb;

  text-decoration: none;
}


/* =========================================================
   SUBROW (source position 등, 조건부로 펼쳐지는 한 줄)
========================================================== */

.post-editor-preview-subrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 6px;
}


.post-editor-preview-subrow[hidden] {
  display: none;
}


.post-editor-preview-subrow-label {
  color: #cccccc;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 9px;

  letter-spacing: 0.04em;
}


/*
  ★ align/body align/source position — 옵션이 여러 개(3~4개)로
  늘어나면서 버튼을 줄줄이 늘어놓으면 가독성이 떨어져서
  드롭다운 하나로 묶었다. title/source 표시 토글, ratio는
  자주 누르는 on/off라 버튼으로 남겨둠.
*/

.post-editor-preview-select {
  padding: 3px 6px;

  border:
    1px solid
    #e5e5e5;

  border-radius: 4px;

  background: #ffffff;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 9px;
  font-weight: 400;

  letter-spacing: 0.025em;

  color: #999999;

  cursor: pointer;
}


/* =========================================================
   RATIO CONTROLS
========================================================== */

.post-editor-preview-ratio-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 6px;
}


.post-editor-preview-ratio-controls[hidden] {
  display: none;
}


.post-editor-preview-ratio-button {
  padding: 3px 9px;

  border:
    1px solid
    #e5e5e5;

  border-radius: 4px;

  background: transparent;

  color: #bbbbbb;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 9px;
  font-weight: 400;

  letter-spacing: 0.04em;

  cursor: pointer;

  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;

  -webkit-tap-highlight-color:
    transparent;
}


.post-editor-preview-ratio-button[aria-pressed="true"] {
  border-color: #f0d3de;

  background: #fff5f8;

  color: #d980a2;
}


.post-editor-preview-ratio-custom-inputs {
  display: flex;
  align-items: center;

  gap: 4px;
}


.post-editor-preview-ratio-custom-input {
  width: 34px;

  padding: 3px 4px;

  border:
    1px solid
    #e5e5e5;

  border-radius: 6px;

  background: #ffffff;

  color: #666666;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 9px;

  text-align: center;
}


.post-editor-preview-ratio-custom-sep {
  color: #cccccc;

  font-size: 9px;
}


.post-editor-preview-close {
  display: none;

  padding: 2px 4px;

  border: 0;

  background: transparent;

  color: #aaaaaa;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 15px;

  cursor: pointer;
}


/* =========================================================
   PREVIEW STAGE
========================================================== */

.post-editor-preview-stage {
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;

  /*
    ★ 높이를 JS가 캔버스 크기에 맞춰 계속 늘려주던 방식은
    세로로 긴 비율/AUTO에서 뷰포트보다 큰 stage를 만들어
    캔버스 아랫부분이 화면 밖으로 잘려 보이는 문제가 있었다
    (admin/admin.css의 .quote-preview-stage에서 이미 같은
    이유로 고친 적 있음). stage 자체는 고정 높이로 두고,
    캔버스는 JS(posts-preview-settings.js의
    applyEditorPreviewScale)가 이 상자의 width/height를 모두
    고려해 안에 통째로 들어오도록 scale()한다 —
    object-fit: contain과 같은 개념.
  */

  height:
    clamp(
      440px,
      55vh,
      620px
    );

  padding:
    10px
    0
    6px;

  overflow: hidden;
}


/*
  JS가 실제 Vibe 프리셋을 읽어서
  아래 CSS 변수들을 넣어줄 예정.

  예:
  --post-preview-aspect: 4 / 5
  --post-preview-page-width: 1080
  --post-preview-page-height: 1350

  여기서는 비율을 결정하지 않음.
*/

.post-editor-preview-pages {
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: flex-start;
}


/* =========================================================
   PREVIEW PAGE
========================================================== */

.post-editor-preview-page {
  position: relative;

  box-sizing: border-box;

  /*
    페이지 나누기 계산이 PC/모바일에서 항상 동일하도록
    실제 레이아웃 너비는 화면 크기와 무관하게 항상 520px로 고정.
    좁은 화면에서는 JS(applyEditorPreviewScale)가
    이 520px 캔버스를 통째로 축소해서 보여줌.
  */

  width: 520px;

  aspect-ratio:
    var(
      --post-preview-aspect,
      4 / 5
    );

-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;

  min-height: 0;

  padding:
    var(
      --post-preview-padding-y,
      34px
    )
    var(
      --post-preview-padding-x,
      30px
    );

  border:
    1px solid #eeeeee;

  background: #ffffff;

  overflow: hidden;

  box-shadow:
    0
    4px
    20px
    rgba(
      0,
      0,
      0,
      0.035
    );

      flex: 0 0 auto;
  flex-shrink: 0;
}

.post-editor-preview-page[hidden] {
  display: none !important;
}


/* =========================================================
   PREVIEW TITLE
========================================================== */

.post-editor-preview-title {
  margin-bottom:
    var(
      --post-preview-title-gap,
      22px
    );

  font-size: 16px;
  font-weight: 500;

  line-height: 1.5;

  letter-spacing: 0.03em;

  color: #444444;

  word-break: keep-all;
}


/* =========================================================
   PREVIEW CONTENT
========================================================== */

.post-editor-preview-content {
  width: 100%;

  font-size: 13px;
  font-weight: 400;

  line-height: 1.9;

  letter-spacing: 0.025em;

  color: #555555;

  white-space: normal;

  word-break: keep-all;
}


.post-editor-preview-content
.post-body-paragraph {
  white-space: pre-wrap;
}


/*
  자동 페이지 계산할 때
  한 페이지 밖 내용이 절대로 삐져나오지 않게.
*/

.post-editor-preview-page {
  contain: layout paint;
}

/* =========================================================
   PAGE BREAK BUTTON
========================================================== */

.post-editor-undo-group {
  margin-left: auto;
}


.post-editor-tool-button.page-break {
  color: #a9a9a9;
}


.post-editor-tool-button.page-break:hover {
  color: #d980a2;

  background: #fff5f8;
}


.post-editor-tool-button.undo {
  color: #a9a9a9;
}


.post-editor-tool-button.undo:hover {
  color: #d980a2;

  background: #fff5f8;
}


.post-editor-tool-button.undo:disabled {
  color: #dddddd;

  cursor: default;
}


.post-editor-tool-button.undo:disabled:hover {
  background: transparent;
}


/* =========================================================
   PAGE BREAK MARKER
   에디터 안에서만 보이는 구분선
========================================================== */

.post-editor-page-break {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;

  margin:
    18px
    0;

  color: #c4a6b2;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 8px;

  line-height: 1;

  letter-spacing: 0.10em;

  user-select: none;
}


.post-editor-page-break::before,
.post-editor-page-break::after {
  content: "";

  flex: 1;

  height: 1px;

  background: #eeeeee;
}


.post-editor-page-break::before {
  margin-right: 8px;
}


.post-editor-page-break::after {
  margin-left: 8px;
}


/* =========================================================
   PREVIEW PAGINATION

   더 이상 캔버스 아래 흰 바탕 위에 얹힌 툴바가 아니라,
   stage(캔버스 뷰포트) 안쪽 하단에 가볍게 떠 있는
   반투명 오버레이. 캔버스를 가리지 않도록 배경은
   최소한만 쓰고, 화살표는 원형 버튼으로 분리.

   ★ 카드 배경만 옅게(0.35) 하고 opacity는 안 건드림 —
   컨테이너 전체에 opacity를 주면 화살표/페이지 숫자
   글자까지 같이 흐려져서 오히려 안 보이게 된다. 평소엔
   배경 카드가 은은하게 비치다가, 마우스를 올리면(조작하기
   편하도록) 카드가 또렷해진다.
========================================================== */

.post-editor-preview-pagination {
  position: absolute;

  left: 50%;
  bottom: 10px;

  transform:
    translateX(-50%);

  z-index: 4;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 3px;

  border-radius: 999px;

  background:
    rgba(
      255,
      255,
      255,
      0.35
    );

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  box-shadow:
    0
    2px
    10px
    rgba(
      0,
      0,
      0,
      0.04
    );

  transition:
    background 0.2s ease;

  pointer-events: none;
}


.post-editor-preview-pagination:hover,
.post-editor-preview-pagination:focus-within {
  background:
    rgba(
      255,
      255,
      255,
      0.8
    );
}


.post-editor-preview-pagination > * {
  pointer-events: auto;
}


.post-editor-preview-pagination[hidden] {
  display: none;
}


.post-editor-preview-page-button {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background:
    rgba(
      0,
      0,
      0,
      0.05
    );

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 16px;
  font-weight: 300;

  line-height: 1;

  color: #888888;

  cursor: pointer;

  transition:
    color 0.18s ease,
    background 0.18s ease;

  -webkit-tap-highlight-color:
    transparent;
}


.post-editor-preview-page-button:hover {
  color: #df8eac;

  background:
    rgba(
      223,
      142,
      172,
      0.12
    );
}


.post-editor-preview-page-button:disabled {
  color: #cccccc;

  background:
    rgba(
      0,
      0,
      0,
      0.03
    );

  cursor: default;
}


/* =========================================================
   PREVIEW DESKTOP ZOOM CONTROL

   모바일은 핀치 줌이 있어서 이 버튼이 필요 없음
   (posts-mobile.css에서 숨김).
========================================================== */

.post-editor-preview-zoom {
  position: absolute;

  top: 10px;
  right: 10px;

  z-index: 4;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 4px;

  padding: 3px;

  border-radius: 999px;

  background:
    rgba(
      255,
      255,
      255,
      0.35
    );

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  box-shadow:
    0
    2px
    10px
    rgba(
      0,
      0,
      0,
      0.04
    );

  transition:
    background 0.2s ease;
}


.post-editor-preview-zoom:hover,
.post-editor-preview-zoom:focus-within {
  background:
    rgba(
      255,
      255,
      255,
      0.8
    );
}


.post-editor-preview-zoom-button {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background:
    rgba(
      0,
      0,
      0,
      0.05
    );

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 13px;
  font-weight: 300;

  line-height: 1;

  color: #888888;

  cursor: pointer;

  transition:
    color 0.18s ease,
    background 0.18s ease;

  -webkit-tap-highlight-color:
    transparent;
}


.post-editor-preview-zoom-button:hover {
  color: #df8eac;

  background:
    rgba(
      223,
      142,
      172,
      0.12
    );
}


.post-editor-preview-zoom-button:disabled {
  color: #cccccc;

  background:
    rgba(
      0,
      0,
      0,
      0.03
    );

  cursor: default;
}


.post-editor-preview-zoom-level {
  min-width: 30px;

  text-align: center;

  font-size: 8.5px;
  font-weight: 500;

  color: #999999;
}


.post-editor-preview-page-indicator {
  min-width: 36px;

  text-align: center;

  font-size: 9px;
  font-weight: 500;

  letter-spacing: 0.06em;

  color: #888888;
}

/* =========================================================
   PREVIEW ACTION / DIALOGUE
========================================================== */

.post-editor-preview-content
.post-action {
  color: #888888;
}


.post-editor-preview-content
.post-dialogue {
  color: inherit;
}


/* =========================================================
   EDITOR BUTTONS
========================================================== */

.post-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 8px;

  margin-top: 22px;
}


.post-editor-button {
  min-width: 54px;

  padding:
    7px
    10px;

  border:
    1px solid #e8e8e8;

  border-radius: 0;

  background: #ffffff;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 9px;
  font-weight: 400;

  letter-spacing: 0.06em;

  color: #999999;

  cursor: pointer;

  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;

  -webkit-tap-highlight-color:
    transparent;
}


.post-editor-button:hover {
  color: #666666;

  border-color: #dddddd;
}


.post-editor-button.save:hover {
  color: #d985a5;

  border-color: #e8c1d0;

  background: #fffafb;
}

.post-editor-button.export,
.post-editor-button.copy {
  color: #888888;
}


.post-editor-button.export:hover,
.post-editor-button.copy:hover {
  color: #ee9fbd;

  border-color: #e8c1d0;

  background: #fffafb;
}

.post-editor-button:disabled {
  opacity: 0.5;

  cursor: default;
}



/* =========================================================
   EDITOR MODE
========================================================== */

body.post-editor-mode
.post-header {
  margin-bottom: 30px;
}


/* =========================================================
   POSTS FOOTER
   게시글/카테고리/에디터 맨 마지막
========================================================== */

.post-site-footer {
  flex: 0 0 auto;

  width: 100%;

  margin:
    auto
    auto
    0;

  padding:
    70px
    0
    max(
      8px,
      env(safe-area-inset-bottom)
    );

  text-align: center;

  font-family:
    "Pretendard",
    sans-serif;

  color: #c7c7c7;
}

.post-today-count {
  margin-bottom: 5px;

  font-size: 9px;

  letter-spacing: 0.08em;
}


.post-copyright {
  font-size: 8px;

  letter-spacing: 0.07em;

  color: #d0d0d0;
}