/* ==========================================================
   🏅 칭호
   ----------------------------------------------------------
   등급 뱃지와 같은 크기로 맞춰, 이름 옆에 나란히 놓습니다.
   갈래마다 색이 다릅니다. 지금은 정보글(갈색) 한 갈래뿐이에요.
     · 기록자        갈색
     · 사서          갈색 + 황금빛 테두리
     · 지식의 수호자  황금빛 테두리 + 황금빛이 천천히 일렁임
   ========================================================== */
.title-badge {
  display: inline-block; vertical-align: middle;
  font-size: 0.6875rem; font-weight: 800; line-height: 1;
  padding: 3px 8px; border-radius: 999px; margin-left: 4px; white-space: nowrap;
  border: 1px solid transparent;
}

/* ── 정보글 갈래: 갈색 ── */
.title-info { background: #6b4423; color: #f5e9dc; }
/* ── 게시글 갈래: 파란색 ──
   정보글(갈색)·댓글(초록)과 겹치지 않게 골랐습니다.
   등급 표시(테두리·일렁임)는 다른 갈래와 똑같이 title-t1/t2/t3 를 씁니다. */
.title-post { background: #26456e; color: #e6eefb; }
/* ── 댓글 갈래: 레몬 노랑 ──
   ⚠️ 황금색이 아닙니다. 완전히 다른 색이에요.
      황금(협력업체·누리의 전설)은 이렇게 생겼습니다:
        · 색조(hue) 42~43 — 놋쇠에 가까운 주황빛 노랑
        · 어두운 청동색(#c9971f)이 섞인 금속 그라디언트
        · 빛이 스윽 훑고 지나가는 광택
      댓글 노랑은 그 반대로 갑니다:
        · 색조 56 — 레몬·시트러스 쪽으로 확실히 밀어냈어요
        · 그라디언트 없이 납작한 단색 (금속처럼 안 보이게)
        · 광택 없음
      그래서 나란히 놓아도 헷갈리지 않습니다. */
.title-comment { background: #f0e017; color: #33300a; }

/* ── 🏆 업적 '생물박사' — 통째로 초록빛 ──
   여러 생명을 고루 살펴본 사람에게 주는 칭호라, 누리의 초록이 어울려요.
   (예전엔 금빛이었는데, 금빛은 협력업체·누리의 전설의 색이라 넘겨줬습니다)
   닉네임에 도는 빛(.author-bio)도 같은 초록이라 짝이 맞아요. */
.title-achieve {
  background: linear-gradient(135deg, #16a34a, #4ade80 45%, #16a34a);
  /* 가장 어두운 구간(#16a34a) 위에서도 글씨가 또렷하도록 진한 초록.
     그 자리 대비가 4.52 라 작은 글씨 기준(4.5)을 넘깁니다. */
  color: #052e16;
  border-color: #86efac;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  animation: achieve-glow 2.6s ease-in-out infinite;
}
/* 금빛이 아니라 초록빛으로 일렁입니다 */
@keyframes achieve-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(134, 239, 172, .35), 0 0 4px rgba(74, 222, 128, .30); }
  50%      { box-shadow: 0 0 0 1px rgba(134, 239, 172, .85), 0 0 12px rgba(74, 222, 128, .70); }
}
@media (prefers-reduced-motion: reduce) { .title-achieve { animation: none; } }

/* ── 🧭 특수 '개척자' — 짙은 청록빛 초록 ──
   누리의 색이 초록이라 '처음부터 함께한 사람' 에 어울립니다.
   ⚠️ 업적 '생물박사'도 초록이라 구분이 필요해요. 이렇게 갈랐습니다.
        · 생물박사 — 밝은 잎사귀 초록 + 초록빛 일렁임 (업적이라 화려하게)
        · 개척자   — 짙고 차분한 청록 + 옅은 테두리, 일렁임 없음
      오래 활동해서 딴 게 아니라 '일찍 와 주셨다'는 표시라
      조용한 편이 어울립니다. */
.title-pioneer {
  background: #1f7a52; color: #eafaf1;
  border-color: #9fe0be;
  box-shadow: 0 0 0 1px rgba(159, 224, 190, .38);
}

/* 아직 못 딴 업적 — "???" */
.title-locked {
  background: var(--chip-bg); color: var(--text-muted);
  border: 1px dashed var(--line); letter-spacing: .08em;
}

/* 사서 — 황금빛 테두리 */
.title-t2 { border-color: #d4af37; box-shadow: 0 0 0 1px rgba(212, 175, 55, .35); }

/* 지식의 수호자 · 만인의 벗 — 글씨가 황금빛이고, 그 금빛이 천천히 일렁입니다.
   ⚠️ 예전에는 테두리만 빛나고 글씨는 거의 흰색(#fdf3d8)이었어요.
      '황금빛으로 일렁인다' 는 건 글씨 자체가 금빛이라는 뜻이라 바꿨습니다. */
.title-t3 {
  border-color: #f0c94a;
  color: #ffdc7a;                       /* 글씨가 금빛 (일렁임의 옅은 쪽과 같은 값) */
  animation: title-glow 2.6s ease-in-out infinite,
             title-text-glow 2.6s ease-in-out infinite;
}
/* 글씨의 금빛이 옅어졌다 짙어졌다 합니다 */
@keyframes title-text-glow {
  /* 옅은 쪽도 너무 어두우면 초록 바탕(만인의 벗)에서 안 읽혀요.
     #f5c542 는 대비 3.93 으로 기준(4.5)에 못 미쳤습니다. */
  0%, 100% { color: #ffdc7a; text-shadow: 0 0 3px rgba(255, 212, 94, .45); }
  50%      { color: #ffe89a; text-shadow: 0 0 9px rgba(255, 226, 140, .95); }
}
@keyframes title-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(240, 201, 74, .35), 0 0 4px rgba(240, 201, 74, .30); }
  50%      { box-shadow: 0 0 0 1px rgba(240, 201, 74, .85), 0 0 12px rgba(240, 201, 74, .70); }
}
/* ── 댓글 갈래의 등급 표시 ──
   위의 title-t2 / title-t3 는 '황금빛 테두리' 인데, 댓글 뱃지는 이제
   레몬 노랑이라 그 위에 금빛을 얹으면 색이 뒤섞여 다시 금색처럼 보입니다.
   그래서 댓글 갈래만 따로 정해 둡니다.
     · 교류의 달인 — 짙은 올리브 테두리 (노란 바탕에서 또렷하게 보이는 선)
     · 만인의 벗   — 그 테두리가 하얗게 빛나며 일렁이고, 글씨에도 흰 빛무리
   금빛은 한 방울도 쓰지 않았어요. */
.title-comment.title-t2 {
  border-color: #8a7c00;
  box-shadow: 0 0 0 1px rgba(138, 124, 0, .35);
}
.title-comment.title-t3 {
  border-color: #fffbe0;
  color: #33300a;                       /* 글씨는 그대로 진한 올리브 (대비 9.8) */
  animation: comment-glow 2.6s ease-in-out infinite,
             comment-text-glow 2.6s ease-in-out infinite;
}
@keyframes comment-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 251, 224, .45), 0 0 5px rgba(240, 224, 23, .45); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 14px rgba(240, 224, 23, .95); }
}
@keyframes comment-text-glow {
  0%, 100% { text-shadow: 0 0 3px rgba(255, 255, 255, .5); }
  50%      { text-shadow: 0 0 9px rgba(255, 255, 255, .95); }
}

/* 움직임이 불편한 분들을 위해 — 기기 설정에 따라 일렁임을 멈춥니다 */
@media (prefers-reduced-motion: reduce) {
  /* 일렁임만 멈추고 금빛 글씨는 그대로 둡니다 */
  .title-t3 {
    animation: none; color: #ffdc7a;
    text-shadow: 0 0 6px rgba(255, 212, 94, .7);
    box-shadow: 0 0 0 1px rgba(240, 201, 74, .8), 0 0 8px rgba(240, 201, 74, .5);
  }
  /* 댓글 갈래는 금빛이 아니라 흰 빛무리로 (위 규칙보다 뒤에 둬야 이깁니다) */
  .title-comment.title-t3 {
    animation: none; color: #33300a;
    text-shadow: 0 0 6px rgba(255, 255, 255, .8);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 8px rgba(240, 224, 23, .6);
  }
}

/* ---------- 내 계정의 칭호 목록 ---------- */
.title-group { margin-top: 16px; }
.title-group-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 0.9375rem; font-weight: 800; color: var(--heading);
}
.title-group-count { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }
.title-group-count b { color: var(--heading); }

/* ==========================================================
   ⚜ 검증
   ========================================================== */
/* 목록에 붙는 작은 칩 */
.evt-chip-checking { background: #f3e2c0; color: #6b4a12; }
.evt-chip-verified { background: #1f6b3a; color: #eafaef; }
:root[data-theme="dark"] .evt-chip-checking,
:root[data-theme="unit02"] .evt-chip-checking { background: #4a3a18; color: #f5dfae; }

/* 글 상세 위쪽 안내 */
.verify-note {
  display: flex; flex-direction: column; gap: 4px;
  margin: 12px 0 4px; padding: 13px 16px; border-radius: 12px;
  font-size: 0.875rem; line-height: 1.6;
  border-left: 4px solid;
}
.verify-note b { font-size: 0.9375rem; }
.verify-note span { color: inherit; opacity: .92; }
.verify-why { font-size: 0.84375rem; opacity: .85; }

/* 검증 요청됨 — 노랑/황금 계열 (틀렸다는 뜻이 아니라 '함께 보자') */
.verify-check {
  background: #fdf4dd; border-color: #d4af37; color: #5a4210;
}
:root[data-theme="dark"] .verify-check,
:root[data-theme="unit02"] .verify-check { background: #3a2f14; border-color: #d4af37; color: #f7e6bb; }

/* 누리 검증 정보 — 초록 */
.verify-ok {
  background: #e8f6ec; border-color: #1f6b3a; color: #1b3f28;
}
:root[data-theme="dark"] .verify-ok,
:root[data-theme="unit02"] .verify-ok { background: #17301f; border-color: #4caf72; color: #dcf3e3; }

/* 검증 버튼 줄 */
.verify-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.verify-bar[hidden] { display: none; }

/* ==========================================================
   ✦ 특별 반응 (만인의 벗)
   ----------------------------------------------------------
   일반 좋아요(♡)와 확실히 달라 보이게 — 모양도 색도 움직임도 다릅니다.
   금빛 별로, 좋아요 옆에 조용히 놓여요.
   ========================================================== */
.cheer-wrap { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; }
.cheer-wrap[hidden] { display: none; }

/* 받은 개수 표시 — ♡ 24 ✦ 1 처럼 */
.cheer-mark {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.875rem; font-weight: 800; color: #8a6510;
  padding: 4px 10px; border-radius: 999px;
  background: #fdf4dd; border: 1px solid #e6c86a; cursor: help;
}
:root[data-theme="dark"] .cheer-mark,
:root[data-theme="unit02"] .cheer-mark { background: #3a2f14; color: #f7e6bb; border-color: #d4af37; }

/* 별은 천천히 반짝여요 (좋아요 하트와 확실히 다르게) */
.cheer-ico {
  font-size: 0.9375rem; line-height: 1;
  color: #d4af37;
  animation: cheer-twinkle 2.4s ease-in-out infinite;
}
@keyframes cheer-twinkle {
  0%, 100% { opacity: .78; transform: scale(1); text-shadow: 0 0 2px rgba(212,175,55,.4); }
  50%      { opacity: 1;   transform: scale(1.18); text-shadow: 0 0 9px rgba(212,175,55,.9); }
}

/* 남기는 버튼 */
.cheer-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  font-size: 0.8125rem; font-weight: 800;
  background: none; color: #8a6510; border: 1px solid #e6c86a;
}
.cheer-btn:hover { background: #fdf4dd; }
.cheer-btn.on { background: #d4af37; color: #3a2a00; border-color: #d4af37; }
.cheer-btn.on .cheer-ico { color: #3a2a00; }
:root[data-theme="dark"] .cheer-btn,
:root[data-theme="unit02"] .cheer-btn { color: #f0d189; border-color: #a8862a; }
:root[data-theme="dark"] .cheer-btn:hover,
:root[data-theme="unit02"] .cheer-btn:hover { background: #3a2f14; }

/* 움직임이 불편한 분들을 위해 */
@media (prefers-reduced-motion: reduce) {
  .cheer-ico { animation: none; opacity: 1; }
}
.title-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.title-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
/* 아직 조건을 못 채운 칭호는 흐리게 — 뭘 더 하면 되는지는 보이게 */
.title-row.locked { opacity: .62; }
.title-row.locked .title-badge { filter: grayscale(.55); }
.title-cond { flex: 1; min-width: 140px; font-size: 0.8125rem; color: var(--text-muted); }
.title-cond b { color: var(--heading); }
.title-on { font-size: 0.78125rem; font-weight: 800; color: var(--brand); }
.title-lock { font-size: 0.875rem; }

/* ---------- 🏆 업적 칸 ---------- */
.ach-box {
  margin-top: 20px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-2);
}
.ach-row.locked .title-cond { font-style: italic; }
.ach-prog { font-size: 0.78125rem; font-weight: 800; color: var(--text-muted); }
.ach-row.got { border-color: #d4af37; }

/* ==========================================================
   👤 프로필 화면
   ========================================================== */
/* 글에 있는 작성자 이름 — 누를 수 있다는 걸 알아보게 */
.author-link { color: inherit; text-decoration: none; }
.author-link:hover { color: var(--brand); text-decoration: underline; }

.pf-head { display: flex; align-items: center; gap: 18px; margin: 6px 0 22px; flex-wrap: wrap; }
.pf-avatar {
  flex: none; width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  font-size: 2.125rem; font-weight: 800; color: #1e2620;
  border: 2px solid var(--line);
}
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-who { min-width: 0; }
.pf-name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 1.5rem; font-weight: 800; color: var(--heading); line-height: 1.3;
}
.pf-sub { margin-top: 5px; font-size: 0.84375rem; color: var(--text-muted); }

/* 활동량 */
.pf-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px; margin-bottom: 20px;
}
.pf-stat {
  padding: 14px 10px; text-align: center; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface);
}
.pf-stat b { display: block; font-size: 1.3125rem; color: var(--heading); }
.pf-stat span { display: block; margin-top: 3px; font-size: 0.78125rem; color: var(--text-muted); }
/* 받은 특별 반응은 금빛으로 — 흔한 게 아니니까요 */
.pf-stat-cheer { border-color: #d4af37; background: #fdf4dd; }
.pf-stat-cheer b { color: #8a6510; }
.pf-stat-cheer span { color: #8a6510; }
:root[data-theme="dark"] .pf-stat-cheer,
:root[data-theme="unit02"] .pf-stat-cheer { background: #3a2f14; }
:root[data-theme="dark"] .pf-stat-cheer b, :root[data-theme="unit02"] .pf-stat-cheer b,
:root[data-theme="dark"] .pf-stat-cheer span, :root[data-theme="unit02"] .pf-stat-cheer span { color: #f7e6bb; }

/* 칭호·업적 목록 */
.pf-title-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-title-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-title-desc { font-size: 0.8125rem; color: var(--text-muted); }

.pf-recent a { color: var(--heading); }
.pf-recent a:hover { color: var(--brand); text-decoration: underline; }

@media (max-width: 640px) {
  .pf-avatar { width: 62px; height: 62px; font-size: 1.75rem; }
  .pf-name { font-size: 1.25rem; }
  .pf-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 🏆 업적 달성 축하 ---------- */
.unlock-backdrop {
  position: fixed; inset: 0; z-index: 1400;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, .68);
  animation: unlock-in .25s ease-out;
}
@keyframes unlock-in { from { opacity: 0; } to { opacity: 1; } }
.unlock-panel {
  width: min(380px, 100%); text-align: center;
  padding: 34px 26px 26px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.unlock-kicker {
  font-size: 0.78125rem; font-weight: 800; letter-spacing: .14em;
  color: var(--text-muted); margin-bottom: 10px;
}
.unlock-name { font-size: 1.6875rem; font-weight: 800; color: var(--heading); line-height: 1.25; }
.unlock-desc { margin-top: 10px; font-size: 0.9375rem; color: var(--text); line-height: 1.6; }
.unlock-hint { margin-top: 14px; font-size: 0.8125rem; color: var(--text-muted); }
.unlock-panel .btn { margin-top: 18px; width: 100%; }

/* 업적은 금빛으로 */
.unlock-gold {
  border-color: #d4af37;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .5), 0 18px 50px rgba(0, 0, 0, .45), 0 0 40px rgba(212, 175, 55, .28);
}
.unlock-gold .unlock-kicker { color: #b8860b; }
.unlock-gold .unlock-name {
  background: linear-gradient(135deg, #b8860b, #f0c94a 45%, #b8860b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="dark"] .unlock-gold .unlock-kicker,
:root[data-theme="unit02"] .unlock-gold .unlock-kicker { color: #f0c94a; }
.level-6 { background: #e5e7eb; color: #4b5563; }   /* 신입 - 회색 */
.level-5 { background: #d1fae5; color: #065f46; }   /* 초록 */
.level-4 { background: #cffafe; color: #155e75; }   /* 청록 */
.level-3 { background: #dbeafe; color: #1e40af; }   /* 파랑 */
.level-2 { background: #ede9fe; color: #5b21b6; }   /* 보라 */
.level-1 { background: linear-gradient(135deg, #fde68a, #d97706); color: #5a3d00; box-shadow: 0 1px 6px rgba(217, 119, 6, .4); } /* 최고 - 금 */

/* ===== 이메일 미인증 안내 배너 ===== */
.verify-banner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 16px;
  background: linear-gradient(90deg, #ffe9a8, #ffd873);
  color: #5a4300; text-align: center;
  padding: 10px 16px; font-size: 0.96875rem; font-weight: 600;
  border-bottom: 1px solid rgba(180, 130, 0, .35);
}
.verify-banner .btn {
  background: #5a4300; color: #fff; border: none;
  padding: 6px 12px; border-radius: 8px; font-weight: 700; cursor: pointer;
}
.verify-banner .btn:disabled { opacity: .6; cursor: default; }

/* ===== 이벤트 등록 — 상단 고정 글 (파란 반짝임) ===== */
.post-item.glow-blue {
  position: relative; overflow: hidden;
  border: 2px solid #3b82f6; border-radius: 12px;
  background: linear-gradient(180deg, rgba(59, 130, 246, .12), var(--surface));
  margin-bottom: 4px;
}
.post-item.glow-blue .pmain,
.post-item.glow-blue .pright { position: relative; z-index: 1; }
.post-item.glow-blue::after {
  content: ""; position: absolute; top: -60%; left: 0; width: 50%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(147, 197, 253, .85), transparent);
  transform: translateX(-160%) rotate(8deg); pointer-events: none; z-index: 0;
  animation: eventSweep 7s ease-in-out infinite;
}
@keyframes eventSweep {
  0% { transform: translateX(-160%) rotate(8deg); }
  18% { transform: translateX(340%) rotate(8deg); }
  100% { transform: translateX(340%) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .post-item.glow-blue::after { animation: none; }
}
/* 이벤트 기한 칩 */
.evt-chip { display: inline-block; font-size: 0.75rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; margin-right: 6px; }
.evt-chip-live { background: linear-gradient(135deg, #60a5fa, #2563eb); color: #fff; box-shadow: 0 1px 6px rgba(37, 99, 235, .45); }
.evt-chip-done { background: var(--surface-2); color: var(--text-muted); }
.evt-chip-pin { background: #fde68a; color: #78500a; }
/* ⚠️ 밝은 빨강 위 흰 글씨는 대비가 2.77 밖에 안 나와 안 읽혔어요.
     양쪽 끝을 모두 진하게 내려 4.8 이상으로 맞췄습니다. */
.evt-chip-notice { background: linear-gradient(135deg, #dc2626, #991b1b); color: #fff; box-shadow: 0 1px 6px rgba(220, 38, 38, .4); }
/* 공지 범위 선택칸 */
.notice-scope { border: 1.5px dashed #dc2626; border-radius: 10px; padding: 10px 12px; background: rgba(220, 38, 38, .06); margin: 4px 0 10px; }
.notice-scope select { width: 100%; padding: 9px 11px; border-radius: 9px; border: 1.5px solid var(--border, #ccc); background: var(--surface); color: inherit; font-size: 1rem; font-family: inherit; }

/* 관리자 지정 금빛 */
.post-item.glow-gold {
  position: relative; overflow: hidden;
  border: 2px solid #e6b422; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 215, 100, .14), var(--surface));
  margin-bottom: 4px;
}
.post-item.glow-gold .pmain,
.post-item.glow-gold .pright { position: relative; z-index: 1; }
.post-item.glow-gold::after {
  content: ""; position: absolute; top: -60%; left: 0; width: 50%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 241, 186, .92), transparent);
  transform: translateX(-160%) rotate(8deg); pointer-events: none; z-index: 0;
  animation: eventSweep 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .post-item.glow-gold::after { animation: none; }
}
/* 글쓰기 — 이벤트 기한 입력칸 강조 */
.event-field { border: 1.5px dashed #3b82f6; border-radius: 10px; padding: 10px 12px; background: rgba(59, 130, 246, .06); margin: 4px 0 10px; }
.event-field-hl { color: #2563eb; }
.event-field-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.event-tilde { font-size: 0.9375rem; font-weight: 700; color: var(--text-muted); }
.event-field-row input[type="date"]:disabled { opacity: .5; }
.event-always { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9375rem; cursor: pointer; }
.event-always input { width: 17px; height: 17px; }

/* ===== 이벤트 당첨자 발표 — 초록 반짝임 ===== */
.post-item.glow-green {
  position: relative; overflow: hidden;
  border: 2px solid #22c55e; border-radius: 12px;
  background: linear-gradient(180deg, rgba(34, 197, 94, .12), var(--surface));
  margin-bottom: 4px;
}
.post-item.glow-green .pmain,
.post-item.glow-green .pright { position: relative; z-index: 1; }
.post-item.glow-green::after {
  content: ""; position: absolute; top: -60%; left: 0; width: 50%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(134, 239, 172, .9), transparent);
  transform: translateX(-160%) rotate(8deg); pointer-events: none; z-index: 0;
  animation: eventSweep 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .post-item.glow-green::after { animation: none; }
}
.evt-chip-win { background: linear-gradient(135deg, #4ade80, #16a34a); color: #053b1e; box-shadow: 0 1px 6px rgba(22, 163, 74, .45); }

/* ===== 관리자 도구 (빛깔 선택 · 댓글 버튼 · 고정 표시 · 상세 빛깔) ===== */
.admin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-glow { display: inline-flex; align-items: center; gap: 4px; }
.glow-pick { font-size: 0.75rem; padding: 3px 9px; border-radius: 8px; border: 1.5px solid var(--border, #ccc); background: var(--surface); cursor: pointer; }
.glow-pick.on { font-weight: 800; outline: 2px solid var(--brand); }
.glow-pick-gold.on { outline-color: #e6b422; }
.glow-pick-blue.on { outline-color: #3b82f6; }
.glow-pick-green.on { outline-color: #22c55e; }
/* margin-left 를 없앤 이유: 부모가 gap 으로 이미 간격을 주고 있어서
   둘이 겹쳐 버튼이 밀려났어요.
   높이를 고정한 이유: 이모지가 든 버튼만 2px 커져서 줄이 안 맞았습니다. */
.cmt-adm {
  font-size: 0.75rem; padding: 0 9px; height: 26px; line-height: 24px;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  border-radius: 7px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); cursor: pointer;
}
.cmt-adm:hover { border-color: var(--brand); color: var(--heading); }
/* 글을 지우는 버튼은 되돌릴 수 없으니 눈에 띄게 */
.cmt-adm.cmt-danger { color: #c0392b; border-color: #c0392b55; }
.cmt-adm.cmt-danger:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
:root[data-theme="dark"] .cmt-adm.cmt-danger,
:root[data-theme="unit02"] .cmt-adm.cmt-danger { color: #ff9b8a; border-color: #ff9b8a55; }
:root[data-theme="dark"] .cmt-adm.cmt-danger:hover,
:root[data-theme="unit02"] .cmt-adm.cmt-danger:hover { background: #a32617; color: #fff; border-color: #a32617; }
.cmt-pin { font-size: 0.6875rem; font-weight: 800; color: #78500a; background: #fde68a; padding: 2px 8px; border-radius: 999px; }
.cmt-pinned { background: rgba(253, 230, 138, .12); border-radius: 10px; }
.article-chips:empty { display: none; }
.article-chips { margin-bottom: 8px; }
.article.glow-gold { border: 2px solid #e6b422; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 215, 100, .10), var(--surface)); }
.article.glow-blue { border: 2px solid #3b82f6; border-radius: 14px; background: linear-gradient(180deg, rgba(59, 130, 246, .10), var(--surface)); }
.article.glow-green { border: 2px solid #22c55e; border-radius: 14px; background: linear-gradient(180deg, rgba(34, 197, 94, .10), var(--surface)); }

/* ===== 미리보기 패널의 협력업체 — 금빛 반짝임 ===== */
.pv-item.pv-item-partner {
  position: relative; overflow: hidden;
  border: 1.5px solid #e6b422; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 215, 100, .14), transparent);
}
.pv-item.pv-item-partner .pv-thumb,
.pv-item.pv-item-partner .pv-body { position: relative; z-index: 1; }
.pv-item.pv-item-partner::after {
  content: ""; position: absolute; top: -60%; left: 0; width: 50%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 241, 186, .9), transparent);
  transform: translateX(-160%) rotate(8deg); pointer-events: none; z-index: 0;
  animation: partnerSweep 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pv-item.pv-item-partner::after { animation: none; }
}

/* ---------- 💾 저장공간 현황 (관리 탭) ---------- */
.stor-bar { height: 14px; border-radius: 999px; background: var(--border, #e6e6e6); overflow: hidden; margin: 14px 0 10px; }
.stor-bar span { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.stor-sum { margin: 0 0 4px; font-size: 1.0625rem; }
.stor-note { margin: 0 0 16px; color: var(--text-muted); }
.stor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.stor-cell { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--surface-alt, rgba(0,0,0,.03)); border-radius: 10px; padding: 11px 14px; }
.stor-cell span { color: var(--text-muted); }
.stor-cell b { white-space: nowrap; }
.stor-tip { margin: 16px 0 0; color: var(--text-muted); font-size: 0.875rem; }

/* ---------- 📷 사진 업로드 진행 표시 ---------- */
.photo-progress { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px;
  padding: 9px 14px; border-radius: 10px; background: var(--surface-alt, rgba(0,0,0,.04));
  color: var(--text-muted); font-size: 0.9375rem; }
.photo-progress b { color: var(--brand); }
.ph-spin { display: inline-block; animation: ph-bob .9s ease-in-out infinite; }
@keyframes ph-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.ed-tool:disabled { opacity: .5; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .ph-spin { animation: none; } }

/* ---------- 🎬 업로드한 동영상 ---------- */
.editor-body video, .detail-content video, .post-body video {
  max-width: min(100%, 520px); max-height: 55vh; height: auto; display: block; margin: 12px 0;
  border-radius: 12px; background: #000;
}
/* 동영상 업로드 진행 막대 */
.vp-bar { display: inline-block; width: 140px; height: 8px; border-radius: 999px;
  background: var(--border, #e6e6e6); overflow: hidden; vertical-align: middle; margin: 0 4px; }
.vp-bar span { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .2s ease; }

/* ---------- 🤝 업체와의 만남 — 목록 / 소식 탭 ----------
   업체 소식이 업체 목록을 밀어내지 않도록 화면을 나눴어요. */
.shop-tabs { display: flex; gap: 8px; margin: 4px 0 22px; flex-wrap: wrap; }
.shop-tab {
  padding: 11px 20px; border-radius: 999px; font-size: 1rem;
  background: var(--surface); border: 1.5px solid var(--line); color: var(--text);
  transition: border-color .15s, background .15s, color .15s;
}
.shop-tab:hover { border-color: var(--brand); }
.shop-tab.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #fff); }
.shop-pane[hidden] { display: none; }

.biznews-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.biznews-acts { display: flex; gap: 8px; align-items: center; }
.biznews-lead { margin: 0; color: var(--text-muted); }

/* ---------- ✍️ 내가 쓴 글 — 수정 / 삭제 ---------- */
.mine-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 4px; padding: 10px 14px; border-radius: 12px;
  background: var(--surface-alt, rgba(0,0,0,.04)); border: 1px dashed var(--border, #ddd); }
.mine-bar > span { color: var(--text-muted); font-size: 0.875rem; margin-right: auto; }
.edited-mark { color: var(--text-muted); font-style: italic; }

/* ---------- 비회원 안내 (댓글칸 자리) ---------- */
.login-nudge { margin-top: 18px; padding: 18px 20px; border-radius: 14px; text-align: center;
  background: var(--surface-alt, rgba(0,0,0,.04)); border: 1px dashed var(--border, #ddd); }
.login-nudge p { margin: 0 0 12px; color: var(--text-muted); }
.login-nudge-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------- 🌐 언어 선택 ---------- */
.lang-dropdown .theme-menu { min-width: 172px; }
.lang-note {
  padding: 9px 12px 4px; margin-top: 4px;
  border-top: 1px solid var(--line, rgba(0,0,0,.08));
  color: var(--text-muted); font-size: 0.75rem; line-height: 1.45;
}
@media (max-width: 480px) {
  .lang-dropdown [data-lang-trigger] { padding-left: 8px; padding-right: 8px; }
}

/* ---------- 🌐 게시글 번역 버튼 ---------- */
.tr-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 2px; }
.tr-msg { color: var(--text-muted); font-size: 0.8125rem; }

/* ---------- 🔥 홈 미리보기 (화제글 · 새 글) ---------- */
.feed-section { padding-top: 10px; padding-bottom: 6px; }
.feed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

/* ---------- 🔥 화제글 (홈·분류 페이지) ----------
   1~3위는 사진을 크게 보여주는 카드, 4위부터는 한 줄.
   사진이 있는 글은 사진이 주인공이 되게 했어요. */
.hot-wrap { margin-bottom: 30px; }
.hot-top {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 12px;
}
.hot-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line);
  text-decoration: none; color: inherit;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.hot-card:hover {
  transform: translateY(-3px); border-color: var(--brand);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .13);
}
.hc-cover {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(0,0,0,.05), rgba(0,0,0,.11));
}
.hc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-emoji { font-size: 3.375rem; opacity: .75; }
.hc-rank {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  min-width: 30px; height: 30px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; font-size: 1.0625rem; font-weight: 700;
  background: rgba(255, 255, 255, .93); color: #333;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .22);
}
.hc-more {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  padding: 3px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  background: rgba(0, 0, 0, .6); color: #fff;
}
.hc-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 5px; }
.hc-title {
  font-size: 1rem; font-weight: 700; color: var(--heading); line-height: 1.4;
  /* 두 줄까지 보여주고 넘치면 … */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.hc-meta, .hc-stats {
  display: flex; gap: 9px; flex-wrap: wrap; color: var(--text-muted); font-size: 0.8125rem;
}
.hc-stats { margin-top: 1px; }

/* 4위 아래 · 새 글 — 두 줄로 나눠 열 개가 한눈에 */
.feed-list-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hot-rest { margin-top: 2px; }

.feed-head-hot, .feed-head-fresh { margin-top: 4px; }
.feed-head-fresh { margin-top: 26px; }

@media (max-width: 900px) {
  .hot-top { grid-template-columns: 1fr 1fr; }
  /* 3위는 두 칸을 다 쓰지 않고 자연스럽게 다음 줄로 */
  .feed-list-2col { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hot-top { grid-template-columns: 1fr; }
  .hc-cover { aspect-ratio: 16 / 9; }
}
.feed-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.feed-head h2 { margin: 0; font-size: clamp(1.3125rem, 2.6vw, 1.6875rem); font-family: var(--font-cute); letter-spacing: .025em; }
.feed-note { color: var(--text-muted); font-size: 0.875rem; }
.feed-list { display: flex; flex-direction: column; gap: 8px; }
.feed-empty { padding: 22px; text-align: center; color: var(--text-muted);
  border: 1px dashed var(--border, #ddd); border-radius: 12px; }

.feed-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease;
}
.feed-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 8px 22px rgba(0,0,0,.09)); }
.ff-rank {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700;
  background: var(--brand); color: var(--on-brand, #fff);   /* 흰 숫자가 묻히던 문제 */
}
.ff-thumb {
  flex: none; width: 62px; height: 62px; border-radius: 10px; overflow: hidden;
  background: var(--surface-2, rgba(0,0,0,.04)); display: grid; place-items: center;
}
.ff-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ff-emoji { font-size: 1.625rem; }
.ff-body { min-width: 0; flex: 1; }
.ff-title { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px;
  color: var(--text-muted); font-size: 0.8125rem; }

/* ---------- 🔥 홈의 화제글: 아주 납작하게 ----------
   홈의 주인공은 '메인 문구'와 '이렇게 이용해요' 예요.
   화제글은 "이런 글들이 오가는 곳이구나" 하고 알아볼 정도만 남깁니다.
   (자세한 건 각 게시판에서 봐요) */
.hot-mini { gap: 4px; }
.hot-mini .feed-item { padding: 5px 10px; gap: 9px; border-radius: 9px; }
.hot-mini .feed-item:hover { transform: none; box-shadow: none; background: var(--chip-bg); }
.hot-mini .ff-rank { width: 18px; height: 18px; font-size: 0.6875rem; }
.hot-mini .ff-thumb { width: 26px; height: 26px; border-radius: 6px; }
.hot-mini .ff-emoji { font-size: 0.9375rem; }
.hot-mini .ff-emoji .emo { width: 15px; height: 15px; }
.hot-mini .ff-title { font-size: 0.84375rem; }
/* 작성자·시간은 접고, 반응 수치만 오른쪽에 조그맣게 */
.hot-mini .ff-meta { margin-top: 0; font-size: 0.71875rem; gap: 7px; }
.hot-mini .thumb-play { transform: scale(.62); }
/* 제목과 반응 수치를 같은 줄에 나란히 둬서 한 줄로 만듭니다
   (예전엔 제목 아래에 작성자·시간이 줄바꿈돼 두 줄이 됐어요) */
.hot-mini .ff-body { display: flex; align-items: center; gap: 10px; }
.hot-mini .ff-title { flex: 1; min-width: 0; }
.hot-mini .ff-meta { flex: none; white-space: nowrap; flex-wrap: nowrap; }
/* 좁은 화면에서는 작성자·시간을 접고 댓글 수만 남깁니다 */
@media (max-width: 720px) {
  .hot-mini .ff-meta > :not(:last-child) { display: none; }
}

@media (max-width: 820px) {
  .feed-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- ❤️ 좋아요 ---------- */
.like-bar { display: flex; align-items: center; gap: 10px; margin: 16px 0 2px; flex-wrap: wrap; }
.like-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px; font-size: 1rem;
  background: var(--surface); border: 1.5px solid var(--line); color: inherit;
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.like-btn:hover { border-color: var(--brand); }
.like-btn.on { border-color: #e8590c; background: rgba(232, 89, 12, .08); }
.like-btn:disabled { opacity: .6; cursor: progress; }
.like-heart { font-size: 1.125rem; line-height: 1; }
.like-hint { color: var(--text-muted); font-size: 0.875rem; }
.like-btn.pop { animation: likePop .32s ease; }
@keyframes likePop {
  0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .like-btn.pop { animation: none; } }

/* 저장공간 탭 — 어느 저장소를 쓰는지 알려주는 칩 */
.stor-chip { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px;
  font-size: 0.8125rem; background: rgba(63,174,106,.14); color: #2f8f56; vertical-align: middle; }
.stor-chip-disk { background: rgba(0,0,0,.06); color: var(--text-muted); }

/* ---------- 👤 프로필 메뉴 (헤더 우측) ---------- */
.profile-menu { position: relative; }
.profile-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--line); color: var(--text);
  font-size: 0.9375rem; transition: border-color .15s, background .15s;
}
.profile-trigger:hover { border-color: var(--brand); }
.profile-trigger .caret { color: var(--text-muted); font-size: 0.75rem; }
.profile-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.profile-avatar { flex: none; display: inline-grid; place-items: center; }
.pa-inner {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; font-size: 0.9375rem; line-height: 1;
  /* 바탕이 닉네임마다 다른 파스텔색이라 흰 글씨는 묻혀요 (.ua 와 같은 이유) */
  color: #1e2620; font-weight: 800; text-shadow: none;
}
.profile-avatar-lg .pa-inner { width: 48px; height: 48px; font-size: 1.5rem; }

/* 열고 닫기는 display 로 확실하게 — transition 에 기대면
   화면을 그리지 않는 환경에서 영영 안 보일 수 있어요. */
.profile-pop {
  display: none;
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 268px; padding: 14px; border-radius: 16px;
  background: var(--surface); border: 1.5px solid var(--line);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}
.profile-pop.open { display: block; animation: profilePop .16s ease; }
@keyframes profilePop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .profile-pop.open { animation: none; } }
.profile-head { display: flex; gap: 12px; align-items: center; padding-bottom: 12px;
  border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.profile-id { min-width: 0; }
.profile-nick { font-size: 1.0625rem; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.profile-email { color: var(--text-muted); font-size: 0.8125rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.profile-sub { color: var(--brand); font-size: 0.8125rem; margin-top: 3px; }

.profile-acts { display: flex; flex-direction: column; gap: 2px; }
.profile-item {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px; font-size: 0.9375rem;
  background: none; border: none; color: var(--text); text-decoration: none;
  transition: background .13s;
}
.profile-item:hover { background: var(--surface-2, rgba(0,0,0,.05)); }
.profile-logout { color: #d9534f; }

/* 서랍(모바일 메뉴) 안에서는 넓게 펼침 */
.drawer-auth .profile-menu { width: 100%; }
.drawer-auth .profile-trigger { width: 100%; justify-content: flex-start; }
.drawer-auth .profile-pop { position: static; width: 100%; margin-top: 8px; box-shadow: none; }

/* 프로필 사진 (업로드한 이미지) */
.pa-img { object-fit: cover; }
.profile-item:disabled { opacity: .6; cursor: progress; }

/* ---------- 👤 작성자 프로필 사진 (글·댓글) ----------
   기존 자리(.article-avatar / .cmt-avatar)와 같은 크기로 맞춰 배치가 안 흔들리게 했어요. */
.ua {
  flex: none; flex-shrink: 0; display: inline-grid; place-items: center; overflow: hidden;
  width: 34px; height: 34px; border-radius: 50%;
  /* 바탕이 닉네임마다 다른 파스텔색이라 흰 글씨는 묻힙니다 (대비 1.57).
     어떤 파스텔색 위에서도 읽히도록 진한 글씨로 바꿨어요. */
  color: #1e2620; font-size: 1.0625rem; line-height: 1; font-weight: 800;
  text-shadow: none;
}
.ua img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 글 본문 작성자 — 조금 크게 */
.article-byline .ua { width: 42px; height: 42px; font-size: 1.3125rem; }
/* 답글 작성자 — 조금 작게 */
.cmt-reply .ua, .ua-sm { width: 28px; height: 28px; font-size: 0.875rem; }

/* ---------- 🛟 백업·복구 패널 ---------- */
.bk-state {
  border-radius: 12px; padding: 12px 14px; margin: 4px 0 14px;
  font-size: 0.875rem; border: 1.5px solid var(--line); background: var(--chip-bg);
}
.bk-state.ok { border-color: #9fd7b4; background: #f1faf4; color: #235c3a; }
.bk-state.warn { border-color: #eccb92; background: #fdf6ea; color: #7a5312; }

.bk-where { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.bk-w {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 12px;
  background: var(--card-bg); display: flex; flex-direction: column; gap: 3px;
}
.bk-w b { font-size: 0.875rem; color: var(--heading); }
.bk-w span { font-size: 0.75rem; color: var(--text-muted); }
.bk-w small { font-size: 0.71875rem; color: var(--text-muted); line-height: 1.45; margin-top: 2px; }
.bk-w.off { opacity: .55; }

.bk-note {
  font-size: 0.8125rem; line-height: 1.6; margin: 0 0 12px;
  border-left: 3px solid #e0913b; padding: 8px 12px;
  background: #fdf6ea; border-radius: 0 8px 8px 0; color: #7a5312;
}
.bk-note.ok { border-left-color: #3fae6a; background: #f1faf4; color: #235c3a; }
.bk-note code {
  background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 5px; font-size: 0.75rem;
}

.bk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.bk-table { width: 100%; border-collapse: collapse; font-size: 0.84375rem; }
.bk-table th {
  text-align: left; font-size: 0.75rem; color: var(--text-muted);
  font-weight: 700; padding: 6px 8px; border-bottom: 1.5px solid var(--line);
}
.bk-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); }
.bk-table tr:last-child td { border-bottom: none; }
.bk-none { color: var(--text-muted); text-align: center; padding: 18px 8px !important; }
.bk-dot { font-size: 0.9375rem; margin-right: 3px; }
.bk-dl { color: var(--brand); font-weight: 700; text-decoration: none; font-size: 0.8125rem; }
.bk-dl:hover { text-decoration: underline; }

.bk-how { margin-top: 16px; font-size: 0.84375rem; }
.bk-how summary { cursor: pointer; font-weight: 700; color: var(--heading); }
.bk-how ol { margin: 10px 0 8px; padding-left: 20px; line-height: 1.75; }
.bk-how code {
  background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 5px; font-size: 0.78125rem;
}
.bk-how p { line-height: 1.65; color: var(--text-muted); }

@media (max-width: 640px) {
  .bk-where { grid-template-columns: 1fr; }
}

/* =========================================================
   🖥️ 첫 화면에 '메인 문구 + 화제글'을 함께 담기
   ---------------------------------------------------------
   히어로가 화면을 통째로 차지해서 화제글이 스크롤 아래로 밀렸어요.
   화면 높이에 맞춰 히어로를 줄이고, 화제글 카드도 같이 낮춰서
   둘이 한 화면에 들어오게 합니다.
   · 넓은 화면(가로 900px 이상)에서만 적용 — 휴대폰은 원래대로 자연스럽게
   · 화면이 아주 낮으면 더 줄고, 넉넉하면 여유 있게 (vh 기준)
   ========================================================= */
@media (min-width: 900px) {
  /* 높이를 잡아먹던 진짜 범인은 .hero-inner 의 위아래 패딩(72/80px)이었어요 */
  .hero { padding-top: 0; padding-bottom: 0; }
  .hero-inner {
    padding-top: clamp(20px, 3.6vh, 58px) !important;
    padding-bottom: clamp(18px, 3.3vh, 54px) !important;
    gap: clamp(22px, 2.6vw, 48px);
  }
  /* 시범운영 안내띠도 살짝 얇게 (내용은 그대로) */
  .demo-banner-inner { padding: clamp(6px, 1.1vh, 12px) 20px; }
  .demo-banner p { font-size: clamp(0.8125rem, 1.7vh, 0.90625rem); }
  /* ⚠️ 예전에는 이 값들을 아주 작게 줄여 놨었어요.
     그때는 화제글이 '사진 딸린 큰 카드' 라서 자리를 많이 먹었거든요.
     지금은 화제글이 한 줄짜리 납작한 목록이라 자리가 남습니다.
     그래서 글씨와 칸을 도로 키워 첫 화면을 채웁니다.
     (여전히 vh 기준이라 낮은 화면에서는 알아서 작아져요) */
  .hero h1 { font-size: clamp(1.75rem, 4.9vh, 3.125rem); line-height: 1.22; margin-bottom: clamp(10px, 1.5vh, 20px); }
  .hero .lead { font-size: clamp(1.0625rem, 3.05vh, 1.625rem); line-height: 1.72; margin-bottom: clamp(12px, 2vh, 24px); }
  .hero-actions { margin-bottom: clamp(10px, 1.7vh, 22px); }
  .hero-stats { gap: clamp(10px, 2vw, 22px); }
  .hero-stats .num { font-size: clamp(1.0625rem, 2.4vh, 1.5625rem); }
  .hero-stats .lbl { font-size: clamp(0.625rem, 1.3vh, 0.8125rem); }

  /* 옆의 '이렇게 이용해요' 카드도 같은 비율로 */
  .how-card { padding: clamp(16px, 2.7vh, 28px) clamp(18px, 1.9vw, 26px); }
  .how-card-head { font-size: clamp(1.1875rem, 3.05vh, 1.5625rem); margin-bottom: clamp(10px, 1.6vh, 18px); }
  .how-steps { gap: clamp(7px, 1.3vh, 15px); }
  .how-steps li { font-size: clamp(0.9375rem, 2.35vh, 1.1875rem); }
  .how-steps .hs-num {
    width: clamp(24px, 3.1vh, 31px); height: clamp(24px, 3.1vh, 31px);
    font-size: clamp(0.8125rem, 1.75vh, 1rem);
  }

  /* 🔥 화제글·새 글 목록도 함께 키웁니다.
     한 줄짜리 목록이라 조금 키워도 자리를 크게 먹지 않아요. */
  .feed-head h2 { font-size: clamp(1.1875rem, 2.9vh, 1.75rem); }
  .hot-mini { gap: clamp(4px, .85vh, 9px); }
  .hot-mini .feed-item { padding: clamp(6px, 1.15vh, 11px) clamp(10px, 1.1vw, 14px); gap: 11px; }
  .hot-mini .ff-title { font-size: clamp(0.84375rem, 2vh, 1.0625rem); }
  .hot-mini .ff-meta { font-size: clamp(0.71875rem, 1.6vh, 0.875rem); }
  .hot-mini .ff-rank {
    width: clamp(18px, 2.5vh, 23px); height: clamp(18px, 2.5vh, 23px);
    font-size: clamp(0.6875rem, 1.5vh, 0.84375rem);
  }
  .hot-mini .ff-thumb { width: clamp(26px, 3.6vh, 34px); height: clamp(26px, 3.6vh, 34px); }
  .hot-mini .ff-emoji { font-size: clamp(0.9375rem, 2.1vh, 1.1875rem); }
  .hot-mini .ff-emoji .emo { width: clamp(15px, 2.1vh, 19px); height: clamp(15px, 2.1vh, 19px); }

  /* 화제글 머리글·카드도 낮춰서 첫 화면에 함께 */
  .feed-section { padding-top: clamp(8px, 1.4vh, 18px); }
  .feed-head-hot { margin-bottom: clamp(6px, 1vh, 12px); }
  .feed-head-hot h2 { font-size: clamp(1.125rem, 2.6vh, 1.625rem); }
  .hot-top { gap: clamp(9px, 1.1vw, 14px); }
  /* 사진은 16:9 로 살짝 낮게 — 높이를 버는 가장 큰 부분이에요 */
  .hc-cover { aspect-ratio: 16 / 9; }
  .hc-body { padding: clamp(7px, 1.1vh, 12px) 12px clamp(8px, 1.2vh, 13px); gap: clamp(2px, .5vh, 5px); }
  .hc-title { font-size: clamp(0.84375rem, 1.85vh, 1rem); -webkit-line-clamp: 1; }
  .hc-meta, .hc-stats { font-size: clamp(0.6875rem, 1.5vh, 0.8125rem); }
}

/* ---- 1단계: 보통 노트북(높이 950px 이하) ----
   숫자 통계 줄(6 / 100% / 24/7)은 첫인상에 꼭 필요하진 않아 접습니다.
   '이렇게 이용해요' 는 처음 온 분께 가장 필요한 안내라 계속 남겨요. */
@media (min-width: 900px) and (max-height: 950px) {
  .hero-stats { display: none; }
}

/* ---- 2단계: 낮은 화면(높이 820px 이하) ----
   사진을 납작하게, 작성자·시간 줄은 접고 반응 수치만 남깁니다.
   화제글 칸에서는 '얼마나 반응이 몰렸나'가 먼저 보여야 해서요. */
@media (min-width: 900px) and (max-height: 820px) {
  .hc-cover { aspect-ratio: 2 / 1; }
  .hc-meta { display: none; }
  .hc-body { padding: 8px 11px 9px; }
  .feed-head-hot { margin-bottom: 6px; margin-top: 0; }
  .hero-inner {
    padding-top: clamp(12px, 2vh, 28px) !important;
    padding-bottom: clamp(10px, 1.7vh, 24px) !important;
  }
  .feed-section { padding-top: 6px; }
  /* 카드 아래 'STEP 0' 줄은 이 높이부터 접습니다 */
  .how-card-note { display: none; }
}

/* ---- 3단계: 아주 낮은 창(높이 700px 이하) ----
   창을 작게 줄여 쓰는 경우예요. 사진을 더 납작하게 해서라도
   '메인 문구 + 화제글 카드'가 한 화면에 들어오게 합니다. */
@media (min-width: 900px) and (max-height: 700px) {
  .hc-cover { aspect-ratio: 2.6 / 1; }
  .hero-inner { padding-top: 9px !important; padding-bottom: 7px !important; }
  .hero h1 { font-size: clamp(1.75rem, 5.2vh, 2.625rem); margin-bottom: 10px; }
  .hero .lead { margin-bottom: 7px; }
  .hero-actions { margin-bottom: 0; }
  .feed-head-hot h2 { font-size: 1.0625rem; }
  .feed-head-hot { margin-bottom: 5px; }
  .hc-body { padding: 6px 10px 7px; }
  /* 예전에는 이 높이에서 '이렇게 이용해요' 를 통째로 숨겼어요.
     그런데 1366x768 노트북의 100% 배율이 딱 여기에 걸려서,
     화면 배율을 90% 로 낮춰야만 안내가 보이는 문제가 있었습니다.
     이제는 숨기지 않고 작게 만들어 항상 보이게 합니다. */
  /* 화제글을 아주 납작하게 줄여서 자리가 생겼으니,
     이용 안내는 너무 작게 만들지 않습니다 (읽으라고 있는 거니까요) */
  /* 셋을 나란히 두면서 자리가 빠듯해졌으니 안내 카드를 조금 좁힙니다 */
  .how-card { padding: 14px 15px; }
  .how-card-head { font-size: 1.21875rem; margin-bottom: 12px; }
  .how-steps { gap: 11px; }
  .how-steps li { font-size: 1.03125rem; line-height: 1.5; }
  .hs-num { width: 24px; height: 24px; font-size: 0.84375rem; }
}

/* =========================================================
   🦎 분류 페이지 상단 배경 사진
   ---------------------------------------------------------
   사진이 지정된 분류(.has-photo)에서만 켜집니다.
   사진이 없는 분류는 기존 모습 그대로예요.

   글자가 사진 위에 얹히므로, 왼쪽에서 오는 어두운 그라데이션으로
   읽을 자리를 만들어 줍니다. 사진 자체의 밝기와 상관없이
   대비가 확보돼야 해서 그라데이션은 사진 위에 따로 깔았어요.
   ========================================================= */
.page-hero.has-photo {
  position: relative;
  isolation: isolate;
  border-bottom: none;
  padding: clamp(38px, 7vh, 78px) 0 clamp(34px, 6vh, 66px);
  /* 사진 + 그 위를 덮는 어두운 막 (왼쪽이 진하고 오른쪽으로 옅어짐) */
  /* 글자가 놓이는 왼쪽 60%까지는 확실히 어둡게 유지합니다.
     (사진이 밝은 부분에서도 작은 글씨가 4.5:1 대비를 넘도록 맞췄어요) */
  background-image:
    linear-gradient(100deg, rgba(18, 22, 16, .90) 0%, rgba(18, 22, 16, .84) 46%, rgba(18, 22, 16, .46) 72%, rgba(18, 22, 16, .20) 88%, rgba(18, 22, 16, .34) 100%),
    var(--hero-img);
  background-size: cover, cover;
  background-position: center, var(--hero-focus, center);
  background-repeat: no-repeat, no-repeat;
}
/* 아래쪽을 살짝 어둡게 눌러, 다음 칸과 자연스럽게 이어지게 */
.page-hero.has-photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 78px; z-index: -1;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .28));
}

/* ---- 사진 여러 장을 나란히 (도마뱀·뱀·게코처럼) ----
   띠를 칸으로 나눠 각 칸에 한 마리씩. 글자는 이 위에 얹힙니다. */
.page-hero.has-photo-strip { background-image: none; background-color: #12160f; }
.cat-hero-strip {
  position: absolute; inset: 0; z-index: -2;
  display: flex; background: #12160f;
}
.chs-cell { flex: 1 1 0; min-width: 0; position: relative; overflow: hidden; }
.chs-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 사진 경계를 부드럽게 —
   칸끼리 살짝 겹쳐 놓고, 뒤쪽 칸의 왼쪽 끝을 서서히 나타나게 해서
   앞 사진과 자연스럽게 섞이도록 했어요. (딱딱하게 잘린 느낌 제거) */
.chs-cell + .chs-cell {
  margin-left: -7%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%);
          mask-image: linear-gradient(to right, transparent 0%, #000 16%);
}
/* 사진 위에 어두운 막 — 왼쪽(글자 자리)이 진하고 오른쪽으로 옅어집니다 */
.page-hero.has-photo-strip::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* 왼쪽 사진이 너무 어두워 안 보인다는 의견을 반영해 막을 걷어냈어요.
     글자가 놓이는 자리라 마냥 밝게는 못 하고, 작은 글씨가 4.5:1 대비를
     넘는 선에서 가장 밝은 값으로 맞췄습니다. */
  background: linear-gradient(100deg,
    rgba(18, 22, 16, .72) 0%, rgba(18, 22, 16, .66) 46%,
    rgba(18, 22, 16, .40) 72%, rgba(18, 22, 16, .18) 88%, rgba(18, 22, 16, .30) 100%);
}
/* 좁은 화면에서는 세 칸이 너무 좁아져서 두 칸만 (마지막은 접음) */
@media (max-width: 700px) {
  .chs-cell:nth-child(3) { display: none; }
}
@media (max-width: 460px) {
  .chs-cell:nth-child(2) { display: none; }
}

.page-hero.has-photo .breadcrumb { display: inline-block; }
.page-hero.has-photo .breadcrumb,
.page-hero.has-photo .breadcrumb a { color: rgba(255, 255, 255, .88); }
.page-hero.has-photo .breadcrumb a:hover { color: #fff; text-decoration: underline; }

.page-hero.has-photo h1 {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
}
/* 사진 위에 얹히는 소개 문장 — 밝은 글씨여야 읽힙니다.
   ⚠️ 예전에는 분류 페이지의 .cat-hero-desc 만 밝게 해 뒀는데,
      커뮤니티·허브·도감의 소개 문장은 그냥 <p> 라서 라이트 테마의
      회색 글씨가 어두운 사진 위에 그대로 얹혔어요 (대비 3.55).
      사진 위의 <p> 는 모두 밝게 둡니다. */
.page-hero.has-photo p { color: rgba(255, 255, 255, .92); }

/* .page-hero p 규칙(max-width:640px)보다 우선하도록 앞에 .has-photo 를 붙였어요 */
.page-hero.has-photo .cat-hero-desc {
  margin-top: 10px; max-width: 30em;
  color: rgba(255, 255, 255, .92); font-size: clamp(0.875rem, 1.9vh, 1.0625rem); line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

/* 두 번째 사진 — 오른쪽에 살짝 기울인 작은 사진 */
.cat-hero-inset {
  position: absolute; right: clamp(20px, 4vw, 68px); top: 50%;
  transform: translateY(-50%) rotate(3deg);
  width: clamp(170px, 17vw, 240px); margin: 0; z-index: 1;
  border-radius: 14px; overflow: hidden;
  border: 4px solid rgba(255, 255, 255, .92);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}
.cat-hero-inset img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* 좁은 화면에서는 작은 사진을 접습니다 (제목과 겹치지 않게) */
@media (max-width: 1100px) {
  .cat-hero-inset { display: none; }
}
/* 화면이 작으면 가벼운 사진으로 바꿔 받습니다 */
@media (max-width: 900px) {
  .page-hero.has-photo {
    background-image:
      linear-gradient(170deg, rgba(18, 22, 16, .80) 0%, rgba(18, 22, 16, .52) 55%, rgba(18, 22, 16, .34) 100%),
      var(--hero-img-sm, var(--hero-img));
  }
}



/* =========================================================
   🎬 글쓰기 — 동영상 위치 옮기기
   손잡이(⠿)를 끌거나 ↑ ↓ 버튼으로 자리를 바꿉니다.
   ========================================================= */
.ed-media {
  position: relative; margin: 14px 0; border-radius: 12px; overflow: hidden;
  border: 1.5px solid var(--line); background: var(--surface);
}
.ed-media video { display: block; width: 100%; max-height: 460px; background: #000; }
.ed-media img { display: block; width: 100%; height: auto; }
/* 사진은 원래 크기를 넘지 않게 (작은 사진이 억지로 늘어나지 않도록) */
.ed-media-img img { width: auto; max-width: 100%; margin: 0 auto; }

.ed-media-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 8px 6px 10px; font-size: 0.78125rem;
  background: var(--chip-bg); border-bottom: 1px solid var(--line); color: var(--text-muted);
}
.ed-grip {
  cursor: grab; user-select: none; font-weight: 700;
  padding: 3px 8px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line);
}
.ed-grip:active { cursor: grabbing; }
.ed-media-btns { display: flex; gap: 4px; }
.ed-mv {
  width: 26px; height: 24px; line-height: 1; font-size: 0.8125rem; font-weight: 700;
  border-radius: 6px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); cursor: pointer;
}
.ed-mv:hover { border-color: var(--brand); color: var(--brand); }
.ed-mv[data-dir="del"]:hover { border-color: #d9534f; color: #d9534f; }
/* 소리 켜기/끄기 — 무음이면 한눈에 보이게 */
.ed-sound { width: auto; padding: 0 8px; }
.ed-sound.is-muted { border-color: #d9913b; background: rgba(217, 145, 59, .14); }

/* 끌고 있는 동안 */
.ed-media.ed-dragging { opacity: .45; }

/* 스티커 — 글자처럼 흐르지만 끌어서 옮길 수 있어요 */
.sticker-in { cursor: grab; }
.sticker-in:active { cursor: grabbing; }
.sticker-in.ed-dragging { opacity: .4; }
/* 여기에 놓이게 된다는 표시 */
.ed-drop-here { box-shadow: 0 -3px 0 0 var(--brand); }
.ed-drop-end::after {
  content: ""; display: block; height: 3px; border-radius: 2px;
  background: var(--brand); margin-top: 4px;
}

@media (max-width: 560px) {
  /* 손가락으로는 끌기가 어려워서, 버튼을 조금 크게 */
  .ed-mv { width: 34px; height: 30px; font-size: 0.9375rem; }
  .ed-grip { font-size: 0.75rem; }
}

/* ---------- 🔍 백업 점검 결과 ---------- */
.bk-health {
  border: 1.5px dashed var(--line); border-radius: 12px;
  padding: 12px 14px; margin: 0 0 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.bk-health-note { font-size: 0.78125rem; color: var(--text-muted); }
.bk-health-run { font-size: 0.875rem; color: var(--text-muted); }
.bk-health.done { display: block; border-style: solid; }
.bk-health.done.ok { border-color: #9fd7b4; background: #f1faf4; }
.bk-health.done.warn { border-color: #eccb92; background: #fdf6ea; }
.bk-health.done.error { border-color: #e2a3a0; background: #fdf0ef; }
.bk-health-head { font-size: 0.9375rem; font-weight: 800; margin-bottom: 10px; color: var(--heading); }
.bk-health-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.bk-health-list li { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; font-size: 0.84375rem; }
.bk-health-list li b { flex: none; }
.bk-health-list li span { color: var(--text-muted); }
.bk-health-list li.no b { color: #c0504d; }
.bk-health-problems { font-size: 0.8125rem; line-height: 1.65; margin-bottom: 10px; }
.bk-health-problems ul { margin-top: 4px; padding-left: 4px; }
.bk-health-problems li { position: relative; padding-left: 14px; color: #7a5312; }
.bk-health-problems li::before { content: "•"; position: absolute; left: 2px; }
.bk-health-good { font-size: 0.84375rem; color: #235c3a; margin-bottom: 10px; }

/* ---------- ▶ 목록·화제글의 동영상 미리보기 ----------
   첫 장면만 받아서 보여주고, 마우스를 올린 동안만 소리 없이 재생합니다.
   (휴대폰에는 마우스가 없어 첫 장면 그대로 보입니다) */
.thumb-video { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.thumb-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.thumb-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.8125rem; color: #fff;
  background: rgba(0, 0, 0, .55); border: 1.5px solid rgba(255, 255, 255, .85);
  padding-left: 2px;   /* ▶ 모양이 가운데로 보이게 */
  pointer-events: none;
}
.thumb-video.playing .thumb-play { opacity: 0; }
/* 한 줄짜리 작은 자리에서는 표시도 작게 */
.ff-thumb .thumb-play, .pthumb .thumb-play { width: 24px; height: 24px; font-size: 0.625rem; }

/* ---------- 이용 안내 탭 — 한 줄로 ----------
   항목이 늘어나도 줄이 바뀌지 않게 가로로 이어지고,
   좁은 화면에서는 옆으로 밀어서 볼 수 있게 했습니다. */
#infoTabs {
  display: flex; flex-wrap: nowrap; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 6px; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
#infoTabs .chip { flex: 0 0 auto; white-space: nowrap; }
/* 스크롤 막대를 얇고 눈에 안 띄게 */
#infoTabs::-webkit-scrollbar { height: 6px; }
#infoTabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
#infoTabs::-webkit-scrollbar-track { background: transparent; }

/* ---------- 🏅 등급 안내 표 ---------- */
.info-note { font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 12px; }
.level-table-wrap { overflow-x: auto; margin-bottom: 14px; }
.level-table { width: 100%; border-collapse: collapse; font-size: 0.90625rem; min-width: 320px; }
.level-table th {
  text-align: left; padding: 8px 10px; font-size: 0.8125rem; color: var(--text-muted);
  border-bottom: 1.5px solid var(--line); font-weight: 700;
}
.level-table td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--text); }
.level-table tr:last-child td { border-bottom: none; }
.level-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.lv-note {
  font-size: 0.71875rem; color: var(--chip-text); background: var(--chip-bg);
  padding: 2px 7px; border-radius: 999px; margin-left: 6px;
}

/* ---------- 🌱 홈의 가입인사 안내 ---------- */
#greetBanner { margin: 18px auto 0; }
.greet-card {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; border-radius: 16px;
  background: var(--chip-bg); border: 1.5px solid var(--brand-soft);
  box-shadow: var(--shadow-sm);
}
.greet-ico { font-size: 2.125rem; flex: none; line-height: 1; }
.greet-body { flex: 1 1 260px; min-width: 0; }
.greet-title { font-size: 1rem; font-weight: 800; color: var(--heading); margin-bottom: 4px; }
.greet-desc { font-size: 0.875rem; color: var(--text); line-height: 1.6; }
.greet-desc b { color: var(--heading); }
.greet-btn { flex: none; white-space: nowrap; }

@media (max-width: 560px) {
  .greet-card { padding: 14px 16px; gap: 12px; }
  .greet-ico { font-size: 1.75rem; }
  .greet-btn { width: 100%; justify-content: center; }
}

/* =========================================================
   📱 모바일 다듬기
   ---------------------------------------------------------
   구조를 따로 만들지 않고 지금 화면을 좁은 폭에 맞춥니다.
   (레이아웃은 이미 한 줄로 잘 접혀서, 헤더만 넘치고 있었어요)
   ========================================================= */
@media (max-width: 640px) {
  /* 헤더 오른쪽이 화면보다 넓어서 가로 스크롤이 생기던 문제 —
     글자를 줄이고, 자리가 모자라면 아랫줄로 넘어가게 합니다. */
  .header-right {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap; justify-content: flex-end;
    min-width: 0; max-width: 100%;
  }
  .header-right .btn-sm { padding: 7px 10px; font-size: 0.8125rem; }
  /* '테마' 글자 대신 🎨 아이콘만 */
  .tw-text { display: none; }
  .tw-ico { display: inline; }
  .caret { margin-left: 2px; }

  /* 손가락으로 누르기 좋은 크기 (권장 44px) */
  .icon-btn { width: 40px; height: 40px; }
  .btn { min-height: 42px; }
  /* 칩 — 누르기 좋은 높이(38px 안팎)는 지키되, 글씨와 좌우 여백을 줄여
     한 줄에 더 들어가게 합니다. 예전에는 16.5px 글씨에 10/16 여백이라
     칩 하나가 42px 였고, 필터만 네 줄을 먹었어요. */
  .chip { padding: 8px 13px; font-size: 0.875rem; }

  /* 🏪 업체 탭(목록·소식·지도·박람회) 도 같은 이유로 줄입니다 */
  .shop-tabs { gap: 6px; margin-bottom: 16px; }
  .shop-tab { padding: 9px 14px; font-size: 0.875rem; }

  /* 업체 검색창 — 글씨는 16px 을 지킵니다.
     ⚠️ iOS 는 16px 보다 작은 입력칸에 초점이 가면 화면을 확대해 버립니다.
        여기만은 줄이면 안 돼요. 대신 위아래 여백만 줄입니다. */
  .shop-search input { padding-top: 10px; padding-bottom: 10px; }
  .auth-link { padding: 8px 4px; display: inline-block; }

  /* 너무 작아 읽기 힘든 글씨 올리기 */
  .pmeta, .ff-meta, .hc-meta, .hc-stats, .feed-note,
  .field-help, .info-note, .bk-health-note { font-size: 0.8125rem; }
  .level-table { font-size: 0.875rem; }

  /* 가로로 넘치기 쉬운 것들은 그 안에서만 밀어보게 */
  .level-table-wrap, .bk-table, .adm-table-wrap { overflow-x: auto; }
  /* 긴 주소·아이디가 칸을 밀어내지 않게 */
  .profile-email, .adm-email { overflow-wrap: anywhere; }

  /* 뱃지 글씨가 11px 이라 작았어요 */
  .role-badge, .level-badge, .lv-note { font-size: 0.75rem; }

  /* 체크박스가 18px 이라 손가락으로 누르기 힘들었어요 */
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  .agree-row, .checkbox-row { gap: 10px; align-items: center; }

  /* 경로 표시(홈 / 갑각류 / …)는 위쪽 기본 규칙에서 이미 넓혀 뒀어요.
     여기서 좁은 값으로 덮어쓰면 오히려 되돌아가서 지웠습니다. */

  /* 서랍 닫기 단추 크게 */
  .drawer-close { width: 42px; height: 42px; font-size: 1.375rem; }

  /* 글쓰기 도구 단추(B I U S, 정렬)를 손가락에 맞게.
     줄이 넘치면 아랫줄로 내려가게 해서 가로 스크롤이 안 생기게 합니다. */
  .ed-toolbar { flex-wrap: wrap; gap: 6px; }
  .ed-fmt { width: 38px; height: 38px; font-size: 0.9375rem; }
  .ed-toolbar select { height: 38px; font-size: 0.875rem; }
  .ed-toolbar input[type="color"] { width: 44px; height: 34px; }
}
/* 아주 좁은 기기 */
@media (max-width: 380px) {
  .brand-title { font-size: 0.9375rem; }
  .brand-sub { display: none; }
  .header-right .btn-sm { padding: 6px 8px; font-size: 0.78125rem; }
}
/* 넓은 화면에서는 아이콘을 숨기고 글자만 */
.tw-ico { display: none; }

/* =========================================================
   📖 업체 소개 화면 (목록에서 '소개 보기')
   ========================================================= */
.sd-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .55);
  display: grid; place-items: center; padding: 20px;
  overflow-y: auto;
}
.sd-backdrop[hidden] { display: none; }
.sd-panel {
  position: relative; width: 100%; max-width: 720px;
  max-height: 86vh; overflow-y: auto;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 18px; padding: 26px; box-shadow: var(--shadow-lg);
}
.sd-close {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px; border-radius: 50%; font-size: 1.375rem; line-height: 1;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
}
.sd-close:hover { border-color: var(--brand); color: var(--brand); }

.sd-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; padding-right: 44px; }
.sd-head h2 { font-size: clamp(1.1875rem, 2.6vw, 1.5625rem); color: var(--heading); margin-bottom: 6px; }
.sd-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sd-sub { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 16px; }

/* 한 줄 공지 — 목록과 소개 화면 모두에서 눈에 띄게 */
.shop-notice {
  display: inline-block; margin-bottom: 10px;
  padding: 6px 12px; border-radius: 999px; font-size: 0.84375rem; font-weight: 700;
  background: var(--chip-bg); color: var(--chip-text);
}

.sd-photos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px; margin-bottom: 18px;
}
.sd-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }

.sd-intro { font-size: 0.96875rem; line-height: 1.8; color: var(--text); margin-bottom: 20px; }
.sd-intro p { margin-bottom: 12px; }
.sd-intro img { max-width: 100%; border-radius: 12px; margin: 10px 0; }

.sd-info { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.sd-row { display: flex; gap: 10px; align-items: baseline; font-size: 0.90625rem; flex-wrap: wrap; }
.sd-ico { flex: none; }
.sd-label { flex: none; font-weight: 700; color: var(--heading); min-width: 58px; }
.sd-val { color: var(--text); overflow-wrap: anywhere; }
.sd-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* 입점 폼의 '자세한 소개' 접이식 */
.shop-more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.shop-more summary { cursor: pointer; font-weight: 800; color: var(--heading); font-size: 0.9375rem; }
.shop-more .field { margin-top: 12px; }

@media (max-width: 640px) {
  .sd-backdrop { padding: 0; }
  .sd-panel { max-width: none; max-height: 100vh; min-height: 100vh; border-radius: 0; padding: 20px 16px 40px; }
  .sd-photos { grid-template-columns: 1fr 1fr; }
}


/* =========================================================
 📱 손가락으로 누르기 좋게 (맨 끝에 두는 이유)
 ---------------------------------------------------------
 CSS 는 같은 조건이면 '나중에 쓴 것' 이 이깁니다.
 이 규칙을 파일 위쪽에 뒀더니, 아래쪽에 있는 원래 크기 지정에
 번번이 밀려서 적용이 안 됐어요. 그래서 맨 끝으로 옮겼습니다.
 ========================================================= */
/* ---------- 손가락으로 누르기 좋게 ----------
 글 속에 섞인 링크는 글씨 높이 그대로라 화면에서 14~18px 밖에 안 됩니다.
 마우스로는 괜찮지만 손가락으로는 누르기 어려워요.
 글씨 크기와 줄 간격은 그대로 두고, '눌리는 면적'만 위아래로 넓힙니다.
 (margin 을 같은 값만큼 음수로 줘서 글줄이 벌어지지 않게 했어요) */
@media (max-width: 820px) {
.auth-alt a, .consent-note a,
.info-list a, .info-lead a, .info-block p a,
.footer-col a, .foot-links a {
  display: inline-block; padding: 7px 2px; margin: -7px 0;
}

/* 작은 단추들도 손가락에 맞게 키웁니다.
   마우스로는 26~28px 도 충분하지만 손가락은 잘 안 눌려요. */
.cmt-adm { height: 34px; padding: 0 12px; font-size: 0.8125rem; }
.glow-pick { min-height: 34px; padding: 6px 12px; }
.ed-size-btn { width: 32px; height: 32px; font-size: 1.0625rem; }
/* 옆의 +/- 단추는 32px 인데 입력칸만 24px 이라 손가락에 작았어요 */
.ed-size input[type="number"] { width: 46px; font-size: 0.9375rem; min-height: 32px; }
/* 관리자 표 안의 글 제목 링크 */
.adm-table td a { display: inline-block; padding: 7px 0; margin: -7px 0; }
}

/* ---------- 🏅 어드민: 칭호 지정/해제 ---------- */
.adm-t-desc { color: var(--text-muted); font-size: 0.8125rem; }
.adm-t-state { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.adm-t-auto   { background: rgba(47, 107, 63, .14); color: var(--text); }
.adm-t-grant  { background: rgba(43, 58, 103, .16); color: var(--text); }
.adm-t-revoke { background: rgba(190, 60, 60, .16); color: var(--text); }
.adm-t-none   { background: var(--chip-bg); color: var(--text-muted); }
/* 지금 상태인 단추는 눌린 것처럼 */
.cmt-adm.adm-t-on { background: var(--brand); color: var(--on-brand, #fff); border-color: transparent; opacity: 1; }
.adm-t-worn { margin-left: 6px; font-size: 0.71875rem; font-weight: 800; color: var(--brand); white-space: nowrap; }

/* ==========================================================
   🏆 업적
   ----------------------------------------------------------
   업적을 이루면 칭호를 받습니다. 그래서 '조건 → 칭호' 로 보여줘요.
   ========================================================== */

/* 메뉴 맨 오른쪽 — 분류가 아니라서 작게 붙입니다 */
.cat-bar-inner a.cat-ach {
  font-size: 0.875rem; padding-left: 10px; padding-right: 10px;
  color: var(--text-muted); white-space: nowrap;
}
.cat-bar-inner a.cat-ach:hover { color: var(--heading); }
.cat-bar-inner a.cat-ach.active { color: var(--brand); border-bottom-color: var(--brand); }

.ach-title { font-size: 1.625rem; color: var(--heading); margin: 4px 0 10px; }
.ach-group { margin-top: 26px; }
.ach-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ach-group-head h3 { margin: 0; font-size: 1.1875rem; color: var(--heading); }
.ach-group-note { font-size: 0.8125rem; color: var(--text-muted); }

/* 넓은 화면에서는 두 칸으로 채웁니다 - 한 줄에 하나씩 두면 오른쪽이 텅 비어요 */
.ach-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 10px; }
/* 조건, 칭호, 진행도를 한 줄로 늘어놓아 가로를 다 씁니다 */
.ach-item {
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.ach-item.got { border-color: var(--brand); background: var(--chip-bg); }
.ach-item.locked { opacity: .85; }
.ach-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ach-cond { font-size: 1.0625rem; font-weight: 800; color: var(--heading); }
.ach-reward { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ach-arrow { color: var(--text-muted); font-size: 0.9375rem; }
.ach-worn { font-size: 0.75rem; font-weight: 800; color: var(--brand); }
/* 업적 칸에서는 칭호도 조금 크게 - 여기가 주인공이니까요 */
.ach-item .title-badge { font-size: 0.8125rem; padding: 4px 10px; }

/* 얼마나 왔는지 */
.ach-prog { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ach-bar {
  display: inline-block; width: 110px; height: 8px; border-radius: 999px;
  background: var(--surface-2, rgba(0,0,0,.08)); overflow: hidden;
}
.ach-bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.ach-bar-text { font-size: 0.78125rem; color: var(--text-muted); white-space: nowrap; }
.ach-done {
  font-size: 0.75rem; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  background: var(--brand); color: var(--on-brand, #fff); white-space: nowrap;
}

/* 좁은 화면에서는 한 줄이 빠듯해서 진행 막대를 아래로 내립니다 */
@media (max-width: 620px) {
  .ach-list { grid-template-columns: 1fr; }
  .ach-item { flex-wrap: wrap; align-items: flex-start; }
  .ach-main { flex: 1 1 100%; }
  .ach-prog { width: 100%; }
  .ach-bar { flex: 1; width: auto; }
  .ach-cond { font-size: 1rem; }
}

/* ==========================================================
   🕊️ 잔혹한 천사 — 숨은 업적 보상
   ----------------------------------------------------------
   흰 오라가 일렁이고, 칭호 양옆에 날개가 달립니다.

   ⚠️ 날개는 이모지가 아니라 그림(SVG)으로 그립니다.
      이모지는 기기마다 모양이 다르고 아예 안 보이는 곳도 있어서요.
   ⚠️ 오라를 순수한 흰색으로만 하면 밝은 테마에서 안 보입니다.
      그래서 아주 옅은 푸른빛을 섞었어요 (눈에는 흰빛으로 보입니다).
   ========================================================== */
.title-eva {
  position: relative;
  background: linear-gradient(135deg, #ffffff, #f2f5ff 45%, #e6ebf8);
  color: #23233a;                 /* 흰 바탕이라 글씨는 진하게 */
  border-color: #ffffff;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  /* 날개가 들어갈 자리를 양옆에 비워 둡니다 */
  margin-left: 22px; margin-right: 20px;
}

/* 연기처럼 — 그림자 세 갈래가 서로 다른 쪽으로 천천히 흘러다닙니다.
   하나만 켜고 끄면 '깜빡임' 이 되고, 여러 갈래를 어긋나게 움직여야
   피어오르는 연기처럼 보여요. 맨 앞 한 줄은 테두리라 고정입니다.
   ⚠️ 칸마다 그림자 개수가 같아야 부드럽게 이어집니다 (네 개로 맞췄어요). */
/* 움직임이 불편한 분들을 위해 — 일렁임만 멈추고 오라는 남깁니다 */
@media (prefers-reduced-motion: reduce) {
  .title-eva {
    animation: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 12px rgba(226, 238, 255, .9);
  }
}

/* 연기가 뱃지 밖으로 나가야 해서 잘라내기를 풉니다.
   대신 광택은 자리에 두고 무늬만 움직이게 바꿔서 밖으로 안 새게 했어요. */
.role-admin { overflow: visible; }
.role-admin::after {
  transform: none;
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: adminShine 4s ease-in-out infinite;
  border-radius: inherit;
}
@keyframes adminShine {
  0%, 62%   { background-position: -70% 0; }
  82%, 100% { background-position: 170% 0; }
}

/* 날개는 한 자리(::after)로 모읍니다 — ::before 를 연기에 내줘야 해서요 */
.title-eva::after {
  content: ""; position: absolute; inset: 0 -20px;
  transform: none; width: auto; height: auto;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath fill='%23ffffff' stroke='%23cfd6e6' stroke-width='.6' stroke-linejoin='round' d='M23 10c-4.4-.2-8.2 1.1-11.4 3.9C8.9 16.2 5.2 17.4 1 17.6c2.6-1.9 4.3-3.8 5.2-5.7-1.4.5-3 .8-4.8.9 2.4-1.4 4.1-2.9 5.2-4.6-1.1.2-2.3.3-3.6.3C5.6 7 8.1 5.2 9.6 3.1c.5 1.2 1.1 2.1 1.8 2.8.6-1.6 1.5-3 2.6-4.3.3 1.6.8 2.9 1.6 3.9.9-1 2-1.8 3.3-2.5-.2 1.5-.1 2.8.3 3.9 1.1-.4 2.3-.6 3.8-.6-1 .9-1.7 1.8-2 2.7z'/%3E%3C/svg%3E") left center / 20px 17px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cg transform='translate(24,0) scale(-1,1)'%3E%3Cpath fill='%23ffffff' stroke='%23cfd6e6' stroke-width='.6' stroke-linejoin='round' d='M23 10c-4.4-.2-8.2 1.1-11.4 3.9C8.9 16.2 5.2 17.4 1 17.6c2.6-1.9 4.3-3.8 5.2-5.7-1.4.5-3 .8-4.8.9 2.4-1.4 4.1-2.9 5.2-4.6-1.1.2-2.3.3-3.6.3C5.6 7 8.1 5.2 9.6 3.1c.5 1.2 1.1 2.1 1.8 2.8.6-1.6 1.5-3 2.6-4.3.3 1.6.8 2.9 1.6 3.9.9-1 2-1.8 3.3-2.5-.2 1.5-.1 2.8.3 3.9 1.1-.4 2.3-.6 3.8-.6-1 .9-1.7 1.8-2 2.7z'/%3E%3C/g%3E%3C/svg%3E") right center / 20px 17px no-repeat;
  filter: drop-shadow(0 0 3px rgba(226, 236, 255, .95));
}

/* 움직임이 불편한 분들을 위해 — 연기를 멈추고 은은하게만 남깁니다 */
@media (prefers-reduced-motion: reduce) {
  .role-admin::after { animation: none; }
}

/* ==========================================================
   📌 글쓰기 도구 모음을 따라오게
   ----------------------------------------------------------
   글이 길어지면 글자 크기·색을 바꾸려고 맨 위까지 올라갔다가
   다시 내려와야 했어요. 도구 모음이 화면 위에 붙어 따라옵니다.

   붙는 위치는 머리글 바로 아래입니다. 머리글 높이는 화면 크기마다
   달라서 write.js 가 재서 --hdr-h 에 넣어 줍니다.
   ========================================================== */
.ed-bars {
  position: sticky; top: var(--hdr-h, 0px); z-index: 20;
  background: var(--surface);
  /* 글이 도구 모음 뒤로 비쳐 보이지 않게 */
  margin: 0 -4px; padding: 0 4px;
}
/* 붙어 있는 동안에는 아래에 옅은 그림자를 둬서 글과 구분됩니다 */
.ed-bars.is-stuck { box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .45); }
/* 두 줄이 겹쳐 있던 테두리를 정리 */
.ed-bars .ed-toolbar { margin-top: 0; }

/* ==========================================================
   💨 연기 오라 — 자리 잡기
   ----------------------------------------------------------
   연기 자체는 assets/js/smoke.js 가 SVG 로 그립니다.
   (CSS 로는 가장자리가 찢어지는 모양을 못 만들어요)
   여기서는 그 그림을 뱃지 뒤에 깔아 주기만 합니다.
   ========================================================== */
.title-eva, .role-admin { position: relative; overflow: visible; }
/* ⚠️ 뱃지 '뒤' 에 깔면 안 됩니다.
   뱃지 바탕이 불투명해서 연기의 몸통이 가려지고,
   바깥으로 삐져나온 테두리만 남아 '검은 얼룩' 처럼 보였어요.

   그래서 뱃지 '위' 로 올리고, 연기가 나오는 자리를 뱃지 윗변쯤에 둡니다.
   덩어리가 뱃지에서 시작해 위로 피어오르는 게 그대로 보입니다.
   글씨를 덮는 아래쪽은 연하게 시작해서 읽는 데 지장이 없어요. */
.nuri-smoke {
  position: absolute;
  /* 좁게 - 옆 글자를 덮지 않도록 뱃지 안쪽으로 물려 둡니다 */
  left: 20%; right: 20%; width: auto;
  /* 낮게 - 뱃지 위 22px 까지만. 뿌리는 뱃지 안쪽 8px 에 박습니다.
     주의: 이 뒤에 height:auto 를 두면 안 됩니다 (덮어써져서 안 먹어요) */
  /* 연기가 뱃지 글자를 덮어 흐리게 만들던 문제 —
     뿌리는 윗변에 살짝만 걸치게 하고 몸통은 전부 위로 뺍니다 */
  top: -22px; bottom: auto; height: 25px;
  pointer-events: none; z-index: 3;   /* 뱃지 글씨보다 위 */
  opacity: .7;                        /* 글씨가 비쳐 보이게 */
}
/* 관리자 뱃지의 광택은 자리를 옮기지 않고 무늬만 움직입니다
   (잘라내기를 풀어서, 옮기면 밖으로 새어 나가요) */
.role-admin::after {
  transform: none;
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: adminShine 4s ease-in-out infinite;
  border-radius: inherit;
}
@keyframes adminShine {
  0%, 62%   { background-position: -70% 0; }
  82%, 100% { background-position: 170% 0; }
}

/* 좁은 화면에서 '이렇게 이용해요' 카드가 화면 끝에 딱 붙던 문제.
   테두리를 굵게 하고 나니 잘린 것처럼 보여서 옆을 조금 띄웁니다. */
@media (max-width: 720px) {
  .how-card { width: auto; margin-left: 14px; margin-right: 14px; }
}

/* ==========================================================
   👑 누리의 전설 — 공개된 칭호를 모두 모은 사람
   ----------------------------------------------------------
   뱃지는 진짜 금이 흐르듯, 닉네임 글자까지 금빛으로 반짝입니다.

   ⚠️ 금색은 밝은 화면에서 잘 안 읽힙니다.
      흰 바탕에 밝은 금은 대비가 2 밖에 안 나와요.
      그래서 닉네임 금색은 테마마다 다르게 씁니다.
        · 밝은 화면 → 짙은 금 (읽히게)
        · 어두운 화면 → 밝은 금 (빛나게)
      뱃지는 바탕이 금색이라 글씨를 진한 갈색으로 둡니다.
   ========================================================== */
:root {
  --legend-1: #5a4005;   /* 닉네임 금색 — 밝은 화면용(짙은 금) */
  --legend-2: #78590a;
  --legend-3: #946d0e;
}
:root:not([data-theme="light"]) {
  --legend-1: #ffd76a;   /* 어두운 화면용(밝은 금) */
  --legend-2: #fff0bf;
  --legend-3: #ffcf5c;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="unit02"]) {
    --legend-1: #5a4005; --legend-2: #78590a; --legend-3: #946d0e;
  }
}
[data-theme="dark"], [data-theme="unit02"] {
  --legend-1: #ffd76a; --legend-2: #fff0bf; --legend-3: #ffcf5c;
}
[data-theme="light"] {
  --legend-1: #5a4005; --legend-2: #78590a; --legend-3: #946d0e;
}

/* ---------- 뱃지 ---------- */
.title-legend {
  position: relative; overflow: hidden;
  /* 금이 흐르는 바탕 */
  /* 가장 어두운 금이 #a9791a 였을 때 글씨 대비가 3.73 이라 기준에 못 미쳤어요.
     어두운 쪽을 밝혀서 어느 자리에 글씨가 놓여도 읽히게 합니다. */
  background: linear-gradient(100deg,
    #c08d1f 0%, #e9c250 18%, #fff6d4 30%, #e9c250 42%,
    #c08d1f 58%, #e9c250 74%, #fff6d4 86%, #c08d1f 100%);
  background-size: 300% 100%;
  color: #3a2600;                     /* 금 위에 얹는 글씨는 진한 갈색 */
  border-color: #fff0bf;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  box-shadow: 0 0 0 1px rgba(255, 232, 160, .8), 0 0 14px rgba(255, 213, 100, .55);
  animation: legend-flow 6s linear infinite;
}
@keyframes legend-flow {
  0%   { background-position:   0% 50%; }
  100% { background-position: 300% 50%; }
}

/* 반짝임 — 작은 빛 알갱이가 깜빡입니다 */
.title-legend::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1.1px, transparent 1.6px) 18% 30% / 100% 100% no-repeat,
    radial-gradient(circle, rgba(255,255,255,.9)  0 1px,   transparent 1.5px) 62% 66% / 100% 100% no-repeat,
    radial-gradient(circle, rgba(255,255,255,.85) 0 .9px,  transparent 1.4px) 84% 26% / 100% 100% no-repeat;
  animation: legend-twinkle 2.6s ease-in-out infinite;
}
@keyframes legend-twinkle {
  0%, 100% { opacity: .25; }
  35%      { opacity: 1; }
  70%      { opacity: .5; }
}
/* 빛이 스윽 훑고 지나갑니다 */
.title-legend::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
  background-size: 260% 100%; background-repeat: no-repeat;
  animation: legend-sheen 4.5s ease-in-out infinite;
}
@keyframes legend-sheen {
  0%, 55%   { background-position: -60% 0; }
  85%, 100% { background-position: 170% 0; }
}

/* ---------- 닉네임 글자 ---------- */
.author-legend {
  background: linear-gradient(100deg,
    var(--legend-1) 0%, var(--legend-3) 24%, var(--legend-2) 38%,
    var(--legend-3) 52%, var(--legend-1) 72%, var(--legend-3) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: legend-flow 6s linear infinite;
  font-weight: 800;
}
/* 어두운 화면에서만 은은한 빛무리 (밝은 화면에서는 번져 보여서 안 넣어요) */
:root:not([data-theme="light"]) .author-legend {
  filter: drop-shadow(0 0 6px rgba(255, 215, 106, .45));
}

/* 움직임이 불편한 분들을 위해 — 흐름과 반짝임을 멈춥니다 */
@media (prefers-reduced-motion: reduce) {
  .title-legend, .author-legend { animation: none; }
  .title-legend::before { animation: none; opacity: .7; }
  .title-legend::after { animation: none; opacity: 0; }
}

/* 업적 칸의 '능력' 줄 — 이 칭호로 무엇을 할 수 있는지 */
.ach-ability {
  flex: 1 1 100%;
  margin-top: 6px; padding: 6px 10px;
  font-size: 0.8125rem; line-height: 1.5; color: var(--text);
  background: var(--chip-bg); border-radius: 8px;
  border-left: 3px solid var(--accent);
}

/* ==========================================================
   🖤 관리자 — '누리의 전설' 과 같은 방식, 색만 검정
   ----------------------------------------------------------
   전설이 금이 흐르고 반짝인다면, 관리자는 흑요석이 흐르고
   차가운 빛이 스칩니다. 구조는 똑같아요.
     · 바탕이 흐르고
     · 빛 알갱이가 반짝이고
     · 빛이 스윽 훑고 지나갑니다 (이건 원래 있던 광택을 씁니다)

   ⚠️ 검정으로 반짝임을 만들 수는 없습니다. 검은 바탕에 검은
      알갱이는 안 보이니까요. 그래서 알갱이만 차가운 은빛으로 둡니다.
      '검은 보석이 빛을 튕겨내는' 느낌이에요.
   ========================================================== */
.role-admin {
  /* 흑요석이 흐르는 바탕 */
  background: linear-gradient(100deg,
    #14192a 0%, #2b3450 18%, #46527a 30%, #2b3450 42%,
    #14192a 58%, #2b3450 74%, #46527a 86%, #14192a 100%);
  background-size: 300% 100%;
  animation: legend-flow 7s linear infinite;   /* 전설과 같은 흐름, 조금 느리게 */
}
/* 반짝임 — 검은 보석이 빛을 튕겨냅니다 */
.role-admin::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle, rgba(226,232,255,.95) 0 1.1px, transparent 1.6px) 22% 32% / 100% 100% no-repeat,
    radial-gradient(circle, rgba(198,208,245,.9)  0 1px,   transparent 1.5px) 58% 68% / 100% 100% no-repeat,
    radial-gradient(circle, rgba(226,232,255,.85) 0 .9px,  transparent 1.4px) 82% 28% / 100% 100% no-repeat;
  animation: legend-twinkle 3s ease-in-out infinite;
}

/* ---------- 관리자 닉네임 ---------- */
:root {
  --admin-1: #14192a;   /* 밝은 화면용 — 짙은 흑요석 */
  --admin-2: #2b3450;
  --admin-3: #46527a;
}
:root:not([data-theme="light"]) {
  --admin-1: #cfd6f0;   /* 어두운 화면용 — 차가운 은빛
                           (어두운 바탕에 검은 글씨는 안 보여서요) */
  --admin-2: #ffffff;
  --admin-3: #b9c3e6;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="unit02"]) {
    --admin-1: #14192a; --admin-2: #2b3450; --admin-3: #46527a;
  }
}
[data-theme="dark"], [data-theme="unit02"] {
  --admin-1: #cfd6f0; --admin-2: #ffffff; --admin-3: #b9c3e6;
}
[data-theme="light"] {
  --admin-1: #14192a; --admin-2: #2b3450; --admin-3: #46527a;
}

.author-admin {
  background: linear-gradient(100deg,
    var(--admin-1) 0%, var(--admin-3) 24%, var(--admin-2) 38%,
    var(--admin-3) 52%, var(--admin-1) 72%, var(--admin-3) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: legend-flow 7s linear infinite;
  font-weight: 800;
}
:root:not([data-theme="light"]) .author-admin {
  filter: drop-shadow(0 0 6px rgba(190, 200, 240, .35));
}

@media (prefers-reduced-motion: reduce) {
  .role-admin, .author-admin { animation: none; }
  .role-admin::before { animation: none; opacity: .7; }
}

/* ==========================================================
   💬 햄버거 옆 말풍선 — "더 다양한 기능을 보고 싶다면 여기로!!"
   ----------------------------------------------------------
   ⚠️ 이 말풍선은 '떠 있는' 것이라 헤더 줄에 자리를 차지하지 않습니다.
      예전에는 헤더 줄 안에 넣었더니 햄버거와 로고가 오른쪽으로
      밀려서 왼쪽이 텅 비었어요. 로고 자리는 건드리면 안 됩니다.

   두 가지 자리로 나뉩니다.
     · 화면이 아주 넓을 때(1400px 이상) — 햄버거 왼쪽, 꼬리는 오른쪽
       (1415px 에서 햄버거 왼쪽 여백이 148px, 두 줄로 접으면 118px 이면 돼요)
     · 그보다 좁을 때 — 햄버거 아래, 꼬리는 위쪽
       (1280px 에서는 왼쪽 여백이 80px 뿐이라 말풍선이 화면 밖으로 나갑니다)

   ⚠️ 홈에서만 나오고, 한 번 누르면 그 화면에서는 사라집니다.
      홈에 다시 들어오면 또 나와요 (main.js).
   ========================================================== */
.menu-hint {
  position: absolute; z-index: 120;
  /* 기본 자리 — 햄버거 아래 */
  left: 8px; top: calc(100% - 4px);
  padding: 9px 13px; min-height: 32px;
  border: 0; border-radius: 999px;
  background: var(--accent); color: var(--on-accent, #2a1400);
  font-family: inherit; font-size: 0.78125rem; font-weight: 800;
  line-height: 1.25; cursor: pointer;
  max-width: calc(100vw - 24px);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35);
  animation: hint-bob-down 2.4s ease-in-out infinite;
}
/* 꼬리 — 기본은 위쪽(햄버거가 위에 있어요) */
.menu-hint::before {
  content: ""; position: absolute; left: 14px; top: -4px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--accent); border-radius: 2px;
}
.menu-hint:hover { filter: brightness(1.06); }
@keyframes hint-bob-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* 넓은 화면 — 햄버거 왼쪽에 자리가 생깁니다 */
@media (min-width: 1400px) {
  .menu-hint {
    top: 50%; left: auto; right: calc(100% - 8px);
    width: max-content; max-width: 120px;   /* 두 줄로 접힙니다 */
    padding: 7px 10px; font-size: 0.75rem; text-align: center;
    animation-name: hint-bob-left;
  }
  /* 꼬리를 오른쪽(햄버거 쪽)으로 */
  .menu-hint::before {
    left: auto; right: -5px; top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
}
@keyframes hint-bob-left {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .menu-hint { animation: none; }
}

/* 말풍선이 이 줄을 기준으로 떠 있습니다 */
.header-top .container.nav { position: relative; }

/* ==========================================================
   🔔 알림
   ----------------------------------------------------------
   헤더의 종. 안 읽은 게 있으면 빨간 숫자가 붙습니다.
   ========================================================== */
.notif-wrap { position: relative; display: inline-flex; }
.notif-btn { position: relative; }
.notif-count {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #d13b3b; color: #fff;
  font-size: 0.6875rem; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}
.notif-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 200;
  width: 330px; max-height: 60vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-md);
}
/* 좁은 화면에서는 종이 왼쪽에 있어서, 오른쪽에 맞추면 목록이 화면 밖으로
   91px 나갔습니다. 이럴 땐 종이 아니라 '화면' 에 맞춰 붙입니다. */
@media (max-width: 560px) {
  .notif-pop {
    position: fixed; left: 10px; right: 10px; width: auto;
    top: var(--notif-top, 64px);
  }
}
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  font-weight: 800; color: var(--heading); font-size: 0.9375rem;
}
.notif-allread {
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 0.78125rem; font-weight: 700; color: var(--brand);
}
.notif-item {
  display: block; padding: 11px 14px; border-bottom: 1px solid var(--line);
  color: var(--text); text-decoration: none;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--chip-bg); }
/* 안 읽은 것은 왼쪽에 색 띠 */
.notif-item.unread { background: var(--chip-bg); border-left: 3px solid var(--brand); padding-left: 11px; }
.notif-line { font-size: 0.84375rem; line-height: 1.45; color: var(--heading); }
.notif-line b { font-weight: 800; }
.notif-prev {
  margin-top: 4px; font-size: 0.78125rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-when { margin-top: 4px; font-size: 0.71875rem; color: var(--text-muted); }
.notif-empty { padding: 24px 16px; text-align: center; font-size: 0.84375rem; color: var(--text-muted); line-height: 1.6; }

/* 알림을 눌러 찾아온 댓글은 잠깐 반짝입니다 */
.cmt-flash { animation: cmt-flash 2s ease-out 1; border-radius: 10px; }
@keyframes cmt-flash {
  0%, 30% { background: var(--chip-bg); box-shadow: 0 0 0 3px var(--chip-bg); }
  100%    { background: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .cmt-flash { animation: none; } }

/* ---------- ⭐ 즐겨찾기 단추 ---------- */
.fav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font-family: inherit; font-size: 0.84375rem; font-weight: 700;
  color: var(--text-muted); cursor: pointer;
}
.fav-btn:hover { color: var(--heading); border-color: var(--accent); }
.fav-btn.on { color: var(--accent-text, var(--accent)); border-color: var(--accent); background: var(--chip-bg); }
.fav-star { font-size: 0.9375rem; line-height: 1; }
@media (max-width: 560px) { .fav-btn .fav-text { display: none; } .fav-btn { padding: 0 10px; } }

/* ---------- ⭐ 즐겨찾기 · 저장한 글 화면 ---------- */
.saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.saved-item {
  display: flex; align-items: stretch; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
}
.saved-item:hover { border-color: var(--accent); }
.saved-link {
  flex: 1 1 auto; min-width: 0;                 /* 긴 제목이 칸을 밀어내지 않게 */
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; text-decoration: none; color: var(--heading);
}
.saved-ico { flex: 0 0 auto; font-size: 1.0625rem; line-height: 1; }
.saved-label {
  min-width: 0; font-weight: 700; font-size: 0.9375rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.saved-del {
  flex: 0 0 auto; width: 42px;
  background: none; border: 0; border-left: 1px solid var(--line);
  font-family: inherit; font-size: 0.9375rem; color: var(--text-muted); cursor: pointer;
}
.saved-del:hover { color: #d94141; background: var(--chip-bg); }
.saved-del:disabled { opacity: .5; cursor: default; }

/* ---------- 🔖 글 저장 단추 (글 화면) ----------
   바로 옆의 '유익해요' 와 같은 알약 모양이면 반응 단추가 둘인 줄 압니다.
   저장은 반응이 아니라 갈무리라서, 테두리 없이 조용하게 두고
   오른쪽 끝으로 밀어 '유익해요' 무리와 떨어뜨립니다. */
.fav-post {
  margin-left: auto;                       /* 오른쪽 끝으로 */
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border: 0; border-radius: 8px; background: none;
  font-family: inherit; font-size: 0.84375rem; font-weight: 700;
  color: var(--text-muted); cursor: pointer;
}
.fav-post[hidden] { display: none; }
.fav-post .fav-star { font-size: 0.875rem; line-height: 1; filter: grayscale(1); opacity: .65; }
.fav-post:hover { color: var(--heading); background: var(--chip-bg); }
.fav-post:hover .fav-star { filter: none; opacity: 1; }
.fav-post.on { color: var(--heading); }
.fav-post.on .fav-star { filter: none; opacity: 1; }
.fav-post:disabled { opacity: .5; cursor: default; }


/* ---------- 🔗 출처 (글쓰기 칸) ---------- */
.src-box {
  margin: 14px 0 4px; padding: 14px;
  background: var(--surface-2, var(--surface)); border: 1px solid var(--line); border-radius: 12px;
}
.src-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.src-head b { font-size: 0.9375rem; color: var(--heading); }
.src-note { font-size: 0.8125rem; color: var(--text-muted); }
.src-row { display: flex; gap: 8px; margin-bottom: 8px; }
.src-row .src-url { flex: 2 1 0; min-width: 0; }
.src-row .src-label { flex: 1 1 0; min-width: 0; }
.src-row input {
  height: 38px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  font-family: inherit; font-size: 0.875rem; color: var(--heading);
}
.src-row input:focus { outline: none; border-color: var(--accent); }
.src-row .src-del { flex: 0 0 auto; }
@media (max-width: 560px) {
  .src-row { flex-wrap: wrap; }
  .src-row .src-url, .src-row .src-label { flex: 1 1 100%; }
  .src-row .src-del { margin-left: auto; }
}

/* ---------- 🔗 출처 (글 화면) ---------- */
.src-view {
  margin: 22px 0 4px; padding: 14px 16px;
  background: var(--chip-bg); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0;
}
.src-view-head { font-weight: 700; font-size: 0.875rem; color: var(--heading); margin-bottom: 8px; }
.src-view-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.src-view-list a {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 0.90625rem; color: var(--link, var(--heading));
  text-decoration: underline; text-underline-offset: 3px;
  overflow-wrap: anywhere;                   /* 긴 주소가 칸을 밀어내지 않게 */
}
.src-view-list a:hover { color: var(--accent-text, var(--accent)); }
.src-out { font-size: 0.6875rem; opacity: .6; }   /* 바깥으로 나간다는 표시 */

/* ---------- 🏷 말머리 모아보기 ---------- */
/* 목록의 말머리를 눌러서 그 말머리 글만 볼 수 있게.
   ⚠️ 글 전체를 덮는 투명 링크(.pi-link, z-index:1)가 위에 있어서
      그보다 위로 올려야 눌립니다. 안 그러면 글로 들어가 버려요. */
.post-item .ptag-btn {
  position: relative; z-index: 2;
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
  border-radius: 4px;
}
.post-item .ptag-btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.post-item .ptag-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 지금 어떤 말머리로 보고 있는지 알려주는 띠 */
.tagfilter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--chip-bg); border: 1px solid var(--line); border-radius: 10px;
}
.tagfilter[hidden] { display: none; }
.tagfilter-label { font-size: 0.84375rem; color: var(--text-muted); }
.tagfilter-chip {
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--accent);
  font-size: 0.875rem; font-weight: 700; color: var(--heading);
}
.tagfilter-clear {
  margin-left: auto;
  padding: 4px 10px; border: 0; border-radius: 8px; background: none;
  font-family: inherit; font-size: 0.8125rem; font-weight: 700;
  color: var(--text-muted); cursor: pointer;
}
.tagfilter-clear:hover { color: var(--heading); background: var(--surface); }

/* 🔎 검색어로 좁혀 보는 중일 때 뜨는 띠
   ---------------------------------------------------------
   입문 여정 단계의 「관련 정보글 보기」 로 들어오면 목록이 좁혀집니다.
   ⚠️ 좁혀진 줄 모르면 "글이 왜 이것밖에 없지" 가 됩니다. 그래서 무엇으로
      좁혔는지 적고, 푸는 길(✕ 전체 보기)을 반드시 같이 둡니다.
   ⚠️ 말머리 띠(.tagfilter)와 같은 모양을 씁니다 — 같은 일을 하는 것이
      다르게 생기면 매번 다시 읽어야 해요. */
.queryfilter {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--chip-bg); border: 1px solid var(--line); border-radius: 10px;
}
.queryfilter[hidden] { display: none; }
.qf-lbl { font-size: 0.84375rem; color: var(--text-muted); }
.qf-chip {
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--accent);
  font-size: 0.875rem; font-weight: 700; color: var(--heading);
}
/* '또는' — & 로 나눈 갈래 사이. 규칙이 화면에 보이게 */
.qf-or { font-size: 0.78125rem; color: var(--text-muted); }
.qf-clear {
  margin-left: auto;
  padding: 4px 10px; border-radius: 8px;
  font-size: 0.8125rem; font-weight: 700;
  color: var(--text-muted); text-decoration: none;
}
.qf-clear:hover { color: var(--heading); background: var(--surface); }
@media (max-width: 700px) {
  /* 폰에서는 '전체 보기' 가 오른쪽 끝으로 밀리면 눌리기 어려워요 */
  .queryfilter { padding: 9px 12px; gap: 6px; }
  .qf-clear { margin-left: 0; min-height: 40px; display: inline-flex; align-items: center; }
}

/* 글 화면의 말머리도 누르면 모아 보기로 */
a.article-tag { text-decoration: none; cursor: pointer; }
a.article-tag:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 🐾 키우는 생물 ---------- */
.pet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pet-head h3 { margin: 0; }
.pet-head .cmt-adm { margin-left: auto; }

.pet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pet-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.pet-ico { flex: 0 0 auto; font-size: 1.25rem; line-height: 1; }
.pet-ico .emo { width: 22px; height: 22px; }
.pet-body { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pet-species { font-size: 0.9375rem; color: var(--heading); }
.pet-name { font-size: 0.875rem; color: var(--text-muted); }
.pet-name::before { content: "· "; }
.pet-group {
  padding: 1px 8px; border-radius: 999px;
  background: var(--chip-bg); font-size: 0.75rem; color: var(--text-muted);
}
.pet-since { margin-left: auto; flex: 0 0 auto; font-size: 0.78125rem; color: var(--text-muted); }

/* 고치는 중 */
.pet-row { display: flex; gap: 8px; margin-bottom: 8px; }
.pet-row select, .pet-row input {
  height: 38px; padding: 0 10px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  font-family: inherit; font-size: 0.875rem; color: var(--heading);
}
.pet-row select:focus, .pet-row input:focus { outline: none; border-color: var(--accent); }
.pet-f-group   { flex: 1.2 1 0; }
.pet-f-species { flex: 1.6 1 0; }
.pet-f-name    { flex: 1 1 0; }
.pet-f-since   { flex: 1 1 0; }
.pet-row .pet-del { flex: 0 0 auto; }
.pet-acts { display: flex; align-items: center; gap: 8px; margin-top: 12px; }

@media (max-width: 700px) {
  .pet-row { flex-wrap: wrap; }
  .pet-f-group, .pet-f-species { flex: 1 1 100%; }
  .pet-f-name, .pet-f-since { flex: 1 1 calc(50% - 25px); }
  .pet-row .pet-del { margin-left: auto; }
  .pet-since { margin-left: 0; flex-basis: 100%; }
}

/* ==========================================================
   📱 폰 헤더 — ☰ 로고 검색 로그인 ⚙️ ⊞ 🔔 를 한 줄에
   ----------------------------------------------------------
   폰에서 한 줄에 들어가야 하는 것이 많습니다. 그래서
     · 로고 아래 '작은 생명들의 큰 세상' 은 접습니다
     · 🔍 를 눌러 펼치던 검색은 처음부터 열린 칸으로 바꿉니다
     · 언어(🌐)·테마(🎨) 칸은 ⚙️ 안으로 들어갑니다
     · 아래 가로 분류 띠는 ⊞ 로도 펼칠 수 있게 합니다
   넓은 화면에서는 지금까지와 똑같이 보입니다.
   ========================================================== */

/* 넓은 화면 — 폰 전용 칸은 숨깁니다.
   ⚠️ ⚙️ 설정은 폰 전용이 아닙니다. 글자 크기·내 글·즐겨찾기처럼
      화면 크기와 상관없이 필요한 것들이 그 안에 있어서, 어디서나 보입니다.
      (예전에는 ⊞ 와 함께 폰에서만 나오게 해 뒀는데,
       컴퓨터로 오신 분은 글자 크기를 바꿀 길이 아예 없었습니다) */
.m-search { display: none; }
#gridWrap { display: none; }

/* 🌐 언어 · 🎨 테마를 담은 칸.
   ⚠️ 이걸 그냥 <div> 로 두면 안 됩니다. div 는 기본이 display:block 이라
      안에 든 두 칸이 나란히 서지 못하고 위아래로 쌓입니다.
      (헤더 오른쪽이 두 줄로 깨져 보이던 원인이 이것이었어요) */
.desk-tools { display: flex; align-items: center; gap: 12px; }

/* ⊞ 벽돌 아이콘 — 이모지는 기기마다 모양이 달라서 직접 그립니다 */
.grid-ico { display: grid; grid-template-columns: repeat(3, 3px); gap: 2px; }
.grid-ico i { width: 3px; height: 3px; border-radius: 1px; background: currentColor; }

/* ⊞ · ⚙️ 팝업 공통 */
.grid-wrap, .set-wrap { position: relative; }
.grid-pop, .set-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
  min-width: 260px; max-width: min(92vw, 360px);
  padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.grid-pop[hidden], .set-pop[hidden] { display: none; }

.grid-pop-head, .set-label {
  font-size: 0.78125rem; font-weight: 700; color: var(--text-muted);
  margin-bottom: 8px;
}
.grid-pop-body { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.grid-cell {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); font-family: inherit; font-size: 0.84375rem; font-weight: 700;
  color: var(--heading); text-decoration: none; text-align: left; cursor: pointer;
}
.grid-cell span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-cell .emo { width: 18px; height: 18px; flex: 0 0 auto; }
.grid-cell:hover { border-color: var(--accent); background: var(--chip-bg); }
.grid-cell .soon-mini { flex: 0 0 auto; font-size: 0.625rem; font-style: normal; color: var(--text-muted); }
.grid-pop-foot {
  display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
}
.grid-pop-foot a {
  flex: 1; padding: 8px; border-radius: 9px; background: var(--chip-bg);
  font-size: 0.8125rem; font-weight: 700; color: var(--heading); text-align: center; text-decoration: none;
}
.grid-pop-foot a:hover { background: var(--surface); }

/* ⚙️ 설정 속 */
.set-sec + .set-sec { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.set-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.set-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-family: inherit; font-size: 0.8125rem; font-weight: 700;
  color: var(--heading); cursor: pointer;
}
.set-chip:hover { border-color: var(--accent); background: var(--chip-bg); }
.set-chip .check { display: none; font-size: 0.6875rem; color: var(--accent-text, var(--accent)); }
.set-chip.selected { border-color: var(--accent); background: var(--chip-bg); }
.set-chip.selected .check { display: inline; }
.set-note { margin-top: 8px; font-size: 0.71875rem; color: var(--text-muted); line-height: 1.5; }
.set-links { display: grid; gap: 2px; }
.set-links a {
  padding: 9px 8px; border-radius: 9px;
  font-size: 0.84375rem; font-weight: 700; color: var(--heading); text-decoration: none;
}
.set-links a:hover { background: var(--chip-bg); }

/* ---------- 여기부터 폰 ---------- */
@media (max-width: 768px) {
  .nav { height: 58px; gap: 8px; }

  /* ☰ 와 로고는 붙여 두고, 나머지는 오른쪽으로 */
  .hamburger { flex: 0 0 auto; }
  .brand { flex: 0 0 auto; gap: 7px; }
  .brand .logo-img { width: 32px; height: 32px; border-radius: 9px; }
  .brand-title { font-size: 1rem; }
  .brand-sub { display: none; }          /* 한 줄에 넣으려면 접어야 해요 */

  /* 검색칸이 남는 자리를 다 차지합니다 */
  .m-search { display: block; flex: 1 1 0; min-width: 54px; }
  .m-search input {
    width: 100%; height: 34px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--text);
    font-family: inherit; font-size: 0.84375rem;
  }
  .m-search input:focus { outline: none; border-color: var(--brand); }

  /* ⚠️ margin-left:auto 를 그대로 두면 검색칸이 차지한 자리에 더해
        빈 자리를 또 밀어내서 아이콘이 화면 밖으로 나갑니다.
        검색칸이 이미 남는 자리를 다 먹으니 auto 는 필요 없어요. */
  .header-right { flex: 0 0 auto; gap: 4px; margin-left: 0; }

  /* 로그인한 사람의 닉네임·칭호까지 넣으면 200px 을 넘겨 겹칩니다.
     폰에서는 프로필 사진만 남기고, 이름과 칭호는 눌러서 보게 합니다. */
  .header-right .profile-name,
  .header-right .profile-trigger .role-badge,
  .header-right .profile-trigger .title-badge,
  .header-right .profile-trigger .caret { display: none; }
  .header-right .profile-trigger { padding: 2px; gap: 0; }

  /* 말풍선은 검색칸 위를 덮어 버려서 폰에서는 접습니다.
     대신 ⊞(분류)와 ☰ 가 나란히 있어 찾기 어렵지 않아요. */
  .menu-hint { display: none !important; }
  #gridWrap { display: block; }
  .desk-only, .desk-tools { display: none; }   /* 🔍 · 🌐 · 🎨 는 ⚙️ 안으로 */

  .icon-btn { width: 30px; height: 30px; border-radius: 8px; font-size: 0.875rem; border-color: transparent; }
  .icon-btn:hover { border-color: var(--line); }

  /* ⚠️ 예전에 여기서 .auth-signup 을 숨겼습니다. 이름만 보고 '회원가입' 인 줄
        알았는데, 로그아웃 상태의 <a>로그인</a> 이 바로 그 클래스를 달고 있어요.
        그래서 폰에서 로그인 링크가 통째로 사라졌습니다.
        숨기지 말고 글자만 작게 줄입니다. */
  .auth-area .auth-link { font-size: 0.8125rem; padding: 6px 4px; white-space: nowrap; }

  /* 팝업은 화면 밖으로 나가지 않게 화면 기준으로 붙입니다 */
  .grid-pop, .set-pop {
    position: fixed; top: 62px; right: 8px; left: auto;
    max-width: calc(100vw - 16px); min-width: 0; width: 300px;
  }
}

/* 아주 좁은 화면 — 사이트 이름까지 접고 로고만 남깁니다.
   ⚠️ 375px(아이폰 미니 등)은 흔한 폭이라 여기 들어가면 안 됩니다.
      이름이 사라지는 건 정말 자리가 없을 때(340px 아래)뿐이에요. */
@media (max-width: 340px) {
  .brand-text { display: none; }
  .nav { gap: 6px; }
  .icon-btn { width: 28px; height: 28px; }
}

/* ==========================================================
   🧰 공용 편의 장치 (assets/js/ux.js)
   ========================================================== */

/* 🔠 글자 크기 — 기준 크기에 배수를 곱합니다.
   ⚠️ px 로 굳어 있는 글자는 안 바뀝니다. 본문처럼 rem 을 쓰는 곳만 커져요.
      그래서 body 에 직접 걸어 상속되게 합니다. */
/* 🔠 글자 크기 배수.
   ⚠️ 이 배수는 <html> 의 기준 글자 크기에 겁니다.
      예전에는 body 에 걸었는데, 이 파일의 글자 크기가 거의 다 px 로
      굳어 있어서(472곳) 아무것도 안 움직였습니다.
      지금은 모든 font-size 를 rem 으로 바꿔 두었기 때문에,
      여기 한 줄만 바뀌면 글자가 통째로 따라옵니다.
      (1rem = 16px 이라 배수가 1일 때는 예전과 완전히 같습니다) */
:root { --font-scale: 1; }
html { font-size: calc(16px * var(--font-scale)); }

/* 🍞 토스트 */
.toast-wrap {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 900; display: grid; gap: 8px; justify-items: center;
  pointer-events: none;                     /* 뒤쪽을 가리지 않게 */
  width: max-content; max-width: min(92vw, 460px);
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--heading); color: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem; font-weight: 700; line-height: 1.45;
  animation: toast-in .2s ease-out both;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.toast.out { animation: toast-out .2s ease-in both; }
@keyframes toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px); } }
.toast-text { min-width: 0; }
.toast-act {
  flex: 0 0 auto;
  padding: 6px 12px; border: 0; border-radius: 8px;
  background: var(--surface); color: var(--heading);
  font-family: inherit; font-size: 0.8125rem; font-weight: 800; cursor: pointer;
}
.toast-act:hover { background: var(--chip-bg); }
.toast-left { flex: 0 0 auto; font-size: 0.75rem; font-weight: 700; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .toast, .toast.out { animation-duration: .01s; } }

/* 📴 인터넷 끊김 띠 */
.offline-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 950;
  padding: 9px 16px; text-align: center;
  background: #7a3d12; color: #fff;
  font-size: 0.84375rem; font-weight: 700;
  transform: translateY(-100%); transition: transform .22s ease;
}
.offline-bar b { color: #ffd9a8; }
.offline-bar.show { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .offline-bar { transition: none; } }

/* ⬆️ 맨 위로 */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 880;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--heading);
  font-size: 1.1875rem; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { border-color: var(--accent); background: var(--chip-bg); }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
/* 폰에서는 조금 작게, 그리고 오른쪽 아래 다른 것과 겹치지 않게 */
@media (max-width: 640px) {
  .to-top { width: 40px; height: 40px; right: 12px; bottom: 12px; font-size: 1.0625rem; }
  .toast-wrap { bottom: 66px; }
}

/* ---------- 📋 내 글 · 내 댓글 ---------- */
.act-tabs { display: flex; gap: 8px; margin: 4px 0 16px; }
.act-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-family: inherit; font-size: 0.875rem; font-weight: 700;
  color: var(--text-muted); cursor: pointer;
}
.act-tab b { color: var(--heading); }
.act-tab:hover { border-color: var(--accent); }
.act-tab.on { border-color: var(--accent); background: var(--chip-bg); color: var(--heading); }

.act-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.act-item { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; }
.act-item:hover { border-color: var(--accent); }
.act-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; text-decoration: none; color: var(--heading);
}
.act-title {
  flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 0.9375rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.act-cmt-text { font-weight: 400; }
.act-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; font-size: 0.78125rem; color: var(--text-muted); }
.act-on {
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; background: var(--chip-bg);
}
@media (max-width: 600px) {
  .act-link { flex-wrap: wrap; gap: 6px; }
  .act-title { flex: 1 1 100%; white-space: normal; }
  .act-meta { flex: 1 1 100%; }
  .act-on { max-width: none; }
}

/* ---------- 🖼 사진 크게 보기 ---------- */
.lb {
  position: fixed; inset: 0; z-index: 960;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 8px; padding: 16px;
  background: rgba(0, 0, 0, .88);
}
.lb[hidden] { display: none; }
.lb-img {
  grid-column: 2; justify-self: center;
  max-width: 100%; max-height: calc(100vh - 90px);
  object-fit: contain; border-radius: 6px;
  touch-action: pan-y;             /* 좌우는 우리가 쓰고, 위아래는 브라우저에 맡깁니다 */
}
.lb-prev, .lb-next, .lb-close {
  border: 0; background: rgba(255, 255, 255, .12); color: #fff;
  cursor: pointer; border-radius: 50%;
  display: grid; place-items: center; line-height: 1;
}
.lb-prev, .lb-next { width: 46px; height: 46px; font-size: 1.875rem; }
.lb-prev { grid-column: 1; }
.lb-next { grid-column: 3; }
.lb-prev:hover, .lb-next:hover, .lb-close:hover { background: rgba(255, 255, 255, .25); }
.lb-prev[hidden], .lb-next[hidden] { visibility: hidden; display: grid; }  /* 자리는 남겨 사진이 안 튀게 */
.lb-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; font-size: 1.5rem; }
.lb-count {
  position: absolute; left: 0; right: 0; bottom: 16px;
  text-align: center; color: rgba(255, 255, 255, .8); font-size: 0.84375rem; font-weight: 700;
}
/* 크게 보는 동안 뒤쪽 글이 같이 움직이지 않게 */
body.lb-open { overflow: hidden; }
/* 사진을 누를 수 있다는 걸 알려줍니다 */
.detail-content img:not(.emo) { cursor: zoom-in; }

@media (max-width: 600px) {
  .lb { padding: 8px; gap: 2px; }
  .lb-prev, .lb-next { width: 38px; height: 38px; font-size: 1.5rem; }
}

/* 지워질 참인 글 — 5초 동안 흐리게 */
.being-deleted { opacity: .4; pointer-events: none; transition: opacity .2s ease; }

/* ---------- 🏷 말머리 검색칸 (글쓰기) ---------- */
.tag-ac { position: relative; margin-top: 6px; }
.tag-ac-input {
  width: 100%; height: 32px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 0.8125rem;
}
.tag-ac-input:focus { outline: none; border-color: var(--accent); }
.tag-ac-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  max-height: 190px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-md);
}
.tag-ac-list[hidden] { display: none; }
.tag-ac-item, .mention-item {
  display: block; width: 100%; padding: 9px 12px;
  border: 0; background: none; text-align: left;
  font-family: inherit; font-size: 0.84375rem; color: var(--heading); cursor: pointer;
}
.tag-ac-item:hover, .tag-ac-item.on,
.mention-item:hover, .mention-item.on { background: var(--chip-bg); }

/* ---------- @ 멘션 ---------- */
.cmt-input-row { position: relative; }
.mention-pop {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 60;
  min-width: 180px; max-width: 280px; max-height: 200px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-md);
}
.mention-pop[hidden] { display: none; }

/* ---------- 🕘 최근 검색어 ---------- */
.recent-box { margin: 0 0 18px; }
.recent-box[hidden] { display: none; }
.recent-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; font-size: 0.8125rem; color: var(--text-muted); font-weight: 700;
}
.recent-clear {
  margin-left: auto; padding: 3px 9px; border: 0; border-radius: 7px; background: none;
  font-family: inherit; font-size: 0.78125rem; color: var(--text-muted); cursor: pointer;
}
.recent-clear:hover { background: var(--chip-bg); color: var(--heading); }
.recent-list { display: flex; flex-wrap: wrap; gap: 6px; }
.recent-chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  overflow: hidden;
}
.recent-chip:hover { border-color: var(--accent); }
.recent-chip a {
  padding: 5px 4px 5px 12px; font-size: 0.8125rem; font-weight: 700;
  color: var(--heading); text-decoration: none;
}
.recent-x {
  padding: 5px 10px 5px 6px; border: 0; background: none;
  font-family: inherit; font-size: 0.6875rem; color: var(--text-muted); cursor: pointer;
}
.recent-x:hover { color: #d94141; }

/* ⌨️ ↑↓ 로 고른 검색 결과 */
.search-list a.kb-on {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px;
}

/* ---------- 👁 비밀번호 보기 · ⇪ Caps Lock ---------- */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px; }   /* 눈 단추 자리를 비워 둡니다 */
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 8px; background: none;
  font-size: 0.9375rem; line-height: 1; cursor: pointer; color: var(--text-muted);
  display: grid; place-items: center;
}
.pw-eye:hover { background: var(--chip-bg); }
.caps-note {
  margin-top: 6px; padding: 6px 10px; border-radius: 8px;
  background: #7a3d12; color: #fff;
  font-size: 0.78125rem; font-weight: 700;
}
.caps-note[hidden] { display: none; }

/* ---------- 🐚 없는 주소 안내 (404) ---------- */
.nf-box { text-align: center; padding: 40px 0 20px; }
.nf-emoji { font-size: 4rem; line-height: 1; margin-bottom: 14px; }
.nf-title { font-size: clamp(1.375rem, 4vw, 1.875rem); color: var(--heading); margin: 0 0 12px; }
.nf-lead { color: var(--text-muted); font-size: 0.96875rem; line-height: 1.7; margin: 0 0 26px; }
.nf-search { display: flex; gap: 8px; max-width: 440px; margin: 0 auto 20px; }
.nf-search input {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 0.9375rem;
}
.nf-search input:focus { outline: none; border-color: var(--brand); }
.nf-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 480px) {
  .nf-search { flex-wrap: wrap; }
  .nf-search input, .nf-search .btn { flex: 1 1 100%; }
}

/* ---------- 👤 작은 프로필 카드 ---------- */
.peek {
  position: fixed; z-index: 880;
  width: 260px; max-width: calc(100vw - 20px);
  padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.peek[hidden] { display: none; }
.peek-loading { padding: 10px 2px; font-size: 0.84375rem; color: var(--text-muted); }
.peek-top { margin-bottom: 10px; }
.peek-name { font-size: 1rem; font-weight: 800; color: var(--heading); }
.peek-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.peek-stats {
  display: flex; gap: 12px; padding: 9px 0; margin-bottom: 8px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 0.78125rem; color: var(--text-muted);
}
.peek-stats b { color: var(--heading); font-size: 0.875rem; }
.peek-pets { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 8px; }
.peek-label { font-size: 0.71875rem; color: var(--text-muted); width: 100%; }
.peek-pet {
  padding: 2px 8px; border-radius: 999px; background: var(--chip-bg);
  font-size: 0.75rem; font-weight: 700; color: var(--heading);
}
.peek-pet em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.peek-more { font-size: 0.71875rem; color: var(--text-muted); }
.peek-since { font-size: 0.71875rem; color: var(--text-muted); margin-bottom: 10px; }
.peek-go { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--accent-text, var(--accent)); text-decoration: none; }
.peek-go:hover { text-decoration: underline; }

/* ---------- 🔔 새 댓글 알림 단추 ---------- */
.new-cmt-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 76px; z-index: 870;
  padding: 11px 20px; border: 0; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-family: inherit; font-size: 0.875rem; font-weight: 800; cursor: pointer;
  box-shadow: var(--shadow-lg);
}
.new-cmt-bar[hidden] { display: none; }
.new-cmt-bar:hover { filter: brightness(1.06); }
@media (max-width: 640px) { .new-cmt-bar { bottom: 62px; font-size: 0.8125rem; padding: 10px 16px; } }

/* ---------- 🖼 사진 도구 (글쓰기) ---------- */
.editor-body img.img-picked { outline: 3px solid var(--accent); outline-offset: 2px; }
.editor-body img { transition: transform .18s ease; }
@media (prefers-reduced-motion: reduce) { .editor-body img { transition: none; } }

.imgtools {
  position: fixed; z-index: 890;
  transform: translate(-50%, -100%);
  display: flex; align-items: center; gap: 2px;
  padding: 5px; border-radius: 11px;
  background: var(--heading); box-shadow: var(--shadow-lg);
}
.imgtools[hidden] { display: none; }
.imgtools button {
  width: 32px; height: 32px; border: 0; border-radius: 8px; background: none;
  color: var(--surface); font-size: 0.9375rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.imgtools button:hover { background: rgba(255, 255, 255, .18); }
.imgtools-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .25); margin: 0 3px; }

/* 90·270도로 돌린 사진은 가로세로가 뒤바뀌어 옆 글자를 덮습니다.
   그만큼 위아래 자리를 더 내어 줍니다. */
.editor-body img.rot-side,
.detail-content img.rot-side { margin: 12% 0; }

/* ---------- ⚠️ 탈퇴 전 안내 ---------- */
.wd-content {
  margin: 14px 0 18px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.wd-head { font-weight: 800; font-size: 0.90625rem; color: var(--heading); margin-bottom: 10px; }
.wd-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.wd-list li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 0.84375rem; }
.wd-what { min-width: 150px; color: var(--text-muted); }
.wd-list b { color: var(--heading); }
.wd-how { color: var(--text-muted); font-size: 0.78125rem; }
.wd-note { font-size: 0.8125rem; line-height: 1.65; color: var(--text-muted); margin: 0 0 12px; }
@media (max-width: 560px) { .wd-what { min-width: 0; flex: 1 1 100%; } }

/* ===== 상단 메뉴: 동물별 / 정보 / 커뮤니티 / 병원 / 이벤트 드롭다운 =====
   9개 분류를 한 줄에 나열하면 넘치므로, 메뉴 하나에 담아 자리를 아낍니다. */
.navmenu { position: relative; display: inline-flex; }
.navmenu-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 12px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: inherit; color: inherit; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.navmenu-trigger:hover { color: var(--brand); }
.navmenu-trigger.active { color: var(--brand); font-weight: 700; border-bottom-color: var(--brand); }
.navmenu-caret { font-size: 11px; opacity: .7; }
.navmenu.open .navmenu-caret { transform: rotate(180deg); }
.navmenu-pop {
  position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 232px; max-height: 70vh; overflow-y: auto;
  padding: 6px; border-radius: 12px;
  background: var(--surface); border: 1.5px solid var(--border, #ddd);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
  display: none;
}
.navmenu.open .navmenu-pop { display: block; }
.navmenu-head {
  padding: 8px 10px 6px; font-size: 12.5px; color: var(--text-muted);
  border-bottom: 1px solid var(--border, #eee); margin-bottom: 4px;
}
.navmenu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 10px; border: none; background: none; border-radius: 9px;
  font-family: inherit; font-size: 15.5px; color: inherit; text-align: left;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.navmenu-item:hover { background: var(--surface-2); color: var(--brand); }
.navmenu-item-off { opacity: .45; cursor: default; }
.navmenu-item-off:hover { background: none; color: inherit; }
.navmenu-item .emoji-img, .navmenu-item img { width: 20px; height: 20px; }
/* 좁은 화면에서는 팝업이 화면 밖으로 나가지 않도록 */
@media (max-width: 560px) {
  .navmenu-pop { left: auto; right: 0; min-width: 210px; }
}

/* ===== 동물별 드롭다운: 3열 격자 =====
   9개를 한 줄로 세로로 세우면 마우스를 한참 내려야 해서, 넓게 펼칩니다. */
.navmenu-wide .navmenu-pop { min-width: 520px; }
.navmenu-cols {
  display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 2px;
}
.navmenu-item.on { background: var(--surface-2); color: var(--brand); font-weight: 700; }
@media (max-width: 720px) {
  .navmenu-wide .navmenu-pop { min-width: 320px; }
  .navmenu-cols { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}
@media (max-width: 460px) {
  .navmenu-wide .navmenu-pop { min-width: 220px; }
  .navmenu-cols { grid-template-columns: 1fr; }
}

/* ===== 통합 허브 (hub.html) ===== */
.hub-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

/* 🐾 허브의 분류 칩은 열 개라, 다른 곳 칩과 같은 크기면 두 줄로 늘어집니다.
   두 줄이 되면 '식물' 하나만 아래에 덩그러니 남아 어색해요.
   여기서만 조금 줄여 한 줄에 들어가게 합니다.
   ⚠️ .chip 을 통째로 줄이면 검색 화면 칩까지 작아지니, 이 칸만 집습니다. */
.hub-filter .chip {
  font-size: 0.90625rem;      /* 16.5px → 14.5px */
  padding: 7px 12px;
}
.hub-filter .chip .emo { width: 1.05em; height: 1.05em; }
.hub-filter .soon-mini { font-size: 0.6875rem; }
.hub-deep { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.hub-sub { font-size: .62em; color: var(--text-muted); font-weight: 400; }
/* 🌏 허본은 전체 누리 화면이란 것을 제목 옆에서 말합니다.
   ⚠️ 제목에 「전체」 를 되할이지 않으려고 배지로 떼었습니다 —
      화면마다 그 말이 반복되면 정작 동물을 고른 분의 이름이 뮻혀요.
   ⚠️ 색만으로 가르지 않습니다 — 「전체 누리」 라는 가 글자로 적혀 있어요.
   ⚠️ 제목과 같은 줄에 서니 글자 크기를 em 로 잡습니다 — 제목이
      clamp() 로 줄었다 컸다 하니까, px 로 주면 폰에서 배지만 큽니다. */
.hub-allbadge {
  display: inline-block; vertical-align: middle;
  margin-left: .5em; padding: .22em .6em;
  border: 1px dashed var(--line); border-radius: 999px;
  font-size: .42em; font-weight: 700; color: var(--text-muted);
  white-space: nowrap;
}
.hub-section { margin-bottom: 30px; }
.hub-section-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 10px; border-bottom: 2px solid var(--border, #eee);
}
.hub-section-head h2 { margin: 0; font-size: 1.25rem; }
.hub-note { font-size: 13.5px; color: var(--text-muted); }
.hub-list { display: flex; flex-direction: column; gap: 8px; }
.hub-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 12px; text-decoration: none; color: inherit;
  border: 1.5px solid var(--border, #e7e7e7); background: var(--surface);
}
.hub-item:hover { border-color: var(--brand); transform: translateY(-1px); }
.hub-thumb {
  flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.hub-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hub-thumb-emoji img { width: 30px; height: 30px; }
.hub-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hub-title { font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-meta { font-size: 13.5px; color: var(--text-muted); }
.hub-empty { padding: 18px; text-align: center; color: var(--text-muted); font-size: 15px; }

/* ===== 🐾 동물별 패널 — 메뉴 줄 아래를 전체 폭으로 덮습니다 =====
   예전엔 메뉴 줄(overflow-x:auto) 안에 드롭다운이 있어서 좁게 잘리고
   목록을 보려면 스크롤을 내려야 했어요. 이제 화면 폭 전체를 씁니다. */
.species-trigger {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  padding: 13px 14px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 0.90625rem; font-weight: 700;
  color: var(--text-muted); white-space: nowrap; border-bottom: 3px solid transparent;
}
.species-trigger:hover { color: var(--heading); }
.species-trigger.active, .species-trigger.on { color: var(--brand); border-bottom-color: var(--brand); }
.species-trigger.on .navmenu-caret { transform: rotate(180deg); }

.species-backdrop {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 88;
  background: rgba(0, 0, 0, .28); opacity: 0; pointer-events: none; transition: opacity .18s;
}
.species-backdrop.open { opacity: 1; pointer-events: auto; }

.species-panel {
  position: fixed; left: 0; right: 0; z-index: 89;
  background: var(--surface); border-bottom: 1.5px solid var(--border, #ddd);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
  padding: 14px 0 18px;
  max-height: 74vh; overflow-y: auto;
  /* 위치가 어긋나지 않도록 이동 효과 없이 투명도만 씁니다 */
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .16s ease, visibility .16s;
}
.species-panel.open { opacity: 1; pointer-events: auto; visibility: visible; }
.species-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; color: var(--text-muted); margin-bottom: 10px;
}
.species-close {
  border: none; background: none; cursor: pointer; color: var(--text-muted);
  font-size: 26px; line-height: 1; padding: 0 6px;
}
.species-close:hover { color: var(--heading); }
/* 화면 폭에 맞춰 저절로 열 수를 늘립니다 (넓으면 4~5열) */
.species-panel-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px;
}
.species-panel-grid .navmenu-item {
  font-size: 16px; padding: 12px 12px; border-radius: 10px;
}
.species-panel-grid .navmenu-item:hover { background: var(--surface-2); }
@media (max-width: 520px) {
  .species-panel-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .species-panel-grid .navmenu-item { font-size: 15px; padding: 11px 10px; }
}

/* ===== 📖 생물도감 (dex.html) ===== */
.dex-count { color: var(--text-muted); font-size: 14px; margin: 4px 0 12px; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.dex-card {
  display: flex; gap: 12px; padding: 13px; border-radius: 14px;
  border: 1.5px solid var(--border, #e7e7e7); background: var(--surface);
  text-decoration: none; color: inherit;
}
.dex-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.dex-photo {
  flex: none; width: 78px; height: 78px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 36px;
  background: var(--surface-2);
}
.dex-photo img { width: 100%; height: 100%; object-fit: cover; }
.dex-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dex-name { font-size: 17px; font-weight: 700; }
.dex-sci { font-size: 13px; font-style: italic; color: var(--text-muted); }
.dex-where { font-size: 13px; color: var(--text-muted); }
.dex-summary { font-size: 14px; margin-top: 3px; }
.dex-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.dex-tag {
  font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted);
}
/* 상세 */
.dex-detail { max-width: 780px; }
.dex-hero { border-radius: 16px; overflow: hidden; margin-bottom: 18px; }
.dex-hero img { width: 100%; height: auto; display: block; }
.dex-spec { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 16px; }
.dex-spec th, .dex-spec td { padding: 10px 12px; border-bottom: 1px solid var(--border, #eee); text-align: left; }
.dex-spec th { width: 130px; color: var(--text-muted); font-weight: 700; background: var(--surface-2); }
.dex-sources { font-size: 13.5px; color: var(--text-muted); margin-top: 16px; }
.dex-updated { font-size: 13px; color: var(--text-muted); }
.dex-note {
  font-size: 14px; padding: 11px 14px; border-radius: 10px; margin-top: 14px;
  background: rgba(230, 180, 34, .12); border: 1px solid rgba(230, 180, 34, .4);
}
.dex-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

/* ===== 🎯 자주 가는 게시판 (홈) ===== */
#myBoards { margin: 6px auto 22px; }
.mb-card {
  border: 1.5px solid var(--border, #e5e5e5); border-radius: 16px;
  padding: 16px 18px; background: var(--surface);
}
.mb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mb-head h2 { margin: 0; font-size: 1.15rem; }
.mb-clear {
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--text-muted); text-decoration: underline;
}
.mb-clear:hover { color: var(--heading); }
.mb-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.mb-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 12px; text-decoration: none; color: inherit;
  border: 1.5px solid var(--border, #e7e7e7); background: var(--surface-2);
}
.mb-item:hover { border-color: var(--brand); transform: translateY(-1px); }
.mb-item.mb-top { border-color: var(--brand); background: var(--chip-bg); }
.mb-ico { font-size: 26px; flex: none; display: flex; align-items: center; }
.mb-ico img { width: 26px; height: 26px; }
.mb-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mb-name { font-size: 16px; font-weight: 700; }
.mb-meta { font-size: 12.5px; color: var(--text-muted); }
.mb-go { margin-left: auto; color: var(--brand); font-weight: 700; }

/* ===== 🔍 홈 통합 검색 — 처음 오신 분도 바로 알 수 있게 크게 ===== */
.hero-search { margin: 22px 0 26px; max-width: 620px; }
.hero-search-label {
  display: block; font-size: 1.15rem; font-weight: 700;
  color: var(--heading); margin-bottom: 9px;
}
.hero-search-box {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 14px; border-radius: 999px;
  background: var(--surface); border: 2px solid var(--border, #ddd);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
  transition: border-color .15s, box-shadow .15s;
}
.hero-search-box:focus-within {
  border-color: var(--brand);
  box-shadow: 0 6px 22px rgba(31, 138, 84, .18);
}
.hero-search-ico { font-size: 20px; flex: none; opacity: .7; display: flex; align-items: center; }
.hero-search-ico img { width: 20px; height: 20px; }
.hero-search-box input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: inherit; font-size: 1.0625rem; color: inherit; padding: 9px 2px;
}
.hero-search-box input::placeholder { color: var(--text-muted); }
/* 브라우저가 넣는 기본 지우기 단추(원형 X)를 우리 모양에 맞게 */
.hero-search-box input::-webkit-search-cancel-button { cursor: pointer; }
.hero-search-btn { flex: none; border-radius: 999px; padding: 10px 20px; }
.hero-search-hint { margin-top: 8px; font-size: 13.5px; color: var(--text-muted); }
@media (max-width: 560px) {
  .hero-search-label { font-size: 1.05rem; }
  .hero-search-box { padding-left: 12px; }
  .hero-search-box input { font-size: 1rem; }
  .hero-search-btn { padding: 10px 15px; }
}

/* ---------- 💬 "이 글과 관련된 질문이 있나요?" (정보글 끝) ---------- */
.ask-box {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 28px 0 4px; padding: 18px 20px;
  background: var(--chip-bg); border: 1px solid var(--line); border-radius: 14px;
}
.ask-text { flex: 1 1 260px; min-width: 0; display: grid; gap: 4px; }
.ask-text b { font-size: 1rem; color: var(--heading); }
.ask-text span { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }
.ask-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  padding: 11px 18px; border-radius: 999px;
  background: var(--brand); color: var(--on-brand, #fff);
  font-size: 0.9375rem; font-weight: 700; text-decoration: none;
  transition: filter .15s;
}
.ask-btn:hover { filter: brightness(1.07); }
@media (max-width: 560px) {
  .ask-box { padding: 16px; }
  .ask-btn { flex: 1 1 100%; justify-content: center; }
}

/* =========================================================
   📱 폰에서 글쓰기 툴바 접기
   ---------------------------------------------------------
   재보니 폰(375px)에서 툴바가 317px — 화면의 39% 를 먹고 있었습니다.
   헤더까지 더하면 437px 라, 글을 쓰기도 전에 화면 절반이 사라졌어요.
   키보드까지 올라오면 본문이 거의 안 보입니다.

   그래서 폰에서만 자주 쓰는 것(사진·제목·굵게·링크·목록·되돌리기)만
   남기고 나머지는 '⋯ 더보기' 안으로 넣습니다.

   ⚠️ 기능을 없애는 게 아닙니다. 한 번 누르면 전부 그대로 나옵니다.
   ⚠️ PC 는 손대지 않습니다 — .ed-more 가 아예 안 보이고 전부 펼쳐져 있어요.
   ========================================================= */
@media (max-width: 700px) {
  /* 접혀 있을 때는 핵심만 보입니다 */
  .ed-bars:not(.more-open) .ed-tool:not(.ed-keep),
  .ed-bars:not(.more-open) .ed-fmt:not(.ed-keep):not(.ed-more),
  .ed-bars:not(.more-open) .ed-block:not(.ed-keep),
  .ed-bars:not(.more-open) .ed-size,
  .ed-bars:not(.more-open) .ed-sep { display: none; }

  .ed-more { margin-left: auto; }          /* 오른쪽 끝에 둡니다 */
  .ed-bars.more-open .ed-more::after { content: " 접기"; }
  .ed-bars.more-open .ed-more { font-size: 0; }
  .ed-bars.more-open .ed-more::after { font-size: 0.8125rem; content: "⋯ 접기"; }

  /* 터치 영역 — 손가락으로 누르기에 너무 작지 않게 */
  .ed-tool, .ed-fmt { min-height: 40px; }
}

/* PC 에서는 '더보기' 자체가 필요 없습니다 */
@media (min-width: 701px) { .ed-more { display: none; } }

/* 🔴 잘못됐을 때의 토스트 — 성공 알림과 눈에 띄게 달라야 합니다.
   ⚠️ 색만으로 구분하지 않습니다. 색을 구별하기 어려운 분도 계셔서
      왼쪽에 굵은 띠를 같이 둡니다. */
.toast-bad {
  border-color: var(--danger, #c0392b);
  border-left: 4px solid var(--danger, #c0392b);
}

/* =========================================================
   📱 폰에서 입력칸을 눌렀을 때 화면이 확대되지 않게
   ---------------------------------------------------------
   아이폰(사파리)은 글자가 16px 보다 작은 입력칸을 누르면
   그 칸에 맞춰 화면을 확대해 버립니다. 다 쓰고 나면 손가락으로
   다시 줄여야 하고, 그 사이 옆 내용은 화면 밖으로 밀려나요.
   댓글 한 번 쓸 때마다 이걸 반복하게 됩니다.

   ⚠️ maximum-scale=1 로 확대 자체를 막는 방법도 있지만 쓰지 않습니다.
      그건 글씨를 키워 보셔야 하는 분들의 확대까지 함께 막아버려요.
      글자를 16px 로 키우면 확대할 이유 자체가 사라집니다.
   ⚠️ 폰에서만 적용합니다 — PC 의 생김새는 그대로예요.
   ========================================================= */
@media (max-width: 700px) {
  #cmtText, .reply-text, .cmt-area, #mSearchInput, #blockStyle { font-size: 1rem; }
}

/* ==========================================================
   🩸 끈질긴 사냥꾼
   ----------------------------------------------------------
   한 달 동안 하루도 빠지지 않고 다녀간 분께 조용히 붙는 칭호입니다.
   어두운 붉은빛 — 오래 버틴 사람의 색입니다.
   흐르는 효과는 아래 '숨은 칭호' 자리에서 함께 겁니다.
   ========================================================== */
.title-streak {
  background-color: #4a1414;
  color: #f7e6e0;
  border-color: #7c2c2c;
  text-shadow: 0 1px 1px rgba(30, 6, 6, .6);
}

/* =========================================================
   ✨ 숨은 칭호 — 각자의 색으로 빛이 흐릅니다
   ---------------------------------------------------------
   '누리의 전설' 의 흐르는 금빛을 그대로 가져오되 색만 바꿉니다.
   찾기 어려운 칭호일수록, 달았을 때 눈에 보이는 값이 있어야 하니까요.

   ⚠️ 흐름의 짜임새(각도 100deg · 여덟 구간 · 300% · 6초)는 전설과
      똑같이 둡니다. 숫자를 제각각 두면 나란히 놓였을 때 따로 놉니다.
   ⚠️ 색만 세 가지(--f1 어두움 / --f2 중간 / --f3 가장 밝음)로 갈아 끼웁니다.
   ⚠️ 글씨는 가장 어두운 구간(--f1) 위에서도 읽혀야 합니다.
      흐르는 동안 글자 밑의 색이 계속 바뀌거든요.
   ========================================================= */
.title-achieve, .title-eva, .title-streak {
  position: relative;
  /* ⚠️ 여기서 overflow: hidden 을 걸면 안 됩니다.
        '누리의 전설' 을 본떠 오면서 그 줄까지 따라왔었는데,
        전설은 ::after 로 빛을 쓸어 넘겨서 잘라내기가 필요하지만
        이 셋은 바탕 무늬만 움직입니다 — 잘라낼 것이 없어요.
        오히려 '잔혹한 천사' 의 날개(::after, 뱃지 밖 20px)와 연기가
        통째로 잘려 나갑니다. 실제로 날개가 안 보였습니다. */
  background-image: linear-gradient(100deg,
    var(--f1) 0%,  var(--f2) 18%, var(--f3) 30%, var(--f2) 42%,
    var(--f1) 58%, var(--f2) 74%, var(--f3) 86%, var(--f1) 100%);
  background-size: 300% 100%;
  animation: legend-flow 6s linear infinite;
}

/* 🌿 생물박사 — 초록빛이 흐릅니다 */
.title-achieve {
  /* ⚠️ 가장 어두운 구간을 #15803d 로 잡았더니 글씨 대비가 2.97 이었습니다.
        흐르는 동안 글자 밑 색이 계속 바뀌어서, 가장 어두운 자리에서도
        읽혀야 합니다. #16a34a 로 밝히면 4.5 를 넘깁니다. */
  --f1: #16a34a; --f2: #4ade80; --f3: #dcfce7;
  color: #052e16;
  border-color: #86efac;
  box-shadow: 0 0 0 1px rgba(134, 239, 172, .8), 0 0 14px rgba(74, 222, 128, .5);
}

/* 🕊️ 잔혹한 천사 — 흰빛이 흐릅니다 (연기 효과는 그대로 둡니다) */
.title-eva {
  --f1: #d7dcf0; --f2: #f2f5ff; --f3: #ffffff;
  color: #23233a;
  border-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 14px rgba(214, 222, 255, .6);
}

/* 🩸 끈질긴 사냥꾼 — 어두운 붉은빛이 흐릅니다.
   ⚠️ 가장 어두운 구간(#4a1414) 위에서도 글씨가 읽혀야 해서
      글자를 아주 옅은 살구빛으로 둡니다. */
.title-streak {
  /* ⚠️ 밝은 구간을 #c9705c 로 두니 글씨 대비가 2.91 이었습니다.
        흐름이 지나갈 때 글자가 묻혀요. 세 구간 모두 4.5 를 넘기게 낮췄습니다
        (12.38 / 7.94 / 4.68). */
  --f1: #4a1414; --f2: #7a2a24; --f3: #a84a3a;
  color: #f7e6e0;
  border-color: #a84a3a;
  text-shadow: 0 1px 1px rgba(30, 6, 6, .7);
  box-shadow: 0 0 0 1px rgba(168, 74, 58, .7), 0 0 14px rgba(122, 42, 36, .55);
}

/* ⚠️ 움직임이 불편하신 분께는 흐름을 멈춥니다.
      색은 그대로라 무엇인지 알아보는 데는 지장이 없어요. */
@media (prefers-reduced-motion: reduce) {
  .title-achieve, .title-eva, .title-streak {
    animation: none;
    background-position: 30% 50%;   /* 가장 밝은 구간에서 멈춥니다 */
  }
}

/* ==========================================================
   🙌 함께 만든 누리 (helpful) — 청록
   ----------------------------------------------------------
   ⚠️ 다른 갈래와 겹치지 않는 색입니다: 갈색(정보글) · 파랑(게시글) ·
      레몬(댓글) · 초록(업적) · 남색(개척자) · 황금(누리의 전설).
   ⚠️ 이 갈래는 **네 단계**입니다 — 지금까지는 셋(t1/t2/t3)까지였어요.
      그래서 아래에 .title-t4 를 새로 만들었습니다. 다른 갈래도 넷이
      되면 그때 그대로 쓸 수 있게 갈래에 매지 않았습니다.
   ⚠️ 250회에 황금(.title-legend)을 쓰지 않았습니다. 황금빛은 '누리의
      전설' 하나뿐이라 뜻이 있어요 — 둘이 되면 둘 다 흐려집니다.
   ========================================================== */
.title-helpful { background: #1c5b57; color: #dff3f0; }

/* 🌟 4단계 — t3 의 금빛 글씨에 청록 고리를 한 겹 더 두릅니다.
   ⚠️ t3 를 대신하는 게 아니라 그것보다 한 칸 위입니다. */
.title-t4 {
  border-color: #f0c94a;
  color: #ffdc7a;
  box-shadow: 0 0 0 1px rgba(240, 201, 74, .45), 0 0 0 3px rgba(122, 222, 210, .28);
  animation: title-glow 2.6s ease-in-out infinite,
             title-text-glow 2.6s ease-in-out infinite;
}
/* ⚠️ 움직임을 줄이라고 설정한 분에게는 일렁임을 끕니다 (t3 와 같은 규칙) */
@media (prefers-reduced-motion: reduce) {
  .title-t4 { animation: none; }
}