/* Summerache Next · admin.css — 관리자 전용 UI */

.admin-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 18px;
  background: rgba(20, 24, 22, .82);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  color: #f2efe6; font-size: .8rem; letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.admin-bar-tag { font-weight: 600; opacity: .95; }
.admin-bar-btn {
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08);
  color: #f2efe6; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; transition: background .2s;
}
.admin-bar-btn:hover { background: rgba(255,255,255,.2); }
.admin-bar-link { margin-left: auto; color: rgba(242,239,230,.8); text-decoration: none; }
.admin-bar-link:hover { color: #fff; text-decoration: underline; }
/* 관리자 바 자리는 바깥 여백이 아니라 각 칸 안쪽으로 확보한다.
   (바깥에 주면 그만큼 배경 이미지가 띠처럼 드러난다) */
body[data-admin="1"] .sidebar { padding-top: calc(var(--sidebar-pad-top, 28px) + 38px); }
body[data-admin="1"] .content { padding-top: calc(clamp(38px, 5vw, 76px) + 38px); }

.footer-admin { color: inherit; opacity: .6; text-decoration: none; }
.footer-admin:hover { opacity: 1; text-decoration: underline; }

/* 목록 상단 새 글 버튼 */
.admin-listbar { margin: 0 0 18px; }
.admin-newbtn {
  border: 1px dashed color-mix(in srgb, var(--ink) 40%, transparent);
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  color: var(--ink); padding: 10px 18px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: .9rem; transition: background .2s, border-color .2s;
}
.admin-newbtn:hover { background: color-mix(in srgb, var(--paper) 85%, transparent); border-color: var(--ink); }

/* 미니 액션 버튼 */
.admin-actions { display: flex; gap: 8px; align-items: center; }
.admin-mini {
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  background: rgba(255,255,255,.6); color: var(--ink);
  padding: 4px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .78rem; line-height: 1.4; transition: all .18s;
}
.admin-mini:hover { background: #fff; border-color: var(--ink); }
.admin-mini--danger { color: #a23b3b; border-color: rgba(162,59,59,.4); }
.admin-mini--danger:hover { background: #fff1f0; border-color: #a23b3b; }
.admin-badge, .admin-hint, .journal-item.is-private time { color: #a2743b; }
.admin-badge { font-size: .72rem; border: 1px solid rgba(162,116,59,.4); padding: 2px 8px; border-radius: 999px; }

/* 목록: 구분선은 항목 전체(글 + 버튼) 아래로 내리고,
   버튼은 본문 컬럼(번호 56px + gap 22px)에 맞춰 정렬한다. */
.journal-item { position: relative; border-bottom: 1px solid var(--line-strong); }
body[data-admin="1"] .journal-row { border-bottom: none; }
.journal-item .admin-actions { padding: 0 0 22px 78px; }

/* 상세글: 두 컬럼 그리드에서 한 줄 전체를 차지하게 한다. */
.admin-actions--entry { grid-column: 1 / -1; margin: 0 0 26px; }
.admin-actions--inline { margin-bottom: 12px; }
.admin-actions--overlay {
  position: absolute; top: 10px; right: 10px; opacity: 0; transition: opacity .2s;
  background: rgba(255,255,255,.5); padding: 6px; border-radius: 12px; backdrop-filter: blur(4px);
}
figure:hover .admin-actions--overlay { opacity: 1; }

/* 방명록 관리자/폼 */
.guest-admin { margin-top: 10px; }
.secret-key-field:not([hidden]) { display: flex; }
.guest-reveal {
  margin-left: 8px; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  background: rgba(255,255,255,.6); color: var(--ink); border-radius: 999px;
  padding: 2px 10px; font: inherit; font-size: .75rem; cursor: pointer;
}
.guest-reveal:hover { background: #fff; }

/* 표면 서버 저장 버튼 */
.surface-save {
  width: 100%; margin-top: 6px; padding: 10px; cursor: pointer;
  border: none; border-radius: 10px; font: inherit; font-size: .85rem;
  background: var(--ink); color: var(--paper); transition: opacity .2s;
}
.surface-save:hover { opacity: .88; }

/* ── 모달 ── */
.admin-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; }
.admin-modal[hidden] { display: none; }
.admin-modal-backdrop { position: absolute; inset: 0; background: rgba(18,20,18,.5); backdrop-filter: blur(3px); }
.admin-modal-card {
  position: relative; width: min(640px, 94vw); max-height: 90vh; display: flex; flex-direction: column;
  background: var(--paper, #e8e6de); color: var(--ink, #172019);
  border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden;
}
.admin-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.admin-modal-head h2 { margin: 0; font-size: 1.05rem; }
.admin-modal-x { border: none; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink); }
.admin-modal-body { padding: 20px 22px; overflow-y: auto; }
.admin-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.admin-btn-primary { border: none; background: var(--ink); color: var(--paper); padding: 10px 22px; border-radius: 10px; font: inherit; cursor: pointer; }
.admin-btn-primary:disabled { opacity: .5; cursor: default; }
.admin-btn-ghost { border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); background: none; color: var(--ink); padding: 10px 18px; border-radius: 10px; font: inherit; cursor: pointer; }
body.admin-modal-open { overflow: hidden; }

.admin-field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.admin-field > label { font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.admin-field label small { font-weight: 400; opacity: .6; margin-left: 6px; }
.admin-field input[type=text], .admin-field input[type=date], .admin-field select, .admin-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 10px; background: rgba(255,255,255,.7); color: var(--ink); font: inherit;
}
.admin-field textarea { resize: vertical; line-height: 1.6; }
.admin-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.admin-check input { width: auto; }
.admin-hint { font-size: .72rem; opacity: .6; }

/* 이미지 매니저 */
.img-manager { border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); border-radius: 12px; padding: 12px; background: rgba(255,255,255,.4); }
.img-upload { display: inline-flex; cursor: pointer; }
.img-upload span { border: 1px dashed color-mix(in srgb, var(--ink) 40%, transparent); border-radius: 10px; padding: 8px 16px; font-size: .85rem; }
.img-upload:hover span { background: rgba(255,255,255,.6); }
.img-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.img-item { width: 130px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 10px; overflow: hidden; background: #fff; }
.img-item img { width: 100%; height: 100px; object-fit: cover; display: block; }
.img-item-ctrls { display: flex; justify-content: space-between; padding: 4px; }
.img-item-ctrls button { border: none; background: rgba(0,0,0,.05); border-radius: 6px; width: 30px; height: 26px; cursor: pointer; font-size: .8rem; }
.img-item-ctrls button:hover { background: rgba(0,0,0,.12); }
.img-cap { width: 100%; border: none; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); padding: 6px 8px; font: inherit; font-size: .75rem; }
.img-hint { font-size: .72rem; opacity: .55; margin: 10px 0 0; }

@media (max-width: 900px) {
  /* 좁은 화면에서는 번호 컬럼이 34px + gap 12px 로 줄어든다 */
  .journal-item .admin-actions { padding-left: 46px; }
}

@media (max-width: 640px) {
  .admin-modal-card { width: 96vw; max-height: 94vh; }
  .journal-item .admin-actions { padding-left: 46px; padding-bottom: 18px; }
  .admin-bar { gap: 10px; padding: 8px 12px; font-size: .74rem; }
  .admin-actions--overlay { opacity: 1; }
}

/* ── Things: 개발 로그 ── */
.thing-logs { margin-top: clamp(40px, 6vw, 78px); }
.thing-logs-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-strong);
  font-size: 8px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase;
}
.thing-logs-head small { font-weight: 600; opacity: .55; letter-spacing: .1em; }
.thing-logs .journal-list { border-top: none; }

/* Things 목록: 구분선을 항목(글 + 버튼) 아래로 내려 버튼이 선에 겹치지 않게 한다. */
body[data-admin="1"] .thing-row { border-bottom: none; }
.thing-item { border-bottom: 1px solid var(--line-strong); }
.thing-item .admin-actions { margin: 0; padding: 0 0 22px 84px; }

@media (max-width: 900px) {
  .thing-item .admin-actions { padding-left: 0; }
}

/* 배너 편집기 */
.banner-editor { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.banner-item {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 10px; background: rgba(255,255,255,.45);
}
.b-preview { width: 88px; height: 31px; object-fit: cover; border-radius: 3px; background: rgba(0,0,0,.06); }
.banner-inputs { display: flex; flex-direction: column; gap: 6px; }
.banner-inputs input {
  width: 100%; padding: 7px 10px; font: inherit; font-size: .78rem;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 8px; background: #fff; color: var(--ink);
}
.banner-ctrls { display: flex; gap: 4px; }
.banner-ctrls button {
  border: none; background: rgba(0,0,0,.06); border-radius: 6px;
  padding: 5px 8px; font: inherit; font-size: .72rem; cursor: pointer;
}
.banner-ctrls button:hover { background: rgba(0,0,0,.14); }

@media (max-width: 640px) {
  .banner-item { grid-template-columns: 1fr; }
  .b-preview { width: 88px; }
}

/* 글 상자 도구 모음 (굵게) */
.editor-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.editor-tool {
  min-width: 30px; padding: 4px 9px; cursor: pointer; font: inherit; font-size: .8rem;
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius: 7px; background: rgba(255,255,255,.7); color: var(--ink);
}
.editor-tool:hover { background: #fff; border-color: var(--ink); }
.editor-tip { font-size: .68rem; opacity: .55; }

/* 호버 버튼(수정/삭제)이 각 이미지 칸을 기준으로 뜨도록 */
body[data-admin="1"] .drawing,
body[data-admin="1"] .photo-note,
body[data-admin="1"] .thing-intro-images figure {
  position: relative;
}

/* 페이지 머리말 편집 버튼 — 제목 칸 아래 왼쪽(작은 라벨과 같은 줄) */
.admin-actions--head {
  grid-column: 1 / -1;
  margin-top: 14px;
}

/* 편집창도 같은 리듬으로 뜬다 */
.admin-modal:not([hidden]) .admin-modal-backdrop { animation: lbFade .2s ease both; }
.admin-modal:not([hidden]) .admin-modal-card { animation: lbPop .3s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .admin-modal:not([hidden]) .admin-modal-backdrop,
  .admin-modal:not([hidden]) .admin-modal-card { animation: none; }
}

/* 본 날짜 목록(Takes 편집창) */
.date-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.date-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.date-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.date-row .date-input {
  flex: 0 1 190px;
}

.date-row button {
  padding: 4px 9px;
  border: 1px solid var(--line);
  background: none;
  cursor: pointer;
  font-size: var(--fs-micro);
}