/* =========================================================
   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;
}