/* ========= 챗터 — AI 채팅 커뮤니티 (디자인 원본 스펙) ========= */
:root {
  --accent: #d9503b;
  --ink: #1f1f22;
  --ink-2: #35353a;
  --ink-3: #45454b;
  --ink-4: #55555c;
  --ink-5: #63636a;
  --mut: #85858c;
  --mut-2: #9c9ca4;
  --mut-3: #adadb4;
  --line: #eaeaec;
  --soft: #f2f2f4;
  --soft-2: #eeeef0;
  --warm-bg: #f0e2de;
  --warm-ink: #a34a35;
  --pre-ink: #a3705c;
  --suf-ink: #7d7d86;
  --dark: #1f1f22;
  --gap: 22px;
  --radius: 14px;
  --cardw: 212px;
  --shadow-card: 0 1px 3px rgba(31, 31, 34, .06);
  --shadow-ring: 0 1px 2px rgba(31, 31, 34, .05), 0 0 0 1px rgba(31, 31, 34, .04);
  --mono: 'JetBrains Mono', monospace;
  --t0: #dcd2c6; --t1: #d5d9cd; --t2: #dfd3d3; --t3: #d2d6de;
  --t4: #ded8c8; --t5: #d3dad9; --t6: #dcd6de; --t7: #d9d4c9;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #ffffff;
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden; /* 모바일 가로 넘침 방지 */
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; }
input, textarea, select { font-family: inherit; }
::selection { background: #ffd9d2; }
.mono { font-family: var(--mono); font-size: .94em; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 빈 썸네일용 사선 패턴 + 틴트 순환 */
.stripe {
  background-color: var(--t0);
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 7px, transparent 7px 14px);
}
.t0 { background-color: var(--t0); } .t1 { background-color: var(--t1); }
.t2 { background-color: var(--t2); } .t3 { background-color: var(--t3); }
.t4 { background-color: var(--t4); } .t5 { background-color: var(--t5); }
.t6 { background-color: var(--t6); } .t7 { background-color: var(--t7); }

/* ---------- 상단바 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(35, 32, 28, .1);
}
.topbar-in {
  max-width: 1360px; margin: 0 auto; height: 62px;
  display: flex; align-items: center; gap: 20px; padding: 0 24px;
}
.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand-logo {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; letter-spacing: -.5px;
}
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: -.6px; color: var(--ink); }
.brand-u { color: var(--accent); font-family: var(--mono); font-size: .92em; }
.searchbar {
  flex: 1; max-width: 520px;
  display: flex; align-items: center; gap: 9px;
  background: var(--soft); border-radius: 11px; padding: 0 14px; height: 40px;
}
.searchbar input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-size: 14px; color: var(--ink); height: 38px;
}
.searchbar input::placeholder { color: var(--mut-2); }
.searchbar kbd {
  font-size: 11px; font-weight: 700; color: var(--mut-2); font-family: var(--mono);
}
.topbar-spacer { flex: 1; }
.search-btn {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--soft); color: var(--ink-4);
  display: inline-flex; align-items: center; justify-content: center;
  transition: .12s;
}
.search-btn:hover { background: var(--line); color: var(--ink); }
.topbar-right { display: flex; align-items: center; gap: 12px; flex: none; }
.me-chip { display: flex; align-items: center; gap: 9px; }
.me-chip .avatar { border-radius: 11px; }
.me-meta { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.me-level { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; color: var(--mut); font-family: var(--mono); }
.me-level em { font-style: normal; font-size: 10.5px; color: var(--accent); font-family: Pretendard, sans-serif; }
.me-level em.suf { color: var(--suf-ink); }
.me-meta strong { font-size: 13.5px; font-weight: 800; letter-spacing: -.3px; }
.topbar-link { font-size: 13px; font-weight: 700; color: var(--ink-5); cursor: pointer; }
.topbar-link:hover { color: var(--ink); }

/* ---------- 버튼 ---------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px; border-radius: 11px;
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 800; letter-spacing: -.3px; white-space: nowrap;
  transition: .12s;
}
.btn-primary:hover { filter: brightness(.93); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px; border-radius: 11px;
  background: var(--soft); color: var(--ink-5);
  font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: .12s;
}
.btn-ghost:hover { background: var(--line); }
.btn-dark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 18px; border-radius: 11px;
  background: var(--dark); color: #fff; font-size: 13px; font-weight: 700;
}
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.btn-full { width: 100%; }
.btn-danger { background: var(--warm-bg); color: var(--warm-ink); }
.btn-danger:hover { filter: brightness(.96); }
.btn-mini {
  display: inline-flex; align-items: center;
  height: 29px; padding: 0 11px; border-radius: 9px;
  background: var(--line); color: var(--ink-2);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.btn-mini:hover { background: #dcdce0; }
.btn-mini.danger { background: var(--warm-bg); color: var(--warm-ink); }
.btn-mini.dark { background: var(--dark); color: #fff; }

/* ---------- 레이아웃 ---------- */
.shell {
  max-width: 1360px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 26px; padding: 24px;
}
.side {
  width: 212px; flex: 1 1 212px; max-width: 100%;
  display: flex; flex-direction: column; gap: 14px;
}
.main { flex: 999 1 460px; min-width: 0; animation: rise .3s ease both; }
.footer {
  max-width: 1360px; margin: 0 auto; padding: 26px 24px 40px;
  display: flex; flex-direction: column; gap: 14px;
  color: var(--mut-2); font-size: 12.5px; font-weight: 600;
}
.footer-brand { display: flex; flex-direction: column; gap: 3px; }
.footer-brand strong { font-size: 14px; font-weight: 800; color: var(--ink-4); letter-spacing: -.3px; }
.footer-link { font-weight: 700; color: var(--ink-5); width: fit-content; }
.footer-link:hover { color: var(--ink); }
.site-notice {
  background: var(--dark); color: #fff; text-align: center;
  padding: 9px 16px; font-size: 13px; font-weight: 600;
}

/* ---------- 사이드 내비 ---------- */
.nav-card { display: flex; flex-direction: column; gap: 5px; }
.nav-label {
  font-size: 11px; font-weight: 800; color: var(--mut-2);
  letter-spacing: .4px; padding: 6px 12px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 12px; border-radius: 11px;
  color: var(--ink-5); font-size: 14px; font-weight: 600;
  letter-spacing: -.3px; white-space: nowrap; flex: none;
}
.nav-item:hover { background: var(--soft-2); }
.nav-item.active { background: var(--line); color: var(--ink); font-weight: 700; }
.nav-dot { width: 7px; height: 7px; border-radius: 2px; background: #dcdce0; flex: none; }
.nav-item.active .nav-dot { background: var(--accent); }

.widget { border-radius: var(--radius); padding: 16px; }
.widget-rank { background: #fff; box-shadow: 0 0 0 1.5px var(--accent); }
.widget-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 11px;
}
.dot-red { width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.rank-list { display: flex; flex-direction: column; gap: 9px; }
.rank-row { display: flex; align-items: center; gap: 9px; }
.rank-no { width: 16px; font-size: 12px; font-weight: 800; color: var(--mut-2); font-family: var(--mono); }
.rank-row:nth-child(-n+3) .rank-no { color: var(--accent); }
.rank-thumb {
  width: 26px; height: 26px; border-radius: 8px; flex: none; object-fit: cover;
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0 4px, transparent 4px 8px);
}
.rank-name {
  flex: 1; font-size: 12.5px; font-weight: 600; letter-spacing: -.3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-row:hover .rank-name { color: var(--accent); }
.rank-diff { font-size: 11px; font-weight: 700; color: var(--mut); font-family: var(--mono); }
.widget-rules { background: var(--soft-2); padding: 15px 16px; }
.widget-title-sm { font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.widget-rules p { margin: 0; font-size: 11.5px; line-height: 1.65; color: var(--ink-5); }

/* ---------- 공용 ---------- */
.card-box { background: #fff; box-shadow: var(--shadow-card); border-radius: 16px; padding: 22px 24px; }
.chip {
  display: inline-flex; align-items: center; flex: none;
  height: 21px; padding: 0 8px; border-radius: 7px;
  background: var(--warm-bg); color: var(--warm-ink);
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
.chip-gray { background: var(--line); color: var(--ink-5); font-weight: 700; }
.chip-dark { background: var(--dark); color: #fff; }
.chip-green { background: #dde8d8; color: #4a6b42; }
.chip-md { height: 23px; padding: 0 9px; font-size: 11.5px; }
.chip-lg { height: 25px; padding: 0 10px; font-size: 11.5px; border-radius: 8px; }
.chip-big {
  display: inline-flex; align-items: center; flex: none;
  height: 40px; padding: 0 16px; border-radius: 11px;
  background: var(--line); color: var(--ink-4);
  font-size: 12.5px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap;
  transition: .12s;
}
.chip-big:hover { background: #dcdce0; }
.chip-big.on { background: var(--dark); color: #fff; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.tab-row { margin-bottom: 20px; }
.empty-note { color: var(--mut); font-size: 13.5px; padding: 26px 14px; text-align: center; }
.empty-note a { color: var(--accent); font-weight: 700; }
.link-more { font-size: 12px; font-weight: 700; color: var(--mut); }
.link-more:hover { color: var(--ink); }
.sec-title { font-size: 16px; font-weight: 800; letter-spacing: -.5px; margin: 26px 0 12px; }
.paging { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 20px 0 12px; }
.paging .pg {
  min-width: 33px; height: 33px; padding: 0 10px; border-radius: 10px;
  background: #fff; color: var(--ink-5); font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); box-shadow: var(--shadow-ring);
}
.paging .pg.on { background: var(--dark); color: #fff; box-shadow: none; }
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--dark); color: #fff; font-size: 13.5px; font-weight: 700;
  border-radius: 12px; padding: 13px 22px; z-index: 100;
  animation: rise .25s ease; box-shadow: 0 8px 24px rgba(31,31,34,.25);
}
.toast-error { background: var(--accent); }

/* ---------- 게시판 헤더 ---------- */
.board-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.board-head h1 { margin: 0 0 5px; font-size: 26px; font-weight: 800; letter-spacing: -1px; }
.board-head p { margin: 0; font-size: 13.5px; color: var(--ink-5); }

/* ---------- 홈 ---------- */
.home-stack { display: flex; flex-direction: column; gap: 30px; }
.hero { border-radius: 20px; overflow: hidden; background: var(--dark); position: relative; }
.hero-slide {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  min-height: 308px;
}
.hero-slide.on { display: grid; animation: rise .3s ease both; }
/* 이미지 없는 배너: 우측 비주얼 없이 풀와이드 + 포인트 글로우 */
.hero-slide.no-img {
  grid-template-columns: 1fr;
  min-height: 240px;
  position: relative;
  background:
    radial-gradient(560px 300px at 88% -10%, rgba(217, 80, 59, .28), transparent 70%),
    radial-gradient(400px 260px at 70% 120%, rgba(217, 80, 59, .10), transparent 70%);
}
.hero-slide.no-img .hero-left { padding: 44px 48px; }
.hero-deco {
  position: absolute; right: 34px; bottom: -18px;
  font-size: 110px; font-weight: 600; letter-spacing: -.04em;
  color: rgba(255, 255, 255, .05); pointer-events: none; user-select: none;
  line-height: 1;
}
.hero-dots .d { border: 0; padding: 0; cursor: pointer; }
.hero-left {
  padding: 36px 38px; min-width: 0; color: #fff;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.hero-meta { display: flex; align-items: center; gap: 8px; }
.hero-badge {
  height: 25px; padding: 0 10px; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 800;
  display: inline-flex; align-items: center; letter-spacing: -.2px;
}
.hero-date { font-size: 11.5px; font-weight: 700; color: #94949c; font-family: var(--mono); }
.hero h1 { margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -1.8px; line-height: 1.22; }
.hero p { margin: 0; font-size: 14.5px; line-height: 1.7; color: #b0b0b8; max-width: 460px; }
.hero p strong { color: #fff; font-weight: 800; }
.hero-actions { display: flex; align-items: center; gap: 9px; padding-top: 6px; }
.btn-hero-light {
  height: 46px; padding: 0 22px; border-radius: 13px;
  background: #fff; color: var(--ink); font-size: 14.5px; font-weight: 800;
  display: inline-flex; align-items: center; letter-spacing: -.3px; white-space: nowrap;
}
.btn-hero-ghost {
  height: 46px; padding: 0 20px; border-radius: 13px;
  background: rgba(255,255,255,.1); color: #fff; font-size: 14.5px; font-weight: 700;
  display: inline-flex; align-items: center; letter-spacing: -.3px; white-space: nowrap;
}
.hero-dots { display: flex; align-items: center; gap: 7px; padding-top: 8px; }
.hero-dots .d { width: 7px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); }
.hero-dots .d.on { width: 22px; background: var(--accent); }
.hero-dots .n { font-size: 11px; font-weight: 700; color: #75757c; font-family: var(--mono); padding-left: 5px; }
.hero-right {
  position: relative; min-height: 200px;
  background-color: #cfc6b9;
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.055) 0 9px, transparent 9px 18px);
  display: flex; align-items: flex-end; padding: 16px;
}
.hero-right img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-fade {
  position: absolute; left: 0; top: 0; bottom: 0; width: 120px;
  background: linear-gradient(to right, #1f1f22, rgba(35,32,28,0));
}
.hero-cap { position: relative; font-size: 11px; font-weight: 700; color: rgba(35,32,28,.45); font-family: var(--mono); }

.home-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.home-sec-head h2 { margin: 0 0 5px; font-size: 26px; font-weight: 800; letter-spacing: -1px; }
.home-sec-head .sub { font-size: 13.5px; color: var(--ink-5); }
.sec-head-sm { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sec-head-sm h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.5px; }
.sec-head-sm h2 .mono { color: var(--accent); }

/* 카드 그리드 (플랫) */
.card-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--cardw), 1fr));
}
.char-card { display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.char-thumb {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden;
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 7px, transparent 7px 14px);
  background-color: var(--t0);
}
.char-card:nth-of-type(8n+2) .char-thumb { background-color: var(--t1); }
.char-card:nth-of-type(8n+3) .char-thumb { background-color: var(--t3); }
.char-card:nth-of-type(8n+4) .char-thumb { background-color: var(--t2); }
.char-card:nth-of-type(8n+5) .char-thumb { background-color: var(--t4); }
.char-card:nth-of-type(8n+6) .char-thumb { background-color: var(--t5); }
.char-card:nth-of-type(8n+7) .char-thumb { background-color: var(--t6); }
.char-card:nth-of-type(8n) .char-thumb { background-color: var(--t7); }
.char-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plat-badge {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  height: 23px; padding: 0 9px; border-radius: 7px;
  background: rgba(255,255,255,.92); color: var(--ink-2);
  font-size: 11px; font-weight: 800; letter-spacing: -.2px;
  display: inline-flex; align-items: center;
}
.thumb-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 12px 10px;
  background: linear-gradient(to top, rgba(28,25,22,.72), transparent);
  font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.82); font-family: var(--mono);
}
.char-body { display: flex; flex-direction: column; gap: 5px; }
.char-body strong { font-size: 15px; font-weight: 800; letter-spacing: -.4px; }
.char-card:hover .char-body strong { color: var(--accent); }
.char-body p {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-5);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.char-meta { display: flex; align-items: center; gap: 8px; padding-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--mut); }
.char-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: #d2d2d6; }
.char-meta .mono { font-weight: 700; }

/* 홈 2단 */
.home-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 26px; align-items: start;
}
.hot-list { display: flex; flex-direction: column; }
.hot-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.hot-thumb {
  width: 44px; height: 44px; border-radius: 10px; flex: none; object-fit: cover;
  background-color: var(--t0);
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0 5px, transparent 5px 10px);
}
.hot-row:nth-child(5n+2) .hot-thumb { background-color: var(--t1); }
.hot-row:nth-child(5n+3) .hot-thumb { background-color: var(--t3); }
.hot-row:nth-child(5n+4) .hot-thumb { background-color: var(--t5); }
.hot-row:nth-child(5n) .hot-thumb { background-color: var(--t2); }
.hot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hot-title { display: flex; align-items: center; gap: 7px; }
.hot-title .cat { font-size: 11px; font-weight: 800; color: var(--accent); flex: none; }
.hot-title .t {
  font-size: 14px; font-weight: 600; letter-spacing: -.35px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hot-row:hover .hot-title .t { color: var(--accent); }
.cmt-count { font-size: 11.5px; font-weight: 800; color: var(--accent); font-family: var(--mono); flex: none; }
.hot-meta { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--mut); font-weight: 600; }
.hot-meta .author { font-weight: 700; }

.home-col-side { display: flex; flex-direction: column; gap: 20px; }
.hall-card { background: var(--dark); border-radius: 16px; padding: 20px 22px; color: #fff; }
.hall-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #b0b0b8;
  margin-bottom: 12px; font-family: var(--mono);
}
.hall-card h2 { margin: 0 0 10px; font-size: 17px; font-weight: 800; letter-spacing: -.5px; line-height: 1.4; }
.hall-rows { display: flex; flex-direction: column; gap: 11px; }
.hall-row { display: flex; flex-direction: column; gap: 3px; }
.hall-row strong { font-size: 13.5px; font-weight: 700; letter-spacing: -.3px; color: #fff; }
.hall-row:hover strong { color: #ffb4a6; }
.hall-row span { font-size: 11.5px; color: #94949c; font-weight: 600; }
.hall-empty { color: #94949c; font-size: 13px; line-height: 1.6; }
.hall-more { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 700; color: #94949c; }
.hall-more:hover { color: #fff; }

.art-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.art-cell {
  position: relative; aspect-ratio: 1; border-radius: 11px; overflow: hidden;
  background-color: var(--t6);
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 6px, transparent 6px 12px);
  display: flex; align-items: flex-end; padding: 9px;
}
.art-cell:nth-child(4n+2) { background-color: var(--t0); }
.art-cell:nth-child(4n+3) { background-color: var(--t1); }
.art-cell:nth-child(4n) { background-color: var(--t4); }
.art-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-tag {
  position: relative; font-size: 10px; font-weight: 700;
  color: rgba(35,32,28,.5); font-family: var(--mono);
}
.art-cell img + .art-tag, .art-cell img ~ .art-tag { color: rgba(255,255,255,.85); text-shadow: 0 1px 4px rgba(0,0,0,.4); }

.notice-list { display: flex; flex-direction: column; }
.notice-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.notice-row:last-child { border-bottom: 0; }
.notice-title { flex: 1; font-weight: 600; letter-spacing: -.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-row:hover .notice-title { color: var(--accent); }
.notice-date { color: var(--mut-2); font-size: 11.5px; font-weight: 600; font-family: var(--mono); }

/* ---------- 리스트 게시판 ---------- */
.post-list { display: flex; flex-direction: column; }
.post-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 12px; margin: 0 -12px; border-radius: 12px;
}
.post-row:hover { background: #fafafb; }
.post-row.pinned { background: #fdf3f0; }
.vote-box { width: 52px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vote-num {
  min-width: 34px; padding: 2px 7px; border-radius: 8px;
  font-size: 13px; font-weight: 800; color: var(--mut); font-family: var(--mono); text-align: center;
}
.vote-num.hot { color: var(--accent); }
.vote-num.pin { background: var(--accent); color: #fff; }
.vote-label { font-size: 10px; font-weight: 700; color: var(--mut-3); }
.row-thumb {
  width: 40px; height: 40px; border-radius: 10px; flex: none; object-fit: cover;
  background-color: var(--t2);
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0 5px, transparent 5px 10px);
}
.post-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.post-row-title { display: flex; align-items: center; gap: 8px; }
.post-row-title strong {
  font-size: 15px; font-weight: 700; letter-spacing: -.4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-row.pinned .post-row-title strong { color: var(--warm-ink); }
.post-row:hover .post-row-title strong { color: var(--accent); }
.post-row-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--mut-2); font-weight: 600; }
.post-row-meta .author { color: var(--ink-5); font-weight: 700; }

/* ---------- 글 상세 ---------- */
.back-link { display: inline-block; font-size: 13px; font-weight: 700; color: var(--mut); margin-bottom: 18px; }
.back-link:hover { color: var(--ink); }
.post-wrap { display: flex; flex-direction: column; gap: 20px; position: relative; padding: 4px 0 0; }
.chip-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-title {
  margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -1.1px; line-height: 1.3;
  padding-right: 150px;
}
.post-summary { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-3); padding-right: 150px; }
.post-head-rel { position: relative; display: flex; flex-direction: column; gap: 12px; }
.post-deco {
  /* 전신 아바타가 작성자 라인 위에 서 있는 연출 (디자인 원본) */
  position: absolute; right: 2px; bottom: -1px; pointer-events: none; z-index: 2;
}
.post-deco .avatar-tall { display: block; }
.post-byline {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.post-byline .avatar { border-radius: 11px; }
.byline-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.byline-top { display: flex; align-items: center; gap: 6px; }
.byline-title { font-size: 11.5px; font-weight: 800; color: var(--pre-ink); }
.byline-nick { font-size: 13.5px; font-weight: 800; letter-spacing: -.3px; }
.byline-nick:hover { text-decoration: underline; }
.byline-sub { font-size: 11.5px; color: var(--mut-2); font-weight: 600; font-family: var(--mono); }

.post-content { display: flex; flex-direction: column; gap: 18px; }
.post-content p { margin: 0; font-size: 15.5px; line-height: 1.85; color: var(--ink-2); }
.content-h { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.6px; padding-top: 8px; }
.post-content a { color: #1f5fbf; }
.post-content a:hover { text-decoration: underline; }

.prompt-block { border-radius: 14px; background: var(--dark); overflow: hidden; }
.prompt-block-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px 11px 16px; background: rgba(255,255,255,.05);
}
.prompt-block-head span { font-size: 13.5px; font-weight: 800; color: #d8d2c8; font-family: var(--mono); }
.copy-btn {
  height: 29px; padding: 0 12px; border-radius: 8px;
  background: #fff; color: var(--ink); font-size: 12px; font-weight: 800;
}
.copy-btn.done { background: #7fa86b; color: #fff; }
.prompt-block pre {
  margin: 0; padding: 16px 18px; overflow-x: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.75; color: #e8e2d9;
  white-space: pre-wrap;
}
.post-images { display: flex; flex-direction: column; gap: 12px; }
.post-images img { max-width: 100%; border-radius: 14px; display: block; }
.content-img { max-width: 100%; border-radius: 14px; display: block; }

.post-actions { display: flex; align-items: center; gap: 10px; padding-top: 6px; }
.act-like {
  height: 44px; padding: 0 20px; border-radius: 13px;
  background: var(--soft); color: var(--ink-5);
  font-size: 14px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 8px;
}
.act-like.on { background: var(--accent); color: #fff; }
.act-spacer { flex: 1; }
.act-btn {
  height: 44px; padding: 0 18px; border-radius: 13px;
  background: var(--soft); color: var(--ink-5);
  font-size: 13.5px; font-weight: 700;
  display: inline-flex; align-items: center;
}
.act-btn:hover { background: var(--line); }
.act-btn.on { background: var(--dark); color: #fff; }
.act-btn.sm { height: 34px; padding: 0 13px; border-radius: 10px; font-size: 12.5px; }
.inline-form { display: inline-flex; }

.post-nav { margin-top: 18px; display: flex; flex-direction: column; }
.post-nav-row {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 12px; margin: 0 -12px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
}
.post-nav-row:hover { background: #fafafb; color: var(--accent); }
.post-nav-row .mono { color: var(--mut-2); font-size: 11.5px; flex: none; }

/* 캐릭터 상세 (카드형 게시판) */
.chardetail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 30px; align-items: start;
}
.chardetail-left { display: flex; flex-direction: column; gap: 12px; }
.keyart {
  aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; position: relative;
  background-color: var(--t0);
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 8px, transparent 8px 16px);
  display: flex; align-items: flex-end; padding: 14px;
}
.keyart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.keyart .cap { position: relative; font-size: 11px; font-weight: 700; color: rgba(35,32,28,.45); font-family: var(--mono); }
.shots { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.shot {
  aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background-color: var(--t1);
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 5px, transparent 5px 10px);
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chardetail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chardetail-actions .act-btn, .chardetail-actions .act-like { height: 42px; border-radius: 12px; justify-content: center; }
.chardetail-right { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.chardetail-head { display: flex; flex-direction: column; gap: 12px; }
.chardetail-name { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.15; }
.chardetail-tag { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-3); font-weight: 500; }
.hashtags { display: flex; flex-wrap: wrap; gap: 6px; }
.hashtag {
  height: 29px; padding: 0 11px; border-radius: 9px;
  background: var(--line); color: var(--ink-4);
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center;
}
.creator-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 13px; background: #fff; box-shadow: var(--shadow-ring);
}
.creator-card .avatar { border-radius: 12px; }
.creator-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.creator-meta a { font-size: 13.5px; font-weight: 800; letter-spacing: -.3px; }
.creator-meta a:hover { text-decoration: underline; }
.creator-meta span { font-size: 11.5px; color: var(--mut); font-weight: 600; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.stat-tile {
  background: #fff; box-shadow: var(--shadow-card); border-radius: 13px;
  padding: 14px 15px; display: flex; flex-direction: column; gap: 4px;
}
.stat-tile b { font-size: 20px; font-weight: 800; letter-spacing: -.7px; font-family: var(--mono); }
.stat-tile span { font-size: 11.5px; font-weight: 700; color: var(--mut); }
.intro-card { display: flex; flex-direction: column; gap: 16px; }
.intro-card-head { display: flex; align-items: center; gap: 9px; }
.intro-card-head .avatar { border-radius: 10px; }
.intro-card-head strong { font-size: 15px; font-weight: 800; letter-spacing: -.4px; }
.intro-card-head span { font-size: 12px; font-weight: 700; color: var(--mut-2); }

/* ---------- 댓글 ---------- */
.comments { padding: 8px 0; }
.comments h2 { margin: 0 0 8px; font-size: 15px; font-weight: 800; letter-spacing: -.4px; }
.comments h2 .mono { color: var(--accent); }
.cmt { padding: 16px 0; border-bottom: 1px solid var(--line); display: flex; gap: 12px; }
.cmt .avatar { border-radius: 11px; flex: none; }
.cmt-reply { margin-left: 40px; }
.cmt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cmt-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmt-title-badge { font-size: 11px; font-weight: 800; color: var(--pre-ink); }
.cmt-nick { font-size: 13px; font-weight: 800; letter-spacing: -.3px; }
.cmt-time { font-size: 11.5px; color: var(--mut-2); font-weight: 600; }
.cmt-body { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-3); }
.cmt-deleted { color: var(--mut-2); font-style: italic; }
.cmt-actions { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; color: var(--mut-2); }
.cmt-act { background: none; padding: 0; color: var(--mut-2); font-size: 12px; font-weight: 700; }
.cmt-act:hover { color: var(--ink-4); }
.cmt-act.on { color: var(--accent); }
.cmt-form { display: flex; gap: 12px; padding: 18px 0 8px; }
.cmt-form .avatar { border-radius: 11px; flex: none; }
.cmt-form-main { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.cmt-form textarea {
  width: 100%; min-height: 74px; resize: vertical;
  border: 1px solid #e2e2e6; border-radius: 12px; background: #fff;
  padding: 13px 15px; font-size: 14px; line-height: 1.6; outline: none; color: var(--ink);
}
.cmt-form textarea:focus { border-color: var(--mut-2); }
.cmt-form-foot { display: flex; justify-content: flex-end; }
.replying-note {
  background: var(--warm-bg); border-radius: 9px; color: var(--warm-ink);
  font-size: 12px; font-weight: 700; padding: 7px 12px;
}
.replying-note button { background: none; padding: 0; color: var(--warm-ink); font-weight: 800; font-size: 12px; text-decoration: underline; }

/* ---------- 그림 프롬프트 카드 ---------- */
.artcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); }
.artcard {
  background: #fff; box-shadow: var(--shadow-card); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
}
.artcard-img {
  aspect-ratio: 3 / 4; position: relative; overflow: hidden; display: block;
  background-color: var(--t3);
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 7px, transparent 7px 14px);
}
.artcard:nth-of-type(4n+2) .artcard-img { background-color: var(--t0); }
.artcard:nth-of-type(4n+3) .artcard-img { background-color: var(--t5); }
.artcard:nth-of-type(4n) .artcard-img { background-color: var(--t6); }
.artcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artcard-model {
  position: absolute; left: 12px; bottom: 12px; height: 23px; padding: 0 9px;
  border-radius: 7px; background: rgba(255,255,255,.92);
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 800; color: var(--ink-2); font-family: var(--mono);
}
.artcard-body { padding: 15px 17px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.artcard-title { font-size: 15px; font-weight: 800; letter-spacing: -.4px; }
.artcard-title:hover { color: var(--accent); }
.artcard-desc {
  font-size: 12.5px; line-height: 1.6; color: var(--ink-5);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mini-prompts { display: flex; flex-direction: column; gap: 7px; }
.mini-prompt { border-radius: 11px; background: var(--dark); overflow: hidden; }
.mini-prompt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 9px 8px 12px; background: rgba(255,255,255,.05);
}
.mini-prompt-head span {
  font-size: 11.5px; font-weight: 800; color: #e8e2d9; letter-spacing: -.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mini-prompt-head .copy-btn { height: 24px; padding: 0 10px; border-radius: 7px; font-size: 11px; flex: none; }
.mini-prompt pre {
  margin: 0; padding: 10px 13px; font-family: var(--mono); font-size: 11px;
  line-height: 1.65; color: #c9c2b8; max-height: 75px; overflow-y: auto; white-space: pre-wrap;
}
.artcard-meta {
  display: flex; align-items: center; gap: 8px; padding-top: 2px;
  font-size: 11.5px; font-weight: 600; color: var(--mut);
}
.artcard-meta .author { color: var(--ink-5); font-weight: 700; }
.artcard-meta .count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--mut-2); font-family: var(--mono); }

/* ---------- 인증/게이트 ---------- */
.auth-wrap { display: flex; justify-content: center; padding: 30px 0 50px; }
.auth-card { width: 400px; padding: 34px 34px 26px; text-align: center; }
.auth-logo .brand-logo { width: 48px; height: 48px; border-radius: 14px; font-size: 21px; margin-bottom: 14px; }
.auth-card h1 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.7px; }
.auth-sub { color: var(--mut); font-size: 13.5px; margin: 0 0 22px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; text-align: left; margin-bottom: 14px; }
.auth-field > span { font-size: 12.5px; font-weight: 800; color: var(--ink-4); }
.auth-field > span em { font-style: normal; color: var(--mut-2); font-weight: 600; font-size: 11.5px; }
.auth-field input {
  border: 1px solid #e2e2e6; border-radius: 11px; padding: 12px 14px; outline: none; font-size: 14.5px;
}
.auth-field input:focus { border-color: var(--mut-2); }
.auth-alt { color: var(--mut); font-size: 13px; font-weight: 600; margin: 16px 0 0; }
.auth-alt a { color: var(--accent); font-weight: 800; }

.gate-wrap { max-width: 640px; margin: 30px auto; text-align: center; padding: 46px 40px; }
.gate-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--warm-bg); color: var(--warm-ink); font-weight: 800; font-size: 17px;
  border-radius: 16px; padding: 14px 18px; margin-bottom: 18px; font-family: var(--mono);
}
.gate-wrap h1 { margin: 0 0 10px; font-size: 23px; font-weight: 800; letter-spacing: -.7px; }
.gate-wrap p { color: var(--ink-5); margin: 0 0 22px; line-height: 1.7; }
.gate-actions { display: flex; gap: 10px; justify-content: center; }
.gate-check { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--ink-4); margin-bottom: 18px; text-align: left; }
.gate-check input { margin-top: 3px; }

/* ---------- 명예의 전당 ---------- */
.hall-hero { background: var(--dark); border-radius: 20px; color: #fff; padding: 36px 38px; margin-bottom: 28px; }
.hall-hero h1 { margin: 0 0 8px; font-size: 30px; font-weight: 800; letter-spacing: -1.2px; }
.hall-hero p { margin: 0; color: #94949c; font-size: 14px; }
.hall-list { display: flex; flex-direction: column; }
.card-box.hall-list { padding: 8px 20px; }
.hall-item {
  display: flex; gap: 14px; align-items: center;
  padding: 13px 12px; margin: 0 -12px; border-radius: 12px;
}
.hall-item:hover { background: #fafafb; }
.hall-rank { color: var(--accent); font-weight: 800; font-size: 14px; font-family: var(--mono); width: 26px; flex: none; }
.hall-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hall-body strong { font-size: 14.5px; font-weight: 700; letter-spacing: -.4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hall-item:hover .hall-body strong { color: var(--accent); }
.hall-body span { color: var(--mut); font-size: 11.5px; font-weight: 600; }

/* ---------- 프로필/마이페이지 ---------- */
.profile-head { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; }
.profile-head .avatar { border-radius: 18px; }
.profile-meta h1 { margin: 2px 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -.8px; }
.profile-meta p { margin: 0; color: var(--mut); font-size: 12.5px; font-weight: 600; }
.pt-plus { color: #4a6b42; }
.pt-minus { color: var(--warm-ink); }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.setting-card h3 { margin: 0 0 14px; font-size: 15px; font-weight: 800; letter-spacing: -.4px; }
.setting-wide { max-width: 560px; }
.avatar-preview { margin-bottom: 14px; }
.form-hint { margin-top: 8px; color: var(--mut); font-size: 12px; font-weight: 600; }
.form-hint code {
  font-family: var(--mono); background: var(--soft); border-radius: 5px; padding: 1px 6px; font-size: 11px;
}

/* ---------- 글쓰기 ---------- */
/* 글쓰기: 모든 화면에서 플랫 (페이지 제목과 같은 선) */
.write-form { padding: 0; box-shadow: none; border-radius: 0; background: transparent; }
.form-row { margin-bottom: 18px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row label { display: flex; flex-direction: column; gap: 7px; }
.form-row label > span { font-size: 12.5px; font-weight: 800; color: var(--ink-4); }
.form-row input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-row select, .form-row textarea {
  border: 1px solid #e2e2e6; border-radius: 11px; padding: 11px 13px; outline: none;
  background: #fff; font-size: 14.5px;
}
.form-row input[type="number"] { font-family: var(--mono); }
.form-row input[type="color"] { padding: 4px; height: 44px; width: 72px; cursor: pointer; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--mut-2); }

/* 파일 선택 버튼 공통 스타일 */
input[type="file"]::file-selector-button {
  border: 0; border-radius: 9px; background: var(--line); color: var(--ink-4);
  font-size: 12.5px; font-weight: 700; padding: 7px 13px; margin-right: 10px;
  cursor: pointer; font-family: inherit;
}
input[type="file"]::file-selector-button:hover { background: #dcdce0; }
input[type="file"] { font-size: 12.5px; color: var(--mut); }
.form-row textarea { resize: vertical; line-height: 1.65; }
.form-foot { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; }
.edit-images { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.edit-img { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ink-4); }
.edit-img img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; }

/* ---------- 관리자 ---------- */
.admin-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; gap: 16px; }
.admin-h1 { margin: 10px 0 5px; font-size: 26px; font-weight: 800; letter-spacing: -1px; }
.admin-top p { margin: 0; color: var(--ink-5); font-size: 13.5px; }
.admin-top-actions { display: flex; gap: 9px; flex: none; }
.admin-shell { display: flex; gap: 22px; align-items: flex-start; }
.admin-nav {
  width: 200px; flex: none; padding: 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.admin-nav-item {
  display: flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 14px; border-radius: 11px;
  font-size: 14px; font-weight: 700; color: var(--ink-4); white-space: nowrap;
}
.admin-nav-item:hover { background: var(--soft-2); }
.admin-nav-item.active { background: var(--dark); color: #fff; }
.admin-main { flex: 1; min-width: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; border-radius: 13px; }
.stat-card.warn { box-shadow: 0 0 0 1.5px var(--accent); }
.stat-label { color: var(--mut); font-size: 12px; font-weight: 700; }
.stat-val { font-size: 22px; font-weight: 800; letter-spacing: -.7px; }
.stat-card.warn .stat-val { color: var(--accent); }
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.admin-sec h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; letter-spacing: -.4px; }
.admin-row {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--soft); font-size: 13.5px;
}
.admin-row:last-child { border-bottom: 0; }
.admin-row-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 7px; font-weight: 600; }
.admin-row-sub { color: var(--mut-2); font-size: 11.5px; flex: none; font-family: var(--mono); }
.admin-dim { color: var(--mut-2); font-size: 12px; }
.admin-search { display: flex; gap: 9px; margin-bottom: 14px; }
.admin-search input {
  flex: 1; max-width: 340px; border: 1px solid #e2e2e6; border-radius: 11px; padding: 10px 14px; outline: none; font-size: 14px;
}
.admin-table-wrap { padding: 10px 20px; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th {
  text-align: left; color: var(--mut); font-size: 11.5px; font-weight: 700;
  padding: 10px 8px; border-bottom: 1px solid var(--line);
}
.admin-table td { padding: 11px 8px; border-bottom: 1px solid var(--soft); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table select { border: 1px solid #e2e2e6; border-radius: 8px; padding: 5px 8px; font-size: 12.5px; }
.admin-actions-cell { white-space: nowrap; }
.admin-actions-cell form { margin-right: 4px; }
.pt-input { width: 64px; border: 1px solid #e2e2e6; border-radius: 8px; padding: 4px 7px; font-size: 12px; font-family: var(--mono); }
.row-dim { opacity: .5; }
.admin-note {
  background: var(--soft-2); border-radius: 12px; padding: 14px 18px;
  font-size: 13px; font-weight: 600; color: var(--ink-4); margin-bottom: 14px; line-height: 1.6;
}
.admin-note a { color: var(--accent); font-weight: 700; }
.approve-row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--soft); flex-wrap: wrap; }
.approve-row:last-child { border-bottom: 0; }
.admin-sub-h { margin: 8px 0 6px; font-size: 15px; font-weight: 800; letter-spacing: -.4px; }
.grant-input {
  width: 110px; border: 1px solid #e2e2e6; border-radius: 9px;
  padding: 6px 10px; font-size: 12.5px; outline: none;
}
.grant-input:focus { border-color: var(--mut-2); }
.admin-table input[type="file"] { max-width: 170px; font-size: 11px; }
.admin-table input[type="file"]::file-selector-button { padding: 5px 10px; font-size: 11.5px; }
.approve-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.approve-actions { display: flex; gap: 7px; align-items: center; }

/* ---------- 아바타 꾸미기 (상점) ---------- */
.points-pill {
  height: 44px; padding: 0 18px; border-radius: 12px; background: var(--dark);
  display: inline-flex; align-items: center; gap: 10px; flex: none;
}
.points-pill span { font-size: 11.5px; font-weight: 800; color: #94949c; }
.points-pill strong { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -.5px; }
.howto-card {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 14px 20px; border-radius: 14px; margin-bottom: 20px;
}
.howto-label { font-size: 12px; font-weight: 800; color: var(--mut); }
.howto-item { font-size: 12.5px; font-weight: 600; color: var(--ink-5); display: inline-flex; gap: 8px; align-items: center; }
.howto-item em { font-style: normal; font-weight: 800; color: var(--accent); }
.dress-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 26px; align-items: start;
}
.dress-left { display: flex; flex-direction: column; gap: 12px; }
.dress-preview {
  aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.dress-preview .avatar-tall { width: 76%; height: auto; }
.dress-small { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 14px; flex-wrap: wrap; }
.dress-small-label { font-size: 11.5px; font-weight: 800; color: var(--mut-2); flex: none; }
.dress-small-item { display: inline-flex; align-items: center; gap: 9px; }
.dress-small-item em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--mut-2); }
.dress-note { background: var(--soft-2); border-radius: 14px; padding: 14px 16px; font-size: 11.5px; line-height: 1.7; color: var(--ink-5); }
.dress-right { display: flex; flex-direction: column; gap: 16px; }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.item-card {
  background: #fff; box-shadow: var(--shadow-card); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
}
.item-swatch { aspect-ratio: 4 / 3; display: block; position: relative; overflow: hidden; }
.item-swatch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.item-swatch:hover { filter: brightness(.96); }
.item-card.previewing { box-shadow: 0 0 0 2px var(--accent); }
.preview-note {
  display: flex; align-items: center; gap: 10px;
  background: var(--warm-bg); border-radius: 13px; padding: 12px 14px;
  font-size: 12.5px; font-weight: 700; color: var(--warm-ink);
}
.preview-note span { flex: 1; }
.dress-btns { display: flex; gap: 8px; }
.item-body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.item-body strong { font-size: 13.5px; font-weight: 800; letter-spacing: -.35px; }
.item-body form { display: contents; }
.item-btn {
  height: 38px; width: 100%; border-radius: 11px; margin-top: auto;
  background: var(--line); color: var(--ink-4);
  font-size: 12.5px; font-weight: 800;
}
.item-btn:hover { background: #dcdce0; }
.item-btn.on { background: var(--dark); color: #fff; cursor: default; }
.item-btn.buy { background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--ink); }
.item-btn.buy:hover { box-shadow: 0 0 0 1.5px var(--accent); color: var(--accent); }

/* ---------- 설정 ---------- */
.settings-shell {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px; align-items: start;
}
.settings-nav { display: flex; flex-direction: column; gap: 6px; }
.settings-nav-item {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 15px;
  border-radius: 12px; background: #fff; box-shadow: var(--shadow-card);
  font-size: 13.5px; font-weight: 700; color: var(--ink-4); letter-spacing: -.3px;
}
.settings-nav-item:hover { background: var(--soft-2); }
.settings-nav-item.active { background: var(--dark); color: #fff; }
.settings-nav-item.active .nav-dot { background: var(--accent); }
.settings-main { min-width: 0; }
.settings-card { border-radius: 18px; padding: 24px 26px; }
.settings-card h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; letter-spacing: -.6px; }
.settings-sub { margin: 0 0 18px; font-size: 12.5px; color: var(--mut); font-weight: 600; }
.settings-card-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.settings-card-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--mut); font-weight: 600; }
.settings-count { font-size: 12px; font-weight: 800; color: var(--mut-2); flex: none; }
.title-preview {
  background: var(--dark); border-radius: 14px; padding: 20px 22px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; line-height: 1; margin-bottom: 20px;
}
.pv-label { font-size: 11px; font-weight: 800; color: #75757c; flex: none; }
.pv-lv {
  height: 26px; padding: 0 10px; border-radius: 8px; background: rgba(255,255,255,.14);
  color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center;
}
.title-preview .pv-pre { color: var(--accent); }
.title-preview .pv-suf { color: #b0b0b8; }
.pv-pre { font-size: 15px; font-weight: 800; letter-spacing: -.4px; color: var(--accent); }
.pv-suf { font-size: 15px; font-weight: 800; letter-spacing: -.4px; color: var(--suf-ink); }
.pv-nick { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.9px; }
.title-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 22px; }
.title-col { display: flex; flex-direction: column; gap: 7px; }
.title-col-label { font-size: 12px; font-weight: 800; color: var(--mut); margin-bottom: 3px; }
.title-row-btn {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 11px 14px; border-radius: 12px; background: var(--soft); text-align: left; position: relative;
}
.title-row-btn:hover { background: var(--soft-2); }
.title-row.on .title-row-btn { background: var(--dark); }
.title-row.on .title-row-btn strong { color: #fff; }
.title-row.on .title-row-btn span { color: #94949c; }
.title-row.locked .title-row-btn { opacity: .55; cursor: not-allowed; }
.title-row-btn strong { font-size: 13.5px; font-weight: 800; letter-spacing: -.3px; }
.title-row-btn span { font-size: 11px; font-weight: 600; color: var(--mut-2); }
.title-row-btn em {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 10.5px; font-weight: 800; color: #b4b4bb;
}
.cover-previews { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.cover-prev { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 200px; }
.cover-prev em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--mut-2); }
.cover-prev-box { border-radius: 10px; overflow: hidden; background: var(--soft); }
.cover-prev-box.pc { aspect-ratio: 4 / 1; }
.cover-prev-box.mo { aspect-ratio: 3 / 1; max-width: 240px; }
.cover-prev-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-slider { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; max-width: 420px; }
.cover-slider > span { font-size: 12px; font-weight: 800; color: var(--ink-4); }
.cover-slider > span em { font-style: normal; font-weight: 600; color: var(--mut-2); font-size: 11px; }
.cover-slider input[type="range"] { accent-color: var(--accent); }
.leave-note { background: #f8f1ef; border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; }
.leave-note p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.7; color: var(--ink-3); }
.leave-note p:last-child { margin-bottom: 0; }

/* ---------- 프로필 카드 ---------- */
.profile-card { padding: 0; overflow: hidden; border-radius: 18px; margin-bottom: 20px; }
.profile-cover {
  position: relative; z-index: 0; /* 아바타가 커버 위(앞)에 뜸 */
  width: 100%; aspect-ratio: 4 / 1; /* PC 4:1, 모바일 3:1은 미디어쿼리 */
  background: #e0e0e3;
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 9px, transparent 9px 18px);
  display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px;
}
.profile-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-cover-actions { position: relative; z-index: 2; margin-left: auto; }
.profile-cover-cap { position: relative; z-index: 2; }
.profile-cover-cap { font-size: 11px; font-weight: 700; color: rgba(35,32,28,.42); }
.profile-cover-actions { display: flex; gap: 8px; }
.cover-btn {
  height: 32px; padding: 0 13px; border-radius: 10px; background: rgba(255,255,255,.9);
  color: var(--ink-2); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center;
}
.profile-body { padding: 0 26px 22px; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.profile-avatar {
  /* 커버 하단에 겹치면서 커버보다 '앞'에 뜸 */
  display: inline-block; margin-top: -52px; border-radius: 28px;
  overflow: hidden; line-height: 0; flex: none;
  position: relative; z-index: 2;
  box-shadow: 0 0 0 5px #fff;
}
.profile-avatar .avatar { border-radius: 28px; display: block; }
.profile-body-main { flex: 1; min-width: 240px; padding-top: 16px; }
.profile-row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.profile-id { flex: 1; min-width: 200px; }
.profile-titles { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; line-height: 1; }
.lv-chip {
  height: 26px; padding: 0 10px; border-radius: 8px; background: var(--dark); color: #fff;
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center;
}
.profile-nick { font-size: 24px; font-weight: 800; letter-spacing: -.9px; }
.profile-bio { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-5); line-height: 1.6; }
.profile-sub { margin: 8px 0 0; font-size: 11.5px; color: var(--mut-2); font-weight: 600; }
.profile-stats { display: flex; gap: 22px; flex: none; padding-top: 6px; }
.profile-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.profile-stat b { font-size: 21px; font-weight: 800; letter-spacing: -.7px; }
.profile-stat span { font-size: 11.5px; font-weight: 700; color: var(--mut); }
.level-progress { margin-top: 18px; }
.level-progress-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px;
  font-size: 12px; font-weight: 800; color: var(--mut);
}
.level-bar { height: 9px; border-radius: 5px; background: var(--soft); overflow: hidden; }
.level-bar-fill { height: 100%; background: var(--accent); }

/* ---------- 글쓰기 보강 ---------- */
.write-label { display: block; font-size: 12px; font-weight: 800; color: var(--mut); margin-bottom: 9px; }
.write-title {
  width: 100%; height: 54px; border: 1px solid #e2e2e6; border-radius: 12px;
  padding: 0 16px; font-size: 19px; font-weight: 700; letter-spacing: -.5px; outline: none;
}
.write-title:focus { border-color: var(--ink); }
.prompt-row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.prompt-row input, .prompt-row textarea {
  border: 1px solid #e2e2e6; border-radius: 11px; padding: 11px 13px; outline: none; font-size: 14px;
}
.prompt-row textarea { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; resize: vertical; }
.prompt-row input:focus, .prompt-row textarea:focus { border-color: var(--mut-2); }

/* 댓글 칭호 */
.cmt-title-suf { font-size: 11px; font-weight: 800; color: var(--suf-ink); }
.byline-suf { font-size: 11.5px; font-weight: 800; color: var(--suf-ink); }

/* ---------- 스포일러 접기 ---------- */
.spoiler {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fafafb;
}
.spoiler summary {
  cursor: pointer; padding: 12px 16px; font-size: 13.5px; font-weight: 800; color: var(--ink-4);
  list-style: none; display: flex; align-items: center; gap: 9px;
}
.spoiler summary::-webkit-details-marker { display: none; }
.spoiler summary::before {
  content: '스포'; flex: none;
  height: 21px; padding: 0 8px; border-radius: 7px;
  background: var(--warm-bg); color: var(--warm-ink); font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center;
}
.spoiler summary::after { content: '▾'; margin-left: auto; color: var(--mut-2); font-size: 12px; }
.spoiler[open] summary { border-bottom: 1px solid var(--line); }
.spoiler[open] summary::after { content: '▴'; }
.spoiler-body { padding: 14px 16px; }
.spoiler-body p:last-child { margin-bottom: 0; }

/* ---------- 연동 (후기/파생 그림) ---------- */
.ref-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--soft); border-radius: 12px; padding: 11px 14px;
}
.ref-banner strong {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -.3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ref-banner:hover strong { color: var(--accent); }
.ref-banner .mono { color: var(--mut-2); flex: none; }
.review-list { display: flex; flex-direction: column; }
.review-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; margin: 0 -10px; border-radius: 12px;
}
.review-row:hover { background: #fafafb; }
.derived-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.derived-cell { display: flex; flex-direction: column; gap: 7px; }
.derived-img {
  aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; display: block;
  background: var(--soft);
}
.derived-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.derived-cell:hover .derived-img { opacity: .9; }
.derived-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.derived-meta strong { font-weight: 800; color: var(--ink-2); }
.derived-meta em { font-style: normal; font-weight: 700; color: var(--mut); }

/* QnA */
.vote-num.solved { color: #4a6b42; }
.cmt.accepted { background: #f4f7f2; border-radius: 14px; padding: 16px 14px; border-bottom: 0; margin-bottom: 4px; }
.cmt-act.accept { color: #4a6b42; font-weight: 800; }

/* 그림 카드 캐러셀 + 하단 바 */
.artcard-img, [data-carousel] { position: relative; }
.car-frame { display: none; position: relative; aspect-ratio: 3 / 4; }
.car-frame.on { display: block; }
.car-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-author {
  position: absolute; right: 12px; top: 12px; height: 23px; padding: 0 9px;
  border-radius: 7px; background: rgba(255,255,255,.85);
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--ink-4); letter-spacing: -.2px;
}
.car-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.88); color: var(--ink-2);
  font-size: 16px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center; z-index: 3;
}
.car-nav.prev { left: 10px; }
.car-nav.next { right: 10px; }
.car-nav:hover { background: #fff; }
.car-counter {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  height: 21px; padding: 0 8px; border-radius: 7px;
  background: rgba(31,31,34,.55); color: #fff; font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center;
}
.artcard-foot { display: flex; gap: 1px; background: var(--line); }
.artcard-foot-btn {
  flex: 1; height: 44px; background: #fff; color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; font-weight: 700;
}
.artcard-foot-btn:hover { background: #fafafb; }
.artcard-foot-btn.on { background: var(--soft-2); color: #8a5c48; }
.pic-ico {
  width: 14px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--mut);
}

/* ---------- SNS 링크 / 팔로우 ---------- */
.sns-links { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.sns-link {
  height: 30px; padding: 0 12px; border-radius: 9px; background: var(--soft);
  color: var(--ink-4); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 7px;
}
.sns-link:hover { background: var(--line); color: var(--ink); }
.sns-dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.sns-field { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sns-field-label {
  width: 96px; flex: none; font-size: 12.5px; font-weight: 800; color: var(--ink-4);
  display: inline-flex; align-items: center; gap: 7px;
}
.sns-field input {
  flex: 1; height: 42px; border: 1px solid #e2e2e6; border-radius: 11px;
  padding: 0 14px; font-size: 13.5px; outline: none;
}
.follow-btn {
  height: 40px; padding: 0 22px; border-radius: 11px;
  background: var(--dark); color: #fff; font-size: 14px; font-weight: 800;
  display: inline-flex; align-items: center;
}
.follow-btn.on { background: var(--line); color: var(--ink-4); }
.privacy-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.privacy-label { width: 110px; flex: none; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.privacy-opts { display: flex; gap: 2px; background: var(--soft); border-radius: 11px; padding: 3px; }
.privacy-opt {
  height: 32px; padding: 0 12px; border-radius: 9px;
  font-size: 12px; font-weight: 700; color: var(--ink-5);
  display: inline-flex; align-items: center; cursor: pointer;
}
.privacy-opt input { display: none; }
.privacy-opt.on { background: var(--dark); color: #fff; }

/* ---------- 캐릭터 대화 시작 ---------- */
.chat-start-btn {
  height: 48px; border-radius: 13px; background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: -.3px;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-start-btn:hover { filter: brightness(.93); }

/* ---------- 글쓰기 툴바 / 드롭존 ---------- */
.editor-toolbar {
  display: flex; gap: 7px; flex-wrap: wrap;
  padding: 9px 11px; background: #f7f7f9; border-radius: 12px; margin-bottom: 9px;
}
.tb-btn {
  height: 32px; padding: 0 12px; border-radius: 9px;
  background: #fff; box-shadow: var(--shadow-card); color: var(--ink-4);
  font-size: 12.5px; font-weight: 700;
}
.tb-btn:hover { background: var(--soft-2); }
#content-editor { width: 100%; }
.dropzone {
  border: 1px dashed #d8d8de; border-radius: 12px; background: #fff;
  padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer; text-align: center; transition: .12s;
}
.dropzone.over { border-color: var(--accent); background: var(--warm-soft, #f8f1ef); }
.dz-ico {
  width: 38px; height: 38px; border-radius: 12px; background: #e6e6e9;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; color: var(--mut);
}
.dropzone strong { font-size: 13.5px; font-weight: 700; color: var(--ink-4); }
.dropzone em { font-style: normal; font-size: 11.5px; color: var(--mut-2); }
.dz-count { font-size: 12.5px; font-weight: 800; color: var(--accent); }

/* ---------- 블록 에디터 ---------- */
.tb-sep { width: 1px; height: 20px; background: var(--line); margin: 6px 3px; }
.block-editor {
  border: 1px solid #e2e2e6; border-radius: 12px; background: #fff;
  padding: 10px 12px; min-height: 260px;
  display: flex; flex-direction: column; gap: 8px;
}
.blk { position: relative; border-radius: 10px; }
.blk:hover { background: #fafafb; }
.blk-ctl {
  position: absolute; right: 4px; top: 4px; display: none; gap: 3px; z-index: 3;
}
.blk:hover .blk-ctl { display: inline-flex; }
.blk-ctl button {
  width: 24px; height: 24px; border-radius: 7px;
  background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--mut);
  font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.blk-ctl button:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--mut-2); }
.blk-edit {
  min-height: 24px; padding: 6px 8px; outline: none;
  font-size: 15px; line-height: 1.75; color: var(--ink-2);
}
.blk-edit:empty::before { content: attr(data-ph); color: var(--mut-2); }
.blk-edit a { color: #1f5fbf; text-decoration: underline; }
.blk-h .blk-h-input, .blk-h input {
  width: 100%; border: 0; outline: none; padding: 8px;
  font-size: 18px; font-weight: 800; letter-spacing: -.6px; background: transparent;
}
.blk-quote { border-left: 3px solid var(--line); background: #fafafb; }
.blk-quote .blk-edit { color: var(--ink-3); }
/* 프롬프트 블록 편집칸 — 실제 렌더 결과와 동일한 룩 */
.blk-prompt-box { border-radius: 14px; background: var(--dark); overflow: hidden; }
.blk-prompt-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px 11px 16px; background: rgba(255,255,255,.05);
}
.blk-prompt-head input {
  flex: 1; border: 0; outline: none; background: transparent;
  color: #d8d2c8; font-size: 13.5px; font-weight: 800; font-family: var(--mono);
}
.blk-prompt-head input::placeholder { color: #85858c; }
.blk-prompt-head .copy-btn { opacity: .55; cursor: default; }
.blk-prompt-box textarea {
  width: 100%; border: 0; outline: none; background: transparent; resize: vertical;
  padding: 16px 18px; color: #e8e2d9; font-family: var(--mono); font-size: 13px; line-height: 1.75;
}
.blk-prompt-box textarea::placeholder { color: #75757c; }
.blk-spoiler-box { border: 1px solid var(--line); border-radius: 12px; background: #fafafb; overflow: hidden; }
.blk-spoiler-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--line); background: #fff;
}
.blk-spoiler-head input {
  flex: 1; border: 0; outline: none; background: transparent; font-size: 13.5px; font-weight: 700;
}
.blk-img { text-align: center; padding: 4px; }
.blk-img img { max-width: 100%; max-height: 420px; border-radius: 12px; display: inline-block; }

/* ---------- 에디터 확장 (정렬/서식/임시저장/이탈 경고) ---------- */
.blk[data-align="center"] .blk-edit, .blk[data-align="center"] input.blk-h-input { text-align: center; }
.blk[data-align="right"] .blk-edit, .blk[data-align="right"] input.blk-h-input { text-align: right; }
.blk-img { text-align: left; }
.blk-img[data-align="center"] { text-align: center; }
.blk-img[data-align="right"] { text-align: right; }
.tb-color-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; width: 40px; padding: 0;
}
.tb-A { font-weight: 800; font-size: 13px; line-height: 1; display: block; }
.tb-color-bar { display: block; width: 16px; height: 4px; border-radius: 2px; background: var(--accent); }
.tb-size-step {
  display: inline-flex; align-items: center; gap: 2px; height: 32px;
  background: #fff; box-shadow: var(--shadow-card); border-radius: 9px; padding: 0 4px;
}
.tb-size-step button {
  width: 26px; height: 26px; border-radius: 7px; background: transparent;
  color: var(--ink-4); font-size: 15px; font-weight: 700; line-height: 1;
}
.tb-size-step button:hover { background: var(--soft-2); }
.tb-size-step b { font-size: 11.5px; color: var(--ink-4); min-width: 34px; text-align: center; }
.tb-ico svg { display: block; }
.tb-add-wrap { position: relative; }
.tb-add { color: var(--accent); }
.tb-add-menu[hidden] { display: none; }
.tb-add-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
  background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(31,31,34,.16), 0 0 0 1px var(--line);
  padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 150px;
}
.tb-add-menu button {
  background: none; border-radius: 8px; padding: 9px 12px; text-align: left;
  font-size: 13px; font-weight: 700; color: var(--ink-3); white-space: nowrap;
}
.tb-add-menu button:hover { background: var(--soft-2); }
/* 칩 라벨이 .form-row label(세로 플렉스) 규칙을 상속받지 않도록 명시 */
.pick-row label.chip-big {
  cursor: pointer; height: 38px;
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 0;
}
.pick-row .chip-big input { display: none; }
.pick-row .chip-big:has(input:checked) { background: var(--dark); color: #fff; }
.filter-label { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; color: var(--mut); padding-right: 4px; }
.filter-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 16px; border-radius: 11px;
  background: #fff; box-shadow: 0 0 0 1px var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--ink-4);
}
.filter-toggle:hover { box-shadow: 0 0 0 1px var(--mut-2); }
.filter-toggle.on { box-shadow: 0 0 0 1.5px var(--accent); color: var(--accent); }
.filter-toggle em { font-style: normal; font-weight: 800; }
.filter-panel { padding: 18px 20px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 14px; }
.filter-panel[hidden] { display: none; }
.filter-sec { display: flex; flex-direction: column; gap: 8px; }
.filter-sec-label { font-size: 12px; font-weight: 800; color: var(--mut); }
.filter-search {
  border: 1px solid #e2e2e6; border-radius: 11px; padding: 10px 14px;
  font-size: 14px; outline: none; max-width: 420px;
}
.filter-search:focus { border-color: var(--mut-2); }
.filter-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.searchbar { cursor: pointer; min-width: 0; }
.searchbar-ph {
  flex: 1; min-width: 0; font-size: 14px; color: var(--mut-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-hero {
  display: flex; align-items: center; gap: 10px;
  background: #fff; box-shadow: var(--shadow-ring); border-radius: 14px;
  padding: 8px 8px 8px 16px; margin-bottom: 22px;
}
.search-hero input {
  flex: 1; border: 0; outline: none; font-size: 16px; height: 40px; background: transparent;
}
.drafts-wrap { position: relative; }
.drafts-wrap em { font-style: normal; color: var(--accent); }
.drafts-panel {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30;
  background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(31,31,34,.16), 0 0 0 1px var(--line);
  padding: 6px; min-width: 240px; max-height: 300px; overflow-y: auto;
}
.drafts-item {
  display: flex; align-items: center; gap: 6px; border-radius: 8px; padding: 4px 6px 4px 10px;
}
.drafts-item:hover { background: var(--soft-2); }
.drafts-item.on { background: var(--warm-soft, #f8f1ef); }
.drafts-item a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 4px 0; }
.drafts-item strong { font-size: 13px; font-weight: 700; letter-spacing: -.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drafts-item a:hover strong { color: var(--accent); }
.drafts-item em { font-style: normal; font-size: 10.5px; color: var(--mut-2); }
.drafts-item button { background: none; padding: 4px 6px; color: var(--mut-2); font-size: 11px; }
.drafts-item button:hover { color: var(--accent); }
.leave-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(31, 31, 34, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.leave-modal[hidden] { display: none; }
.leave-modal-box {
  background: #fff; border-radius: 18px; padding: 28px 30px; max-width: 400px;
  box-shadow: 0 20px 60px rgba(31,31,34,.25); text-align: center;
}
.leave-modal-box strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 8px; }
.leave-modal-box p { margin: 0 0 20px; font-size: 13.5px; line-height: 1.7; color: var(--ink-5); }
.leave-modal-btns { display: flex; gap: 8px; justify-content: center; }

/* ---------- 고객센터 ---------- */
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; align-items: start; }
.inq-item { border-bottom: 1px solid var(--soft); }
.inq-item:last-child { border-bottom: 0; }
.inq-item summary {
  display: flex; align-items: center; gap: 8px; padding: 13px 0; cursor: pointer; list-style: none;
}
.inq-item summary::-webkit-details-marker { display: none; }
.inq-item summary strong {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 700; letter-spacing: -.3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inq-item summary em { font-style: normal; font-size: 11px; color: var(--mut-2); flex: none; }
.inq-body { padding: 4px 0 16px; }
.inq-body > p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.7; color: var(--ink-3); }
.inq-answer { background: var(--soft-2); border-radius: 12px; padding: 13px 15px; }
.inq-answer strong { display: block; font-size: 12px; font-weight: 800; color: var(--ink-4); margin-bottom: 5px; }
.inq-answer p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-3); }

/* 목록 칭호 */
.row-title-pre { font-size: 11px; font-weight: 800; color: var(--pre-ink); }
.row-title-suf { font-size: 11px; font-weight: 800; color: var(--suf-ink); }

/* 푸터 링크 */
.footer-links { margin-left: auto; }
.footer-links a { font-weight: 700; color: var(--ink-5); }
.footer-links a:hover { color: var(--ink); }

/* ---------- 반응형 (디자인 원본 규칙) ---------- */
@media (max-width: 900px) {
  .shell { padding: 0 20px 20px; gap: 18px; }
  .side {
    width: calc(100% + 40px); max-width: none; flex: 1 1 100%;
    position: sticky; top: 62px; z-index: 40;
    background: #fff; margin: 0 -20px; padding: 10px 20px;
    box-shadow: 0 1px 0 rgba(31, 31, 34, .08);
  }
  .nav-card {
    flex-direction: row; overflow-x: auto; gap: 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* 좌우 잘림을 자연스럽게: 가장자리 페이드 + 스크롤 여백 */
    padding: 2px 20px; margin: 0 -20px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    scroll-padding: 0 20px;
  }
  .nav-card::-webkit-scrollbar { display: none; }
  .nav-label { display: none; }
  .nav-item { background: var(--soft); height: 38px; border-radius: 999px; }
  .nav-item.active { background: var(--dark); color: #fff; }
  .nav-item.active .nav-dot { background: var(--accent); }
  .widget { display: none; }
  .me-meta { display: none; }
  .searchbar kbd { display: none; }
  .topbar-in { padding: 0 20px; gap: 12px; }
  .hero h1 { font-size: 30px; letter-spacing: -1.2px; }
  .hero-left, .hero-slide.no-img .hero-left { padding: 28px 26px; }
  .hero-slide.no-img { min-height: 0; }
  .hero-deco { font-size: 64px; right: 18px; bottom: -10px; }
  .board-head { flex-wrap: wrap; align-items: flex-start; }
  .post-title, .post-summary { padding-right: 0; }
  .post-deco { display: none; }
  .admin-shell { flex-direction: column; }
  .admin-nav {
    width: calc(100% + 8px); flex-direction: row; overflow-x: auto; padding: 6px 16px; margin: 0 -4px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav-item { flex: none; height: 38px; border-radius: 999px; background: var(--soft); }
  .admin-nav-item.active { background: var(--dark); }
  .admin-cols { grid-template-columns: minmax(0, 1fr); }
  .form-row-2 { grid-template-columns: 1fr; }
  .artcard-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .footer { padding: 20px; }
  .settings-shell { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav-item { flex: none; height: 40px; border-radius: 999px; }
  .profile-stats { padding-top: 0; }
  .form-foot { padding-top: 14px; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  :root { --cardw: 150px; --gap: 14px; }
  .profile-cover { aspect-ratio: 3 / 1; }
  .editor-toolbar { padding: 8px; gap: 5px; }
  .tb-btn { padding: 0 10px; height: 30px; font-size: 12px; }
  .tb-size-step { height: 30px; }
  .pick-row .chip-big { height: 34px; padding: 0 13px; font-size: 12.5px; }
  .write-title { height: 48px; font-size: 17px; }
  .drafts-panel { left: auto; right: 0; }
  .topbar-in { height: 56px; }
  .side { top: 56px; }
  .hero h1 { font-size: 26px; }
  .hero p { font-size: 13.5px; }
  .home-sec-head h2, .board-head h1 { font-size: 22px; }
  .post-title { font-size: 23px; }
  .chardetail-name { font-size: 27px; }
  .artcard-grid { grid-template-columns: 1fr; }
  .auth-card { width: 100%; }
  .gate-wrap { padding: 34px 22px; }
}

/* ── 게시판 하단 바: 좌측 검색 / 우측 글쓰기 ── */
.board-foot { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.board-search { display: flex; gap: 8px; flex: 1; max-width: 430px; }
.board-search .filter-search { flex: 1; min-width: 0; }
.board-foot > .btn-primary { margin-left: auto; }
@media (max-width: 640px) {
  .board-foot { flex-wrap: wrap; }
  .board-search { max-width: none; flex-basis: 100%; order: 2; }
  .board-foot > .btn-primary { order: 1; margin-left: auto; }
}

/* ── 플랫폼 자동완성 ── */
.plat-auto { position: relative; max-width: 360px; }
.plat-auto .write-title { width: 100%; }
.plat-sug {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 40;
  background: #fff; border: 1px solid #e2e2e6; border-radius: 12px;
  box-shadow: 0 12px 28px rgba(20, 18, 16, .1); padding: 6px;
  display: flex; flex-direction: column; max-height: 264px; overflow: auto;
}
.plat-sug[hidden] { display: none; }
.plat-sug-item {
  text-align: left; padding: 9px 12px; border: 0; border-radius: 8px;
  background: none; font-size: 14px; cursor: pointer; font-family: inherit;
}
.plat-sug-item:hover { background: #f4f1ec; }
.plat-sug-item.add { color: #d9503b; font-weight: 700; }

/* ── 태그 '기타' 패널 ── */
.tag-more { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.tag-more[hidden] { display: none; }

/* ── 이스터에그: {{char}} / {{user}} ── */
.tok-char { color: #3b6fd9; font-weight: 800; }
.tok-user { color: #d9503b; font-weight: 800; }

/* ── 신고 모달 ── */
.report-modal-box { width: min(430px, calc(100vw - 40px)); max-width: none; text-align: left; }
.report-modal-box > p { margin-bottom: 14px; }
.report-reasons { margin-bottom: 12px; }
.report-modal-box textarea {
  width: 100%; border: 1px solid #e2e2e6; border-radius: 12px; padding: 11px 13px;
  font-size: 14px; font-family: inherit; resize: vertical; min-height: 70px;
  outline: none; margin-bottom: 16px;
}
.report-modal-box textarea:focus { border-color: var(--mut-2); }
.report-modal-box .leave-modal-btns { justify-content: flex-end; }

/* ── 에디터: 일반 텍스트는 기본 입력처럼, 높이 조절 가능 ── */
.block-editor { resize: vertical; overflow: auto; }
.blk-p:hover { background: transparent; }
.blk-p > .blk-ctl { display: none !important; }
.blk-p .blk-edit { min-height: 24px; }
.editor-drop-line { height: 0; border-top: 2px solid #d9503b; border-radius: 2px; margin: 3px 6px; }

/* ── [7][8] 게시글 하단 여백: 본문 ↔ 추천 ↔ 댓글 ── */
.post-wrap .post-content { margin-bottom: 150px; }
section.comments { margin-top: 56px; }

/* ── [14] 목록 제목 2줄까지 ── */
.post-row-title strong {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── [13] 고객센터: 페이지 제목 기준 플랫 정렬 ── */
.support-grid .settings-card { padding: 0; box-shadow: none; background: transparent; border-radius: 0; }

/* ── [17] 에디터 프롬프트 블록 제목: 실제 미리보기처럼 (흰 박스 제거) ── */
.form-row .blk-prompt-head input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  flex: 1; border: 0; outline: none; background: transparent; border-radius: 0;
  padding: 0; height: auto; box-shadow: none;
  color: #d8d2c8; font-size: 13.5px; font-weight: 800; font-family: var(--mono);
}

/* ── [1] 카드형 상세 작성자 카드 ── */
.creator-meta > a { font-size: 15px; font-weight: 800; letter-spacing: -.4px; }

/* ── [11] 헤더 알림 벨 ── */
.noti-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 11px; color: var(--ink-4, #4a4a52);
}
.noti-btn:hover { background: #f1efe9; }
.noti-dot {
  position: absolute; top: 7px; right: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: #d9503b; box-shadow: 0 0 0 2px #fff;
}
.noti-list { display: flex; flex-direction: column; padding: 8px 20px; }
.noti-row {
  display: flex; align-items: center; gap: 10px; padding: 13px 4px;
  border-bottom: 1px solid var(--soft, #f0eee9); font-size: 14px;
}
.noti-row:last-child { border-bottom: 0; }
.noti-row:hover .noti-text { color: var(--accent, #d9503b); }
.noti-row.unread .noti-text { font-weight: 800; }
.noti-row .chip { flex: none; }
.noti-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noti-time { flex: none; font-size: 12px; color: var(--mut-2); }

/* ── [15] 헤더 [검색] 버튼 + 패널 ── */
.search-btn-text {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line, #e2e2e6); background: #fff; cursor: pointer;
  height: 36px; padding: 0 13px; border-radius: 11px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-4, #4a4a52); font-family: inherit;
}
.search-btn-text:hover { border-color: var(--mut-2); }
.search-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid var(--line, #e2e2e6);
  box-shadow: 0 16px 30px rgba(20, 18, 16, .08); z-index: 90;
}
.search-panel[hidden] { display: none; }
.topbar { position: relative; }
.search-panel-in {
  max-width: 760px; margin: 0 auto; padding: 14px 20px;
  display: flex; gap: 10px;
}
.search-panel-in input {
  flex: 1; border: 1px solid #e2e2e6; border-radius: 12px; padding: 11px 15px;
  font-size: 14.5px; outline: none;
}
.search-panel-in input:focus { border-color: var(--mut-2); }

/* ── [2][12] 팔로잉 목록 + 알림 설정 ── */
.follow-list { display: flex; flex-direction: column; padding: 6px 20px; }
.follow-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 4px;
  border-bottom: 1px solid var(--soft, #f0eee9); flex-wrap: wrap;
}
.follow-row:last-child { border-bottom: 0; }
.follow-row-user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; }
.follow-row-meta { display: flex; flex-direction: column; }
.follow-row-meta strong { font-size: 14.5px; font-weight: 800; letter-spacing: -.4px; }
.follow-row-meta em { font-style: normal; font-size: 12px; color: var(--mut-2); }
.follow-noti { position: relative; }
.follow-noti summary { list-style: none; cursor: pointer; }
.follow-noti summary::-webkit-details-marker { display: none; }
.follow-noti-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  width: min(320px, 84vw); background: #fff; border: 1px solid var(--line, #e2e2e6);
  border-radius: 14px; box-shadow: 0 14px 34px rgba(20, 18, 16, .12);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.noti-opt { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.noti-boards { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 20px; }
.noti-boards .chip-big { font-size: 12px; padding: 6px 10px; }

/* ── 회원가입 중복 확인 ── */
.name-check { display: block; font-style: normal; font-size: 12px; margin-top: 5px; min-height: 14px; }
.name-check.ok { color: #4a6b42; }
.name-check.bad { color: #d9503b; }

/* ── 에디터 드래그/높이 조절 ── */
.blk[draggable="true"] { cursor: grab; }
.blk.dragging { opacity: .45; }
.editor-resize { display: flex; justify-content: center; padding: 7px 0 2px; cursor: ns-resize; touch-action: none; }
.editor-resize span { width: 46px; height: 4px; border-radius: 2px; background: var(--line, #e2e2e6); }
.editor-resize:hover span { background: var(--mut-2, #b5b5be); }

/* ── [재1] 작성자 카드: 헤더 프로필과 동일한 일반 텍스트 표기 (칩 아님) ── */
.creator-card .me-level { margin-bottom: 1px; }

/* ── [재2] 팔로잉 알림 설정: 작은 아이콘 버튼 ── */
.noti-set-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--line, #e2e2e6);
  border-radius: 11px; background: #fff; cursor: pointer; color: var(--ink-4, #4a4a52);
  position: relative;
}
.noti-set-btn:hover { border-color: var(--mut-2); }
.noti-set-btn .set-dot {
  position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
}
.set-dot.custom { background: #d9503b; }
.set-dot.off { background: #b5b5be; }

/* ── [재15/추가2] 검색: PC는 헤더 검색바, 모바일은 아이콘 버튼 ── */
.header-searchbar { cursor: pointer; }
.header-searchbar:hover { background: #eeeae2; }
.search-btn-mo {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 11px; color: var(--ink-4, #4a4a52);
}
@media (max-width: 640px) {
  .header-searchbar { display: none; }
  .search-btn-mo { display: inline-flex; }
}

/* 게시판 하단 검색: [검색] 버튼 → 펼침 */
.board-search-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.board-search[hidden] { display: none; }
#board-search-toggle { display: inline-flex; align-items: center; gap: 6px; }

/* ── [재6] 커버 조정 모달 ── */
.cover-modal-box { width: min(680px, calc(100vw - 32px)); max-width: none; text-align: left; }
.cov-edit { margin-bottom: 16px; }
.cov-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--mut); margin-bottom: 6px; }
.cov-box {
  position: relative; overflow: hidden; border-radius: 12px; background: #ececef;
  cursor: grab; touch-action: none; user-select: none;
}
.cov-box:active { cursor: grabbing; }
.cov-box.pc { aspect-ratio: 4 / 1; }
.cov-box.mo { aspect-ratio: 3 / 1; max-width: 340px; }
.cov-box img {
  width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  -webkit-user-drag: none;
}
.cov-zoom { width: 100%; max-width: 340px; margin-top: 8px; accent-color: #d9503b; }
.cover-modal-box .leave-modal-btns { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }

/* 커버 렌더링: PC/모바일 각각 위치·크기 */
.profile-cover-img {
  object-position: var(--pcx, 50%) var(--pcy, 50%);
  transform: scale(var(--pcz, 1));
  transform-origin: var(--pcx, 50%) var(--pcy, 50%);
}
@media (max-width: 640px) {
  .profile-cover-img {
    object-position: var(--mox, 50%) var(--moy, 50%);
    transform: scale(var(--moz, 1));
    transform-origin: var(--mox, 50%) var(--moy, 50%);
  }
}

/* ── [재20] 에디터 드롭 라인: 절대 위치 (레이아웃 안 흔들림) ── */
.block-editor { position: relative; }
.editor-drop-line {
  position: absolute; left: 6px; right: 6px; height: 0; margin: 0;
  border-top: 2px solid #d9503b; border-radius: 2px; pointer-events: none; z-index: 5;
}

/* ── [추가1] 카드 목록에도 칭호 ── */
.char-meta .row-title-pre, .artcard-meta .row-title-pre { color: #d9503b; font-weight: 800; }
.char-meta .row-title-suf, .artcard-meta .row-title-suf { font-weight: 700; }

/* ── 프롬프트 파생 그림 글: 이미지가 본문 위에 ── */
.post-main-images { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 26px; }
.post-main-images img { max-width: 100%; border-radius: 16px; display: block; }

/* ── 모바일: 스크롤하면 상단바는 올라가고, 게시판 탭이 맨 위에 여백 없이 붙음 ── */
@media (max-width: 900px) {
  .topbar { position: static; }
  .side { top: 0; }
}

/* ── 게시글 이미지: 가로 600px로 우선 표시, 크게 보기 지원 ── */
.post-content img, .post-main-images img, .post-images img { max-width: min(600px, 100%); height: auto; }
.imgzoom-wrap {
  position: relative; display: inline-block;
  width: fit-content; max-width: min(600px, 100%); /* 600px 캡은 래퍼가 담당 */
  align-self: flex-start; /* flex 컨테이너 안에서도 이미지 크기에 딱 맞게 */
}
.imgzoom-wrap img { width: 100%; }
.imgzoom-wrap img { cursor: zoom-in; display: block; }
.imgzoom-btn {
  position: absolute; right: 10px; bottom: 10px;
  border: 0; border-radius: 9px; padding: 7px 12px;
  background: rgba(31, 31, 34, .72); color: #fff; font-size: 12.5px; font-weight: 700;
  cursor: pointer; opacity: 0; transition: opacity .15s; font-family: inherit;
}
.imgzoom-wrap:hover .imgzoom-btn, .imgzoom-btn:focus { opacity: 1; }
@media (hover: none) { .imgzoom-btn { opacity: .85; } }
.lightbox {
  position: fixed; inset: 0; z-index: 400; background: rgba(15, 14, 13, .9);
  overflow: hidden; touch-action: none; overscroll-behavior: contain;
}
.lightbox-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: grab;
}
.lightbox-stage:active { cursor: grabbing; }
.lightbox img {
  max-width: none; max-height: none; will-change: transform;
  user-select: none; -webkit-user-drag: none;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lightbox-close {
  position: fixed; top: 12px; right: 14px; z-index: 402; background: rgba(31, 31, 34, .7);
  border: 0; border-radius: 10px; width: 40px; height: 40px;
  color: #fff; font-size: 20px; cursor: pointer; line-height: 1;
}
.lightbox-ctl {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 402;
  display: flex; align-items: center; gap: 4px;
  background: rgba(31, 31, 34, .82); border-radius: 13px; padding: 6px;
}
.lightbox-ctl button {
  border: 0; background: none; color: #fff; cursor: pointer;
  min-width: 36px; height: 34px; padding: 0 10px; border-radius: 9px;
  font-size: 13.5px; font-weight: 700; font-family: inherit;
}
.lightbox-ctl button:hover { background: rgba(255, 255, 255, .14); }
.lightbox-zoom-val { color: #fff; font-size: 12.5px; min-width: 44px; text-align: center; }
.lightbox-ctl-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .25); margin: 0 4px; }

/* ── 카드형 상세: 키아트·샷 크게 보기 버튼 ── */
.keyart .imgzoom-btn { z-index: 2; }
.keyart:hover .imgzoom-btn, .shot:hover .imgzoom-btn { opacity: 1; }
.shot { position: relative; }
.shot .imgzoom-btn { right: 6px; bottom: 6px; padding: 4px 8px; font-size: 11px; border-radius: 7px; }

/* ── 약관 · 개인정보처리방침 ── */
.legal-doc { padding: 28px 30px; line-height: 1.8; font-size: 14.5px; }
.legal-doc h2 { font-size: 16px; font-weight: 800; letter-spacing: -.5px; margin: 26px 0 8px; }
.legal-doc h2:first-of-type { margin-top: 4px; }
.legal-doc p { margin: 0 0 10px; color: var(--ink-3, #35353a); }
.legal-doc ol { margin: 0 0 10px; padding-left: 22px; color: var(--ink-3, #35353a); }
.legal-doc li { margin-bottom: 5px; }
.legal-doc a { color: #1f5fbf; text-decoration: underline; }

/* ── 회원가입 동의 ── */
.agree-box {
  border: 1px solid var(--line, #e2e2e6); border-radius: 13px;
  padding: 14px 16px; margin: 16px 0 18px;
  display: flex; flex-direction: column; gap: 9px;
}
.agree-box .gate-check:first-child { padding-bottom: 9px; border-bottom: 1px solid var(--soft, #f0eee9); }
.agree-box a { color: #1f5fbf; text-decoration: underline; }