/* =========================================================
   소동물 포털 — 공통 스타일 시트
   디자인 시스템: 색상, 타이포, 레이아웃, 컴포넌트
   ========================================================= */

/* ---------- 디자인 토큰 ---------- */
:root {
  /* 브랜드(고정) — 그린 계열 + 포인트 샌드 */
  --brand:        #2f6b45;   /* 메인 그린 */
  --brand-strong: #245436;   /* 진한 그린 (제목) */
  --brand-soft:   #4caf72;   /* 밝은 그린 (호버) */
  --accent:       #e0913b;   /* 포인트 색 (버튼·배경 강조) */
  /* 글자에 쓰는 주황 — 흰 바탕에서도 읽히도록 더 진하게 잡았어요.
     밝은 주황(#e0913b)을 흰 바탕에 글자로 쓰면 대비가 2.5 밖에 안 나옵니다. */
  --accent-text:  #a86213;
  --accent-soft:  #eeae5f;

  /* 카테고리 태그 색(고정) */
  --tag-rodent: #d98a3d;
  --tag-reptile: #4f9d69;
  --tag-crustacean: #4a90c2;
  --tag-isopod: #9b6cc2;

  /* 시맨틱(테마별로 바뀜) — 라이트 기본값 */
  --bg:          #fbfcfb;   /* 페이지 배경 */
  --surface:     #ffffff;   /* 카드/헤더 표면 */
  --surface-2:   #f2f6f3;   /* 옅은 표면 (썸네일 등) */
  --text:        #232a26;   /* 본문 */
  --text-muted:  #657069;   /* 보조 텍스트 — 4.5:1 대비를 넘도록 살짝 진하게 */
  --heading:     #245436;   /* 제목 */
  --line:        #e3e8e4;   /* 경계선 */
  --chip-bg:     #e7f4ec;   /* 옅은 그린 배경 (태그/칩) */
  --chip-text:   #2f6b45;
  --header-bg:   rgba(255,255,255,.88);

  --shadow-sm: 0 1px 3px rgba(20, 40, 28, .07);
  --shadow-md: 0 6px 18px rgba(20, 40, 28, .09);
  --shadow-lg: 0 14px 36px rgba(20, 40, 28, .12);

  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1160px;
  /* 사이트 전체가 귀여운 Jua.
     예전에 글자가 뭉쳐 보였던 진짜 원인은 폰트가 아니라 '가짜 굵게'였어요.
     Jua 는 굵기가 400 하나뿐인데 사이트 곳곳에서 600~800 을 지정해서,
     브라우저가 없는 굵기를 만들려고 획을 부풀렸던 겁니다.
     아래 font-synthesis: none 으로 그걸 막았으니 Jua 를 그대로 써도 또렷해요.
     (Gothic A1 은 Jua 에 없는 글자만 받쳐주는 예비용) */
  --font: "Jua", "Gothic A1", "Pretendard", -apple-system, "Malgun Gothic", sans-serif;
  /* 브랜드·제목 — Jua: 누리의 귀여운 정체성은 여기서 유지 */
  --font-cute: "Jua", "Gothic A1", "Pretendard", sans-serif; /* 위와 동일 — 제목용 별칭 */
}

/* ---------- 다크 테마 ---------- */
:root[data-theme="dark"] {
  --bg:          #14181a;
  --surface:     #1c2225;
  --surface-2:   #232b2e;
  /* 글자를 조금 더 밝게 — 어두운 배경에서 잘 안 보인다는 의견 반영 */
  --text:        #f2f6f3;
  --text-muted:  #b3c0b8;
  --heading:     #dcf0e5;
  --line:        #2c353a;
  --chip-bg:     #23332a;
  --chip-text:   #7fc99a;
  --header-bg:   rgba(20,24,26,.82);

  --brand:        #66c48a;
  --brand-strong: #cfeadb;
  --brand-soft:   #8ad6a8;
  --accent:       #eaa04e;
  --accent-text:  #eaa04e;   /* 어두운 바탕에서는 밝은 주황이 잘 보여요 */
  --accent-soft:  #f0b268;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .35);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, .45);
}

html { transition: none; }
body, .site-header, .card, .cat-card, .list-card, .post-item, .chip, .btn, .field input, .field textarea, .field select, .modal {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* ---------- 인트로 스플래시 (수면에서 떠오르는 '누리') ---------- */
.intro {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, #fffdf2 0%, #ffe98f 42%, #ffcf3f 78%, #f6b800 100%);
}
.intro.hide { opacity: 0; transition: opacity .55s ease; pointer-events: none; }
/* 수면 위 은은한 빛 */
.intro::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: 34%; height: 34%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.6), transparent 70%);
  filter: blur(26px); pointer-events: none;
}
.intro-content { position: relative; text-align: center; }
.intro-title {
  font-family: var(--font-cute);
  font-size: clamp(4rem, 16vw, 9.375rem); font-weight: 400; color: #7a4a10; letter-spacing: .04em;
  opacity: 0; text-shadow: 0 6px 22px rgba(122,74,16,.22), 0 2px 0 rgba(255,255,255,.5);
}
.intro-sub {
  font-family: var(--font-cute);
  margin-top: 6px; font-size: clamp(1rem, 3.8vw, 1.6875rem); font-weight: 400; color: #9a6212;
  letter-spacing: .02em; opacity: 0;
}
.intro-hint {
  font-family: var(--font-cute);
  position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
  /* 예전엔 투명도 .6 이라 흐릿해서 잘 안 보였어요 (대비 2.5).
     '건너뛸 수 있다' 는 걸 알려주는 안내라 읽혀야 합니다. */
  font-size: 0.875rem; color: rgba(74,44,8,.92);
}
.intro-title.emerge { animation: nuriEmerge 1.6s cubic-bezier(.18,.7,.2,1) forwards; }
.intro-sub.show { animation: nuriSubIn .9s ease forwards; }
.intro-content.sink { animation: nuriSink 1.3s cubic-bezier(.55,0,.7,.35) forwards; }
@keyframes nuriEmerge {
  0% { opacity: 0; transform: translateY(64px) scale(.94); filter: blur(13px); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes nuriSubIn {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes nuriSink {
  0% { opacity: 1; transform: translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: translateY(76px); filter: blur(13px); }
}

/* ---------- 인트로: 함께 떠오르는 다섯 친구 ----------
   '누리' 글자가 수면 위로 뜨는 동안, 다섯 소동물이 물속에서 함께 올라와요.
   글자를 가리지 않도록 화면 가장자리에 두고, 살짝 흐리게 깔아 배경처럼 보이게 했어요. */
.intro-pets { position: absolute; inset: 0; pointer-events: none; }
.intro-pet {
  position: absolute;
  width: clamp(84px, 13vw, 176px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0;
  /* 물에 잠긴 듯한 느낌 — 부드러운 테두리 빛과 옅은 그림자 */
  border: 3px solid rgba(255, 255, 255, .65);
  box-shadow: 0 10px 30px rgba(122, 74, 16, .22);
  animation: petFloat 1.9s cubic-bezier(.18,.7,.2,1) forwards;
}
/* 다섯 자리 — 가운데(누리 글자)를 비우고 둘러싸도록 */
.pet-hermit { left: 7%;  top: 16%; animation-delay: .15s; }
.pet-lizard { right: 8%; top: 12%; animation-delay: .35s; }
.pet-frog   { left: 13%; bottom: 15%; animation-delay: .55s; }
.pet-insect { right: 11%; bottom: 18%; animation-delay: .75s; }
.pet-spider { left: 50%; top: 4%; transform: translateX(-50%); animation-delay: .95s;
  width: clamp(70px, 10vw, 132px); }

@keyframes petFloat {
  0%   { opacity: 0; transform: translateY(52px) scale(.86); filter: blur(10px) saturate(.7); }
  60%  { opacity: .95; }
  100% { opacity: .95; transform: translateY(0) scale(1); filter: blur(0) saturate(1); }
}
/* 가운데 위 친구는 가로 중앙 정렬을 유지해야 해서 따로 */
@keyframes petFloatCenter {
  0%   { opacity: 0; transform: translateX(-50%) translateY(52px) scale(.86); filter: blur(10px) saturate(.7); }
  60%  { opacity: .95; }
  100% { opacity: .95; transform: translateX(-50%) translateY(0) scale(1); filter: blur(0) saturate(1); }
}
.pet-spider { animation-name: petFloatCenter; }

/* '누리'가 가라앉을 때 친구들도 함께 물속으로 */
.intro-pets.sink .intro-pet { animation: petSink 1.3s cubic-bezier(.55,0,.7,.35) forwards; }
.intro-pets.sink .pet-spider { animation-name: petSinkCenter; }
@keyframes petSink {
  0%   { opacity: .95; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(64px) scale(.9); filter: blur(12px); }
}
@keyframes petSinkCenter {
  0%   { opacity: .95; transform: translateX(-50%) translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(64px) scale(.9); filter: blur(12px); }
}

/* 좁은 화면에선 글자와 겹치지 않게 더 작고 더 바깥으로 */
@media (max-width: 560px) {
  .intro-pet { width: clamp(64px, 20vw, 96px); opacity: 0; }
  .pet-hermit { left: 4%;  top: 12%; }
  .pet-lizard { right: 4%; top: 9%; }
  .pet-frog   { left: 6%;  bottom: 12%; }
  .pet-insect { right: 5%; bottom: 14%; }
  .pet-spider { top: 2%; width: clamp(56px, 16vw, 84px); }
}

/* 움직임을 줄여달라고 설정한 분에게는 애니메이션 없이 은은하게만 */
@media (prefers-reduced-motion: reduce) {
  .intro-pet { animation: none !important; opacity: .9; filter: none; }
  .pet-spider { transform: translateX(-50%); }
}

/* ---------- 리셋 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;      /* 한글 단어 중간 줄바꿈 방지 (의미 단위로 끊김) */
  overflow-wrap: anywhere;   /* 아주 긴 영문/URL은 예외적으로 줄바꿈 허용 */
  /* FOUC 방지: 헤더·내용이 채워지기 전엔 감췄다가 준비되면 부드럽게 표시 */
  opacity: 0;
}
body.loaded { opacity: 1; transition: opacity .16s ease; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- 레이아웃 유틸 ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.section-head .eyebrow {
  display: inline-block; font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
  background: var(--chip-bg); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(1.5rem, 3.4vw, 2.125rem); line-height: 1.25; color: var(--heading); }
.section-head p { margin-top: 12px; color: var(--text-muted); font-size: 1rem; }

/* ---------- 헤더 / 내비 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: flex-start;
  height: 66px;
}
/* 로고는 햄버거 바로 옆(좌측), 우측 영역은 오른쪽 끝으로 */
.header-right { margin-left: auto; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--heading); }
.brand .logo {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-soft), var(--brand));
  display: grid; place-items: center; font-size: 1.25rem; box-shadow: var(--shadow-sm); flex-shrink: 0;
}
/* 로고 이미지 확정 전 임시 자리 (이미지 넣으면 이 규칙 제거) */
.brand .logo-empty {
  background: var(--chip-bg); border: 1px dashed var(--brand-soft); box-shadow: none;
}
/* 업로드된 로고 이미지 */
.brand .logo-img {
  width: 46px; height: 46px; object-fit: contain;
  background: #f6efe2; padding: 0; border: none; border-radius: 12px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-title { font-weight: 800; font-size: 1.125rem; }
.brand-sub { font-size: 0.71875rem; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }
.site-footer .brand-title { color: #fff; }
.site-footer .brand-sub { color: #a9c4b4; }
.site-footer .brand .logo-empty { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
/* 그룹 컨텍스트 로고 (그 동물 페이지처럼) */
.brand .logo-group { background: linear-gradient(135deg, var(--brand-soft), var(--brand)); font-size: 1.375rem; border: none; }

/* 헤더 오른쪽: 로그인/회원가입 + 검색 + 테마 */
.header-right { display: flex; align-items: center; gap: 12px; }
.auth-link { font-weight: 700; font-size: 0.9375rem; color: var(--text); padding: 6px 4px; transition: color .15s; }
.auth-link:hover { color: var(--brand); }
.auth-signup { color: var(--brand); }
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  display: grid; place-items: center; font-size: 1rem; transition: border-color .15s, background .15s;
  color: var(--heading);   /* 글자색을 정해두지 않으면 검정이 굳어 어두운 테마에서 안 보여요 */
}
.icon-btn:hover { border-color: var(--brand-soft); background: var(--chip-bg); }

/* 검색창 (돋보기 클릭 시 펼침) */
.search-box { display: none; padding: 0 0 14px; }
.search-box.open { display: block; }
.search-box input {
  width: 100%; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px;
  font-family: inherit; font-size: 0.9375rem; background: var(--surface); color: var(--text);
}
.search-box input:focus { outline: none; border-color: var(--brand); }

/* 하단 가로 카테고리 바 */
.category-bar { border-top: 1px solid var(--line); background: var(--surface); }
/* 메뉴는 본문(1160px)보다는 넓게, 그렇다고 화면 끝까지는 아니게.
   · 1160px 에 가두면 항목이 50px 넘쳐서 잘렸고,
   · 화면 폭을 다 쓰게 하면 '홈' 과 '업적' 이 양 끝에 딱 붙어 극단적이었어요.
   항목이 들어갈 만큼(약 1,210px)만 넉넉히 주고 양옆 여백은 남깁니다. */
.category-bar > .container { max-width: 1320px; padding: 0 24px; }
.cat-bar-inner { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: thin; }
/* ⚠️ 메뉴 항목은 절대 줄바꿈되면 안 됩니다.
   '식물 & 비바/테라리움' 은 <a> 가 아니라 <button>(준비 중) 이라
   아래 'a' 규칙의 nowrap 이 안 걸려서 두 줄로 접혔어요.
   자리가 모자라면 글자를 접지 말고 메뉴 칸이 옆으로 밀리게 합니다. */
.cat-bar-inner > a,
.cat-bar-inner > button { flex: 0 0 auto; white-space: nowrap; }
.cat-bar-inner a {
  padding: 13px 14px; font-size: 0.90625rem; font-weight: 700; white-space: nowrap; color: var(--text-muted);
  border-bottom: 3px solid transparent; transition: color .15s, border-color .15s;
}
.cat-bar-inner a:hover { color: var(--heading); }
.cat-bar-inner a.active { color: var(--brand); border-bottom-color: var(--brand); }
.cat-bar-inner a.cat-shops { color: var(--accent-text, var(--accent)); margin-left: auto; }
.cat-bar-inner a.cat-shops.active { color: var(--accent-text, var(--accent)); border-bottom-color: var(--accent); }

/* ---------- 햄버거 버튼 ---------- */
.hamburger {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 42px; height: 42px; padding: 9px; margin-right: 6px; border: none; background: none;
  border-radius: 10px; cursor: pointer; flex-shrink: 0;
}
.hamburger:hover { background: var(--chip-bg); }
.hamburger span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--heading); }

/* ---------- 좌측 서랍 메뉴 ---------- */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 300;
  opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.drawer-backdrop.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 84vw; z-index: 310;
  background: var(--surface); box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  overflow-y: auto; transform: translateX(-100%); transition: transform .28s ease;
}
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer-head .brand .logo-img { width: 36px; height: 36px; }
.drawer-close {
  width: 34px; height: 34px; border: none; background: var(--surface-2); color: var(--text);
  border-radius: 50%; font-size: 1.375rem; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.drawer-close:hover { background: var(--chip-bg); color: var(--heading); }
.drawer-auth { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.drawer-nav { display: flex; flex-direction: column; padding: 10px 10px 26px; }
.drawer-link { padding: 13px 14px; border-radius: 10px; font-size: 0.9375rem; font-weight: 700; color: var(--text); }
.drawer-link:hover { background: var(--chip-bg); color: var(--heading); }
.drawer-label { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); letter-spacing: .04em; padding: 14px 14px 4px; }
.drawer-nav .drawer-link + .drawer-label { margin-top: 6px; }
.drawer-divider { height: 1px; background: var(--line); margin: 10px 8px; }
.drawer-shops { color: var(--accent-text, var(--accent)); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: 0.9375rem; color: var(--text);
  transition: background .15s, color .15s;
}
.nav-links a:hover { background: var(--chip-bg); color: var(--heading); }
.nav-links a.active { color: var(--brand); background: var(--chip-bg); }
.nav-cta { margin-left: 8px; }
.nav-toggle { display: none; background: none; border: none; font-size: 1.625rem; color: var(--heading); }

/* ---------- 분류군 드롭다운 (내비) ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 14px; border-radius: 10px; border: none; background: none;
  font-family: inherit; font-weight: 600; font-size: 0.9375rem; color: var(--text);
  transition: background .15s, color .15s;
}
.nav-dropdown-trigger:hover { background: var(--chip-bg); color: var(--heading); }
.nav-dropdown-trigger .caret { font-size: 0.6875rem; opacity: .7; }
.nav-menu {
  position: absolute; left: 0; top: calc(100% + 8px); min-width: 210px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 6px; z-index: 130; display: none;
}
.nav-menu.open { display: block; }
.nav-menu a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  font-size: 0.90625rem; font-weight: 600; color: var(--text);
}
.nav-menu a:hover { background: var(--chip-bg); color: var(--heading); }
.nav-menu .nm-ico { font-size: 1.125rem; width: 22px; text-align: center; }

/* ---------- 테마 드롭다운 ---------- */
.theme-dropdown { position: relative; }
.theme-dropdown .caret { font-size: 0.6875rem; opacity: .7; }
.theme-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 156px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 6px; z-index: 130; display: none;
}
.theme-menu.open { display: block; }
.theme-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: none; padding: 9px 11px; border-radius: 8px;
  font-family: inherit; font-size: 0.875rem; font-weight: 600; color: var(--text);
}
.theme-menu-item:hover { background: var(--chip-bg); }
.theme-menu-item .check { margin-left: auto; color: var(--brand); opacity: 0; font-weight: 800; }
.theme-menu-item.selected { color: var(--brand); }
.theme-menu-item.selected .check { opacity: 1; }

/* ---------- 로그인 상태 영역 ---------- */
.auth-area { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.user-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 700;
  color: var(--brand); background: var(--chip-bg); padding: 7px 12px; border-radius: 999px;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- 인증 페이지 (로그인/회원가입) ---------- */
.auth-wrap { min-height: calc(100vh - 66px); display: grid; place-items: center; padding: 40px 20px; }
.auth-card {
  width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow-md); padding: 36px 32px;
}
.auth-head { text-align: center; margin-bottom: 24px; }
.auth-head .logo-big {
  display: inline-grid; place-items: center; width: 60px; height: 60px; font-size: 1.875rem;
  background: var(--chip-bg); border-radius: 18px; margin-bottom: 14px;
}
.auth-head h1 { font-size: 1.5rem; color: var(--heading); }
.auth-head p { margin-top: 8px; font-size: 0.875rem; color: var(--text-muted); }
.form-msg { padding: 10px 12px; border-radius: 10px; font-size: 0.875rem; font-weight: 600; margin-bottom: 4px; }
.form-msg.error { background: #fdeaea; color: #c0392b; }
.form-msg.success { background: var(--chip-bg); color: var(--brand); }
/* ---------- 🔴 2호기 (운영자의 사심) ----------
   assets 에 올려주신 2호기 그림에서 실제 쓰인 색을 뽑아 만들었습니다.
     본체 빨강 #c81400 (그림의 66%) · 어깨 주황 #dc7800 · 눈 초록

   두 번 고쳤어요:
     1차 — 채도를 너무 올려 눈이 아팠음
     2차 — 반대로 너무 눌러서 그냥 다크모드처럼 보였음
   지금은 '배경·카드·헤더까지 붉게 물들이되, 글자는 크고 밝게' 입니다.
   모든 글자 색은 배경 대비 4.5:1 이상이에요.
   (본문 16.0:1 · 보조 9.3:1 · 제목 8.5:1 · 링크 7.4:1) */
:root[data-theme="unit02"] {
  --bg:          #1b100d;   /* 붉은 기가 확실히 보이는 어두운 바탕 */
  --surface:     #2a1714;   /* 카드도 붉게 */
  --surface-2:   #37201b;
  --text:        #f8ebe6;
  --text-muted:  #d3b0a5;
  --heading:     #ff9270;   /* 제목을 2호기 색으로 — 한눈에 알아보게 */
  --line:        #4a2a24;
  --chip-bg:     #43201a;
  --chip-text:   #ffb094;
  --header-bg:   rgba(27,16,13,.90);

  --brand:        #ff7d5c;
  --brand-strong: #ffd8cc;
  --brand-soft:   #ff977a;
  --accent:       #ffa32e;   /* 어깨 주황 */
  --accent-text:  #ffa32e;   /* 어두운 바탕이라 그대로 */
  --accent-soft:  #ffb85c;
  --on-brand:     #2a0d07;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow-md: 0 6px 18px rgba(60, 8, 0, .5);
  --shadow-lg: 0 14px 36px rgba(60, 8, 0, .6);
}
:root[data-theme="unit02"] .form-msg.error { background: #4a1d17; color: #ffb0a4; }

/* 넓은 면에는 사진 원색 빨강 (흰 글자 대비 5.9:1) */
:root[data-theme="unit02"] .btn-primary { background: #c81400; border-color: #c81400; color: #fff; }  /* 진한 빨강이라 흰 글씨가 맞아요 */
:root[data-theme="unit02"] .btn-primary:hover { background: #e01700; border-color: #e01700; }

/* ---- 2호기라는 걸 한눈에 ---- */
/* 화면 위쪽에 기체의 붉은 기운이 감돌게 */
:root[data-theme="unit02"] body {
  background-image: radial-gradient(1200px 420px at 50% -8%, rgba(200, 20, 0, .22), transparent 70%);
  background-attachment: fixed;
}
/* 헤더 아래 얇은 주황 띠 — 기체 장갑의 모서리 느낌 */
:root[data-theme="unit02"] .site-header { border-bottom: 2px solid #c81400; }
/* 지금 보고 있는 메뉴를 주황으로 */
:root[data-theme="unit02"] .nav-link.active { color: var(--accent); }
/* 카드 테두리에도 붉은 기 */
:root[data-theme="unit02"] .cat-card,
:root[data-theme="unit02"] .hot-card,
:root[data-theme="unit02"] .animal-tab { border-color: #4a2a24; }
:root[data-theme="unit02"] .cat-card:hover,
:root[data-theme="unit02"] .hot-card:hover,
:root[data-theme="unit02"] .animal-tab:hover { border-color: #c81400; }

:root[data-theme="dark"] .form-msg.error { background: #3a2020; color: #f0a0a0; }
.auth-alt { text-align: center; margin-top: 20px; font-size: 0.875rem; color: var(--text-muted); }
.auth-alt a { color: var(--brand); font-weight: 700; }
.auth-alt a:hover { text-decoration: underline; }

/* hidden 속성을 붙이면 무조건 숨기기.
   .btn 같은 요소는 display 를 직접 정해두기 때문에, 그냥 두면
   hidden 을 붙여도 화면에 그대로 보입니다. */
[hidden] { display: none !important; }

/* ---------- 🖼️ 그림 이모지 ----------
   분류 아이콘은 기기마다 다르게 보이거나 아예 안 보이는 일이 있어서
   글자 대신 그림 파일로 넣습니다. 글자 크기를 따라가도록 em 을 써요.
   (assets/js/emoji.js 가 이 클래스를 붙여 줍니다) */
.emo {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.15em;   /* 글자 기준선에 맞춤 */
  object-fit: contain;
  user-select: none;
}
/* 그림 파일이 아직 없는 이모지 — 글자지만 그림과 같은 자리를 차지하게 */
span.emo.emo-text {
  display: inline-grid; place-items: center;
  font-size: .92em; line-height: 1;      /* 글자 이모지는 조금 커 보여서 살짝 줄입니다 */
}

/* 분류 카드처럼 아이콘만 큼직하게 놓이는 자리 */
.cat-card .ico .emo, .pk-ico .emo { width: 1em; height: 1em; vertical-align: middle; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 11px 20px; border-radius: 999px; font-weight: 700; font-size: 0.9375rem;
  border: 1px solid transparent; transition: transform .12s, box-shadow .15s, background .15s;
}
.btn:active { transform: translateY(1px); }
/* 주황 바탕에 흰 글씨는 생각보다 잘 안 보여요 (대비 2.5).
   바탕색(브랜드 느낌)은 그대로 두고 글자만 진하게 바꿨습니다. */
.btn-primary { background: var(--accent); color: var(--on-accent, #fff); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-soft); box-shadow: var(--shadow-md); }
.btn-ghost { background: var(--surface); color: var(--heading); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand-soft); background: var(--chip-bg); }
.btn-green { background: var(--brand); color: var(--on-brand, #fff); }
.btn-green:hover { background: var(--brand-soft); }
.btn-sm { padding: 8px 14px; font-size: 0.875rem; }

/* ---------- 데모 안내 배너 (홈) ---------- */
/* 배너 바탕은 어느 테마에서나 '밝은 주황' 이에요.
   그래서 글자색을 테마 변수에 맡기면 주황 위에 주황이 얹혀 안 보입니다.
   (2호기 테마에서 특히 심했어요 — 대비 1.18)
   바탕이 고정이니 글자색도 진한 색으로 고정합니다. */
.demo-banner { background: linear-gradient(90deg, var(--accent), var(--accent-soft)); color: #3a2000; }
.demo-banner-inner {
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px; text-align: center;
}
.demo-banner p { font-size: 0.90625rem; font-weight: 600; }
.demo-banner b { font-weight: 800; color: #1c0e00; }   /* 강조는 더 진하게 */
/* 예전에는 흰 바탕 + 주황 글씨라 잘 안 보였어요 (대비 2.0) */
.demo-banner-btn {
  background: #2a1400; color: #fff; border-color: #2a1400; white-space: nowrap;
}
.demo-banner-btn:hover { background: #46220a; color: #fff; transform: translateY(-1px); }

/* ---------- 히어로 ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 500px at 85% -10%, var(--chip-bg), transparent 60%),
    radial-gradient(900px 400px at 0% 110%, var(--surface-2), transparent 55%);
}
/* 🏞️ 홈 첫 화면 배경 그림 — 9개 분류 친구들이 다 모인 그림입니다.
   글자가 묻히지 않도록 위에 옅은 막(veil)을 한 겹 덮습니다.
   그림 파일은 우리 서버에 있어서 어디서 열어도 똑같이 보여요. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("../home-bg.webp");
  background-size: cover; background-position: center 38%;
  opacity: .5;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  /* 왼쪽(문구 쪽)은 진하게, 오른쪽은 옅게 덮어 그림이 보이게 */
  background: linear-gradient(100deg,
    var(--bg) 0%, color-mix(in srgb, var(--bg) 86%, transparent) 38%,
    color-mix(in srgb, var(--bg) 55%, transparent) 72%,
    color-mix(in srgb, var(--bg) 35%, transparent) 100%);
}
.hero > * { position: relative; z-index: 1; }
/* 배경 그림을 쓸 수 없는(아주 오래된) 브라우저에서도 글자는 항상 읽힙니다 */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .hero::after { background: linear-gradient(100deg, var(--bg) 0%, rgba(255,255,255,.72) 45%, rgba(255,255,255,.35) 100%); }
}
/* 어두운 테마에서는 그림을 조금 더 가라앉힙니다 */
[data-theme="dark"] .hero::before,
[data-theme="unit02"] .hero::before { opacity: .34; }
/* 모바일에서는 가벼운 그림으로 */
@media (max-width: 700px) {
  .hero::before { background-image: url("../home-bg-sm.webp"); opacity: .34; }
  .hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, transparent), var(--bg) 78%); }
}
/* 홈 첫 화면 — 메인 문구(왼쪽) + 이렇게 이용해요(오른쪽).
   안내 카드를 오른쪽으로 더 밀어 두어 문구가 넉넉히 자리를 씁니다. */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .78fr);
  gap: 44px; align-items: start;
  padding: 56px 0 30px;
}
/* 안내 카드는 오른쪽 끝에 붙입니다 */
.how-card { justify-self: end; width: 100%; max-width: 380px; }

/* 메인 문구 바로 아래 — 화제글 · 새 글을 나란히.
   두 칸 모두 화제글과 똑같은 납작한 줄(hot-mini)을 씁니다. */
.hero-feeds { padding: 6px 0 34px; }
.hero-feeds-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start;
}
.hero-feeds .feed-col { min-width: 0; }
.hero-feeds .feed-head { margin: 0 0 10px; }
.hero-feeds .hot-wrap { margin-bottom: 0; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 24px; padding-bottom: 18px; }
  .how-card { justify-self: stretch; max-width: none; }
  .hero-feeds-inner { grid-template-columns: 1fr; gap: 22px; }
}
/* 화제글을 줄여서 번 자리를 메인 문구에 씁니다 — 홈의 주인공이니까요 */
.hero h1 { font-size: clamp(2.125rem, 5.6vw, 3.75rem); line-height: 1.12; color: var(--heading); letter-spacing: -.5px; }
.hero h1 .accent { color: var(--accent-text, var(--accent)); }
.hero .lead { margin-top: 20px; font-size: 1.25rem; line-height: 1.75; color: var(--text); max-width: 580px; }
.hero-actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats { margin-top: 40px; display: flex; gap: 32px; }
.hero-stats .num { font-size: 1.625rem; font-weight: 800; color: var(--brand); }
.hero-stats .lbl { font-size: 0.8125rem; color: var(--text-muted); }

.hero-art {
  aspect-ratio: 1 / 1; max-width: 440px; margin-left: auto; width: 100%;
  border-radius: 28px; background: linear-gradient(160deg, var(--surface), var(--chip-bg));
  box-shadow: var(--shadow-lg); position: relative; display: grid; place-items: center;
  border: 1px solid var(--line);
}
.hero-art .emoji-big { font-size: clamp(5.625rem, 16vw, 9.375rem); filter: drop-shadow(0 10px 18px rgba(0,0,0,.12)); }
.hero-art .float {
  position: absolute; background: var(--surface); border-radius: 14px; padding: 10px 14px;
  box-shadow: var(--shadow-md); font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; gap: 8px;
}
.hero-art .float.f1 { top: 24px; left: -14px; }
.hero-art .float.f2 { bottom: 30px; right: -10px; }
.hero-art .float .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-soft); }

/* 이용 방법 미니 카드 (메인 문구 옆) */
/* ⚠️ 이 칸을 못 보고 지나치는 분이 많았습니다.
   흰 바탕에 얇은 선이라 옆의 본문과 구분이 안 됐어요.
   포인트 색 테두리와 옅은 색 바탕을 줘서 '안내판' 처럼 보이게 합니다. */
.how-card {
  position: relative;
  align-self: center; width: 100%; max-width: 380px; margin-left: auto;
  background: var(--chip-bg);
  border: 2px solid var(--accent);
  border-radius: 18px;
  padding: 22px 24px;
  /* 포인트 색을 머금은 그림자 — 종이에서 살짝 떠 보입니다 */
  box-shadow: 0 10px 26px -12px var(--accent), var(--shadow-md);
}
/* 위쪽 모서리에 색 띠 — 눈이 먼저 닿는 자리입니다 */
.how-card::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: -2px; height: 4px;
  background: var(--accent); border-radius: 0 0 4px 4px;
}
.how-card-head {
  font-size: 1.3125rem; font-weight: 800; color: var(--heading); margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.how-steps { display: flex; flex-direction: column; gap: 13px; list-style: none; margin: 0; padding: 0; }
.how-steps li { display: flex; align-items: center; gap: 11px; font-size: 1.0625rem; color: var(--text); }
/* 다크·2호기 테마에서는 브랜드색이 밝아서 흰 숫자가 묻혔어요 (대비 2.1)
   그래서 브랜드색 위에 올릴 글자색(--on-brand)을 씁니다. */
.how-steps .hs-num {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--brand); color: var(--on-brand, #fff);
  font-weight: 800; font-size: 0.8125rem; display: grid; place-items: center;
}
.how-steps b { color: var(--heading); font-weight: 800; }
.how-card-note {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line);
  font-size: 0.8125rem; color: var(--text-muted); display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.how-card-note b { color: var(--heading); }

/* ---------- How? 이용 안내 ---------- */
.step-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  background: var(--surface-2); border: 1px dashed var(--accent); border-radius: 14px;
  padding: 14px 20px; margin-bottom: 26px; font-size: 0.9375rem; color: var(--text);
}
.step0-badge {
  /* 주황 바탕이라 흰 글씨는 안 보여요 (대비 2.0~2.5) — 진한 글씨로 */
  font-size: 0.75rem; font-weight: 800; color: var(--on-accent, #2a1400); background: var(--accent);
  padding: 3px 10px; border-radius: 999px; letter-spacing: .03em;
}
/* 2호기 테마는 주황이 더 밝아서 --on-accent 를 따로 정해줍니다 */
:root[data-theme="unit02"] { --on-accent: #3a1200; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 22px 24px; text-align: center;
}
.step-num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px;
  border-radius: 50%; background: var(--brand); color: #fff; font-size: 1.25rem; font-weight: 800;
  box-shadow: var(--shadow-sm);
}
.step-card h3 { font-size: 1.125rem; color: var(--heading); }
.step-card p { margin-top: 8px; font-size: 0.875rem; color: var(--text-muted); }
/* 카드 사이 화살표 (넓은 화면) */
.steps .step-card:not(:last-child)::after {
  content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%);
  font-size: 1.25rem; color: var(--brand-soft); font-weight: 800; z-index: 1;
}

/* ---------- 카테고리 카드 ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cat-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; text-align: center; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-soft); }
.cat-card .ico { font-size: 2.75rem; margin-bottom: 12px; }
.cat-card h3 { font-size: 1.125rem; color: var(--heading); }
.cat-card p { margin-top: 6px; font-size: 0.875rem; color: var(--text-muted); }
.cat-card .count { margin-top: 12px; font-size: 0.8125rem; font-weight: 700; color: var(--brand); }

/* ---------- 🚧 준비 중인 분류 ----------
   아직 열지 않은 곳이에요. 흐릿하게 보여서 "여기도 생기는구나" 하고
   알 수는 있지만, 지금은 들어갈 수 없다는 게 한눈에 보이게 합니다. */
.cat-card.cat-soon {
  position: relative;
  cursor: pointer;
  font: inherit;
  width: 100%;
  /* 살짝 흐리고 색을 뺍니다 — 완전히 가리지는 않아요 */
  opacity: .55;
  filter: grayscale(.35);
}
.cat-card.cat-soon:hover {
  opacity: .78;
  filter: grayscale(.1);
  transform: translateY(-2px);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
/* 카드 위쪽에 붙는 '준비 중' 딱지 — 흐림 효과를 받지 않게 따로 띄웁니다 */
.cat-card.cat-soon .soon-badge {
  position: absolute; top: 10px; right: 10px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--chip-bg); color: var(--heading);
  font-size: 0.71875rem; font-weight: 800; letter-spacing: .02em;
  border: 1px solid var(--line);
}
.cat-card.cat-soon .count { color: var(--text-muted); }

/* 메뉴·서랍에 있는 준비 중 항목 */
.cat-soon-link {
  background: none; border: 0; font: inherit; cursor: pointer;
  color: var(--text-muted); opacity: .7;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;   /* 준비 중 칩까지 한 줄로 */
}
.cat-soon-link .soon-mini { flex: none; }
.cat-soon-link:hover { opacity: 1; color: var(--heading); }
.soon-mini {
  font-size: 0.65625rem; font-weight: 800; padding: 1px 6px; border-radius: 999px;
  background: var(--chip-bg); color: var(--text-muted); border: 1px solid var(--line);
}
/* 아래쪽 정보칸은 바탕이 어느 테마에서나 어두운 초록이에요.
   그래서 --text-muted(밝은 화면 기준 회색)를 쓰면 안 읽힙니다.
   정보칸 안의 다른 글자와 같은 밝은 색으로 맞춥니다. */
.foot-soon { color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.site-footer .foot-soon { color: #cfe0d5; }
.site-footer .foot-soon .soon-mini {
  background: rgba(255, 255, 255, .12); color: #cfe0d5; border-color: rgba(255, 255, 255, .22);
}

/* ---------- 준비 중 안내창 ---------- */
.soon-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, .55);
}
.soon-backdrop[hidden] { display: none; }
.soon-panel {
  position: relative; width: min(420px, 100%);
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 32px 26px 26px; text-align: center; box-shadow: var(--shadow-lg);
}
.soon-close {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: none; color: var(--text-muted); font-size: 1.375rem; line-height: 1; cursor: pointer;
}
.soon-close:hover { background: var(--chip-bg); color: var(--heading); }
.soon-ico { font-size: 3.25rem; line-height: 1; margin-bottom: 12px; }
.soon-ico .emo { width: 52px; height: 52px; vertical-align: middle; }
.soon-panel h2 { font-size: 1.375rem; color: var(--heading); }
.soon-lead { margin-top: 10px; font-size: 0.9375rem; line-height: 1.7; color: var(--text); }
.soon-note {
  margin-top: 16px; padding: 11px 14px; border-radius: 12px;
  background: var(--chip-bg); color: var(--text); font-size: 0.875rem;
}
.soon-note b { color: var(--heading); }
.soon-members { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }
.soon-panel .btn { margin-top: 20px; width: 100%; }

/* ---------- 공통 카드 그리드 ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card .thumb {
  aspect-ratio: 16 / 10; display: grid; place-items: center; font-size: 3.5rem;
  background: linear-gradient(150deg, var(--chip-bg), var(--surface-2));
}
.card .body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card h3 { font-size: 1.0625rem; color: var(--heading); }
.card p { font-size: 0.875rem; color: var(--text-muted); flex: 1; }
.card .meta { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--text-muted); margin-top: 4px; }

/* ---------- 태그 ---------- */
.tag {
  display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--chip-bg); color: var(--brand);
}
.tag.rodent { background: #fbeada; color: var(--tag-rodent); }
.tag.reptile { background: #e2f2e8; color: var(--tag-reptile); }
.tag.crustacean { background: #e0eef8; color: var(--tag-crustacean); }
.tag.isopod { background: #efe4f8; color: var(--tag-isopod); }

/* ---------- 밴드(CTA) ---------- */
/* 어두운 테마에서는 브랜드색·제목색이 밝아져서 흰 글씨가 묻혔어요 (대비 1.59).
   바탕은 그대로 두고 글자를 진하게 바꿉니다. */
.band {
  background: linear-gradient(135deg, var(--brand), var(--heading));
  color: var(--on-brand, #fff); border-radius: 24px; padding: 48px; text-align: center; margin: 0 auto;
}
.band h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); color: inherit; }
.band p { margin-top: 12px; opacity: .92; color: inherit; }
.band .btn { margin-top: 24px; }

/* ---------- 페이지 헤더(서브 페이지 상단) ---------- */
.page-hero {
  background: radial-gradient(900px 360px at 80% -20%, var(--chip-bg), transparent 60%);
  padding: 52px 0 40px; border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(1.625rem, 4vw, 2.5rem); color: var(--heading); }
.cat-hero-inner { display: flex; align-items: center; gap: 20px; }

/* 동물 전용 홈 상단 탭 (정보글/커뮤니티/업체/병원) */
.animal-tabs { display: flex; gap: 12px; flex-wrap: wrap; }
.animal-tab {
  flex: 1 1 150px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.animal-tab:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.animal-tab .at-ico {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  font-size: 1.6875rem; background: var(--chip-bg);
}
.animal-tab .at-label { font-size: 1rem; font-weight: 800; color: var(--heading); }

/* 동물 전용 홈 미리보기 패널 */
.preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.pv-item { min-width: 0; }
.preview-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 12px; }
.preview-panel .pv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.preview-panel .pv-head h3 { font-size: 1rem; color: var(--heading); }
.preview-panel .pv-head a { font-size: 0.8125rem; font-weight: 700; color: var(--brand); flex-shrink: 0; }
.pv-list { display: flex; flex-direction: column; }
.pv-item { display: flex; gap: 11px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--line); }
.pv-item:first-child { border-top: none; }
.pv-item:hover { background: var(--chip-bg); border-radius: 8px; }
.pv-thumb { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--surface-2); }
.pv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pv-thumb-emoji { display: grid; place-items: center; font-size: 1.375rem; }
.pv-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pv-title { font-size: 0.875rem; font-weight: 700; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-title b { color: var(--brand); }
.pv-meta { font-size: 0.75rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-empty { padding: 22px 6px; text-align: center; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 900px) { .preview-grid { grid-template-columns: 1fr; } }

/* 분류 페이지 바로가기 (크고 직관적으로) */
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quick-card {
  display: flex; align-items: center; gap: 16px; padding: 22px 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.quick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.quick-card .qc-ico {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center;
  font-size: 1.875rem; background: var(--chip-bg);
}
.quick-card .qc-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.quick-card .qc-tag { font-size: 0.75rem; font-weight: 800; color: var(--brand); }
.quick-card .qc-title { font-size: 1.0625rem; font-weight: 800; color: var(--heading); }
.quick-card .qc-desc { font-size: 0.8125rem; color: var(--text-muted); }
.quick-card .qc-arrow { font-size: 1.375rem; color: var(--brand-soft); font-weight: 800; flex-shrink: 0; }
@media (max-width: 900px) { .quick-grid { grid-template-columns: 1fr; } }
.cat-hero-ico {
  width: 78px; height: 78px; flex-shrink: 0; border-radius: 20px; display: grid; place-items: center;
  font-size: 2.625rem; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.page-hero p { margin-top: 12px; color: var(--text-muted); font-size: 1rem; max-width: 640px; }
.breadcrumb { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 14px; }
/* '홈' 처럼 짧은 링크는 손가락으로 누르기엔 너무 작아요 (15px).
   글씨 크기는 그대로 두고, 눌리는 면적만 넓혀 줍니다. */
.breadcrumb a {
  display: inline-block; padding: 6px 8px; margin: -6px -8px;
  min-width: 30px; text-align: center;   /* '홈' 처럼 한 글자여도 누를 자리를 확보 */
}
.breadcrumb a:hover { color: var(--brand); }

/* ---------- 필터 바 ---------- */
.filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.filter-group { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.filter-group .filterbar { margin-bottom: 12px; }
.filter-label { font-size: 0.8125rem; font-weight: 800; color: var(--text-muted); min-width: 44px; flex-shrink: 0; }
@media (max-width: 640px) {
  .filter-group { flex-direction: column; align-items: flex-start; gap: 4px; }
}
.chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  padding: 8px 16px; border-radius: 999px; font-size: 0.875rem; font-weight: 600; transition: .15s;
}
.chip:hover { border-color: var(--brand-soft); }
.chip.active { background: var(--brand); color: var(--on-brand, #fff); border-color: var(--brand); }
/* 어두운 테마에서는 브랜드색이 '밝은' 색이라, 그 위에 흰 글자를 얹으면
   대비가 2:1 대까지 떨어져 잘 안 보였어요. 어두운 글자로 뒤집습니다. */
/* 브랜드색 위에 얹을 글자색. 라이트는 브랜드색이 진해서 흰 글씨가 맞아요. */
:root                      { --on-brand: #ffffff; }
/* 주황(accent) 위에 얹을 글자색 — 주황이 밝아서 진한 글씨라야 읽혀요.
   2호기 테마는 주요 버튼이 진한 빨강(#c81400)이라 아래에서 흰 글씨로 따로 정합니다. */
:root, :root[data-theme="dark"] { --on-accent: #2a1400; }
:root[data-theme="dark"]   { --on-brand: #0f2015; }
:root[data-theme="unit02"] { --on-brand: #2a0d07; }

/* ---------- 폼 ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.875rem; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.field input, .field textarea, .field select {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.9375rem; background: var(--surface); color: var(--text); transition: border-color .15s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand-soft); }
.field textarea { min-height: 130px; resize: vertical; }

/* ---------- 모달 ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(31,61,43,.5); backdrop-filter: blur(3px);
  display: none; place-items: center; z-index: 200; padding: 20px;
}
.modal-backdrop.open { display: grid; }
.modal {
  background: var(--surface); border-radius: 20px; width: 100%; max-width: 520px; padding: 28px;
  box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto;
}
.modal h3 { font-size: 1.25rem; color: var(--heading); margin-bottom: 18px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }

/* ---------- 사육동물 선택 팝업 ---------- */
.picker-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.picker-item {
  display: flex; align-items: center; gap: 10px; padding: 14px 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; color: var(--text); transition: border-color .15s, background .15s, transform .1s;
}
.picker-item:hover { border-color: var(--brand); background: var(--chip-bg); transform: translateY(-2px); }
.picker-item .pk-ico { font-size: 1.625rem; }
.picker-item .pk-name { font-size: 0.875rem; font-weight: 700; color: var(--heading); }
@media (max-width: 480px) { .picker-grid { grid-template-columns: 1fr; } }

/* ---------- 게시판 선택 (☰ 드롭다운) ---------- */
.board-select { position: relative; }
.board-trigger {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); border-radius: 10px;
  font-family: inherit; font-size: 0.9375rem; font-weight: 800; color: var(--heading);
}
.board-trigger:hover { border-color: var(--brand-soft); }
.board-trigger .caret { font-size: 0.6875rem; opacity: .7; }
.board-ham { display: inline-flex; flex-direction: column; gap: 3px; }
.board-ham span { width: 15px; height: 2px; background: var(--brand); border-radius: 2px; }
.board-menu {
  position: absolute; left: 0; top: calc(100% + 6px); min-width: 210px; z-index: 80; display: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); padding: 6px;
}
.board-menu.open { display: block; }
.board-item {
  display: block; width: 100%; text-align: left; padding: 11px 14px; border: none; background: none; cursor: pointer;
  border-radius: 8px; font-family: inherit; font-size: 0.9375rem; font-weight: 700; color: var(--text);
}
.board-item:hover { background: var(--chip-bg); color: var(--heading); }
.board-item.active { color: var(--brand); background: var(--chip-bg); }

/* 글쓰기 사전 경고문 */
.write-notice {
  background: var(--surface-2); border: 1px solid var(--accent); border-radius: 12px;
  padding: 12px 16px; font-size: 0.84375rem; color: var(--text); line-height: 1.6; margin: 12px 0 6px;
}
/* 이 안내문은 바탕이 흰색이 아니라 옅은 회색이라, 글자에 쓰는 주황
   (--accent-text) 으로도 살짝 모자랐어요 (4.35). 여기서만 더 진하게. */
.write-notice b { font-weight: 800; color: #8f5210; }
:root[data-theme="dark"] .write-notice b,
:root[data-theme="unit02"] .write-notice b { color: var(--accent); }

/* ---------- 게시글 아이템 (목록) ---------- */
.post-list { display: flex; flex-direction: column; }
/* ⚠️ 카드 전체를 <a> 로 감싸면 안 됩니다.
   안에 글쓴이 이름 링크(프로필로 가는 <a>)가 들어가는데,
   HTML 은 링크 안에 링크를 넣을 수 없어서 브라우저가 카드 링크를
   제목 뒤에서 강제로 닫아버려요. 그러면 썸네일·댓글 칸이 카드 밖으로
   밀려나 '.post-item .pthumb' 같은 크기 규칙을 통째로 잃습니다.
   (그래서 붙여넣은 사진이 원본 크기로 튀어나왔어요)

   그래서 카드는 <div> 로 두고, 카드 넓이만큼 투명한 링크(.pi-link)를
   덮어 씌웁니다. 글쓴이 이름만 그 위로 올려서 프로필로 갈 수 있게 해요. */
.post-item {
  position: relative;
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding: 16px 6px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s;
}
/* 카드 전체를 덮는 투명한 링크 — 어디를 눌러도 글로 갑니다 */
.post-item .pi-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
/* 글쓴이 이름은 덮개보다 위에 둬서 프로필로 갈 수 있게 */
.post-item .author-link { position: relative; z-index: 2; }
.post-item:hover { background: var(--chip-bg); }
.post-item .pmain { min-width: 0; flex: 1; }
.post-item .ptitle {
  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;
}
.post-item .ptitle::before { content: "• "; color: var(--accent); }
.post-item .ptag { color: var(--brand); font-weight: 800; }
.post-item .pmeta { font-size: 0.8125rem; color: var(--text-muted); margin-top: 7px; }
.post-item .pright { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.post-item .pthumb {
  position: relative; width: 76px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
  background: var(--surface-2);
}
/* 사진 썸네일은 칸을 꽉 채워 자릅니다.
   ⚠️ :not(.emo) 가 중요해요. 사진이 없는 글은 분류 아이콘(🦀 같은 그림)을
      대신 보여주는데, 그 아이콘까지 꽉 채우면 76x76 이 되어
      60px 짜리 칸에서 아래가 16px 잘려 나갑니다. */
.post-item .pthumb img:not(.emo) { width: 100%; height: 100%; object-fit: cover; }
.post-item .pthumb-emoji { width: 100%; height: 100%; display: grid; place-items: center; font-size: 1.875rem; }
/* 분류 아이콘은 칸 가운데에 적당한 크기로 */
.post-item .pthumb > .ff-emoji { width: 100%; height: 100%; display: grid; place-items: center; }
.post-item .pthumb .emo { width: 30px; height: 30px; object-fit: contain; }
.post-item .pthumb-badge {
  position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.6); color: #fff;
  font-size: 0.6875rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
}
.post-item .pcomments {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 46px; height: 60px; border-radius: 10px; background: var(--surface-2); color: var(--text-muted);
}
.post-item .pcomments strong { font-size: 1.0625rem; color: var(--heading); }
.post-item .pcomments span { font-size: 0.6875rem; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state .big { font-size: 3rem; margin-bottom: 12px; }

/* 글쓰기 사진 미리보기 */
.img-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.imgp-item { position: relative; width: 68px; height: 68px; border-radius: 8px; overflow: hidden; }
.imgp-item img { width: 100%; height: 100%; object-fit: cover; }
.imgp-item button {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 0.8125rem; line-height: 1; cursor: pointer;
}

/* 글 상세 읽기 화면 */
.modal-article { max-width: 720px; padding: 0; position: relative; }
.modal-x {
  position: absolute; top: 14px; right: 16px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: var(--surface-2); color: var(--text); font-size: 1.375rem; line-height: 1; cursor: pointer;
}
.modal-x:hover { background: var(--chip-bg); color: var(--heading); }
.article { padding: 34px 36px 30px; }
.article-board {
  display: inline-block; font-size: 0.75rem; font-weight: 800; color: var(--brand);
  background: var(--chip-bg); padding: 4px 12px; border-radius: 999px;
}
.article-tag {
  display: inline-block; margin-left: 6px; font-size: 0.75rem; font-weight: 800; color: var(--accent);
  background: var(--surface-2); padding: 4px 12px; border-radius: 999px;
}
.article-title { font-size: clamp(1.375rem, 3.2vw, 1.875rem); color: var(--heading); line-height: 1.3; margin: 14px 0 16px; }
.article-byline { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.article-avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.375rem; background: var(--chip-bg); flex-shrink: 0;
}
.article-author { font-size: 0.9375rem; font-weight: 700; color: var(--heading); }
.article-sub { font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; }
.detail-imgs { display: flex; flex-direction: column; gap: 12px; margin: 22px 0; }
.detail-imgs .detail-img { width: 100%; border-radius: 14px; }
.detail-text { font-size: 1rem; color: var(--text); line-height: 1.85; white-space: pre-wrap; word-break: break-word; margin-top: 20px; }

/* 어드민 바 / 삭제 버튼 */
.admin-bar {
  margin: 14px 0; padding: 10px 14px; border-radius: 10px; font-size: 0.8125rem; font-weight: 700;
  background: var(--surface-2); color: var(--text); display: flex; align-items: center; gap: 10px;
}
/* 연한 빨강(#e05a5a)은 어느 바탕에서도 대비가 4.5 를 넘지 못했어요.
   테마별로 잘 읽히는 진하기로 나눕니다. */
.admin-bar button {
  border: 1px solid currentColor; background: none; color: #b3342f; font-weight: 700;
  padding: 5px 12px; border-radius: 8px; cursor: pointer; font-size: 0.8125rem;
}
:root[data-theme="dark"] .admin-bar button,
:root[data-theme="unit02"] .admin-bar button { color: #ff9b8a; }
.admin-bar button:hover { background: #b3342f; color: #fff; border-color: #b3342f; }
:root[data-theme="dark"] .admin-bar button:hover,
:root[data-theme="unit02"] .admin-bar button:hover { background: #a32617; color: #fff; border-color: #a32617; }
.cmt-del { background: none; border: none; cursor: pointer; font-size: 0.75rem; opacity: .5; padding: 0 2px; }
.cmt-del:hover { opacity: 1; }

/* 댓글 */
.cmt-section { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.cmt-title { font-size: 1rem; color: var(--heading); margin-bottom: 16px; }
.cmt-title span { color: var(--brand); }
.cmt-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.cmt { display: flex; gap: 11px; }
.cmt-avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.0625rem; background: var(--chip-bg); flex-shrink: 0;
}
.cmt-body { flex: 1; min-width: 0; }
/* 칭호를 여러 개 가진 분도 있어서 줄바꿈을 허용합니다
   (안 그러면 뱃지가 옆으로 삐져나가요) */
.cmt-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cmt-head strong { font-size: 0.875rem; color: var(--heading); }
/* ⚠️ 이 규칙은 '몇 시간 전' 같은 옆글씨용입니다.
   그냥 span 으로 잡으면 그 안의 뱃지(관리자·개척자 …)까지 회색으로
   덮어써서 글씨가 안 보였어요. 뱃지는 자기 색을 쓰게 빼 둡니다.
   (뱃지 규칙보다 이 규칙의 우선순위가 높아서 이겼습니다) */
.cmt-head span:not(.role-badge):not(.title-badge):not(.level-badge) {
  font-size: 0.75rem; color: var(--text-muted);
}
.cmt-text { font-size: 0.875rem; color: var(--text); line-height: 1.6; margin-top: 3px; word-break: break-word; }
.cmt-empty { font-size: 0.875rem; color: var(--text-muted); padding: 8px 0 16px; }
.cmt-reply-btn {
  background: none; border: none; color: var(--text-muted); font-size: 0.75rem; font-weight: 700;
  cursor: pointer; margin-top: 6px; padding: 2px 0;
}
.cmt-reply-btn:hover { color: var(--brand); }
/* 대댓글(답글): 부모 아래 들여쓰기 */
.cmt-reply { margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--line); }
.cmt-reply .cmt-avatar { width: 28px; height: 28px; font-size: 0.875rem; }
.cmt-reply-form { margin-top: 10px; }
.cmt-form { display: flex; flex-direction: column; gap: 8px; }
.cmt-form input {
  width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 0.875rem; background: var(--surface); color: var(--text);
}
.cmt-form input:focus { outline: none; border-color: var(--brand); }
.cmt-input-row { display: flex; gap: 8px; }
.cmt-input-row input { flex: 1; }
.cmt-input-row .btn { flex-shrink: 0; }
.cmt-as { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 8px; }
.cmt-as b { color: var(--brand); }

/* 글 상세 전용 페이지 */
.container-narrow { max-width: 760px; }
.post-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.write-as { font-size: 0.8125rem; color: var(--text-muted); margin: -2px 0 16px; }
.write-as b { color: var(--brand); }

/* 본문(상세 보기) — 문단/사진 블록 */
.detail-content { margin-top: 20px; }
.detail-content .detail-img { width: 100%; border-radius: 14px; display: block; margin: 8px 0 18px; }
.detail-para { font-size: 1rem; color: var(--text); line-height: 1.85; white-space: pre-wrap; word-break: break-word; margin: 0 0 16px; }
.detail-para:empty { display: none; }

/* ---------- 글쓰기 에디터 (네이버 카페 스타일) ---------- */
.write-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 26px 28px 24px; }
.write-row { display: flex; gap: 12px; }
.write-row .field { flex: 1; }
.write-title {
  width: 100%; border: none; border-bottom: 2px solid var(--line); background: none;
  font-family: inherit; font-size: 1.375rem; font-weight: 800; color: var(--heading); padding: 10px 2px; margin-top: 4px;
}
.write-title:focus { outline: none; border-bottom-color: var(--brand); }
.write-title::placeholder { color: var(--text-muted); font-weight: 700; }

/* 삽입 툴바 (아이콘 + 라벨) */
.ed-toolbar {
  display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; padding: 8px 4px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ed-tool {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 58px;
  padding: 6px 8px; border: none; background: none; border-radius: 8px; cursor: pointer;
  font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
}
.ed-tool:hover { background: var(--chip-bg); color: var(--heading); }
.ed-tool .ed-ico { font-size: 1.1875rem; color: var(--brand); }

/* 서식 툴바 */
.ed-format { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.ed-format select {
  height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 0.8125rem; padding: 0 8px;
}
.ed-fmt {
  min-width: 32px; height: 32px; padding: 0 8px; border: none; background: none; border-radius: 7px; cursor: pointer;
  font-size: 0.9375rem; color: var(--text); display: inline-flex; align-items: center; justify-content: center;
}
.ed-fmt:hover { background: var(--chip-bg); color: var(--heading); }
.ed-color { position: relative; overflow: hidden; }
.ed-color input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ed-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }

/* ---------- 📑 제목 고르는 칸 ---------- */
.ed-block {
  height: 28px; padding: 0 6px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font-size: 0.8125rem; font-weight: 700; cursor: pointer;
}

/* ---------- 본문 안의 제목 · 목록 ----------
   글쓰기 화면과 글을 읽는 화면이 똑같이 보이도록 함께 지정합니다.
   (한쪽만 정해두면 "쓸 때랑 다르게 보인다" 는 말이 나와요) */
.editor-body h2, .detail-content h2 { font-size: 1.5em; font-weight: 800; color: var(--heading); margin: 1.1em 0 .45em; line-height: 1.35; }
.editor-body h3, .detail-content h3 { font-size: 1.28em; font-weight: 800; color: var(--heading); margin: 1em 0 .4em; line-height: 1.4; }
.editor-body h4, .detail-content h4 { font-size: 1.12em; font-weight: 800; color: var(--heading); margin: .9em 0 .35em; line-height: 1.45; }
/* 글 맨 앞의 제목은 위 여백을 줄여요 */
.editor-body > h2:first-child, .detail-content > h2:first-child,
.editor-body > h3:first-child, .detail-content > h3:first-child { margin-top: .2em; }

.editor-body ul, .detail-content ul,
.editor-body ol, .detail-content ol { margin: .6em 0 .8em; padding-left: 1.6em; }
.editor-body ul, .detail-content ul { list-style: disc; }
.editor-body ol, .detail-content ol { list-style: decimal; }
.editor-body li, .detail-content li { margin: .28em 0; line-height: 1.75; }
/* 목록 안의 목록은 한 단계 더 들여쓰고 모양도 바꿔요 */
.editor-body ul ul, .detail-content ul ul { list-style: circle; margin: .25em 0; }
.editor-body ol ol, .detail-content ol ol { list-style: lower-alpha; margin: .25em 0; }

/* ---------- 🎨 글자색 · 형광펜 · 글자 크기 ---------- */
/* 읽어주는 프로그램에만 들리고 화면에는 안 보이는 글자 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 크기 조절 — [−] [16] px [+] */
.ed-size {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 4px; border: 1px solid var(--line); border-radius: 8px;
}
.ed-size input[type="number"] {
  width: 44px; padding: 3px 2px; text-align: center;
  border: 0; background: transparent; color: var(--text);
  font-size: 0.875rem; font-weight: 700;
  -moz-appearance: textfield;    /* 파이어폭스의 위아래 화살표 숨김 */
}
.ed-size input[type="number"]::-webkit-outer-spin-button,
.ed-size input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ed-size-unit { font-size: 0.71875rem; color: var(--text-muted); }
.ed-size-btn {
  width: 22px; height: 22px; line-height: 1;
  border: 0; border-radius: 6px; background: var(--chip-bg); color: var(--heading);
  font-size: 0.9375rem; font-weight: 800; cursor: pointer;
}
.ed-size-btn:hover { background: var(--brand); color: var(--on-brand); }

/* 색 버튼 (가 / 형광펜 가) */
.ed-pal-btn { min-width: 30px; }
.ed-pal-ink { font-weight: 800; color: #b3342f; border-bottom: 3px solid currentColor; line-height: 1.1; }
/* 어두운 바탕에서는 밝은 쪽으로 (이 글자는 '지금 색' 을 보여주는 견본이라 눈에 띄어야 해요) */
:root[data-theme="dark"] .ed-pal-ink,
:root[data-theme="unit02"] .ed-pal-ink { color: #ff9b8a; }
.ed-pal-hl { font-weight: 800; background: #fff3a3; color: #111; padding: 0 3px; border-radius: 3px; }

/* 색 고르는 판 */
.ed-palette {
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.ed-pal-head { font-size: 0.8125rem; font-weight: 700; color: var(--heading); margin-bottom: 8px; }
.ed-sw-row { display: flex; flex-wrap: wrap; gap: 7px; }
.ed-sw {
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .18);
}
.ed-sw:hover { transform: scale(1.12); }
.ed-sw-none {
  background: var(--bg); color: var(--text-muted);
  font-size: 0.8125rem; font-weight: 800; line-height: 1;
}
.ed-pal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
}
.ed-pal-custom { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-muted); }
.ed-pal-custom input[type="color"] {
  width: 30px; height: 24px; padding: 0; border: 1px solid var(--line);
  border-radius: 6px; background: none; cursor: pointer;
}

@media (max-width: 640px) {
  .ed-size input[type="number"] { width: 38px; }
  .ed-sw { width: 30px; height: 30px; }   /* 손가락으로 누르기 좋게 */
}

/* 본문 (contenteditable) */
.editor-body {
  min-height: 320px; padding: 18px 6px; font-size: 1rem; line-height: 1.85; color: var(--text);
  outline: none; word-break: break-word;
}
.editor-body.is-empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; }
/* 📷 본문 사진 크기 — 정보글·커뮤니티·업체소식 전부 같은 규칙입니다.

   글은 읽으라고 있는 것이라, 사진이 글보다 커 보이면 안 됩니다.
   그래서 두 가지를 함께 겁니다.
     · 가로 520px 까지 — 본문 칸(646px)을 꽉 채우지 않게
     · 세로는 화면의 55% 까지 — 세로로 긴 사진이 화면을 덮지 않게
   둘 중 먼저 걸리는 쪽에 맞춰 줄어들고, 비율은 그대로예요.
   원본이 이보다 작으면 억지로 키우지 않습니다. */
.editor-body img { max-width: min(100%, 520px); max-height: 55vh; width: auto; height: auto;
  border-radius: 12px; margin: 8px 0; display: block; }
.editor-body blockquote {
  margin: 10px 0; padding: 8px 16px; border-left: 4px solid var(--brand-soft);
  color: var(--text-muted); background: var(--surface-2); border-radius: 0 8px 8px 0;
}
.editor-body hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.editor-body a { color: var(--brand); text-decoration: underline; }

.write-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 22px; }

/* ---------- ✏️ 임시저장 ---------- */
/* 저장 상태 — 조용히 알려주고, 버튼들 왼쪽에 붙습니다 */
.draft-state { margin-right: auto; font-size: 0.8125rem; color: var(--text-muted); }
.draft-state.ok { color: var(--brand); }
.draft-state.warn { color: #c0392b; }
:root[data-theme="dark"] .draft-state.warn,
:root[data-theme="unit02"] .draft-state.warn { color: #ff9b8a; }

/* '쓰다 만 글이 있어요' 안내 */
.draft-resume {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-bottom: 14px; padding: 12px 14px;
  border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: 12px; background: var(--surface);
}
.draft-resume .dr-msg { flex: 1 1 240px; font-size: 0.875rem; color: var(--text); }
.draft-resume .dr-prev { display: block; margin-top: 3px; font-size: 0.8125rem; color: var(--text-muted); }
.draft-resume .dr-btns { display: flex; gap: 8px; }

@media (max-width: 640px) {
  .write-actions { flex-wrap: wrap; }
  .draft-state { flex: 1 1 100%; margin: 0 0 6px; }
}

/* 상세 본문에서도 인용구/구분선/링크 예쁘게 */
.detail-content blockquote {
  margin: 14px 0; padding: 10px 18px; border-left: 4px solid var(--brand-soft);
  color: var(--text-muted); background: var(--surface-2); border-radius: 0 8px 8px 0;
}
.detail-content hr { border: none; border-top: 1px solid var(--line); margin: 22px 0; }
.detail-content img { max-width: min(100%, 520px); max-height: 55vh; width: auto; height: auto;
  border-radius: 14px; margin: 10px 0; display: block; }
.detail-content a { color: var(--brand); text-decoration: underline; }

@media (max-width: 640px) {
  .write-card { padding: 20px 16px; }
  .write-row { flex-direction: column; gap: 0; }
  .article { padding: 30px 20px 24px; }
}

/* ---------- 병원/업체 리스트 ---------- */
.list-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
  display: flex; gap: 18px; align-items: center; transition: box-shadow .15s, border-color .15s;
}
.list-card:hover { box-shadow: var(--shadow-sm); border-color: var(--brand-soft); }
.list-card .lc-ico {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 1.75rem;
  background: var(--chip-bg); flex-shrink: 0;
}
/* 로고 아이콘: 배경 박스 없이 로고만 (뒤 사각형 제거) */
.list-card .lc-ico.lc-ico-img,
.list-card.partner .lc-ico.lc-ico-img { background: none; padding: 0; box-shadow: none; }
.list-card .lc-ico-img img { width: 100%; height: 100%; object-fit: contain; }
.list-card .lc-body { flex: 1; }
.list-card h3 { font-size: 1.0625rem; color: var(--heading); display: flex; align-items: center; gap: 8px; }
.list-card .addr { font-size: 0.875rem; color: var(--text-muted); margin-top: 3px; }
.list-card .lc-tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.list-card h3 { flex-wrap: wrap; }
.list-card .lc-right { text-align: right; flex-shrink: 0; }
.lc-links { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.badge-open { font-size: 0.75rem; font-weight: 700; color: var(--brand); background: var(--chip-bg); padding: 4px 10px; border-radius: 999px; }
.badge-spec { font-size: 0.75rem; font-weight: 700; color: var(--accent); background: var(--surface-2); padding: 4px 10px; border-radius: 999px; }

/* ---------- 협력 업체 강조 (골드 테두리 + 가끔 카드 전체를 스윽 휩쓰는 빛) ---------- */
.list-card.partner {
  position: relative; overflow: hidden;
  border: 2px solid #e6b422;
  background: linear-gradient(180deg, rgba(255,215,100,.12), var(--surface));
}
/* 카드 전체를 대각선으로 휩쓰는 골드 빛 — 약 7초에 한 번만 지나감 */
.list-card.partner::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;
  animation: partnerSweep 7s ease-in-out infinite;
}
.list-card.partner .lc-ico { background: linear-gradient(135deg, #ffd966, #e6b422); }
.badge-partner {
  position: relative; z-index: 1;
  font-size: 0.75rem; font-weight: 800; color: #5a4300;
  background: linear-gradient(135deg, #ffe08a, #e6b422);
  padding: 4px 11px; border-radius: 999px; letter-spacing: .02em;
  box-shadow: 0 1px 6px rgba(230,180,34,.45);
}
/* 앞 18%(약 1.3초)에만 스윽 지나가고 나머지 시간은 화면 밖에서 대기 → 정신 사납지 않게 */
@keyframes partnerSweep {
  0% { transform: translateX(-160%) rotate(8deg); }
  18% { transform: translateX(340%) rotate(8deg); }
  100% { transform: translateX(340%) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .list-card.partner::after { animation: none; }
}

/* ---------- 통합 검색 ---------- */
.search-page-form { display: flex; gap: 10px; margin-top: 16px; }
.search-page-form input {
  flex: 1; padding: 13px 18px; border: 1px solid var(--line); border-radius: 999px;
  font-family: inherit; font-size: 1rem; background: var(--surface); color: var(--text);
}
.search-page-form input:focus { outline: none; border-color: var(--brand); }
.chips-label { font-size: 0.8125rem; font-weight: 800; color: var(--text-muted); margin-right: 4px; align-self: center; }
.search-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.search-count { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: 16px; }
.search-count b { color: var(--brand); }
.search-group { margin-bottom: 28px; }
.search-group-title { font-size: 1rem; color: var(--heading); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.search-group-title span { font-size: 0.8125rem; color: var(--brand); font-weight: 800; }
.search-list { display: flex; flex-direction: column; gap: 8px; }
.search-item {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: box-shadow .15s, border-color .15s;
}
.search-item:hover { box-shadow: var(--shadow-sm); border-color: var(--brand-soft); }
.search-item .si-ico { font-size: 1.5rem; flex-shrink: 0; }
.search-item .si-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.search-item .si-section { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.search-item .si-where { background: var(--chip-bg); color: var(--brand); padding: 1px 8px; border-radius: 999px; font-size: 0.6875rem; }
.search-item .si-title { font-size: 1rem; font-weight: 700; color: var(--heading); }
.search-item .si-snippet { font-size: 0.84375rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-more { margin-top: 10px; }
.search-suggest { margin-top: 8px; }
.search-suggest-head { font-size: 0.9375rem; font-weight: 800; color: var(--heading); margin-bottom: 14px; }
.search-tip { font-size: 0.875rem; color: var(--text-muted); text-align: center; }

/* ---------- 안내 페이지 (info) ---------- */
.info-block { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; margin-bottom: 16px; }
.info-block h3 { font-size: 1.0625rem; color: var(--heading); margin-bottom: 14px; }
.info-lead { font-size: 0.9375rem; color: var(--text); line-height: 1.7; }
/* 동그란 번호(①②③)를 직접 그리므로 브라우저 기본 번호(1. 2. 3.)는 끕니다 —
   안 끄면 "1. ①" 처럼 두 번 나와요. */
.info-steps { display: flex; flex-direction: column; gap: 12px; counter-reset: s; list-style: none; }
.info-steps li { font-size: 0.9375rem; color: var(--text); line-height: 1.6; padding-left: 34px; position: relative; }
.info-steps li::before {
  counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff;
  font-size: 0.8125rem; font-weight: 800; display: grid; place-items: center;
}
.info-list { display: flex; flex-direction: column; gap: 10px; }
.info-list li { font-size: 0.9375rem; color: var(--text); line-height: 1.6; }
.info-list b, .info-steps b { color: var(--heading); }

/* FAQ 아코디언 */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.faq summary {
  cursor: pointer; padding: 16px 20px; font-size: 0.9375rem; font-weight: 700; color: var(--heading);
  list-style: none; position: relative; padding-right: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; position: absolute; right: 18px; top: 15px; color: var(--brand); font-weight: 800; }
.faq details[open] summary::after { content: "－"; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq p { padding: 14px 20px 18px; font-size: 0.90625rem; color: var(--text); line-height: 1.7; }

/* 안내 폼 */
.info-form { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; margin-top: 8px; }
.info-form .btn { margin-top: 4px; }
.info-success { padding: 20px; text-align: center; font-size: 0.9375rem; font-weight: 700; color: var(--brand); }
.info-success span { display: block; margin-top: 6px; font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); }

/* 관리자 접수함 */
.admin-inbox { border: 2px solid var(--brand-soft); }
.inbox-item { border-top: 1px solid var(--line); padding: 12px 0; }
.inbox-item:first-of-type { border-top: none; }
.inbox-head { display: flex; justify-content: space-between; font-size: 0.875rem; margin-bottom: 6px; }
.inbox-head span { color: var(--text-muted); font-size: 0.8125rem; }
.inbox-row { font-size: 0.875rem; color: var(--text); line-height: 1.6; }
.inbox-row span { color: var(--text-muted); font-weight: 700; margin-right: 6px; }

/* ---------- 푸터 ---------- */
/* 푸터 위에 큰 여백 — 스크롤해야 보이도록 (여백은 추후 활용 예정) */
.site-footer { background: #16281d; color: #cfe0d5; margin-top: clamp(240px, 46vh, 460px); }
/* 바탕이 어느 테마에서나 어두운 초록이라, 글자색도 밝은 쪽으로 고정합니다.
   (라이트 테마에서 진한 초록 글씨가 얹혀 거의 안 보였어요 — 대비 1.77) */
.site-footer b, .site-footer strong { color: #eaf5ee; }
.site-footer a { color: #a8dcbe; }
.site-footer a:hover { color: #d7f0e2; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 52px 0 30px; }
.footer-inner .brand { color: #fff; margin-bottom: 12px; }
.footer-col h4 { color: #fff; font-size: 0.9375rem; margin-bottom: 14px; }
.footer-col a { display: block; font-size: 0.875rem; padding: 5px 0; color: #cfe0d5; }
.footer-col a:hover { color: #fff; }
.footer-about { font-size: 0.875rem; line-height: 1.7; color: #a9c4b4; max-width: 300px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0; text-align: center; font-size: 0.8125rem; color: #8fae9d; }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { margin: 0 auto; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* 헤더 상단: 좁으면 줄바꿈 허용 */
  .nav { height: auto; min-height: 60px; padding: 8px 0; flex-wrap: wrap; gap: 10px; }
  .header-right { gap: 8px; }
  .brand-title { font-size: 1rem; }
  .auth-link { font-size: 0.875rem; }
  .icon-btn { width: 34px; height: 34px; }
  .cat-bar-inner a.cat-shops { margin-left: 0; }  /* 스크롤 바에서 자연스럽게 이어지도록 */
  .cat-grid, .card-grid, .steps { grid-template-columns: 1fr; }
  .steps .step-card:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -14px; transform: translateX(50%); }
  .footer-inner { grid-template-columns: 1fr; }
  .band { padding: 32px 22px; }
  .list-card { flex-wrap: wrap; }
  .hero-stats { flex-wrap: wrap; gap: 20px; }
  .br-pc { display: none; }   /* 모바일에선 강제 줄바꿈 해제 → 자연스럽게 흐름 */
}

/* =========================================================
   글꼴 마무리 — 본문은 고운돋움(가벼움), 제목·브랜드는 Jua(귀여움)
   · Jua 는 획이 굵고 붙어 있어 본문에 쓰면 '들·랄·릴' 같은 글자가
     한 덩어리로 뭉쳐 보여요. 그래서 본문만 고운돋움으로 바꿨습니다.
   · Jua 를 남긴 곳에도 자간을 살짝 벌려 뭉침을 덜어냈어요.
   파일 끝에 두어 기본값을 덮어씀
   ========================================================= */
body {
  font-size: 1.125rem;
  font-weight: 400;      /* Jua 는 400 하나뿐 — 다른 값은 가짜 굵게가 됨 */
  letter-spacing: .03em; /* 글자 사이를 벌려 획이 붙어 보이지 않게 */
  line-height: 1.8;      /* 줄 간격도 넉넉히 */
  word-spacing: .02em;
}
/* 사이트 전체 굵기를 400 으로 고정 — Jua 에 없는 굵기를 요청하지 않도록 */
body, p, li, td, th, span, div, a, button, input, textarea, select, label,
h1, h2, h3, h4, h5, h6, b, strong, small { font-weight: 400; }
/* 굵게 표시하던 곳은 굵기 대신 '색'으로 강조 (Jua 는 굵은 서체가 없어서) */
b, strong { color: var(--heading); }
/* 가짜 굵게 금지 — 폰트에 없는 굵기를 브라우저가 억지로 만들지 않게 합니다.
   이게 '들·랄·릴' 같은 글자가 뭉쳐 보이던 진짜 원인이었어요. */
* { font-synthesis-weight: none; -webkit-font-synthesis: none; font-synthesis: none; }
/* Jua(굵기 400 하나뿐)를 쓰는 곳은 굵기를 400 으로 고정 */
.brand-title, .intro-title, .intro-sub, .intro-hint,
.hero h1, .section-head h2, .how-card-head, .cat-card h3,
.feed-head h2 { font-weight: 400 !important; }
/* ---------- 제목은 전부 귀여운 Jua ----------
   본문은 읽기 편한 Gothic A1, 제목·브랜드는 Jua 로 누리다움을 유지해요.
   (전에는 홈 제목만 Jua 라서 분류·커뮤니티 페이지 제목이 밋밋했습니다) */
h1, h2, h3, h4, h5,
.brand-title, .intro-title, .intro-sub, .intro-hint,
.page-hero h1, .hero h1, .section-head h2, .how-card-head, .cat-card h3,
.feed-head h2, .at-label, .article-title, .cmt-title, .info-block h3,
.footer-col h4, .band h2, .adm-table th {
  font-family: var(--font-cute);
  font-weight: 400;          /* Jua 는 굵기가 400 하나뿐 — 가짜 굵게 방지 */
  letter-spacing: .03em;     /* 자간을 벌려 획이 뭉치지 않게 */
  line-height: 1.42;
}
/* 큰 제목일수록 자간을 조금 더 — 글자가 클수록 뭉쳐 보이기 쉬워요 */
.page-hero h1, .hero h1, .section-head h2 { letter-spacing: .045em; }
/* 제목 안의 굵은 글씨도 Jua 를 그대로 (가짜 굵게 금지) */
h1 b, h2 b, h3 b, .page-hero h1 b { font-weight: 400; }

/* 상단 메뉴·탭·서랍도 Jua — 사이트를 둘러볼 때 계속 보이는 부분이라
   여기가 밋밋하면 누리다움이 확 죽어요. */
.cat-bar-inner a, .drawer-link, .drawer-label,
.animal-tab .at-label, .brand-sub, .board-trigger, .board-item {
  font-family: var(--font-cute);
  font-weight: 400 !important;
  letter-spacing: .02em;
}
.brand-title { font-size: 1.4375rem; }
.brand-sub { font-size: 0.875rem; }
.nav-links a, .cat-bar-inner a, .cat-bar-inner .species-trigger { font-size: 1.09375rem; }
.btn { font-size: 1.09375rem; }
.btn-sm { font-size: 1rem; }
.auth-link { font-size: 1.09375rem; }
.hero h1 { font-size: clamp(2.125rem, 5.4vw, 3.625rem); }
.hero .lead { font-size: 1.4375rem; }
.section-head h2 { font-size: clamp(1.875rem, 4vw, 2.625rem); }
.section-head p { font-size: 1.25rem; }
.cat-card .ico { font-size: 3.125rem; }
.cat-card h3 { font-size: 1.375rem; }
.cat-card p { font-size: 1.03125rem; }
.cat-card .count { font-size: 0.9375rem; }
.card h3 { font-size: 1.25rem; }
.card p { font-size: 1.03125rem; }
.card .meta { font-size: 0.9375rem; }
.animal-tab .at-label { font-size: 1.1875rem; }
.quick-card .qc-title { font-size: 1.25rem; }
.how-card-head { font-size: 1.3125rem; }
.how-steps li { font-size: 1.0625rem; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3rem); }
.page-hero p { font-size: 1.21875rem; }
.chip { font-size: 1.03125rem; }
.board-trigger { font-size: 1.125rem; }
.board-item { font-size: 1.09375rem; }
.post-item .ptitle { font-size: 1.1875rem; }
.post-item .pmeta { font-size: 0.9375rem; }
.post-item .pcomments strong { font-size: 1.25rem; }
.article-title { font-size: clamp(1.75rem, 4vw, 2.375rem); }
.article-author { font-size: 1.125rem; }
.article-sub { font-size: 0.9375rem; }
.detail-para, .detail-text { font-size: 1.21875rem; line-height: 1.95; }
.editor-body { font-size: 1.1875rem; }
.write-title { font-size: 1.6875rem; }
.cmt-title { font-size: 1.1875rem; }
.cmt-head strong { font-size: 1.03125rem; }
.cmt-text { font-size: 1.03125rem; }
.pv-title { font-size: 1.03125rem; }
.pv-meta { font-size: 0.875rem; }
.preview-panel .pv-head h3 { font-size: 1.1875rem; }
.search-item .si-title { font-size: 1.1875rem; }
.search-item .si-snippet { font-size: 0.9375rem; }
.search-page-form input { font-size: 1.125rem; }
.info-block h3 { font-size: 1.3125rem; }
.info-lead, .info-list li { font-size: 1.125rem; }
.info-steps li { font-size: 1.125rem; }
.faq summary { font-size: 1.125rem; }
.faq p { font-size: 1.0625rem; }
.field label { font-size: 1.03125rem; }
.field input, .field textarea, .field select { font-size: 1.09375rem; }
.list-card h3 { font-size: 1.25rem; }
.list-card .addr { font-size: 1.03125rem; }
.badge-spec, .badge-partner, .badge-open { font-size: 0.8125rem; }
.footer-col h4 { font-size: 1.0625rem; }
.footer-col a { font-size: 1rem; }
.footer-about { font-size: 1rem; }
.demo-banner p { font-size: 1.03125rem; }
.empty-state { font-size: 1.0625rem; }
.modal h3 { font-size: 1.4375rem; }

/* ===== 역할 뱃지 (작성자 이름 옆) ===== */
.role-badge {
  display: inline-block; vertical-align: middle;
  font-size: 0.6875rem; font-weight: 800; line-height: 1;
  padding: 3px 7px; border-radius: 999px; margin-left: 4px;
  letter-spacing: .2px; white-space: nowrap;
}
/* ===== 역할 뱃지 광택 =====
   모든 역할이 '자기 색'으로 빛이 스윽 지나갑니다.
   관리자는 검은색이니 광택도 검은빛(더 짙은 그림자가 훑고 지나가는 느낌)이에요. */
.role-badge { position: relative; overflow: hidden; }
.role-badge::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-120%);
  animation: badgeShine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes badgeShine {
  0%, 62% { transform: translateX(-120%); }
  82%, 100% { transform: translateX(120%); }
}
/* 역할마다 시작 시점을 조금씩 어긋나게 — 여러 개가 나란히 있을 때 더 자연스러워요 */
.role-manager::after    { animation-delay: .3s; }
.role-submanager::after { animation-delay: .6s; }
.role-staff::after      { animation-delay: .9s; }
.role-partner::after    { animation-delay: 1.2s; }

/* 👑 관리자 — 검정. 광택도 '검은빛'이 훑고 지나갑니다 */
.role-admin {
  background: linear-gradient(135deg, #232b3a, #39445c 52%, #232b3a);
  color: #f3f5f9;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .38);
}
.role-admin::after {
  background: linear-gradient(105deg,
    transparent 30%, rgba(0, 0, 0, .18) 42%,
    rgba(0, 0, 0, .72) 50%,
    rgba(0, 0, 0, .18) 58%, transparent 70%);
}

/* 관리자 오라 - '잔혹한 천사' 가 흰빛이라면 이쪽은 검은빛입니다.
   순수한 검정만 쓰면 어두운 테마에서 안 보여서,
   아주 옅은 보랏빛을 섞은 검정으로 테두리를 함께 둡니다. */
/* 관리자 — 같은 방식의 검은 연기 */
@media (prefers-reduced-motion: reduce) {
  .role-admin {
    animation: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .7), 0 0 12px rgba(30, 22, 52, .8);
  }
}

/* 운영자 — 보라 */
.role-manager {
  background: linear-gradient(135deg, #a78bfa, #6d28d9);
  color: #fff; box-shadow: 0 1px 4px rgba(109, 40, 217, .38);
}
.role-manager::after {
  background: linear-gradient(105deg, transparent 30%, rgba(216, 194, 255, .35) 42%,
    rgba(233, 219, 255, .92) 50%, rgba(216, 194, 255, .35) 58%, transparent 70%);
}

/* 부운영자 — 초록 */
.role-submanager {
  background: linear-gradient(135deg, #4ade80, #16a34a);
  color: #04310e; box-shadow: 0 1px 4px rgba(22, 163, 74, .32);
}
.role-submanager::after {
  background: linear-gradient(105deg, transparent 30%, rgba(200, 255, 216, .38) 42%,
    rgba(224, 255, 232, .95) 50%, rgba(200, 255, 216, .38) 58%, transparent 70%);
}

/* 스텝 — 레몬 노랑 (황금과 다름) */
.role-staff {
  background: linear-gradient(135deg, #fff06a, #facc15);
  color: #4a3d00; box-shadow: 0 1px 3px rgba(202, 168, 0, .35);
}
.role-staff::after {
  background: linear-gradient(105deg, transparent 30%, rgba(255, 252, 200, .5) 42%,
    rgba(255, 255, 240, .98) 50%, rgba(255, 252, 200, .5) 58%, transparent 70%);
}

/* 협력업체 — 황금 (금속 광택) */
.role-partner {
  background: linear-gradient(135deg, #fdf0c0 0%, #f0c14b 38%, #c9971f 62%, #f6dd8a 100%);
  color: #4a3200; box-shadow: 0 1px 5px rgba(201, 151, 31, .55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.role-partner::after {
  background: linear-gradient(105deg, transparent 30%, rgba(255, 245, 205, .5) 42%,
    rgba(255, 253, 235, .98) 50%, rgba(255, 245, 205, .5) 58%, transparent 70%);
}

/* 등급 뱃지에는 광택을 넣지 않아요 (일반 회원까지 반짝이면 산만해져요) */
.level-badge::after { content: none; }

/* 움직임을 줄여달라고 설정한 분에게는 광택을 멈춥니다 */
@media (prefers-reduced-motion: reduce) {
  .role-badge::after { animation: none; opacity: .18; transform: none; }
}

/* 운영자 + 협력업체 겸직 → 보라/황금 반반 단일 뱃지 (예: 소라게 사장님) */
.role-combo-mp {
  background: linear-gradient(90deg, #6d28d9 0 50%, #e6b422 50% 100%);
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  box-shadow: 0 1px 4px rgba(120, 80, 30, .4);
}

/* 운영진 관리 — 역할 체크박스 / 목록 행 */
.role-checks { display: flex; flex-wrap: wrap; gap: .5rem .9rem; padding: .2rem 0; }
.role-check { display: inline-flex; align-items: center; gap: .35rem; font-size: 1rem; cursor: pointer; }
.role-check input { width: 18px; height: 18px; }
.staff-row:hover { background: rgba(0, 0, 0, .04); }

/* ===== 에디터 확장: 스티커 · 표 · 동영상 · 투표 ===== */
.sticker-pad {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 10px; margin: 6px 0 10px;
  border: 1.5px solid var(--border, #ddd); border-radius: 12px; background: var(--surface-2);
  max-height: 190px; overflow-y: auto;
}
.sticker {
  font-size: 1.5rem; line-height: 1; padding: 6px 7px; border: none; border-radius: 9px;
  background: transparent; cursor: pointer;
}
.sticker:hover { background: rgba(0, 0, 0, .08); transform: scale(1.15); }
.sticker-in { font-size: 1.875rem; line-height: 1.2; }

/* 본문 속 표 · 유튜브 */
.editor-body table, .detail-content table, .post-table {
  border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 1rem;
}
.editor-body th, .editor-body td, .detail-content th, .detail-content td {
  border: 1px solid var(--border, #ccc); padding: 8px 10px; text-align: left;
}
.editor-body th, .detail-content th { background: var(--surface-2); font-weight: 700; }
.editor-body iframe, .detail-content iframe {
  max-width: 100%; aspect-ratio: 16 / 9; height: auto; width: 560px; border: 0; border-radius: 12px; margin: 10px 0;
}

/* 투표 만들기 (글쓰기) */
.poll-builder {
  border: 2px dashed var(--brand); border-radius: 12px;
  padding: 14px 16px; margin: 6px 0 12px; background: var(--surface-2);
}
.poll-builder-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.poll-builder input[type="text"] {
  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;
}
.poll-opt-row { display: flex; gap: 6px; margin-bottom: 6px; }
.poll-note { font-size: 0.84375rem; color: var(--text-muted); margin: 10px 0 0; }

/* 투표 보기 (글 상세) */
.poll-box {
  border: 2px solid var(--brand); border-radius: 14px;
  padding: 16px 18px; margin: 18px 0; background: var(--surface-2);
}
.poll-q { font-size: 1.1875rem; font-weight: 700; margin-bottom: 12px; }
.poll-list { display: flex; flex-direction: column; gap: 8px; }
.poll-choice {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 14px; border-radius: 10px; font-size: 1rem; font-family: inherit;
  border: 1.5px solid var(--border, #ccc); background: var(--surface); color: inherit;
}
.poll-choice:hover:not(:disabled) { border-color: var(--brand); }
.poll-choice:disabled { opacity: .7; cursor: default; }
.poll-choice.mine { border-color: var(--brand); border-width: 2px; font-weight: 700; }
.poll-bar {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  background: rgba(31, 138, 84, .18); transition: width .4s ease;
}
.poll-label, .poll-pct { position: relative; z-index: 1; }
.poll-pct { font-size: 0.875rem; color: var(--text-muted); white-space: nowrap; }
.poll-foot { margin-top: 10px; font-size: 0.84375rem; color: var(--text-muted); }

/* ===== 관리 탭 (admin.html) ===== */
.admin-link { font-weight: 800; color: #b91c1c !important; }
.admin-panel { background: var(--surface); border: 1.5px solid var(--border, #ddd); border-radius: 14px; padding: 18px 20px; }
.admin-panel h3 { margin: 0 0 6px; }
.adm-count { color: var(--brand); font-weight: 800; }
.adm-table-wrap { overflow-x: auto; margin-top: 14px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; white-space: nowrap; }
.adm-table th, .adm-table td {
  padding: 9px 10px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--line);
  /* 등급 칸에 선택 상자가 없는 줄(관리자)만 조금 낮아 보여서 최소 키를 맞춥니다.
     td 의 height 는 '최소'처럼 동작해서, 내용이 크면 알아서 늘어나요. */
  height: 31px;
}
.adm-table th { font-size: 0.84375rem; color: var(--text-muted); font-weight: 700; }
/* 어두운 테마에서는 검은색을 얹어봐야 티가 안 나요 */
.adm-table tr:hover td { background: var(--chip-bg); }
.adm-email { color: var(--text-muted); font-size: 0.875rem; }
/* 관리 칸의 버튼들.
   예전에는 flex-wrap: wrap 이라 칸이 조금만 좁아도 버튼이 아래로 내려갔어요.
   그 바람에 버튼이 2개인 줄만 키가 커져서 표가 들쭉날쭉했습니다.
   표 자체가 좌우로 스크롤되니(.adm-table-wrap), 버튼은 한 줄로 둡니다. */
/* ⚠️ 이 칸은 <td> 입니다. display:flex 를 걸면 표 셀에서 빠져나가서
   그 줄만 높이·기준선이 어긋나 표가 통째로 틀어져 보였어요.
   셀은 셀로 두고, 안의 버튼만 한 줄로 늘어놓습니다. */
.adm-actions { white-space: nowrap; }
.adm-actions > * { vertical-align: middle; margin-right: 6px; }
.adm-actions > :last-child { margin-right: 0; }
.adm-banned td { opacity: .55; background: rgba(239, 68, 68, .08); }
.adm-shield {
  font-size: 0.8125rem; font-weight: 700; color: #b91c1c;
  display: inline-flex; align-items: center; gap: 4px; height: 26px;
}
/* 어두운 바탕에서는 진한 빨강이 거의 안 보여서 밝은 쪽으로 */
:root[data-theme="dark"] .adm-shield,
:root[data-theme="unit02"] .adm-shield { color: #ff9b8a; }
.adm-search { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.adm-search input {
  flex: 1; min-width: 200px; padding: 9px 11px; border-radius: 9px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface-2); color: inherit; font-size: 1rem;
}
.adm-level { padding: 5px 8px; border-radius: 8px; border: 1.5px solid var(--border, #ccc); background: var(--surface-2); color: inherit; font-size: 0.875rem; }

/* 관리자 가입 코드 (접힘) */
.admin-code-box { margin: 6px 0 10px; font-size: 0.875rem; }
.admin-code-box summary { cursor: pointer; color: var(--text-muted); }
.admin-code-box input {
  width: 100%; padding: 9px 11px; border-radius: 9px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface-2); color: inherit; font-size: 1rem;
}

/* ===== 개인정보 동의 (회원가입) ===== */
.consent-box {
  border: 1.5px solid var(--border, #ccc); border-radius: 10px;
  padding: 12px 14px; margin: 4px 0 14px; background: var(--surface-2);
}
.consent-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 1rem; }
.consent-row input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.consent-note { margin: 8px 0 0; font-size: 0.84375rem; line-height: 1.6; color: var(--text-muted); }

/* ===== 회원 탈퇴 (위험 구역) ===== */
.danger-zone { border: 2px solid #ef4444; border-radius: 12px; padding: 16px 18px; background: rgba(239, 68, 68, .06); }
.danger-zone h3 { color: #b91c1c; }
.danger-zone input[type="password"] {
  width: 100%; padding: 9px 11px; border-radius: 9px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface); color: inherit; font-size: 1rem;
}
.btn-danger { background: #dc2626; color: #fff; border: none; }
.btn-danger:hover { background: #b91c1c; }
.btn-danger:disabled { opacity: .6; }

/* ===== 관리자: 업체 입점 관리 폼 ===== */
.shop-form {
  border: 2px dashed var(--brand); border-radius: 14px;
  padding: 18px 20px; margin-bottom: 18px; background: var(--surface);
}
.shop-form h3 { margin: 0 0 12px; }
.shop-form .field { margin-bottom: 10px; }
.shop-form input[type="text"], .shop-form textarea {
  width: 100%; padding: 9px 11px; border-radius: 9px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface-2); color: inherit;
  font-family: inherit; font-size: 1rem;
}
.shop-form textarea { min-height: 68px; resize: vertical; }
.shop-adm-btns { display: flex; gap: 6px; margin-top: 8px; }

/* ===== 등급(레벨) 뱃지 — 일반 회원 (1등급=최고 … 6등급=신입) ===== */
.level-badge {
  display: inline-block; vertical-align: middle;
  font-size: 0.6875rem; font-weight: 800; line-height: 1;
  padding: 3px 7px; border-radius: 999px; margin-left: 4px; white-space: nowrap;
}

/* ==========================================================
   🏅 칭호
   ----------------------------------------------------------
   등급 뱃지와 같은 크기로 맞춰, 이름 옆에 나란히 놓습니다.
   갈래마다 색이 다릅니다. 지금은 정보글(갈색) 한 갈래뿐이에요.
     · 기록자        갈색
     · 사서          갈색 + 황금빛 테두리
     · 지식의 수호자  황금빛 테두리 + 황금빛이 천천히 일렁임
   ========================================================== */
.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; }
/* ── 댓글 갈래: 초록색 ── */
.title-comment { background: #2f6b3f; color: #e6f5ea; }

/* ── 🏆 업적 '생물박사' — 통째로 황금빛 ──
   바탕도 테두리도 글자도 금빛. 다른 칭호와 한눈에 구분됩니다. */
.title-achieve {
  background: linear-gradient(135deg, #b8860b, #f0c94a 45%, #b8860b);
  /* 금빛의 어두운 쪽(#b8860b) 위에서도 글씨가 또렷하도록 조금 더 진하게.
     예전 #3a2a00 은 그 부분에서 대비 4.27 로 기준(4.5)에 살짝 못 미쳤어요. */
  color: #2e2100;
  border-color: #f7dd8a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  animation: title-glow 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .title-achieve { animation: none; } }

/* ── 🧭 특수 '개척자' — 초록 ──
   누리의 색이 초록이라 '처음부터 함께한 사람' 에 어울립니다.
   ⚠️ 댓글 칭호(#2f6b3f)도 초록이라 그대로 쓰면 구분이 안 돼요.
      그래서 조금 더 밝고 맑은 초록에 옅은 테두리를 둘러 구분합니다.
   일렁임은 넣지 않았어요 — 오래 활동해서 딴 게 아니라
   '일찍 와 주셨다'는 표시라 조용한 편이 어울립니다. */
.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); }
}
/* 움직임이 불편한 분들을 위해 — 기기 설정에 따라 일렁임을 멈춥니다 */
@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-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; }
.evt-chip-notice { background: linear-gradient(135deg, #f87171, #dc2626); 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);
}
/* .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; }
  .chip { padding: 10px 16px; }
  .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); }

/* 글 화면의 말머리도 누르면 모아 보기로 */
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: 8px; margin-bottom: 14px; }
.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; }
.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; }
}

/* =========================================================
   🛒 장터 — 기존 누리 토큰(색·폰트·둥근 카드·그림자)만 사용
   새 디자인 시스템을 만들지 않고, 있는 규칙을 그대로 씁니다.
   ========================================================= */

/* ---- 첫 화면: 세 갈래 ---- */
.mk-gate { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 26px; }
.mk-gate-card {
  display: flex; flex-direction: column; gap: 7px; padding: 22px 20px;
  border: 1.5px solid var(--border, #e5e5e5); border-radius: 16px;
  background: var(--surface); text-decoration: none; color: inherit;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
.mk-gate-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.mk-gate-ico { font-size: 34px; line-height: 1; }
.mk-gate-ico img { width: 34px; height: 34px; }
.mk-gate-name { font-size: 1.2rem; font-weight: 700; color: var(--heading); }
.mk-gate-desc { font-size: 15px; color: var(--text-muted); }
.mk-gate-go { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--brand); }
.mk-gate-soon { opacity: .82; border-style: dashed; }
.mk-gate-soon:hover { border-color: var(--border, #ccc); transform: none; }

/* ---- 생물 분양 준비중 ---- */
.mk-life { max-width: 640px; }
.mk-life-lead { font-size: 1.35rem; font-weight: 700; color: var(--heading); margin: 0 0 14px; }
.mk-life p { font-size: 1.0625rem; line-height: 1.85; margin: 0 0 14px; }
.mk-life-note {
  padding: 13px 16px; border-radius: 12px; font-size: 15.5px;
  background: var(--surface-2); border: 1px solid var(--border, #e5e5e5);
}
.mk-life-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }

/* ---- 목록 도구줄 ---- */
.mk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mk-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- 검색·필터 ---- */
.mk-filters {
  padding: 14px 16px; margin-bottom: 18px;
  border: 1.5px solid var(--border, #e5e5e5); border-radius: 14px; background: var(--surface-2);
}
.mk-search-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mk-search-row input {
  flex: 1 1 200px; min-width: 0; padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface); color: inherit;
  font-family: inherit; font-size: 16px;
}
.mk-fgroup { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.mk-flabel { flex: 0 0 76px; font-size: 13.5px; font-weight: 700; color: var(--text-muted); }
.mk-fchips { display: flex; gap: 5px; flex-wrap: wrap; }
.mk-fchips .chip { font-size: 13.5px; padding: 5px 11px; }

/* ---- 목록 카드 ---- */
.mk-count { font-size: 14px; color: var(--text-muted); margin: 0 0 10px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mk-card {
  display: flex; gap: 12px; padding: 12px;
  border: 1.5px solid var(--border, #e7e7e7); border-radius: 14px;
  background: var(--surface); text-decoration: none; color: inherit;
}
.mk-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.mk-card-done { opacity: .62; }
.mk-thumb {
  flex: none; width: 96px; height: 96px; border-radius: 11px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 34px;
  background: var(--surface-2);
}
.mk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mk-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mk-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 2px; }
.mk-name {
  font-size: 16.5px; font-weight: 700; color: var(--heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-price { font-size: 17px; font-weight: 800; color: var(--brand); }
.mk-meta { font-size: 13px; color: var(--text-muted); }
.mk-meta-sub { font-size: 12.5px; }

/* 상태 알약 */
.mk-status { font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.mk-status-open { background: var(--chip-bg); color: var(--brand); }
.mk-status-reserved { background: #fef3c7; color: #92400e; }
.mk-status-done { background: var(--surface-2); color: var(--text-muted); }
.mk-free { font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #dcfce7; color: #166534; }
.mk-cat { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }

/* ---- 안전거래 안내 ---- */
.mk-safety {
  margin: 26px 0 8px; padding: 16px 18px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border, #e5e5e5);
}
.mk-safety-head { font-weight: 700; color: var(--heading); margin-bottom: 8px; }
.mk-safety ul { margin: 0 0 10px; padding-left: 20px; }
.mk-safety li { font-size: 15px; line-height: 1.8; color: var(--text); }
.mk-safety-note { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.7; }

/* ---- 글쓰기 ---- */
.mk-write .req { color: #dc2626; }
.mk-opt { font-size: 13px; color: var(--text-muted); font-weight: 400; }
.mk-hint { margin: 5px 0 0; font-size: 13px; color: var(--text-muted); }
.mk-kind-pick { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.mk-kind-note { font-size: 13px; color: var(--text-muted); }
.mk-price-input { display: flex; align-items: center; gap: 6px; }
.mk-price-input input { flex: 1; min-width: 0; }
.mk-price-won { font-weight: 700; color: var(--text-muted); }
.mk-free-big { margin: 6px 0 0; font-size: 1.15rem; font-weight: 800; color: #166534; }
.mk-write input[type="text"], .mk-write select, .mk-write textarea {
  width: 100%; padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface-2); color: inherit;
  font-family: inherit; font-size: 16px;
}
.mk-write textarea { resize: vertical; }
.mk-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mk-photo { position: relative; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; }
.mk-photo img { width: 100%; height: 100%; object-fit: cover; }
.mk-photo-del {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: none;
  border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; line-height: 1;
}
.mk-photo-main {
  position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
  font-size: 11px; font-weight: 700; background: rgba(0, 0, 0, .55); color: #fff;
}
.mk-write-safety {
  margin: 16px 0 4px; padding: 12px 15px; border-radius: 11px; font-size: 14.5px; line-height: 1.7;
  background: rgba(230, 180, 34, .12); border: 1px solid rgba(230, 180, 34, .4);
}

/* ---- 상세 ---- */
.mk-detail { max-width: 780px; }
.mk-done-banner {
  padding: 11px 15px; border-radius: 11px; margin-bottom: 16px; font-weight: 700;
  background: var(--surface-2); color: var(--text-muted);
}
.mk-detail-photos { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.mk-detail-photos img { width: 100%; height: auto; border-radius: 14px; display: block; }
.mk-detail-price { font-size: 1.2rem; color: var(--brand); }
.mk-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 0; }
.mk-owner-bar {
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  margin-top: 12px; padding: 11px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border, #e5e5e5);
}
.mk-owner-label { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.mk-report-flag { color: #b91c1c; }
.mk-back { margin-top: 18px; }
.mk-report-box {
  margin-top: 14px; padding: 16px 18px; border-radius: 14px;
  border: 2px solid #ef4444; background: rgba(239, 68, 68, .06);
}
.mk-report-box h3 { margin: 0 0 4px; }
.mk-report-box select, .mk-report-box textarea {
  width: 100%; padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface); color: inherit;
  font-family: inherit; font-size: 16px;
}
.mk-report-done { margin: 0; font-weight: 700; color: #166534; }

/* ---- 모바일: 1열 중심, 가로 스크롤 없음 ---- */
@media (max-width: 640px) {
  .mk-grid { grid-template-columns: 1fr; }
  .mk-gate { grid-template-columns: 1fr; }
  .mk-thumb { width: 80px; height: 80px; font-size: 28px; }
  .mk-name { font-size: 15.5px; }
  .mk-flabel { flex-basis: 100%; }
  .mk-search-row input { flex-basis: 100%; }
  .mk-toolbar { align-items: stretch; }
  .mk-toolbar-right { justify-content: flex-end; }
  .mk-write .write-row { flex-direction: column; }
}

/* =========================================================
   🐾 내 생물 — 기존 누리 토큰만 사용 (사진이 주인공, UI는 담백하게)
   ========================================================= */
.pet-count { color: var(--brand); font-weight: 800; }
.pet-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pet-card {
  position: relative; display: flex; gap: 12px; padding: 12px;
  border: 1.5px solid var(--border, #e7e7e7); border-radius: 14px;
  background: var(--surface); cursor: pointer;
}
.pet-card:hover, .pet-card:focus-visible { border-color: var(--brand); transform: translateY(-2px); outline: none; }
.pet-photo {
  flex: none; width: 84px; height: 84px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; background: var(--surface-2);
}
.pet-photo img { width: 100%; height: 100%; object-fit: cover; }
.pet-photo-none img { width: 34px; height: 34px; }
.pet-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pet-card-name {
  font-size: 17px; font-weight: 700; color: var(--heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pet-card-species { font-size: 14px; color: var(--text); }
.pet-card-group { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.pet-card-group img { width: 16px; height: 16px; }
.pet-card-since { font-size: 12.5px; color: var(--brand); font-weight: 700; }
.pet-card-intro {
  font-size: 13px; color: var(--text-muted); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pet-card-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.pet-card:hover .pet-card-tools, .pet-card:focus-within .pet-card-tools { opacity: 1; }

/* 상세 */
.pet-detail { max-width: 560px; }
.pet-detail-photo { border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.pet-detail-photo img { width: 100%; height: auto; display: block; }
.pet-detail-intro {
  margin: 14px 0 0; padding: 12px 15px; border-radius: 11px; font-size: 15.5px;
  background: var(--surface-2); border: 1px solid var(--border, #e5e5e5);
}

/* 등록·수정 폼 */
.pet-form { max-width: 520px; }
.pet-form h4 { margin: 0 0 12px; font-size: 1.05rem; }
.pet-form .req { color: #dc2626; }
.pet-form .field { margin-bottom: 11px; }
.pet-form input[type="text"], .pet-form input[type="date"], .pet-form select {
  width: 100%; padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface-2); color: inherit;
  font-family: inherit; font-size: 16px;
}
.pet-form-row { display: flex; gap: 10px; }
.pet-form-row .field { flex: 1; min-width: 0; }
.pet-photo-pick { display: flex; align-items: center; gap: 12px; }
.pet-photo-prev {
  flex: none; width: 84px; height: 84px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; background: var(--surface-2); border: 1.5px solid var(--border, #ddd);
}
.pet-photo-prev img { width: 100%; height: 100%; object-fit: cover; }
.pet-photo-btns { display: flex; flex-direction: column; gap: 6px; }

/* 홈의 작은 '내 친구들' 줄 */
.myfriends-strip { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.myfriend {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 7px; border-radius: 999px;
  border: 1.5px solid var(--border, #e7e7e7); background: var(--surface-2);
  text-decoration: none; color: inherit; font-size: 14.5px;
}
.myfriend:hover { border-color: var(--brand); }
.myfriend-pic {
  flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--surface);
}
.myfriend-pic img { width: 100%; height: 100%; object-fit: cover; }
.myfriend-name { font-weight: 700; }
.myfriend-sp { color: var(--text-muted); font-size: 13px; }

/* 모바일 — 1열, 글자 잘림 방지, 도구 버튼 항상 보이게(터치라 hover 없음) */
@media (max-width: 640px) {
  .pet-cards { grid-template-columns: 1fr; }
  .pet-card-tools { opacity: 1; position: static; margin-top: 8px; }
  .pet-card { flex-wrap: wrap; }
  .pet-card-name { white-space: normal; }
  .pet-photo { width: 72px; height: 72px; font-size: 28px; }
  .pet-form-row { flex-direction: column; gap: 0; }
}