:root {
  --bg: #f7f8f9;
  --surface: #ffffff;
  --border: #e5e7eb;
  --text: #0f1419;
  --muted: #667085;
  /* 앱 설명란의 "회색 글씨" 서식 전용. --muted보다 더 옅은 회색입니다. */
  --muted-pale: #9aa4b2;
  --accent: #1d9bf0;
  --accent-hover: #1a8cd8;
  --danger: #e0245e;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  /* 이미지 코멘트 버튼 전용: 반대 테마의 배경색을 반투명하게 채운 값입니다
     (기본 모드에서는 야간 모드 배경색 #15181c를 반투명 검은색으로 사용). */
  --comment-btn-bg: rgba(21, 24, 28, 0.55);
  /* 대화창(.modal-panel) 전용 배경색. 기본 모드는 페이지 배경과 동일(--bg)하고,
     야간 모드에서만 --surface 값으로 살짝 밝게 조정합니다(아래 다크모드 블록). */
  --modal-bg: var(--bg);
}

/* OS 설정이 어두운 모드인데 사용자가 수동으로 "밝게"를 고르지 않았을 때 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15181c;
    --surface: #1e2126;
    --border: #2f3336;
    --text: #e7e9ea;
    --muted: #8b98a5;
    --muted-pale: #6b7684;
    --accent: #1d9bf0;
    --accent-hover: #4db5f5;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    /* 야간 모드에서는 반대로 기본 모드 배경색(#f7f8f9)을 반투명 흰색으로 사용합니다. */
    --comment-btn-bg: rgba(247, 248, 249, 0.55);
    /* 어두워진 배경(오버레이)과 대화창이 잘 구별되도록 대화창만 살짝 밝게. */
    --modal-bg: #1e2126;
  }
}

/* 사용자가 야간 모드 버튼으로 직접 "어둡게"를 골랐을 때 (OS 설정과 무관하게 적용) */
:root[data-theme="dark"] {
  --bg: #15181c;
  --surface: #1e2126;
  --border: #2f3336;
  --text: #e7e9ea;
  --muted: #8b98a5;
  --muted-pale: #6b7684;
  --accent: #1d9bf0;
  --accent-hover: #4db5f5;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --comment-btn-bg: rgba(247, 248, 249, 0.55);
  --modal-bg: #1e2126;
}

* { box-sizing: border-box; }

/* 모바일 브라우저(특히 iOS Safari)는 화면을 가로로 돌리거나 좁은 화면일 때
   "읽기 편하게" 글자 크기를 자동으로 키우는 경우가 있어서, 지정한 font-size가
   그대로 적용되지 않을 수 있습니다. 이걸 막아서 항상 CSS에 적은 크기 그대로
   보이게 합니다. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* Pretendard JP 로딩이 실패하는 경우를 대비해, 각 플랫폼의 한글 시스템 폰트를
     순서대로 넣어뒀습니다 (macOS/iOS: Apple SD Gothic Neo, Windows: Malgun Gothic,
     Android 등 그 외: Noto Sans KR). */
  font-family: "Pretendard JP", "Pretendard", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Hiragino Sans", "Yu Gothic", "Malgun Gothic",
    "Noto Sans KR", sans-serif;
}

/* 로그인 카드 안: 카드 오른쪽 위 구석에 작게 배치 */
.login-card .theme-toggle-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  /* <button>은 기본 글자색이 검정으로 고정돼 있어서, 이 색을 그대로 쓰는
     아이콘(stroke="currentColor")도 야간 모드에서 안 바뀌었습니다. */
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* 앱 화면 헤더 안: 다른 헤더 버튼들과 같은 줄에 자연스럽게 배치. 살짝
   오른쪽으로 치우쳐 보여서 왼쪽으로 옮겼습니다(총 3px). */
.header-actions .theme-toggle-btn {
  padding: 9px 12px;
  position: relative;
  left: -3px;
}

/* 로그아웃 버튼: 글자 없이 아이콘만 있는 원형 버튼입니다(모바일/데스크탑
   공통). 다른 헤더 아이콘 버튼(벨/메뉴)보다 아주 살짝만 작게 뒀습니다. */
#logout-btn,
#kakao-logout-btn,
#sumone-logout-btn {
  padding: 8px 11px;
}
#logout-btn svg,
#kakao-logout-btn svg,
#sumone-logout-btn svg {
  width: 16px;
  height: 16px;
}

.theme-toggle-btn svg {
  display: block;
  width: 16px;
  height: 16px;
}

button, input, textarea, select {
  font-family: inherit;
}

h1 {
  font-size: 20px;
  margin: 0;
}

/* ---------- 로딩 화면 (로그인 상태 확인 중) ---------- */
.loading-view[hidden] {
  display: none;
}
.loading-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px;
}
/* Loading...(15px)보다 한 단계 작은 글씨입니다. */
.loading-comment {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.loading-image {
  display: block;
  max-width: 200px;
  max-height: 200px;
  border-radius: 12px;
  object-fit: contain;
}
.loading-image[hidden] {
  display: none;
}
.loading-dots-text {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
/* 점 개수(0~3개)가 바뀌어도 "Loading" 글자 위치가 옆으로 흔들리지 않도록
   점이 들어갈 자리를 미리 최대 너비만큼 잡아둡니다. */
.loading-dots {
  display: inline-block;
  min-width: 18px;
  text-align: left;
}

/* 데스크탑(768px 이상)에서는 화면이 넓어서 전체적으로 작아 보여서, 이미지와
   글자를 한 단계씩 키웁니다. */
@media (min-width: 768px) {
  .loading-content {
    gap: 18px;
  }
  .loading-comment {
    font-size: 13px;
  }
  .loading-image {
    max-width: 260px;
    max-height: 260px;
  }
  .loading-dots-text {
    font-size: 18px;
  }
  .loading-dots {
    min-width: 22px;
  }
}

/* ---------- 로그인 화면 ---------- */
#login-view[hidden] {
  display: none;
}

#login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow);
}

.login-card h1 { text-align: center; }

.login-sub {
  text-align: center;
  color: var(--muted);
  margin: 0 0 8px;
  font-size: 14px;
}

.login-card input {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}

.login-card button[type="submit"] {
  margin-top: 6px;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

.login-card button[type="submit"]:hover { background: var(--accent-hover); }

.error-text {
  color: var(--danger);
  font-size: 13px;
  margin: 0;
}

/* ---------- 헤더 ---------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.header-actions {
  display: flex;
  gap: 8px;
}

/* "새 대화/카드 추가"(+) 버튼만 다른 헤더 버튼보다 살짝 아래로 내립니다.
   트위터/카카오는 이후 2px 더 위로 옮겨서 원래 위치(0px)로 돌아왔고,
   SumOne만 원래 값(2px 아래)을 유지합니다. */
#sumone-new-card-btn {
  position: relative;
  top: 2px;
}
#new-card-btn,
#kakao-new-card-btn {
  position: relative;
  top: 0px;
}

/* ---------- 우측 사이드바 (X 백업 / 카카오톡 백업 전환) ----------
   평소엔 숨겨져 있다가, 헤더의 메뉴(☰) 아이콘을 누르면 뜨는 오버레이
   패널입니다. 본문 위에 떠 있는 방식이라(레이아웃 공간을 미리 차지하지
   않음) 다시 누르거나 바깥을 클릭하면 사라집니다. */
.app-sidebar[hidden] {
  display: none;
}
.app-sidebar {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 200px;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.12);
  z-index: 30;
}
.app-sidebar.open {
  display: flex;
}

.app-sidebar-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-bottom: 4px;
}
.app-sidebar-close-btn svg {
  width: 18px;
  height: 18px;
}

.app-sidebar-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  padding: 0 8px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.app-sidebar-admin-badge {
  display: block;
  font-size: 11px;
  margin-bottom: 5px;
}
/* display:block을 위에서 지정해두면 hidden 속성의 기본 동작(display:none)이
   묻혀서, 관리자가 아닌데도 "관리자 모드" 글자가 그대로 보이는 문제가
   있었습니다. hidden일 때는 명시적으로 다시 안 보이게 합니다. */
.app-sidebar-admin-badge[hidden] {
  display: none;
}

.app-sidebar-btn {
  width: 100%;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.app-sidebar-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.app-sidebar-btn.selected {
  background: var(--accent);
  color: #fff;
}
.app-sidebar-btn:not(.selected):hover {
  background: var(--border);
}

/* 사이드바 맨 아래 줄은 사이드바가 flex column이라 margin-top:auto를 주면
   그 위 남는 공간을 전부 밀어내고 바닥에 붙습니다. 왼쪽엔 앱 설명 아이콘,
   오른쪽엔 계정 표시(@ae0niandreams)를 나란히 둡니다. */
.app-sidebar-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 아이콘만 있는 버튼이라 다른 항목(20px)보다 살짝 크게(24px) 키웠습니다
   (모바일/데스크탑 공통). 이제 옆에 계정 표시와 나란히 두므로 폭은 내용만큼만. */
.app-sidebar-help-btn {
  width: auto;
  flex-shrink: 0;
}
.app-sidebar-help-btn svg {
  width: 24px;
  height: 24px;
}
.app-sidebar-credit {
  color: var(--muted);
  font-size: 12px;
  padding-right: 8px;
  position: relative;
  top: 3px;
}

.sidebar-menu-btn svg {
  width: 18px;
  height: 18px;
}

.notif-bell-btn {
  position: relative;
}
.notif-bell-btn svg {
  width: 18px;
  height: 18px;
}
/* 안 본 알림이 있으면 벨 아이콘 우측 상단에 테마 컬러 점을 겹쳐 보여줍니다.
   버튼 자체가 아니라 그 안의 아이콘(18px, 위아래 9px/좌우 16px 안쪽에 있음)
   모서리 기준으로 살짝 겹치게 위치를 잡습니다. */
.notif-bell-dot {
  position: absolute;
  top: 6px;
  right: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--surface);
}
.notif-bell-dot[hidden] {
  display: none;
}

/* ---------- 알림 ---------- */
/* 모바일에서만 보이는 반투명 배경(데스크탑은 팝오버 느낌이라 배경을 덮지 않음). */
.notif-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 55;
}
.notif-backdrop[hidden] {
  display: none;
}

/* 기본(모바일)값: 화면 정중앙에 뜸. 데스크탑에서는 JS가 .desktop-anchored를
   붙이고 top/right를 인라인 스타일로 지정해서 bell 아이콘 바로 아래에
   붙입니다(이때 이 중앙 정렬용 left/transform은 꺼줍니다). */
.notif-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(320px, calc(100vw - 32px));
  max-height: 70vh;
  overflow-y: auto;
  background: var(--modal-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 60;
}
.notif-panel[hidden] {
  display: none;
}
.notif-panel.desktop-anchored {
  left: auto;
  transform: none;
}
.notif-panel-header {
  padding: 14px 16px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.notif-panel-list {
  display: flex;
  flex-direction: column;
}
.notif-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.notif-item:last-child {
  border-bottom: none;
}
/* 코멘트 종류 아이콘. 왼쪽에 두고, 문구 세트는 그만큼 오른쪽으로 밀립니다. */
.notif-item-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--muted);
}
.notif-item-icon svg {
  width: 100%;
  height: 100%;
}
.notif-item-body {
  min-width: 0;
  flex: 1;
}
.notif-item-context {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.notif-item-text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.notif-item-time {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.notif-panel-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.notif-panel-empty[hidden] {
  display: none;
}

/* [hidden] 속성은 브라우저 기본값이 display:none인데, 아래 display:inline-flex가
   그걸 덮어써서 .hidden = true를 줘도 버튼이 계속 보이는 문제가 있었습니다
   (예: 코멘트 수정 권한이 없어도 "수정" 버튼이 보이던 문제). 이 규칙으로 막습니다. */
.btn-primary[hidden], .btn-secondary[hidden], .btn-ghost[hidden] {
  display: none;
}

.btn-primary, .btn-secondary, .btn-ghost {
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary svg, .btn-secondary svg, .btn-ghost svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); }

/* "새 대화 추가" 버튼: 글자 없이 + 아이콘만 있는 원형 버튼으로, 데스크탑/
   모바일 모두 동일합니다(border-radius:999px는 이미 .btn-primary에 있고,
   가로세로를 똑같이 맞춰서 원이 되게 합니다). 카카오톡/SumOne 화면의 같은
   버튼(#kakao-new-card-btn, #sumone-new-card-btn)도 트위터 백업 화면과
   완전히 같은 모양이어야 해서 셀렉터를 같이 묶어둡니다. */
#new-card-btn .btn-label,
#kakao-new-card-btn .btn-label,
#sumone-new-card-btn .btn-label {
  display: none;
}
#new-card-btn,
#kakao-new-card-btn,
#sumone-new-card-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
}
/* "이미지 관리" 버튼(연필 아이콘, 관리자만 보임)도 위 +버튼들과 같은 방식의
   글자 없는 원형 버튼으로 통일합니다(데스크탑/모바일 공통). 13px 왼쪽으로
   옮긴 위치도 데스크탑/모바일 공통입니다. */
#gallery-manage-btn .btn-label {
  display: none;
}
#gallery-manage-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  position: relative;
  left: -13px;
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--accent); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
}
.btn-ghost:hover { background: var(--border); }

.btn-ghost.danger { color: var(--danger); }

/* ---------- 툴바(정렬 전환 등) ---------- */
.toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px 0;
  max-width: 1200px;
  margin: 0 auto;
}

/* 태그 필터 드롭다운. aeoniandreams/lookbook의 커스텀 정렬 드롭다운과 같은
   구조(버튼 + 절대배치 목록)를 이 사이트 색상 변수로 옮겨왔습니다. 별도
   미디어 쿼리 없이 모바일/데스크탑에 동일하게 적용됩니다. */
.tag-filter-dropdown {
  position: relative;
}
.tag-filter-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tag-filter-dropdown-btn:hover {
  border-color: var(--accent);
}
.tag-filter-dropdown.open .tag-filter-dropdown-btn {
  border-color: var(--accent);
}
.tag-filter-dropdown-chevron {
  width: 15px;
  height: 15px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.tag-filter-dropdown.open .tag-filter-dropdown-chevron {
  transform: rotate(180deg);
}
.tag-filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 130px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 20;
}
.tag-filter-dropdown-menu.hidden {
  display: none;
}
.tag-filter-dropdown-option {
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.tag-filter-dropdown-option:hover {
  background: var(--border);
}
.tag-filter-dropdown-option.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ---------- 카드 그리드 ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 20px 24px 48px;
  max-width: 1200px;
  margin: 0 auto;
}

.empty-state {
  text-align: center;
  color: var(--muted);
  margin-top: 60px;
}

.card {
  position: relative;
  background: var(--surface);
  /* <button> 요소는 브라우저가 글자색을 기본값(검정)으로 고정해서 물려주기 때문에
     명시적으로 되돌려주지 않으면 야간 모드에서도 검게 남습니다. */
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s;
}
/* 새 코멘트가 달린 카드는 테두리를 테마 컬러로 강조합니다. 카드를 열어
   확인하면(코멘트 점과 함께) 다시 원래 테두리로 돌아옵니다. */
.card.has-new-comment {
  border-color: var(--accent);
}
.card:hover { border-color: var(--accent); }

.card-thumbs {
  display: flex;
  gap: 6px;
}

.card-thumb-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.card-thumb {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
}

.card-tag-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--border);
  flex-shrink: 0;
}

.card-head-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.card-nickname {
  font-weight: 700;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-meta {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* X 카드 썸네일의 날짜만 아이디보다 1px 크게(14px). .card-meta 안의
   자식 span(.card-meta-date)에 적용됩니다. */
.card-meta-date {
  font-size: 14px;
}

.card-text {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  /* 같은 줄에 이미지 있는 카드가 있으면 그리드 stretch로 세로 폭이 늘어나는데,
     예전엔 여기서 4줄로 딱 잘라서 그 늘어난 공간이 그냥 낭비됐습니다. 6줄로
     늘려서(요청대로 1~2줄 정도만 더) 그 공간을 좀 더 활용합니다. 이미지 없는
     카드끼리만 있는 줄은 원래도 카드 높이가 내용에 맞춰 늘어나는 구조라 문제
     없습니다. */
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text);
  white-space: pre-wrap;
}

/* ---------- 모달 (상세보기 / 새 대화 추가) ---------- */
.modal-overlay[hidden] {
  display: none;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 100;
  padding: 24px 12px;
}

.modal-panel {
  background: var(--modal-bg);
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 48px);
  border-radius: 16px;
  overflow-y: auto;
  /* 뒤로가기/홈 버튼(제스처 바) 등 폰 하단 시스템 UI가 화면을 덮는
     기기에서, 내용 맨 아래가 그 뒤에 가려지지 않도록 여유를 둡니다
     (그런 기기가 아니면 0이라 평소엔 아무 영향이 없습니다). */
  padding-bottom: env(safe-area-inset-bottom);
}

/* 이미지 원본 크게 보기. .modal-overlay(어두운 배경 + 화면 전체 덮기)는 그대로
   쓰되, 세로로도 정중앙에 오도록 align-items만 center로 바꾸고, 다른 모달들
   (코멘트 패널 포함) 위에 뜰 수 있도록 z-index를 더 높입니다. 이미지 자체는
   패널 안에 또 패널을 두는 대신, 배경색/여백 없이 이미지만 원래 비율 그대로
   화면에 맞춰 보여줍니다. */
.image-viewer-modal {
  align-items: center;
  z-index: 110;
  /* 다른 모달(.modal-overlay 기본값 40%)보다 더 어둡게: 이미지 자체가
     주인공이라 배경이 최대한 눈에 덜 띄도록 80%로 올렸습니다. */
  background: rgba(0, 0, 0, 0.8);
}

.image-viewer-img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
}

.image-viewer-close-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--comment-btn-bg);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.image-viewer-close-btn svg { width: 18px; height: 18px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--modal-bg);
  z-index: 5;
}

.modal-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.append-mode-label {
  margin: 12px 16px 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--border);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.append-mode-label svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.tag-editor {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tag-editor label {
  font-size: 13px;
  color: var(--muted);
}

.tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-option {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.tag-option.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---------- 스레드(대화 상세) ---------- */
.thread {
  padding: 4px 0 40px;
}

.message-row {
  display: flex;
  gap: 12px;
  padding: 18px 44px;
  position: relative;
}

.avatar-col {
  width: 48px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.avatar-col img.avatar {
  width: 48px;
  height: 48px;
}

/* top/bottom 값은 .message-row의 위아래 패딩(18px)에 맞춰 계산된 것입니다:
   4px 여백을 양쪽에 두고 두 프사 사이 정중앙에 오도록 bottom = 2*패딩 - 4. */
.message-row:not(:last-child) .avatar-col::after {
  content: "";
  position: absolute;
  top: 52px;
  bottom: -32px;
  width: 2px;
  background: var(--border);
}

.content-col {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.content-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.3;
}

.nickname { font-weight: 700; font-size: 15px; }
.handle, .date { color: var(--muted); font-size: 14px; }
.date::before { content: "·"; margin-right: 6px; color: var(--muted); }

.tweet-text {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 레이아웃(1/2/3/4장 배치)은 이미지 개수에 따라 js/app.js가 인라인 스타일로 계산해 넣습니다. */
.tweet-images {
  margin-top: 8px;
}

/* 예전엔 <a target="_blank">로 새 탭에서 원본 이미지를 열었는데, 이제는
   클릭하면 앱 안에서 이미지 뷰어(#image-viewer-modal)가 뜨는 버튼입니다.
   그래서 태그 대신 클래스로 선택하고, 버튼 기본 스타일을 지웠습니다. */
.tweet-images .image-link {
  display: inline-block;
  position: relative;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

/* 코멘트가 있는 이미지에만 렌더링됩니다 (js/app.js 참고). 버튼 배경은 반대 테마의
   배경색을 반투명하게 채운 색(--comment-btn-bg)이고, 아이콘은 현재 테마의 배경색
   (var(--bg))으로 된 아웃라인만 그립니다 — 기본 모드: 반투명 검은 버튼 + 흰색
   아이콘, 야간 모드: 반투명 흰 버튼 + 검은 아이콘으로 서로 반대가 됩니다. */
.image-comment-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--comment-btn-bg);
  border: none;
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.image-comment-btn svg {
  width: 14px;
  height: 14px;
}

/* 홈 화면 카드 썸네일의 이미지 코멘트 보기 전용(#thumb-comment-modal). */
.comment-modal-panel {
  max-width: 400px;
}

.comment-modal-text {
  margin: 0;
  padding: 8px 20px 28px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.tweet-images img {
  border: 1px solid var(--border);
}

/* ---------- 트윗 코멘트 (대화 상세 화면 좌우) ---------- */
/* 좌측: 코멘트 작성 버튼. 배경/테두리 없이 아이콘만 보이고, 색은 테마를 따라갑니다. */
.tweet-comment-add-btn {
  position: absolute;
  left: 12px;
  top: 22px;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tweet-comment-add-btn svg {
  width: 18px;
  height: 18px;
}

/* 프사 좌측 하단 "좋아요" 하트. 코멘트 작성 버튼(위쪽, top:22px)보다
   가로 위치를 2px 오른쪽(left:14px)으로 두고, 프사(48px, top 18px~66px)
   아래쪽에 걸치게 둡니다. 기본은 회색 선(테두리)만 있는 하트, 찜하면(.liked)
   테마 설명란의 붉은색(--danger)으로 꽉 채웁니다. 유저에게 보이는 건(관리자가
   찜한 것만) 버튼이 아니라 <span>이라 클릭할 수 없습니다. */
.message-like-btn {
  position: absolute;
  left: 14px;
  top: 60px;
  width: 16px;
  height: 16px;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.message-like-btn svg {
  width: 14px;
  height: 14px;
}
.message-like-btn.liked {
  color: var(--danger);
}
.message-like-btn.liked svg {
  fill: currentColor;
}

/* 우측: 코멘트 보기 버튼. 말풍선(message-circle) 모양으로 채워진 바탕 위에
   코멘트 종류 아이콘(message-circle/wine/coffee)을 겹쳐 그립니다. 바탕색(--border)은
   기본 모드에선 배경색보다 살짝 어둡고 야간 모드에선 살짝 밝아서, 튀지 않으면서도
   버튼 모양이 은은하게 드러납니다. */
.tweet-comment-view-stack {
  position: absolute;
  right: 10px;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 말풍선(bubble-shape)과 그 위 아이콘(bubble-icon)을 겹쳐 그릴 때, 예전엔
   absolute + top:46%(퍼센트) + transform으로 위치를 맞췄습니다. 46%는
   30px의 13.8px처럼 소수점 값이 되는데, 이 소수점을 실제 화면 픽셀에
   맞추는 반올림 방식이 브라우저/화면 배율(특히 모바일의 높은 DPR과
   데스크탑의 낮은 DPR)에 따라 달라져서, 데스크탑에서만 아이콘이 살짝
   안 맞아 보이는 원인이 됐습니다. absolute+퍼센트 대신 grid로 두 요소를
   같은 칸에 완전히 겹쳐서 그 칸의 정중앙에 정렬하면, 화면 배율과 무관하게
   항상 같은 결과가 나옵니다. */
.tweet-comment-view-btn {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
}

.tweet-comment-view-btn .bubble-shape {
  grid-area: 1 / 1;
  color: var(--border);
}
.tweet-comment-view-btn .bubble-shape svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tweet-comment-view-btn .bubble-icon {
  grid-area: 1 / 1;
  place-self: center;
  color: var(--text);
}
.tweet-comment-view-btn .bubble-icon svg {
  width: 13px;
  height: 13px;
  display: block;
}

/* 이 버튼으로 연 코멘트 창이 열려 있는 동안: 말풍선 배경을 테마 색으로,
   아이콘은 흰색으로 바꿔서 "지금 이 코멘트를 보고 있다"를 표시합니다. */
.tweet-comment-view-btn.is-open .bubble-shape {
  color: var(--accent);
}
.tweet-comment-view-btn.is-open .bubble-icon {
  color: #fff;
}

/* 코멘트 작성 창의 아이콘(관리자 전용) 선택 버튼 */
.tweet-comment-type-options {
  display: flex;
  gap: 8px;
  padding: 12px 20px 0;
}

.tweet-comment-type-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tweet-comment-type-btn svg { width: 18px; height: 18px; }
.tweet-comment-type-btn.selected {
  border-color: var(--accent);
  color: var(--accent);
}

/* 코멘트 작성/수정 중 왼쪽 스레드에서 드래그로 고른 문구 목록. */
.comment-highlight-picker {
  padding: 12px 20px 0;
}
.comment-highlight-hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
}
.comment-highlight-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.comment-highlight-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 4px 6px 4px 10px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
  color: var(--text);
}
.comment-highlight-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-highlight-chip-remove {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  padding: 2px;
  cursor: pointer;
}

/* 코멘트 작성/수정/보기 중, 왼쪽 스레드에서 이 코멘트와 관련 없는(=드래그로
   고르지 않은) 부분을 아주 옅게 표시합니다. */
.comment-highlight-dim {
  opacity: 0.07;
}

/* 복사 붙여넣기를 해도 배경 서식이 남지 않도록 배경은 항상 투명하고,
   글자색만 테마를 따라갑니다. */
.tweet-comment-editor-textarea {
  width: 100%;
  margin-top: 12px;
  padding: 8px 20px 20px;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
}
.tweet-comment-editor-textarea:focus {
  outline: none;
}

/* 코멘트 작성/수정 중 텍스트·이미지 블록을 추가하는 상단 버튼 줄 */
.comment-block-toolbar {
  display: flex;
  gap: 8px;
  padding: 12px 20px 0;
}

/* 블록(텍스트/이미지) 목록. 블록마다 입력칸 + 삭제 버튼이 한 묶음입니다. */
.comment-block-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 20px 20px;
}

/* 손잡이(왼쪽)와 내용(입력칸+삭제 버튼, 오른쪽)을 나란히 놓습니다. */
.comment-block-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  border-radius: 8px;
}

/* 드래그로 순서 바꾸기: 잡고 있는 블록은 반투명하게, 지금 그 위에 올려놓은
   자리는 점선 테두리로 보여줍니다. */
.comment-block-row.dragging {
  opacity: 0.4;
}
.comment-block-row.drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}

.comment-block-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comment-block-drag-handle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 30px;
  color: var(--muted);
  cursor: grab;
  /* 손잡이를 터치로 누르고 움직이는 동안 브라우저의 기본 스크롤 제스처가
     끼어들지 않게 막습니다(모바일 터치 드래그 재정렬용). */
  touch-action: none;
}
.comment-block-drag-handle:active {
  cursor: grabbing;
}
.comment-block-drag-handle svg {
  width: 16px;
  height: 16px;
}

.comment-block-content .tweet-comment-editor-textarea {
  margin-top: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  /* JS(autoResizeTextarea)가 내용물 분량에 맞춰 높이를 직접 조절하니,
     사용자가 손으로 늘리는 resize 손잡이와 그 전까지 보일 스크롤바는
     숨겨서 "내용만큼 자연스럽게 늘어나는 칸"처럼 보이게 합니다. */
  resize: none;
  overflow: hidden;
}

/* 이미지 URL 입력칸: 내용물(URL 개수/길이)에 따라 세로로 늘어나야 해서
   input이 아니라 textarea를 쓰고, JS(autoResizeTextarea)가 매번 높이를
   scrollHeight에 맞춥니다. resize 손잡이나 스크롤바가 따로 안 보이게
   막아서 "늘어나는 한 칸"처럼 보이게 합니다. */
.comment-block-image-input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  resize: none;
  overflow: hidden;
  min-height: 32px;
}

.comment-block-content .edit-row-remove {
  align-self: flex-end;
}

/* 코멘트 보기 화면에서 이미지 블록을 렌더링할 때. 이미지 한 장이면 wrap이
   그냥 감싸기만 하고, 여러 장(쉼표로 구분해서 넣은 경우)이면 화살표 두 개로
   전환하는 캐러셀이 되고 우측 하단에 "n / 전체" 배지가 뜹니다. */
.comment-block-image-wrap {
  position: relative;
  margin: 8px 20px 12px;
}

.tweet-comment-block-image {
  display: block;
  /* max-width가 아니라 width를 100%로 고정해서, 원본이 아무리 가로로 길어도
     항상 코멘트창 너비에 맞춰 줄어들도록 합니다(세로로 긴 이미지는 원래도
     문제없었지만, 가로로 긴 이미지는 max-width만으로는 안 줄어드는 경우가
     있었습니다). */
  width: 100%;
  height: auto;
  border-radius: 8px;
  cursor: pointer; /* 클릭하면 원본 크기로 보는 이미지 뷰어가 뜹니다. */
}

/* 캐러셀 화살표/배지: image-comment-btn과 같은 배색 규칙을 그대로 씁니다
   (반투명 --comment-btn-bg 바탕 + 반대 테마 색 --bg 아이콘/글자 —
   기본 모드는 반투명 검정 바탕에 흰 아이콘, 야간 모드는 반투명 흰 바탕에
   검은 아이콘). */
.comment-block-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--comment-btn-bg);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.comment-block-carousel-arrow svg { width: 16px; height: 16px; }
.comment-block-carousel-prev { left: 8px; }
.comment-block-carousel-next { right: 8px; }

.comment-block-image-counter {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
  background: var(--comment-btn-bg);
  color: var(--bg);
}

/* 코멘트 보기/작성 패널. 모바일(기본값, 가로/세로 모두)에서는 화면 아래에서 올라오는
   바텀시트 형태이고, 데스크탑(아래 media query)에서는 배경을 덮지 않고 대화창
   오른쪽 바깥 공간에 떠 있는 방식으로 바뀝니다. */
.tweet-comment-panel[hidden] {
  display: none;
}

.tweet-comment-panel {
  position: fixed;
  inset: 0;
  /* 일부 모바일 브라우저는 주소창이 나타났다 사라지면서 뷰포트 높이가 계속
     바뀌는데, inset:0만으로는 이 순간에 fixed 요소의 높이 계산이 실제 화면과
     어긋나서 패널이 화면 중간에 붕 뜬 것처럼 보이는 경우가 있습니다. 그 순간의
     실제 보이는 높이를 따라가는 100dvh를 명시해서 이 문제를 줄입니다
     (100dvh를 모르는 구형 브라우저는 100vh로 자동 대체됨). */
  height: 100vh;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 101;
}

.tweet-comment-panel-card {
  /* 헤더(.modal-header)는 --modal-bg를 쓰는데 본문은 --bg를 쓰고 있어서,
     야간 모드에서만 두 값이 달라(--modal-bg: #1e2126, --bg: #15181c)
     헤더와 본문 색이 미묘하게 어긋나 보였습니다(기본 모드는 --modal-bg가
     --bg와 같은 값이라 안 보였음). 대화창(.modal-panel)과 같은 색을 쓰도록
     맞췄습니다. */
  background: var(--modal-bg);
  width: 100%;
  max-width: 600px;
  max-height: 70vh;
  border-radius: 16px 16px 0 0;
  overflow-y: auto;
  /* 바텀시트가 화면 맨 아래에 붙어 있어서, 뒤로가기/홈 버튼(제스처 바) 같은
     폰 하단 시스템 UI에 본문 끝부분이 가려지는 문제가 있었습니다. 그 UI가
     차지하는 만큼 안쪽 여백을 더 둬서 스크롤해도 항상 다 보이게 합니다. */
  padding-bottom: env(safe-area-inset-bottom);
}

.tweet-comment-panel-body {
  padding-bottom: 8px;
}

/* 데스크탑: 대화창(.modal-panel, max-width 620px)이 화면 중앙에 뜨는 걸 기준으로,
   그 오른쪽에 16px 띄워서 400px 폭 패널을 붙입니다. 패널이 화면 오른쪽 밖으로
   잘리지 않으려면 화면 폭이 대략 (620/2 + 16 + 400) * 2 = 1452px는 넘어야 해서,
   여유를 두고 1520px부터 이 배치를 적용합니다. 그보다 좁으면(작은 노트북 등) 위의
   모바일과 같은 가운데 모달 형태로 자연스럽게 대체됩니다. */
@media (min-width: 1520px) {
  .tweet-comment-panel {
    position: fixed;
    inset: auto;
    top: 24px;
    left: calc(50% + 326px);
    /* 모바일 전용으로 넣어둔 height: 100dvh를 데스크탑에서는 다시 풀어줍니다
       (안 그러면 화면 전체 높이의 안 보이는 상자가 남아서 클릭을 가로챌 수 있음). */
    height: auto;
    background: transparent;
    padding: 0;
    display: block;
  }
  .tweet-comment-panel-card {
    width: 400px;
    max-width: 400px;
    max-height: calc(100vh - 48px);
    border-radius: 16px;
  }
}

/* ---------- 새 대화 추가 폼 ---------- */
.import-section {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.import-section label {
  font-size: 13px;
  color: var(--muted);
}

#import-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  resize: vertical;
}

.import-actions { display: flex; gap: 8px; }

.editable-rows {
  padding: 8px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.edit-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-row-top {
  display: flex;
  gap: 10px;
  align-items: center;
}

.edit-row-top img.avatar { width: 36px; height: 36px; }

.edit-row-fields {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.edit-row-fields input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  min-width: 0;
}

.edit-row-fields input.avatar-url { grid-column: 1 / -1; }

.edit-row textarea {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  min-height: 60px;
}

.edit-row-remove {
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--danger);
  font-size: 12px;
  cursor: pointer;
}

.images-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.image-edit-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.image-edit-row input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
}

/* 코멘트는 주로 다른 곳에서 복사해서 붙여넣는 용도라, textarea 자체가 항상
   배경 없이 투명하고 글자색만 테마를 따라가도록 합니다(붙여넣어도 서식이 안 남음).
   .edit-row textarea 규칙보다 우선하도록 .edit-row를 붙여 명시도를 맞췄습니다. */
.edit-row .image-comment-textarea {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 13px;
  background: transparent;
  color: var(--text);
  resize: vertical;
  min-height: 40px;
}

/* ---------- 카카오톡 백업: 채팅 말풍선 레이아웃 ----------
   사용자가 보여준 참고 화면(연한 회색 배경, 상대는 옅은 회색 말풍선,
   나는 검은 말풍선 + 흰 글씨)에 맞춘 색상입니다. */
:root {
  --kakao-bg: #f5f5f5;
  --kakao-bubble-other: #e8e8e8;
  --kakao-text-other: #0f1419;
  --kakao-bubble-me: #1a1a1a;
  --kakao-text-me: #ffffff;
  --kakao-time: rgba(0, 0, 0, 0.45);
  --kakao-avatar-bg: #000000;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kakao-bg: var(--bg);
    /* 기본 모드처럼 상대(왼쪽)는 밝은 회색으로 튀게, 나(오른쪽)는 배경과
       거의 구분 안 되는 검은색으로 — 다만 야간 모드 배경(--bg: #15181c)에
       맞춰 기본 모드 색상을 그대로 쓰지 않고 상대적인 밝기 관계만 옮겨왔습니다. */
    --kakao-bubble-other: #3a3f47;
    --kakao-text-other: var(--text);
    --kakao-bubble-me: #1a1d21;
    --kakao-text-me: #ffffff;
    --kakao-time: var(--muted);
    --kakao-avatar-bg: #3a3a3c;
  }
}
:root[data-theme="dark"] {
  --kakao-bg: var(--bg);
  --kakao-bubble-other: #3a3f47;
  --kakao-text-other: var(--text);
  --kakao-bubble-me: #1a1d21;
  --kakao-text-me: #ffffff;
  --kakao-time: var(--muted);
  --kakao-avatar-bg: #3a3a3c;
}

.kakao-thread {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--kakao-bg);
}

.kakao-preview-thread {
  border-radius: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.kakao-date-divider {
  align-self: center;
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  font-size: 12px;
  padding: 4px 14px;
  border-radius: 999px;
  margin: 14px 0 10px;
}
.kakao-date-divider:first-child {
  margin-top: 0;
}

.kakao-message-group {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.kakao-message-group.me {
  align-self: flex-end;
  /* 이 값(%)은 대화창(.kakao-thread) 안쪽 폭 기준이라, 모달 바깥 여백까지
     뺀 실제 화면 폭 기준으로는 이보다 더 작은 비율이 됩니다(모바일 기준
     대략 0.86배: 93.5% -> 화면 폭의 약 80%, 실측 검증됨). 아바타가 없어서
     말풍선 쪽(.kakao-message-col)에 이 값을 그대로 씁니다. */
  max-width: 93.5%;
}
.kakao-message-group.other {
  align-self: flex-start;
  /* 아바타(36px) + 간격(8px)만큼 더 잡아서, 말풍선이 실제로 쓸 수 있는
     너비(.kakao-message-col)는 me와 똑같이 맞추려는 값입니다. 다만 me 쪽
     비율이 이렇게 높으면(93.5%) 좁은 화면에서는 여기에 44px를 더한 값이
     대화창 폭 자체를 넘어서 버려서, 그 이상은 못 넓어지고 그냥 대화창 폭
     전체(100%)가 됩니다 — 즉 아바타가 있는 쪽은 me보다 살짝 더 좁게 보일
     수 있는데, 좁은 화면에서 아바타 자리까지 확보하면서 me와 완전히 같은
     폭을 주는 건 물리적으로 불가능하기 때문입니다. min()으로 100%를 넘지
     않게 명시적으로 막아둡니다. */
  max-width: min(calc(93.5% + 44px), 100%);
}

/* 상대방 전용 원형 프로필. 카카오톡 내보내기엔 실제 프사가 없어서
   검은 동그라미로 대신합니다(묶음 하나당 한 번, 이름 윗줄 높이에 맞춤). */
.kakao-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--kakao-avatar-bg);
  flex-shrink: 0;
  margin-top: 2px;
}

.kakao-message-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kakao-message-group.me .kakao-message-col {
  align-items: flex-end;
}
.kakao-message-group.other .kakao-message-col {
  align-items: flex-start;
}

.kakao-sender-name {
  font-size: 13px;
  color: var(--text);
  margin: 0 0 4px 4px;
}

.kakao-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-top: 2px;
  position: relative;
}
.kakao-message-group.me .kakao-bubble-row {
  flex-direction: row-reverse;
}

.kakao-bubble {
  padding: 9px 12px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.kakao-message-group.other .kakao-bubble {
  background: var(--kakao-bubble-other);
  color: var(--kakao-text-other);
  border-top-left-radius: 4px;
}
.kakao-message-group.me .kakao-bubble {
  background: var(--kakao-bubble-me);
  color: var(--kakao-text-me);
  border-top-right-radius: 4px;
}

.kakao-time {
  font-size: 10px;
  color: var(--kakao-time);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 코멘트 작성 버튼: 말풍선 옆(시간 표시와 같은, 가운데를 향한 쪽)에
   나란히 놓입니다. 위치는 kakao-bubble-row의 flex 순서로 정해지고
   (row 자체는 위치를 따로 잡지 않음), 아이콘 방향(꼬리)만 상대/나에
   따라 JS에서 좌우로 뒤집습니다. */
.kakao-comment-add-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.kakao-comment-add-btn svg {
  width: 16px;
  height: 16px;
}

/* 코멘트 보기 버튼(트윗 코멘트 보기 버튼과 같은 컴포넌트, .tweet-comment-view-btn)을
   해당 말풍선 바로 아래에 한 줄로 늘어놓습니다. 트위터 쪽은 코멘트가 여러 개면
   세로로 쌓이는(position:absolute) 별도 칸을 쓰지만, 카카오는 말풍선 밑에서 자연스럽게
   다음 줄로 흐르면 되어서 absolute 없이 그냥 가로로 나열하고 넘치면 줄바꿈합니다. */
.kakao-comment-view-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.kakao-message-group.me .kakao-comment-view-stack {
  justify-content: flex-end;
}

.kakao-preview-section {
  padding: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kakao-preview-section label {
  font-size: 13px;
  color: var(--muted);
}

.kakao-sender-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kakao-sender-option {
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.kakao-sender-option.selected {
  border-color: var(--accent);
  color: var(--accent);
}

/* 파일(.eml/.txt) 선택 버튼. <input type="file">를 숨기고 <label>을
   버튼처럼 씁니다. */
.kakao-file-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.kakao-preview-hint {
  font-size: 12px;
  color: var(--muted);
}

/* 미리보기에서 말풍선 사이사이에 두는 "이미지 삽입" 버튼 */
.kakao-insert-image-btn {
  align-self: center;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  padding: 3px 12px;
  margin: 2px 0;
  cursor: pointer;
}
.kakao-insert-image-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.kakao-bubble-image {
  display: block;
  max-width: 220px;
  max-height: 220px;
  border-radius: 12px;
  object-fit: cover;
}

.kakao-bubble-remove {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
}

/* 카카오톡 대화 수정 화면. 메시지마다 한 블록씩, 보낸 사람/시간은 읽기
   전용으로만 보여주고(수정 대상 아님) 내용(텍스트 또는 이미지 URL)만
   고칠 수 있습니다. */
.kakao-edit-rows {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kakao-edit-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.kakao-edit-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.kakao-edit-row-meta {
  font-size: 12px;
  color: var(--muted);
}
.kakao-edit-row-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  overflow: hidden;
}
/* ---------- SumOne 카드 ---------- */
.sumone-card-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 카카오톡 카드 썸네일: 날짜만 남기고(방 이름/아바타/마지막 메시지 미리보기
   없음), 옅은 회색(--muted) 대신 기본 글자색을 쓰고, 크기/굵기는 SumOne
   카드 제목과 같은 값으로 맞춥니다. */
.kakao-card-date {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
  color: var(--text);
}

.sumone-form {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sumone-form label {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
}
.sumone-form label:first-child {
  margin-top: 0;
}
.sumone-form input[type="text"],
.sumone-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.sumone-form textarea {
  resize: vertical;
  line-height: 1.5;
}

.sumone-detail-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
}
/* 크기를 강제로 맞추지 않고, 가로폭 100%에 이미지 자기 비율대로 세로
   길이가 정해지게 해서(height:auto) 잘리는 부분 없이 전체가 다 보입니다.
   그래도 원본을 더 크게/확대해서 보고 싶을 수 있어서 클릭하면 트위터
   백업과 같은 이미지 원본 보기 창(#image-viewer-modal)이 뜹니다. */
.sumone-detail-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  cursor: pointer;
}
.sumone-detail-image[hidden] {
  display: none;
}
.sumone-detail-content {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
/* 코멘트 보기 버튼들과 작성 버튼이 한 줄에 나란히 놓입니다(이미지 아래,
   내용 위). */
.sumone-comment-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}
.sumone-comment-add-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.sumone-comment-add-btn svg {
  width: 20px;
  height: 20px;
}

/* ---------- 앱 설명 ---------- */
.app-info-body {
  padding: 22px;
}
.app-info-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  word-break: break-word;
  color: var(--text);
}

/* 굵게/기울임/취소선/글씨 색(회색 + 테마 색 2종: 파란색 accent, 빨간색
   danger) 서식 도구. 굵게 등은 execCommand로 적용하고 결과를 그대로
   HTML로 저장합니다(이 창은 관리자만 쓸 수 있어서, 관리자가 자기 자신을
   상대로 뭔가를 주입할 위험만 있는 수준이라 innerHTML을 그대로 써도 안전). */
.app-info-toolbar {
  /* 본문이 길어져 스크롤해도 이 툴바는 대화창 헤더 바로 아래에 그대로 붙어
     있도록 sticky로 고정합니다. top 값은 헤더의 실제 렌더링 높이만큼
     JS(updateAppInfoToolbarStickyOffset)가 채워줍니다. 좌우/위 여백은
     .app-info-body의 패딩(22px)만큼 밀어내서 헤더 밑에 꽉 차게 붙입니다. */
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--modal-bg);
  margin: -22px -22px 10px;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.app-info-toolbar[hidden] {
  display: none;
}

/* 아이콘 삽입 팝업. 아이콘 삽입 버튼 바로 아래에 뜨도록 JS가 위치(top/left)를
   계산해서 넣어줍니다. */
.app-info-icon-picker {
  position: absolute;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(6, 32px);
  gap: 4px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  /* 아이콘 종류가 많아져서 한 화면에 다 안 들어갈 수 있어 세로로 스크롤되게 함. */
  max-height: 220px;
  overflow-y: auto;
}
.app-info-icon-picker[hidden] {
  display: none;
}
.app-info-icon-picker-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
.app-info-icon-picker-btn:hover {
  border-color: var(--accent);
}
.app-info-icon-picker-btn svg {
  width: 18px;
  height: 18px;
}

/* 글 중간에 삽입된 아이콘. 글자와 같은 줄에 나란히 놓이도록 inline-flex로
   두고, 색은 currentColor라 주변 글씨 색(서식 도구로 바꾼 색 포함)을
   그대로 따라갑니다. */
.app-info-inline-icon {
  display: inline-flex;
  vertical-align: -3px;
  width: 18px;
  height: 18px;
  margin: 0 2px;
}
.app-info-inline-icon svg {
  width: 100%;
  height: 100%;
}
.app-info-format-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.app-info-format-btn:hover {
  border-color: var(--accent);
}
/* 토글/이미지/아이콘/구분선 삽입 버튼은 svg 아이콘이라 굵게/기울임/취소선
   (글자) 버튼과 달리 아무 크기 지정이 없으면 버튼 안쪽 여백이 거의
   없어져서 따로 줄여줍니다. */
.app-info-toggle-insert-btn svg,
.app-info-image-insert-btn svg,
.app-info-icon-insert-btn svg,
.app-info-divider-insert-btn svg {
  width: 14px;
  height: 14px;
}
.app-info-color-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
}
.app-info-color-gray {
  background: var(--muted-pale);
}
.app-info-color-accent {
  background: var(--accent);
}
.app-info-color-danger {
  background: var(--danger);
}

.app-info-editor {
  width: 100%;
  box-sizing: border-box;
  min-height: 240px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.app-info-editor[hidden],
.app-info-text[hidden] {
  display: none;
}

.app-info-text img,
.app-info-editor img {
  max-width: 100%;
  border-radius: 8px;
}

.app-info-text hr,
.app-info-editor hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

/* 토글(접기/펼치기) 블록. 화살표(chevron-right/chevron-down)를 누르면
   내용칸(app-info-toggle-body)만 숨겼다 보였다 합니다. */
.app-info-toggle {
  margin: 8px 0;
}
.app-info-toggle-head {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* 보기 화면에서는 제목을 눌러도 펼쳐지므로 커서로 알려줍니다. 편집
   화면에서는 제목이 그대로 타이핑해서 고치는 텍스트라 화살표만 눌러야
   토글되고(js 참고), 커서 모양도 기본값 그대로 둡니다. */
.app-info-text .app-info-toggle-head {
  cursor: pointer;
}
.app-info-toggle-btn {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
}
.app-info-toggle-btn svg {
  width: 16px;
  height: 16px;
}
.app-info-toggle-label {
  font-weight: 600;
}
.app-info-toggle-body {
  margin: 4px 0 0 22px;
}
.app-info-toggle[data-open="false"] .app-info-toggle-body {
  display: none;
}

/* ---------- 사이드바 Gallery 카테고리 (헤드 + 펼침/접힘 하위 목록) ---------- */
.app-sidebar-category-head {
  justify-content: flex-start;
}
.app-sidebar-category-chevron {
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.app-sidebar-category-head[aria-expanded="true"] .app-sidebar-category-chevron {
  transform: rotate(180deg);
}
.app-sidebar-sublist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 2px 14px;
}
.app-sidebar-sublist[hidden] {
  display: none;
}
.app-sidebar-sub-btn {
  width: 100%;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  text-align: left;
  padding: 8px 8px 8px 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.app-sidebar-sub-btn.selected {
  background: var(--accent);
  color: #fff;
}
.app-sidebar-sub-btn:not(.selected):hover {
  background: var(--border);
}

/* ---------- Gallery 화면: 마소너리 레이아웃 + 호버(모바일은 탭) 오버레이 ----------
   aeoniandreams/lookbook의 홈 화면/레퍼런스 토글 레이아웃을 그대로 참고했습니다.
   컬럼 배치는 CSS가 아니라 JS(js/app.js의 layoutGalleryMasonry)가 담당합니다 —
   CSS 다단(column) 레이아웃은 이미지를 위→아래로 채워서 읽는 순서(왼쪽 위부터
   오른쪽으로)가 뒤죽박죽되기 때문에, 각 컬럼에 순서대로 나눠 담는 JS 방식을
   그대로 가져왔습니다. */
.gallery-subcategory-title {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 24px 14px;
  font-size: 21px;
  font-weight: 600;
  color: var(--muted);
}
.gallery-subcategory-title-chevron {
  display: inline-flex;
  vertical-align: -3px;
  width: 16px;
  height: 16px;
  margin: 0 2px;
}
.gallery-subcategory-title-chevron svg {
  width: 100%;
  height: 100%;
}
.reference-masonry {
  display: flex;
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 5px 24px 48px;
}
.reference-masonry-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reference-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
}
.reference-item img {
  width: 100%;
  display: block;
  background: var(--border);
  transition: filter 0.15s ease;
}
.reference-comment {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  background: linear-gradient(to top, rgba(20, 16, 35, 0.75), transparent 65%);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.reference-comment:empty {
  display: none;
}
.reference-comment-text {
  width: 100%;
}
.reference-item:hover .reference-comment,
.reference-item.revealed .reference-comment {
  opacity: 1;
}
.reference-item:hover img,
.reference-item.revealed img {
  filter: brightness(0.6);
}

/* ---------- Gallery 이미지 관리 모달(관리자 전용) ---------- */
.gallery-manage-body {
  padding: 20px 22px;
}
.gallery-manage-add-btn {
  width: 100%;
  margin-bottom: 12px;
}
.gallery-manage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gallery-manage-empty-hint {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 12px 0;
}
.gallery-manage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.gallery-manage-row.dragging {
  opacity: 0.4;
}
.gallery-manage-row.drag-over-top {
  box-shadow: inset 0 3px 0 0 var(--accent);
}
.gallery-manage-row.drag-over-bottom {
  box-shadow: inset 0 -3px 0 0 var(--accent);
}
.gallery-drag-handle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  cursor: grab;
  color: var(--muted);
}
.gallery-drag-handle:active {
  cursor: grabbing;
}
.gallery-drag-handle svg {
  width: 14px;
  height: 14px;
}
.gallery-manage-thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 7px;
  background: var(--border);
}
.gallery-manage-thumb.broken {
  visibility: hidden;
}
.gallery-manage-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gallery-manage-fields input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}
.gallery-manage-fields input:focus {
  outline: none;
  border-color: var(--accent);
}
.gallery-title-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.gallery-title-editable {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}
.gallery-title-editable:focus {
  outline: none;
  border-color: var(--accent);
}
.gallery-title-editable:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}
.gallery-title-bold-btn {
  flex-shrink: 0;
  width: 30px;
  border-radius: 7px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.gallery-title-bold-btn:hover {
  background: var(--border);
}
.gallery-remove-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
}
.gallery-remove-btn:hover {
  background: var(--border);
  color: var(--danger);
}
.gallery-remove-btn svg {
  width: 14px;
  height: 14px;
}

/* 모바일(휴대폰) 전용 오버라이드. CSS 우선순위가 같은 규칙끼리는 파일에서 더
   나중에 나오는 쪽이 이기기 때문에, 이 블록이 위쪽의 다른 어떤 기본(데스크탑)
   규칙보다도 반드시 뒤에 오도록 파일 맨 끝에 둡니다 (안 그러면 이 미디어 쿼리
   조건이 맞아도, 나중에 선언된 데스크탑 규칙한테 덮여써서 무시될 수 있습니다 -
   실제로 .tweet-comment-add-btn/.tweet-comment-view-stack이 이 문제를 겪고
   있었습니다). 앞으로 이 블록에 셀렉터를 추가/수정할 때도 이 파일 안에 있는
   어떤 규칙보다 항상 마지막에 오도록, 이 블록 자체를 파일 맨 끝에 유지해주세요.

   반응형 웹을 위한 휴대폰 전용 기준입니다. max-width는 화면 "가로 폭" 기준이라
   (세로 길이는 무관), 너비만으로는 "실제로 좁힌 데스크탑 창"과 "진짜 휴대폰"을
   구분할 수 없습니다. 그래서 너비(480px 이하)에 더해 (hover: none)과
   (pointer: coarse) 조건을 같이 걸었습니다 — 이 둘은 "정밀한 마우스 없이 손가락
   터치로만 조작하는 기기"를 뜻해서, 마우스가 있는 데스크탑은 창을 아무리 좁혀도
   해당되지 않습니다. 코멘트 패널의 데스크탑/모바일 전환 기준(1520px, 너비만 봄)과는
   별개입니다. */
@media (max-width: 480px) and (hover: none) and (pointer: coarse) {
  .avatar-col {
    width: 30px;
  }
  .avatar-col img.avatar {
    width: 30px;
    height: 30px;
  }
  /* top/width는 프사 크기(30px)에 맞춰 다시 계산한 값입니다: top = 30 + 4px 여백,
     width(연결선 굵기)는 48px 기준 2px에서 프사 축소 비율(30/48)만큼 줄인 값. */
  .message-row:not(:last-child) .avatar-col::after {
    top: 34px;
    width: 1.25px;
  }
  .nickname { font-size: 13px; }
  .handle, .date { font-size: 12px; }
  .tweet-text { font-size: 12px; }
  /* 채팅 내용 폰트 크기를 트위터 백업(.tweet-text)의 모바일 크기와 맞춥니다. */
  .kakao-bubble { font-size: 12px; }

  /* 좌측 코멘트 작성 버튼을 20px -> 16px(아이콘 18px -> 14px)로 줄였습니다.
     .message-row는 이 트윗 한 줄 전체(프사+닉네임/아이디/날짜/대화 내용)를 감싸는
     상자라, 그 padding-left/right는 이 상자의 좌우 바깥쪽 여백입니다 — 왼쪽은
     "상자 왼쪽 끝 ~ 프사가 시작하는 자리" 사이 공간(코멘트 작성 버튼이 그 안에
     놓임), 오른쪽은 "대화 내용이 끝나는 자리 ~ 상자 오른쪽 끝" 사이 공간(코멘트
     보기 버튼 묶음이 그 안에 놓임)입니다. 닉네임/아이디/날짜/대화 내용
     자체는 이 padding이 아니라 .content-col 안에 있습니다.
     아이디/날짜가 줄바꿈되지 않도록 상자 좌우 여백을 줄여서 대화 내용 폭을
     넓힌 값입니다: padding-left 26px(버튼<->프사 4px), padding-right 41px
     (버튼 묶음<->대화 내용 7px, 대화 내용과 너무 붙어 보여서 5px 더 줌).
     코멘트 작성 버튼은 프사와 겹쳐 보여서 top을 22px -> 8px로 올려, 프사보다
     위쪽(이 트윗 자신의 위쪽 여백 안)에 위치하도록 했습니다 — top 값은 이
     .message-row 자기 자신 기준이라, 아무리 올려도 윗 트윗 쪽으로 넘어가진
     않습니다. 처음엔 상자 모서리(왼쪽 위)에 거의 붙어 보여서 left도 0 -> 4px로
     살짝 안쪽으로 넣었고, 버튼/아이콘도 코멘트 보기 버튼의 아이콘(13px)과 비슷하던
     걸 16px 아이콘 x 18px 버튼으로 조금 더 키웠습니다. */
  .message-row {
    gap: 10px;
    padding-left: 26px;
    padding-right: 41px;
  }
  .tweet-comment-add-btn {
    left: 4px;
    top: 8px;
    width: 18px;
    height: 18px;
  }
  .tweet-comment-add-btn svg {
    width: 16px;
    height: 16px;
  }
  .tweet-comment-view-stack {
    right: 4px;
  }
  /* 하트 버튼도 코멘트 작성 버튼과 같은 가로 위치(left:4px)로 맞추고,
     작아진 프사(30px, top 18px~48px) 아래쪽에 걸치도록 크기/위치를 줄였습니다. */
  .message-like-btn {
    left: 6px;
    top: 41px;
    width: 14px;
    height: 14px;
  }
  .message-like-btn svg {
    width: 12px;
    height: 12px;
  }

  /* X 카드 블록: 아이디와 날짜 사이에 줄바꿈이 되게 합니다(데스크탑은 그대로
     " · "로 이어진 한 줄). 부모(.card-meta)가 한 줄 말줄임(nowrap+ellipsis)
     이라 줄바꿈이 안 먹으니, 모바일에서만 그 제한을 풀고 구분점은 숨기고
     날짜를 block으로 바꿔 다음 줄로 내립니다. */
  .card-meta {
    white-space: normal;
  }
  .card-meta-sep {
    display: none;
  }
  .card-meta-date {
    display: block;
    margin-top: 2px;
    font-size: 12px;
  }

  /* 홈 화면 카드 썸네일: 대화 내용(.card-text)만 살짝 줄입니다. 닉네임(.card-nickname,
     14.5px)과 아이디/날짜(.card-meta, 13px)는 요청대로 그대로 둡니다. */
  .card-text {
    font-size: 13px;
  }

  /* 모바일에서는 "새 대화/카드 추가"(+) 버튼을 관리자 여부와 상관없이 아예
     안 보이게 합니다 — 그만큼 로그아웃 버튼이 줄바꿈 없이 한 줄로 들어갈
     공간이 생깁니다(버튼 하나가 통째로 flex 배치에서 빠지니 자동으로
     넓어짐). 대화/카드 상세 화면 안의 "수정" 버튼(detail-edit-btn 계열)은
     이것과 다른, 별도의 버튼이라 영향받지 않습니다. 이 미디어 쿼리 밖의
     데스크탑 화면에는 영향이 없습니다. */
  #new-card-btn,
  #kakao-new-card-btn,
  #sumone-new-card-btn {
    display: none;
  }

  /* 로그아웃/알림/야간모드/사이드바 메뉴 아이콘 사이 간격을 모바일에서만
     8px -> 1px로 줄였습니다(데스크탑은 그대로 8px). */
  .header-actions {
    gap: 1px;
  }

  /* 코멘트 보기/작성 바텀시트: 안쪽 내용(.tweet-comment-panel-body)을 5px
     아래로 내리고, 그만큼 잘리지 않도록 바텀시트 자체의 세로 높이도 5px
     늘려서 균형을 맞춥니다. X/카카오/SumOne 모두 같은 클래스를 써서 한
     번에 적용됩니다. */
  .tweet-comment-panel-card {
    max-height: calc(70vh + 5px);
  }
  .tweet-comment-panel-body {
    margin-top: 5px;
  }
}