/* 디자인 토큰 — 파파님 시안 팔레트 확정본
   다크 테마 = 메인 홈페이지(집중·몰입) / 라이트 테마 = 미니홈페이지(작가·작품 강조) */
:root {
  /* 다크 테마 메인 컬러 */
  --navy: #0B1220;
  --deep-purple: #1E3A8A;
  --primary: #7C3AED;
  --purple-light: #A78BFA;
  --blue: #38B2F6;
  --purple-2: #885CF6;

  /* 보조·중립 */
  --gray-dark: #1F2937;
  --gray: #4B5563;
  --gray-light: #94A3B8;
  --white: #F8FAFC;
  --gold: #FBBF24;      /* 이벤트·알림·포인트 */
  --mint: #10B981;      /* 연재중·완료 */
  --pink: #F472B6;

  /* 배경·표면 */
  --bg: #0B1220;
  --bg-grad: linear-gradient(160deg, #0F172A 0%, #1E293B 100%);
  --surface: #1F2937;
  --surface-2: #1E293B;
  --border: rgba(148, 163, 184, .22);

  /* 글자 */
  --text: #F8FAFC;
  --text-soft: #94A3B8;
  --text-dim: #64748B;

  /* 그라데이션 — 시안 지정 용도 */
  --grad-header: linear-gradient(120deg, #0B1220 0%, #7C3AED 100%);
  --grad-button: linear-gradient(135deg, #38B2F6 0%, #885CF6 100%);
  --grad-bg: linear-gradient(160deg, #0F172A 0%, #1E293B 100%);

  --rank: var(--gold);
  --verified: var(--blue);

  --radius-card: 12px;
  --radius-thumb: 10px;
  --radius-pill: 999px;
  --shadow: 0 8px 28px rgba(0, 0, 0, .40);
}

/* 라이트 테마 — 미니홈페이지 */
:root[data-theme="light"] {
  --bg: #F8FAFC;
  --bg-grad: linear-gradient(160deg, #F8FAFC 0%, #E2E8F0 100%);
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --border: #E2E8F0;
  --text: #1E293B;
  --text-soft: #475569;
  --text-dim: #64748B;
  --primary: #885CF6;
  --purple-light: #9D5CFF;
  --grad-header: linear-gradient(120deg, #38B2F6 0%, #885CF6 100%);
  --grad-button: linear-gradient(135deg, #885CF6 0%, #EC4899 100%);
  --shadow: 0 8px 24px rgba(30, 41, 59, .10);
}

* { box-sizing: border-box; }

html, body {
  word-break: keep-all;   /* 한글은 어절 단위로 줄바꿈 — 글자가 세로로 쪼개지지 않게 */
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }

/* ── 헤더 ───────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 50;
  /* 불투명 — 아래로 내려온 본문 글자가 상단바와 겹쳐 보이던 문제 (2026-10-15) */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
.header__row { display: flex; align-items: center; gap: 20px; height: 68px; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.logo__mark {
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--grad-button);
}
.logo__mark img { width: 28px; height: 28px; display: block; border-radius: 9px; }
.nav { display: flex; gap: 4px; }
.nav a {
  padding: 8px 13px; border-radius: var(--radius-pill);
  font-size: 14.5px; color: var(--text-soft);
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.is-active { color: var(--text); font-weight: 600; background: var(--surface-2); }

.search { flex: 1; max-width: 380px; position: relative; }
.search input {
  width: 100%; height: 42px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); padding: 0 16px 0 42px; font-size: 14px; font-family: inherit;
}
.search input::placeholder { color: var(--text-dim); }
.search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); opacity: .5; }

.header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: transparent; color: var(--text-soft);
  display: grid; place-items: center; cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
/* 상단 아이콘 간격 통일 — 달·돋보기·알림·MY 모두 34px 정사각, 사이 간격 6px (파파님 2026-10-19) */
.header__row .icon-btn,
.header__row .hdr-search,
.header__row .link-btn.hdr-login {
  width: 34px !important; height: 34px !important; min-width: 34px !important;
  padding: 0 !important; margin: 0 !important; display: inline-flex !important;
  align-items: center; justify-content: center; flex: 0 0 auto;
}
.header__row .hdr-search { color: var(--text-soft); border: 0; background: transparent; }
.header__row .hdr-search:hover { color: var(--text); background: transparent; }
/* 간격은 gap 대신 오른쪽 여백으로 고정 — 요소마다 gap 계산이 달라 어긋나던 것 방지 */
.header__row { gap: 0 !important; }
.header__actions, #authArea { gap: 0 !important; }
.header__row .icon-btn,
.header__row .hdr-search,
.header__row .link-btn.hdr-login,
#authArea > * { margin: 0 6px 0 0 !important; }
#authArea > *:last-child { margin-right: 0 !important; }
.header__row .acct { margin-right: 0 !important; }
.header__row .icon-btn:last-child, .header__row .acct:last-child { margin-right: 0 !important; }
.acct__btn {
  width: 34px; height: 34px; min-width: 34px; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text-soft); cursor: pointer;
}
.acct__btn:hover { color: var(--text); background: transparent; }

/* 상단 계정 단추 — 이름 글자 대신 MY 아이콘 (파파님 2026-10-19) */
.acct__btn { display: inline-flex; align-items: center; gap: 4px; }
.acct__ico { display: inline-flex; align-items: center; color: var(--text-soft); }
.acct__btn:hover .acct__ico, .acct__btn[aria-expanded="true"] .acct__ico { color: var(--text); }

/* 상단 아이콘(다크모드·찾기·알림) 둘레의 원 테두리 없앰 (파파님 2026-10-19) */
.header__actions .icon-btn { border: 0; border-radius: 0; width: 34px; height: 34px; background: transparent; }
.header__actions .icon-btn:hover { background: transparent; color: var(--text); }
.link-btn { padding: 9px 12px; font-size: 14.5px; color: var(--text-soft); }
.link-btn:hover { color: var(--text); }

/* ── 버튼 ───────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: var(--radius-pill);
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
}
.btn--primary { background: var(--grad-button); color: #fff; }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--light { background: var(--white); color: #141821; }
.btn--sm { height: 38px; padding: 0 16px; font-size: 14px; }

/* ── 상태 배지 (시안 규칙: 연재중=민트, 완료=퍼플, 휴재=그레이, 공지=골드) ── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 600; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-soft);
}
.chip--serial { background: rgba(16, 185, 129, .16); color: #34D399; border-color: rgba(16, 185, 129, .38); }
.chip--done { background: rgba(124, 58, 237, .20); color: var(--purple-light); border-color: rgba(167, 139, 250, .38); }
.chip--pause { background: rgba(148, 163, 184, .14); color: var(--gray-light); }
.chip--notice { background: rgba(251, 191, 36, .16); color: var(--gold); border-color: rgba(251, 191, 36, .34); }
.chip--ai { background: rgba(56, 178, 246, .16); color: var(--blue); border-color: rgba(56, 178, 246, .34); }

/* ── 히어로 ─────────────────────────────── */
.hero {
  position: relative; margin-top: 22px; border-radius: 18px; overflow: hidden;
  min-height: 340px; display: flex; align-items: flex-end;
  background:
    radial-gradient(120% 130% at 78% 12%, rgba(124, 58, 237, .58) 0%, rgba(124, 58, 237, 0) 58%),
    radial-gradient(90% 110% at 8% 92%, rgba(56, 178, 246, .24) 0%, rgba(0, 0, 0, 0) 62%),
    var(--grad-header);
  border: 1px solid var(--border);
}
.hero__inner { padding: 34px 36px 28px; position: relative; z-index: 2; }
.hero h1 { margin: 0 0 10px; font-size: clamp(24px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.02em; }
.hero p { margin: 0 0 20px; color: var(--text-soft); font-size: 15px; }
.hero__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero__foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 14px;
  margin-top: 26px; color: var(--text-dim); font-size: 13px;
}
.hero__foot > span:first-child { min-width: 0; flex: 1 1 190px; }
.hero__pager { display: flex; align-items: center; gap: 10px; }
.dots { display: flex; gap: 6px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.dots i.on { background: var(--primary); width: 20px; border-radius: var(--radius-pill); }

/* ── 섹션 ───────────────────────────────── */
.section { margin-top: 46px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.section__head h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.section__head a { font-size: 13.5px; color: var(--text-dim); }

.grid-works { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.card__cover {
  aspect-ratio: 3 / 4; position: relative;
  background: linear-gradient(160deg, #2A2740 0%, #1B1E2B 100%);
}
.card__rank {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--radius-pill);
  background: var(--rank); color: #1A1206; font-size: 12.5px; font-weight: 800;
  display: grid; place-items: center;
}
.card__body { padding: 11px 12px 13px; }
.card__title { font-size: 14px; font-weight: 600; margin: 0 0 3px; }
.card__author { font-size: 12.5px; color: var(--text-soft); margin: 0 0 7px; }
.card__meta { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }

/* 카드 제목은 두 줄까지만 — 넘치면 말줄임, 두 줄 자리를 늘 확보해 카드 높이를 맞춘다.
   필명과 '카테고리|차수' 줄은 붙인다 (파파님 2026-10-19) */
.card { display: flex; flex-direction: column; }
.card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.card__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; text-overflow: ellipsis;
  min-height: 2.9em; max-height: 2.9em;
}
.card__author { margin: 0 0 0 !important; line-height: 1.25; }
.card__meta {
  margin-top: 0 !important; display: block !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* 두 줄로 늘어나 카드 높이가 달라지던 것 방지 */
}

.two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; }

.two-col { align-items: stretch; }
.two-col > div { display: flex; flex-direction: column; }
/* 오른쪽(공지+배너) 내용이 왼쪽보다 짧아도 아래가 비지 않게 골고루 펼친다 */
.two-col > div:last-child { justify-content: space-between; }
.row-list { border-top: 1px solid var(--border); }
.row-list.fill { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
.row-list.fill .row { flex: 1 1 0; }
.row__meta { color: var(--text-dim); font-size: 12.5px; margin: 2px 0 0; }
.row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 4px; border-bottom: 1px solid var(--border);
}
.row__thumb { width: 96px; aspect-ratio: 4 / 3; height: auto; border-radius: 8px; background: linear-gradient(160deg, #2A2740, #1B1E2B); flex: 0 0 auto; }
.row__main { flex: 1; min-width: 0; }
.row__title { font-size: 14.5px; font-weight: 600; margin: 0 0 2px; }
.row__sub { font-size: 12.5px; color: var(--text-dim); }
.row__right { text-align: right; font-size: 12.5px; color: var(--text-dim); flex: 0 0 auto; }

.notice { display: flex; justify-content: space-between; padding: 12px 2px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.notice span:last-child { color: var(--text-dim); flex: 0 0 auto; margin-left: 12px; }

/* 홍보 배너 — 그림 배경 + 어두운 그라데이션으로 글자를 살린다(파파님 2026-10-19) */
.side-banner {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  margin-top: 18px; border-radius: 16px; padding: 22px 22px 20px; min-height: 232px;
  overflow: hidden; isolation: isolate; text-decoration: none; color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  background: #0B0E1A url('/assets/img/promo/referral-bg.jpg') 78% center / cover no-repeat;
  box-shadow: 0 20px 44px -26px rgba(0,0,0,.95);
  transition: transform .18s ease, box-shadow .18s ease;
}
.side-banner::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(8,10,20,.82) 0%, rgba(8,10,20,.30) 46%, rgba(8,10,20,0) 72%),
    linear-gradient(100deg, rgba(8,10,20,.90) 0%, rgba(9,11,24,.70) 40%, rgba(12,14,30,.12) 78%, rgba(12,14,30,0) 100%);
}
.side-banner::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 100% 0%, rgba(139,92,246,.20), transparent 60%);
}
.side-banner:hover { transform: translateY(-2px); box-shadow: 0 26px 52px -26px rgba(0,0,0,1); }
.side-banner__badge {
  position: absolute; top: 14px; left: 16px; padding: 4px 10px; border-radius: 999px;
  background: rgba(224,164,88,.20); border: 1px solid rgba(240,196,142,.55);
  color: #F3CE9B; font-size: 11px; font-weight: 800; letter-spacing: .04em; font-style: normal;
}
.side-banner b {
  display: block; font-size: 19px; line-height: 1.35; margin-bottom: 8px;
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
}
.side-banner b::after {
  content: ''; display: block; width: 34px; height: 2px; margin-top: 10px;
  background: linear-gradient(90deg, #F0C48E, rgba(240,196,142,0));
}
.side-banner span { display: block; font-size: 13px; color: rgba(255,255,255,.92); line-height: 1.72;
  text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.side-banner span b { display: inline; font-size: inherit; margin: 0; color: #FFE3BC; text-shadow: none; }
.side-banner span b::after { display: none; }
.side-banner em { align-self: flex-start; margin-top: 20px; font-style: normal; font-size: 13.5px;
  padding: 9px 16px; border-radius: 999px; background: #fff; color: #23103F; font-weight: 800;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.9); }
@media (max-width: 620px) {
  .side-banner { min-height: 208px; padding: 18px 16px 16px; }
  .side-banner b { font-size: 17px; }
  .side-banner span { font-size: 12.5px; }
}

.promo {
  margin-top: 42px; border-radius: 16px; padding: 26px 30px;
  background: var(--grad-button); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.promo h3 { margin: 0 0 4px; font-size: 19px; font-weight: 700; }
.promo p { margin: 0; opacity: .92; font-size: 14px; }

.footer { margin-top: 60px; border-top: 1px solid var(--border); padding: 30px 0 44px; color: var(--text-dim); font-size: 13px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.1fr; gap: 30px; align-items: flex-start; }
.footer__col a, .footer__col span { display: block; color: var(--text-dim); font-size: 13px; text-decoration: none; line-height: 1.85; }
.footer__col a:hover { color: var(--text-soft); }
.footer__cta { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; }
.footer__cta p { margin: 0; color: var(--text-soft); font-size: 15px; line-height: 1.55; }
.footer__copy { margin: 26px 0 0; color: var(--text-dim); font-size: 12.5px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__cta { align-items: flex-start; text-align: left; } }
.footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.footer__brand { display: flex; flex-direction: column; gap: 10px; }
.footer__tagline { color: var(--text-soft); font-size: 13px; margin: 0; }
.footer__sns { display: flex; gap: 10px; }
.footer__sns a { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); transition: .18s; }
.footer__sns a:hover { color: #fff; background: var(--purple); border-color: var(--purple); transform: translateY(-2px); }
.banner-row { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  background: var(--grad-button); border-radius: 14px; padding: 20px 24px; margin-bottom: 22px; }
.banner-row__text { min-width: 260px; }
.banner-row__text b { display: block; color: #fff; font-size: 16.5px; margin-bottom: 5px; }
.banner-row__text span { display: block; color: rgba(255,255,255,.9); font-size: 13px; line-height: 1.6; }
.btn--white { background: #fff; color: #4C1D95; font-weight: 700; white-space: nowrap; }
.btn--white:hover { background: #EDE9FE; }
.footer__cols { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 16px; }
.footer b { color: var(--text-soft); display: block; margin-bottom: 6px; font-size: 13px; }

/* ── 프로필(미니홈피) ───────────────────── */
.cover {
  height: 190px; border-radius: 16px; margin-top: 20px;
  background:
    radial-gradient(110% 140% at 80% 10%, rgba(124, 92, 252, .5), transparent 60%),
    linear-gradient(120deg, #171B2A, #12121F);
  border: 1px solid var(--border);
}
.profile { display: flex; gap: 18px; align-items: flex-end; margin-top: -46px; padding: 0 26px; }
.avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(160deg, #35304F, #23263A);
  border: 4px solid var(--bg); flex: 0 0 auto;
}
.profile__name { display: flex; align-items: center; gap: 7px; font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.badge-verified { color: var(--verified); font-size: 15px; }
.profile__bio { margin: 0; color: var(--text-soft); font-size: 14px; }

.stats { display: flex; gap: 28px; margin: 18px 0 0; padding: 0 26px; }
.stat b { display: block; font-size: 18px; font-weight: 700; }
.stat span { font-size: 12.5px; color: var(--text-dim); }

.tabs { display: flex; gap: 4px; margin: 22px 0 18px; border-bottom: 1px solid var(--border); padding: 0 26px; }
.tabs a { padding: 11px 14px; font-size: 14.5px; color: var(--text-soft); border-bottom: 2px solid transparent; }
.tabs a.on { color: var(--text); font-weight: 600; border-color: var(--primary); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ── 작품 상세 ──────────────────────────── */
.work-hero { display: grid; grid-template-columns: 220px 1fr; gap: 26px; margin-top: 24px; }
.work-cover { aspect-ratio: 3 / 4; border-radius: var(--radius-card); background: linear-gradient(160deg, #2A2740, #1B1E2B); border: 1px solid var(--border); }
.work-hero h1 { margin: 0 0 8px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px; }
.tag { font-size: 12.5px; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--border); padding: 5px 11px; border-radius: var(--radius-pill); }
.quote { border-left: 3px solid var(--primary); padding: 4px 0 4px 16px; color: var(--text-soft); font-style: italic; margin: 18px 0; }

@media (max-width: 1100px) {
  .grid-works { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .grid-works { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .two-col, .grid-3, .work-hero { grid-template-columns: 1fr; }
  .nav, .search { display: none; }
}
@media (max-width: 560px) {
  .grid-works { grid-template-columns: repeat(2, 1fr); }
  .hero__inner { padding: 24px 20px; }
  .tabs { padding: 0 12px; overflow-x: auto; }
}




/* ── 추천/비추천 (어두운 테마 고정 색 — 브라우저 기본 버튼 모양 방지) ── */
.vote { display: inline-flex; align-items: center; gap: 7px; }
.vote button {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 5px;
  background: #16213A; border: 1px solid #2A3350; color: #A9B7D0;
  border-radius: 999px; padding: 5px 11px; font-size: 12.5px; line-height: 1;
  font-family: inherit; cursor: pointer; transition: all .15s;
}
.vote button:hover { color: #F8FAFC; border-color: #7C3AED; background: #1D2A47; }
.vote button svg { width: 15px; height: 15px; display: block; }
.vote button b { font-weight: 600; font-size: 12.5px; color: inherit; }
.vote button.on-up { background: rgba(248,113,113,.16); border-color: #F87171; color: #F87171; }
.vote button.on-down { background: rgba(96,165,250,.16); border-color: #60A5FA; color: #60A5FA; }
.vote button.on-up b, .vote button.on-down b { color: inherit; }
.vote-bar {
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  margin: 26px 0 6px; padding: 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-card);
}
.vote-bar__ask { color: var(--text-soft); font-size: 13.5px; }
.vote-bar .msg { width: 100%; text-align: center; font-size: 12.5px; margin: 4px 0 0; color: var(--text-dim); }
.vote-bar .msg.err { color: #F87171; }
.ep-row__right { display: flex; align-items: center; gap: 12px; }


/* ── 모바일 가로폭 깨짐 방지 (푸터·본문 공통) ─────────────────────── */
/* overflow-x: hidden 은 position: sticky 를 망가뜨린다(스크롤 컨테이너가 되어 버림)
 * → 상단바가 붙어 있지 못하고 본문과 뒤섞이던 원인. clip 은 스크롤 컨테이너를 만들지 않는다. */
html { scrollbar-gutter: stable; }   /* 스크롤바가 생기고 사라져도 페이지가 좌우로 밀리지 않게 */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .footer { margin-top: 40px; padding: 24px 0 34px; font-size: 12.5px; }
  .footer__grid { grid-template-columns: 1fr; gap: 20px; }
  .footer__col a, .footer__col span { line-height: 1.75; }
  .footer__cta { align-items: flex-start; text-align: left; }
  .footer__cta p { font-size: 14px; }
  .footer__sns a { width: 34px; height: 34px; }
  .footer__copy { margin-top: 20px; line-height: 1.7; word-break: keep-all; }
  .section__head h2 { font-size: 17px; }
  .grid-works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card__title { font-size: 14px; }
  /* 코드·긴 주소·API 키는 한 줄 그대로 두고 옆으로 스크롤(중간에 잘리지 않게) */
  pre, code, .keyline, .mono { white-space: pre; overflow-x: auto; max-width: 100%; }
  pre { display: block; }
  code { display: inline-block; vertical-align: middle; }
  .keyline { white-space: nowrap; overflow-x: auto; display: block; }
  /* 문서용 표는 좁은 화면에서 '라벨 위 / 값 아래'로 펼친다 — 좁은 칸에 눌려 세로로 쪼개지지 않게 */
  table { display: block; width: 100%; }
  table tbody, table tr { display: block; }
  table tr { padding: 10px 2px; border-bottom: 1px solid var(--border); }
  table th, table td { display: block; width: auto; max-width: 100%; padding: 0; border: 0; text-align: left; }
  table th, table td:first-child { color: var(--text); font-weight: 700; margin-bottom: 4px; }
  table td:last-child { color: var(--text-soft); }
  body.has-bnav main { padding-bottom: 104px; }   /* 하단 메뉴에 내용이 가리지 않게 */
  img, svg, video { max-width: 100%; }
}


/* ── 모바일 헤더 한 줄 정렬 (2026-10-15) ──────────────────────────── */
@media (max-width: 720px) {
  .header__row { height: 54px; gap: 10px; flex-wrap: nowrap; }
  .logo { font-size: 17px; gap: 7px; flex: 0 0 auto; }
  .logo__mark { width: 25px; height: 25px; border-radius: 8px; font-size: 13px; }
  .search { max-width: none; flex: 1 1 auto; }
  .search input { height: 38px; padding-left: 36px; font-size: 13.5px; }
  .header__actions { gap: 5px; flex: 0 0 auto; font-size: 13px; }
  .header__actions .link-btn { padding: 5px 8px; white-space: nowrap; font-size: 13px; }
  .header__actions .btn--sm { padding: 6px 11px; font-size: 13px; }
  .icon-btn { width: 36px; height: 36px; }
  /* 넘침이 생기는 요소는 감춘다(줄바꿈으로 두 줄이 되는 원인) */
  .header__actions .acorn-chip { display: none; }
}
@media (max-width: 430px) {
  #authArea a[href="/acorns"] { display: none; }   /* 도토리 칩 — 좁은 화면에서 숨김 */
  #authArea .link-btn[href="/library"] { display: none; }  /* 내 서재 */
  #authArea .link-btn[href="/writer.html"] { display: none; }  /* 홈의 이름 링크(스튜디오 버튼과 같은 곳) */
  #authArea .btn--sm { padding: 6px 10px; font-size: 12.5px; }
  .logo { font-size: 16px; }
}


/* ── 표지 자리(아직 표지 이미지가 없는 작품) ─────────────────── */
.card__cover, .row__thumb { display: grid; place-items: center; overflow: hidden; }
.cover-ph__char {
  font-size: 46px; font-weight: 800; letter-spacing: -.04em;
  color: rgba(255, 255, 255, .13); line-height: 1;
}
.row__thumb .cover-ph__char { font-size: 24px; }
.cover-ph__note {
  position: absolute; left: 0; right: 0; bottom: 9px;
  text-align: center; font-size: 10.5px; letter-spacing: .02em;
  color: var(--text-dim);
}
.row__thumb .cover-ph__note { display: none; }
.logo { white-space: nowrap; }


/* 좁은 화면에서만 쓰는 짧은 라벨(넓은 화면에서는 긴 라벨) */
#authArea .only-narrow { display: none; }
@media (max-width: 400px) {
  #authArea .only-wide { display: none; }
  #authArea .only-narrow { display: inline; }
}


/* 380px 이하 — 헤더 한 줄 유지(로그아웃은 마이페이지에서) */
@media (max-width: 380px) {
  #authArea #logoutBtn { display: none; }
  .header__actions { gap: 3px; }
  #authArea .link-btn { padding: 5px 6px; }
}




/* 가입 화면 — 약관·개인정보 읽어보기 버튼(체크박스 바로 아래) */
.agree-links { display: flex; gap: 8px; flex-wrap: wrap; margin: -2px 0 12px 2px; }
.agree-links__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-soft); font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.agree-links__btn:hover { border-color: var(--primary); color: var(--text); }


/* 보던 글 이어보기 안내 */
.resume-modal {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(4, 6, 14, .62); backdrop-filter: blur(3px); padding: 20px;
}
.resume-modal__box {
  width: min(420px, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 20px 18px; box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.resume-modal__box b { font-size: 16px; }
.resume-modal__work { color: var(--text); font-size: 14.5px; margin: 10px 0 2px; font-weight: 600; }
.resume-modal__ask { color: var(--text-soft); font-size: 13.5px; margin: 0 0 16px; }
.resume-modal__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }


/* ── 하단 메뉴 네비게이션 (모바일 전용) ─────────────────────────── */
.bnav { display: none; }
@media (max-width: 720px) {
  .bnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: grid; grid-template-columns: repeat(6, 1fr);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bnav a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; border-radius: 10px;
    color: var(--text-dim); font-size: 11px; font-weight: 600; text-decoration: none;
  }
  .bnav a:active { background: var(--surface-2); }
  .bnav a.on { color: var(--text); }
  .bnav a { min-width: 0; }
  .bnav__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bnav a.on .bnav__icon { filter: none; }
  .bnav__icon { font-size: 18px; line-height: 1; }
  .bnav__label { letter-spacing: -.01em; }

  /* 하단 메뉴에 가리지 않게 본문·푸터 여백을 준다 */
  body.has-bnav .footer { padding-bottom: 96px; }
  body.has-bnav .toast { bottom: 84px; }
}


/* ── 좌측 접이식 네비게이션 ─────────────────────────────────── */
.snav-toggle {
  appearance: none; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--border); background: transparent; color: var(--text-soft);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.snav-toggle:hover { background: var(--surface-2); color: var(--text); }
.snav-toggle[aria-expanded="true"] { border-color: var(--primary); color: var(--text); background: var(--surface-2); }

.snav {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 90;
  width: 244px; padding: 14px 12px;
  background: var(--surface); border-right: 1px solid var(--border);
  transform: translateX(-100%); transition: transform .18s ease;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
}
body.snav-open .snav { transform: translateX(0); }
.snav-overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(4, 6, 14, .55);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
body.snav-open .snav-overlay { opacity: 1; pointer-events: auto; }
.snav__head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; border-bottom: 1px solid var(--border); }
.snav__head .logo { font-size: 17px; }
.snav__close {
  margin-left: auto; appearance: none; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent; color: var(--text-soft); cursor: pointer; font-size: 13px;
}
.snav__list { display: flex; flex-direction: column; gap: 2px; }
.snav__list a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  color: var(--text-soft); font-size: 14px; text-decoration: none;
}
.snav__list a:hover { background: var(--surface-2); color: var(--text); }
.snav__list a.on { background: var(--surface-2); color: var(--text); font-weight: 700; }
.snav__icon { font-size: 16px; width: 20px; text-align: center; }
.snav__foot { margin-top: auto; padding: 8px 4px 2px; border-top: 1px solid var(--border); }
@media (max-width: 720px) {
  .snav { width: 78%; max-width: 300px; }
  .snav-toggle { width: 36px; height: 36px; font-size: 16px; }
  .logo__mark { display: none; }
  /* 아코디언 머리의 '잉코라' 앞에는 아이콘을 보여 준다 (파파님 2026-10-19) */
  .snav__head .logo__mark { display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px; overflow: hidden; }
  .snav__head .logo__mark img { width: 26px; height: 26px; border-radius: 8px; display: block; }
}


/* 하단 메뉴 숨김(뷰어 설정) — 읽는 동안 화면을 가리지 않게 */
body.bnav-off .bnav { display: none; }
body.bnav-off .footer { padding-bottom: 40px; }
.rbar__check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-soft); cursor: pointer; }
.rbar__check input { width: 15px; height: 15px; accent-color: var(--primary); }
/* 하단 메뉴는 휴대폰 전용 — 넓은 화면에서는 '하단 메뉴 숨김' 항목 자체를 감춘다 (2026-10-15) */
@media (min-width: 721px) { .rbar__check { display: none; } }


/* 홈 화면 앱 설치 안내 */
.install-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 120;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 14px; box-shadow: 0 14px 34px rgba(0,0,0,.45); font-size: 13.5px;
}
.install-bar span { flex: 1 1 150px; color: var(--text-soft); }
body.has-bnav .install-bar { bottom: calc(74px + env(safe-area-inset-bottom)); }
body.bnav-off .install-bar { bottom: calc(12px + env(safe-area-inset-bottom)); }


/* 운영자 회원 관리 — 한 줄 목록(20명씩) */
.utable__head, .utable__row {
  display: grid; grid-template-columns: 1.5fr 1.6fr .7fr .7fr .5fr .6fr .9fr 1.5fr;
  gap: 8px; align-items: center; padding: 9px 10px; font-size: 13px;
}
.utable { }
.utable__head { color: var(--text-dim); font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--border); }
.utable__body { max-height: 640px; overflow-y: auto; }
.utable__row { border-bottom: 1px solid var(--border); }
.utable__row:hover { background: var(--surface-2); }
.utable__who { display: flex; flex-direction: column; gap: 2px; color: var(--text); font-weight: 600; }
.utable__who i { font-style: normal; color: var(--text-dim); font-size: 11.5px; font-weight: 400; }
.utable__mail { color: var(--text-soft); word-break: break-all; }
.utable__mail em { color: var(--gold); font-style: normal; font-size: 11px; }
.utable__when { color: var(--text-dim); font-size: 12px; }
.utable__acts { display: flex; gap: 4px; flex-wrap: wrap; }
.pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pg {
  appearance: none; min-width: 34px; padding: 6px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent; color: var(--text-soft);
  font-size: 12.5px; cursor: pointer;
}
.pg:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.pg.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.pg:disabled { opacity: .4; cursor: default; }
.pg__gap { color: var(--text-dim); padding: 0 2px; }
.pager__info { margin-left: auto; color: var(--text-dim); font-size: 12px; }
@media (max-width: 900px) {
  .utable__head { display: none; }
  .utable__row { grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px 10px; }
  .utable__who, .utable__mail { grid-column: 1 / -1; }
  .utable__acts { grid-column: 1 / -1; }
}


/* 홈 — 번호 순위 베스트(2열) : 순위 뱃지 + 정사각 표지 + 제목 2줄 + 작가|장르 */
.rankgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
@media (min-width: 720px) { .rankgrid { grid-template-columns: repeat(4, 1fr); } }
.rankcard { display: flex; gap: 10px; align-items: flex-start; min-width: 0; text-decoration: none; }
.rankcard__cover {
  position: relative; flex: 0 0 auto; width: 74px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  background: linear-gradient(150deg, var(--gray-dark), var(--deep-purple));
  display: grid; place-items: center; color: var(--white); font-size: 20px; font-weight: 800;
}
.rankcard__cover img { width: 100%; height: 100%; object-fit: cover; }
.rankcard__rank {
  position: absolute; left: 0; bottom: 0; padding: 1px 6px 2px;
  background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 800; border-radius: 0 8px 0 0;
}
.rankcard__body { min-width: 0; }
.rankcard__title {
  color: var(--text); font-size: 13.5px; font-weight: 700; line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rankcard__meta { color: var(--text-dim); font-size: 11.5px; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rankgrid .notice { grid-column: 1 / -1; }


/* 좁은 화면: 히어로 캐러셀 화살표는 숨겨 글자와 겹치지 않게 */
@media (max-width: 430px) {
  .hero__pager > span:first-child, .hero__pager > span:nth-child(3) { display: none; }
  .hero__pager { gap: 8px; }
}
/* 카드·목록 제목은 두 줄까지만 (잘린 채로 보이지 않게) */
.card__title, .row__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}


/* ── 순위표(무료 베스트) — 문피아 벤치마킹 ───────────────────────── */
.rtabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.rtabs::-webkit-scrollbar { display: none; }
.rtabs button {
  appearance: none; background: none; border: 0; padding: 10px 12px; white-space: nowrap;
  color: var(--text-dim); font-size: 14.5px; font-weight: 600; cursor: pointer; position: relative;
}
.rtabs button.on { color: var(--text); font-weight: 800; }
.rtabs button.on::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -3px; height: 3px;
  background: var(--primary); border-radius: 3px;
}
.rtabs--sub { margin-top: 10px; border-bottom: 0; }
.rtabs--sub button { padding: 6px 12px; font-size: 13px; border-radius: var(--radius-pill); }
.rtabs--sub button.on { background: var(--surface-2); }
.rtabs--sub button.on::after { display: none; }
/* 장르 칩 — 한 줄에 다 들어오도록 촘촘하게 (파파님 2026-10-19) */
.gtabs {
  display: flex; flex-wrap: nowrap; gap: 3px; overflow-x: auto; margin: 12px 0 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.gtabs::-webkit-scrollbar { display: none; }
.gtabs button {
  appearance: none; white-space: nowrap; cursor: pointer; font-size: 11px; padding: 4px 6px;
  letter-spacing: -0.2px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: transparent; color: var(--text-soft);
}
.gtabs button.on { border-color: var(--primary); color: var(--text); background: rgba(124,58,237,.14); font-weight: 700; }

/* 폭이 좁은 화면에서도 장르 칩이 한 줄에 다 들어오도록 더 촘촘하게 */
@media (max-width: 1199px) {
  .gtabs { gap: 2px; }
  .gtabs button { font-size: 10.5px; padding: 3px 4px; }
}
/* 900px 안팎(노트북 창 줄였을 때)에서도 칩이 한 줄에 남도록 한 단계 더 */
@media (max-width: 1023px) {
  .gtabs { gap: 1.5px; }
  .gtabs button { font-size: 10px; padding: 3px 3px; }
}
.rank__note { color: var(--text-dim); font-size: 12.5px; margin: 12px 0 6px; }
.note__time { color: var(--text-soft); }
.note__period { appearance: none; background: none; border: 0; color: var(--primary); font-size: 12.5px; cursor: pointer; }

.ranklist { display: flex; flex-direction: column; }
.rk { display: flex; gap: 11px; align-items: flex-start; padding: 10px 2px; border-bottom: 1px solid var(--border); text-decoration: none; }
.rk:hover { background: var(--surface-2); }
.rk__no { flex: 0 0 48px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rk__no b { font-size: 21px; font-weight: 800; color: var(--text); line-height: 1.05; }
.rk__no i { font-style: normal; font-size: 10.5px; color: var(--text-dim); }
.mv { font-size: 10.5px; font-weight: 800; }
.mv--up { color: #EF4444; }      /* 상승 = 빨강(한국식) */
.mv--down { color: #3B82F6; }    /* 하락 = 파랑 */
.mv--same { color: var(--text-dim); }
.mv--new { color: var(--gold); }
.rk__cover {
  flex: 0 0 auto; width: 131px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  background: linear-gradient(150deg, var(--gray-dark), var(--deep-purple));
  display: grid; place-items: center; color: var(--white); font-size: 20px; font-weight: 800;
}
.rk__cover img { width: 100%; height: 100%; object-fit: cover; }
/* 작은 표지 안에서는 첫 글자만 또렷하게 (전역 플레이스홀더 글자는 너무 크다) */
.rk__cover .cover-ph__char, .rankcard__cover .cover-ph__char { font-size: 21px; }
.rk__cover .cover-ph__note, .rankcard__cover .cover-ph__note { display: none; }
.rk__body { min-width: 0; flex: 1; }
.rk__title {
  color: var(--text); font-size: 14.5px; font-weight: 700; line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rk__title .up {
  display: inline-block; background: linear-gradient(120deg,#F59E0B,#EF4444); color: #fff;
  font-size: 10px; font-weight: 900; padding: 2px 5px; border-radius: 4px; margin-right: 5px; vertical-align: 2px;
}
.rk__author { color: var(--text-soft); font-size: 12.5px; margin: 3px 0 0; }
.rk__stats { color: var(--text-dim); font-size: 12px; margin: 4px 0 0; }
.rk__stats i { font-style: normal; color: var(--border); padding: 0 4px; }
.rk__tags { color: var(--text-dim); font-size: 11.5px; margin: 4px 0 0; }
.chip--free { background: rgba(16,185,129,.16); color: #34D399; }
.chip--paid { background: rgba(245,158,11,.16); color: #FBBF24; }


/* 하단 메뉴 아이콘(SVG) — 이모지 깨짐 방지 */
.bnav__icon svg { width: 22px; height: 22px; display: block; }
.bnav__icon { display: flex; align-items: center; justify-content: center; height: 22px; }
/* 하단 메뉴가 본문을 가리지 않게 (불투명 배경 + 아래 여백) */
.bnav { background: var(--bg); border-top: 1px solid var(--border); }
body.has-bnav main, body.has-bnav .rank { padding-bottom: 82px; }
.rk__no em { font-style: normal; font-size: 9.5px; color: var(--text-dim); }


/* ── 작품찾기 — 정렬·보기 전환 (문피아식 탐색) ───────────────────── */
.exrow { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-top: 10px; }
.exrow .rtabs { flex: 1; border-bottom: 0; }
.viewbtn {
  appearance: none; white-space: nowrap; cursor: pointer; font-size: 12.5px; padding: 6px 11px;
  border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--text-soft);
}
#ptabs, #ftabs { margin-top: 8px; }
.list-works { display: flex; flex-direction: column; }
.wcard__paid, .wcard__free {
  position: absolute; left: 6px; top: 6px; font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 5px;
}
.wcard__paid { background: rgba(245,158,11,.9); color: #1B1300; }
.wcard__free { background: rgba(16,185,129,.9); color: #04231A; }
.wcard__cover {
  position: relative; border-radius: var(--radius-card);
  background: linear-gradient(160deg, #2A2740 0%, #1B1E2B 100%);
  border: 1px solid var(--border);
}
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px 0 6px; }
.pager button { appearance: none; cursor: pointer; font-size: 13px; padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--text-soft); }
.pager button[disabled] { opacity: .35; cursor: default; }
.pager span { color: var(--text-dim); font-size: 13px; }


/* 작품 상세 — 태그 링크 · 최신화 NEW 뱃지 */
a.tag--link { text-decoration: none; }
a.tag--link:hover { border-color: var(--primary); color: var(--text); }
.ep-new {
  display: inline-block; background: linear-gradient(120deg,#7C3AED,#3B82F6); color: #fff;
  font-size: 9.5px; font-weight: 900; padding: 1px 5px; border-radius: 4px; margin-left: 5px; vertical-align: 1px;
}


/* 헤더 검색 단추 — 모든 화면 공통 */
.hdr-search { display: inline-flex; align-items: center; color: var(--text-soft); }
.hdr-search:hover { color: var(--text); }


/* 첫 화면 배너 — 슬라이드(문피아 상단 배너처럼 저절로 넘어감) */
.hero__slides { position: relative; min-height: 172px; }
.hero__slide { display: none; animation: heroFade .45s ease; }
.hero__slide.on { display: block; }
@keyframes heroFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hero__tag {
  display: inline-block; margin: 0 0 8px; padding: 3px 9px; border-radius: 999px;
  background: rgba(124,58,237,.18); color: #C4B5FD; font-size: 11.5px; font-weight: 800;
}
.hero__arrow {
  appearance: none; background: none; border: 0; cursor: pointer; color: var(--text-soft);
  font-size: 17px; line-height: 1; padding: 0 4px;
}
.hero__arrow:hover { color: var(--text); }
.dots i { cursor: pointer; }


/* ── 화면 안 빠른 이동 칩 (작가 스튜디오 등) — 엘마 2026-10-15 ── */
.qn { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.qn a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: var(--text-soft); background: var(--surface);
  border: 1px solid var(--border); text-decoration: none;
}
.qn a:hover { color: var(--brand); border-color: var(--brand); }
.qn--api { color: var(--brand) !important; border-color: var(--brand) !important; }
.qn--api::before { content: '🔗'; font-size: 12.5px; }
@media (max-width: 430px) { .qn a { padding: 6px 11px; font-size: 13px; } }

/* 설치 안내 띠 — 이모지 대신 SVG, 본문 아래 여백은 JS 가 확보한다 (엘마 2026-10-15) */
.install-bar__txt { display: inline-flex; align-items: center; gap: 6px; }


/* ── 미니홈피 '독자에게 열어 둘 것' 목록 — 체크박스·라벨 줄 맞춤 (엘마 2026-10-15)
 * 라벨과 설명을 한 줄에 이어 붙이면 줄바꿈이 다음 항목으로 넘어가 체크박스 열이 밀린다.
 * 행을 flex 로 고정하고 라벨/설명을 세로로 나눠 어떤 화면 폭에서도 열이 맞는다. */
.opens { margin: 4px 0 2px; }
.opens__row {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 2px; border-top: 1px solid var(--border); cursor: pointer;
}
.opens__row:first-child { border-top: 0; }
.opens__row:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); border-radius: 10px; }
.opens__row input {
  flex: 0 0 auto; width: 17px; height: 17px; margin: 3px 0 0;
  accent-color: var(--brand);
}
.opens__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.opens__txt > b { font-size: 14.5px; line-height: 1.35; }
.opens__txt > span { font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }
@media (max-width: 430px) { .opens__row { padding: 12px 2px; gap: 10px; } }

/* ── 붙여넣기 등록 상자 · 안내 페이지 공통 (엘마 2026-10-15) ── */
#impJson {
  width: 100%; min-height: 156px; background: #0d1117; color: #cbd5e1;
  border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6;
  resize: vertical;
}
#impJson:focus { outline: none; border-color: var(--brand); }
.g-kv { color: var(--text-dim); font-size: 12.5px; }

/* ── 작가 등록 화면: 단계 표시 · 도움말 물음표 · 위지위그 편집기 (엘마 2026-10-15) ── */
.step-note { font-size: 12.5px; font-weight: 500; color: var(--text-dim); margin-left: 6px; }
.qh {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-left: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 55%, transparent);
  font-size: 11.5px; font-weight: 700; cursor: pointer; vertical-align: middle;
}
.qh:hover, .qh:focus { background: var(--brand); color: #fff; outline: none; }
.helpbox {
  position: fixed; z-index: 60; max-width: 330px; padding: 14px 16px;
  background: #12161f; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55); font-size: 13.5px; line-height: 1.7; color: var(--text-soft);
}
.helpbox b { display: block; color: var(--text); font-size: 14.5px; margin-bottom: 6px; }
.helpbox__close { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--text-dim); cursor: pointer; font-size: 15px; }

.editor { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #0d1117; }
.editor__bar { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 9px; background: var(--surface); border-bottom: 1px solid var(--border); }
.ebtn {
  min-width: 32px; height: 30px; padding: 0 9px; border-radius: 8px; cursor: pointer;
  background: #171b24; border: 1px solid var(--border); color: var(--text-soft); font-size: 13px;
}
.ebtn:hover { color: var(--brand); border-color: var(--brand); }
.ebtn[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.ebtn__sep { width: 1px; background: var(--border); margin: 4px 3px; }
.ebtn--img { font-weight: 600; }
.editor__size { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 7px 9px; background: #10141b; border-bottom: 1px solid var(--border); }
.editor__size-lbl { font-size: 12px; color: var(--text-dim); margin-right: 2px; }
.editor__area { min-height: 320px; padding: 16px 16px 22px; font-size: 16px; line-height: 1.85; color: var(--text); outline: none; }
.editor__area:empty::before { content: attr(data-ph); color: var(--text-dim); font-size: 14px; }
.editor__area p { margin: 0 0 12px; }
.editor__area h2 { font-size: 19px; margin: 20px 0 10px; }
.editor__area h3 { font-size: 16.5px; margin: 18px 0 8px; }
.editor__area blockquote { margin: 16px 0; padding: 6px 0 6px 13px; border-left: 3px solid var(--brand); color: var(--text-soft); }
.editor__area hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }
.editor__area figure { margin: 18px 0; }
.editor__area img { max-width: 100%; height: auto; border-radius: 10px; display: block; cursor: pointer; }
.editor__area figure.on, .editor__area img.on { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 10px; }
.editor__area img[data-size="25"] { width: 25%; }
.editor__area img[data-size="50"] { width: 50%; }
.editor__area img[data-size="75"] { width: 75%; }
.editor__area img[data-size="100"] { width: 100%; }
.editor__area img[data-align="left"] { margin-right: auto; margin-left: 0; }
.editor__area img[data-align="center"] { margin-left: auto; margin-right: auto; }
.editor__area img[data-align="right"] { margin-left: auto; margin-right: 0; }
.editor__foot { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-top: 1px solid var(--border); background: var(--surface); font-size: 12.5px; color: var(--text-dim); }
.editor__hint { color: var(--text-dim); }
.editor__hint.bad { color: #F87171; }
.editor__hint.good { color: var(--mint, #34D399); }
.editor--drop { outline: 2px dashed var(--brand); }
@media (max-width: 700px) {
  .editor__area { min-height: 260px; font-size: 15.5px; padding: 13px; }
  .editor__bar { gap: 4px; padding: 7px; }
  .ebtn { min-width: 30px; height: 29px; padding: 0 8px; font-size: 12.5px; }
}

/* 넓은 화면(작가는 데스크탑 우선): 편집기는 두 칸을 다 쓰고, 좁은 화면에서는 한 칸씩 쌓인다 */
@media (min-width: 1000px) {
  .studio .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .studio #editorPanel { grid-column: 1 / -1; }
  .studio .editor__area { min-height: 420px; }
  .studio .lede { max-width: 760px; }
}

/* ── 홍보(공유) 창 ───────────────────────────────────────── */
.sharewrap { position: fixed; inset: 0; z-index: 80; background: rgba(15,23,42,.55);
  display: flex; align-items: flex-end; justify-content: center; padding: 0; }
@media (min-width: 640px) { .sharewrap { align-items: center; padding: 24px; } }
.sharebox { background: #fff; width: 100%; max-width: 520px; border-radius: 18px 18px 0 0;
  padding: 16px 16px 20px; max-height: 92vh; overflow-y: auto; }
@media (min-width: 640px) { .sharebox { border-radius: 18px; } }
.sharebox__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sharebox__head b { font-size: 1.06rem; color: #1c2b3a; }
.sharebox__x { border: 0; background: transparent; font-size: 1.1rem; color: #7c8794; cursor: pointer; padding: 4px 8px; }
.sharebox__lede { color: #6b7683; font-size: .82rem; margin: 0 0 10px; }
.sharebox__lbl { display: block; font-size: .82rem; font-weight: 700; color: #46525f; margin: 12px 0 6px; }
#shareText { width: 100%; border: 1px solid #d8dee5; border-radius: 12px; padding: 10px 12px;
  font: inherit; font-size: .92rem; line-height: 1.55; color: #1c2b3a; resize: vertical; }
.sharelinks { display: grid; gap: 8px; }
.sharel { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #e2e7ec; border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.sharel input { margin-top: 3px; }
.sharel span { display: flex; flex-direction: column; min-width: 0; }
.sharel b { font-size: .9rem; color: #1c2b3a; }
.sharel i { font-style: normal; font-size: .76rem; color: #8b95a1; overflow-wrap: anywhere; }
.sharechips { display: flex; flex-wrap: wrap; gap: 8px; }
.sharechip { border: 1px solid #d8dee5; background: #f8fafb; border-radius: 999px; padding: 9px 14px;
  font-size: .87rem; font-weight: 700; color: #3c4a58; cursor: pointer; }
.sharechip.on { border-color: #2f6f5e; background: #eef7f3; color: #245a4c; }
.sharenote { min-height: 20px; margin: 10px 0 0; font-size: .8rem; color: #2f6f5e; }
.sharenote.bad { color: #b4432f; }

.remember__note { color: var(--text-dim); font-size: 12px; }

/* ── 코드 예시는 줄바꿈하지 않고 한 줄로(넘치면 옆으로 스크롤) ── */
pre { white-space: pre; overflow-x: auto; max-width: 100%; }
/* ── 긴 설명은 좌우로 눌리지 않게 블록으로 ── */
.notice--block { display: block; }
.notice--block span:last-child { display: block; margin: 0; }
.keybox { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.keybox .keyline { flex: 1 1 auto; min-width: 0; margin: 0; }
.iconbtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: 16px; line-height: 1;
}
.iconbtn:hover { background: var(--surface-3, var(--surface-2)); border-color: var(--primary); }
.iconbtn.done { border-color: #34D399; color: #34D399; }

/* ── AI 표시 마크 — 제목 맨 앞(파파님 지시 2026-10-15) ── */
.keyline {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); overflow-x: auto; white-space: nowrap;
}
.keyline + .btn { margin-top: 8px; }
.ai-mark {
  display: inline-flex; align-items: center; vertical-align: middle;
  height: 18px; padding: 0 6px; margin-right: 6px; border-radius: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .4px;
  background: var(--grad-button); color: #fff;
}
/* ── 단추 여러 개를 나란히 둘 때 서로 붙지 않게 ── */
.btnrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.btnrow .btn { margin: 0; }
@media (max-width: 560px) {
  .btnrow { gap: 10px; }
  .btnrow .btn { flex: 1 1 100%; }   /* 좁은 화면에서는 한 줄에 하나씩 */
}

/* 로그인 영역은 항상 가로 한 줄 — span 이라 세로로 쌓여 헤더 밖으로 삐져나오던 문제 */
#authArea { display: flex; align-items: center; gap: 8px; }

/* ── 상단 헤더를 한 줄로 고정 (2026-10-15) — 메뉴가 두 줄로 접히거나 잘리던 문제 ── */
.header__row { flex-wrap: nowrap; }
/* overflow: hidden 은 커뮤니티 하위메뉴를 잘라 '무반응'처럼 보이게 했다(파파님 2026-10-15) */
.nav { min-width: 0; }
.nav a { white-space: nowrap; }
.header__actions { flex: 0 0 auto; }
/* 계정 메뉴(이름 ▾) — 내 서재·도토리·마이페이지·로그아웃을 여기로 모았다 */
.acct { position: relative; display: inline-flex; align-items: center; margin: 0; padding: 0; }
.acct__btn {
  display: inline-flex; align-items: center; gap: 6px; max-width: 160px;
  padding: 7px 12px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 14px;
}
.acct__btn:hover { border-color: var(--primary); }
.acct__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__caret { color: var(--text-dim); font-size: 11px; }
.acct__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 196px; z-index: 60;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}
.acct__menu[hidden] { display: none; }
.acct__menu a, .acct__menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: none;
  color: var(--text-soft); font-size: 14px; text-align: left; cursor: pointer;
}
.acct__menu a:hover, .acct__menu button:hover { background: var(--surface-2); color: var(--text); }
.acct__menu .sep { height: 1px; margin: 5px 8px; background: var(--border); }
.hdr-bell { position: relative; }
.hdr-bell .badge {
  position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #F87171; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700;
}
/* 화면이 좁으면 헤더 메뉴는 접는다 — 같은 항목이 ☰ 서랍에 모두 있다 */
@media (max-width: 1200px) { .header__row .nav { display: none; } }
@media (max-width: 700px) { .acct__btn { max-width: 104px; padding: 6px 10px; } .acct__name { max-width: 62px; } }

/* ── 좁은 화면 단추는 손가락으로 누를 수 있게 최소 높이를 준다 (2026-10-15) ── */
@media (max-width: 700px) {
  button, .btn, .gtabs button, .note__period, .g-copy { min-height: 34px; }
  .note__period { padding: 4px 8px; }
}

/* ── 작품 카드 글자 위계 (2026-10-15 파파님) — 제목이 가장 크고, 필명은 중간, 아래 정보는 작고 옅게 ── */
/* 작품찾기 카드(.wcard)도 제목 두 줄 고정·말줄임, 필명과 아래 줄은 붙인다 (파파님 2026-10-19) */
.wcard { display: flex; flex-direction: column; }
.wcard__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; text-overflow: ellipsis; min-height: 2.9em; max-height: 2.9em;
}
.wcard__sub { margin: 0 0 0 !important; line-height: 1.25; }
.wcard__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 랭킹 목록도 한 줄 고정 — 태그가 줄바꿈해 행 높이가 달라지던 것 */
.rk__tags { flex-wrap: nowrap !important; overflow: hidden; min-height: 28px; align-items: center; }
.rk__title, .rk__stats { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wcard__title {
  font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--text);
  margin: 9px 0 3px; letter-spacing: -0.2px;
}
.wcard__sub { font-size: 13px; font-weight: 500; color: var(--text-soft); margin: 0 0 5px; }
.wcard__meta { font-size: 11.5px; color: var(--text-dim); margin: 0; }
/* 홈 카드도 같은 위계로 */
.card__title { font-size: 15.5px; font-weight: 700; line-height: 1.45; color: var(--text); }
.card__author { font-size: 12.5px; color: var(--text-soft); }
.card__meta { font-size: 11.5px; color: var(--text-dim); }
/* 목록형(순위·최신)도 동일 */
.rk__title { font-size: 15.5px; font-weight: 700; color: var(--text); }
.rk__author { font-size: 12.5px; color: var(--text-soft); }
.rk__stats { font-size: 11.5px; color: var(--text-dim); }
@media (max-width: 700px) {
  .wcard__title, .card__title, .rk__title { font-size: 15px; }
  .wcard__sub, .card__author, .rk__author { font-size: 12.5px; }
  .wcard__meta, .card__meta, .rk__stats { font-size: 11px; }
}

/* ── 서랍 하단 '하단 메뉴 숨기기' — 체크박스 오른쪽에 글자를 둔다 (2026-10-15) ── */
#bnavToggleRow { display: flex; flex-direction: row; align-items: center; gap: 9px; padding: 6px 8px; cursor: pointer; }
#bnavToggleRow input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--primary); }
#bnavToggleRow span { white-space: nowrap; }
/* 하단 메뉴는 720px 이하에서만 보이므로, 넓은 화면에서는 이 항목 자체를 감춘다 */
@media (min-width: 721px) { #bnavToggleRow { display: none; } }

/* ── 헤더 하위 메뉴(커뮤니티 → 공지사항·이벤트·게시판) ── */
.nav__group { position: relative; display: inline-flex; }
.nav__parent {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 4px; padding: 0; color: inherit;
}
.nav__parent:hover { color: var(--text); }
.nav__caret { font-size: 10px; opacity: .75; }
.nav__sub {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 158px; padding: 6px; display: none; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45);
}
/* 마우스를 올리는 것만으로는 열지 않는다 — 커뮤니티를 눌러야 열린다(파파님 2026-10-15)
   (올리면 열리던 때는 추천·질문으로 마우스를 옮기는 사이에 닫혀 버렸다) */
.nav__group.open .nav__sub { display: block; }
.nav__sub a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 13.5px;
  color: var(--text-soft); white-space: nowrap; }
.nav__sub a:hover { background: var(--surface-2); color: var(--text); }
.nav__sub a.is-active { color: var(--text); font-weight: 700; background: var(--surface-2); }
.nav__group.is-active .nav__parent { color: var(--text); font-weight: 700; }

/* ── 로그인한 사람에게는 회원가입 안내를 보여 주지 않는다 (파파님 2026-10-15) ── */
html.is-member .footer__cta,
html.is-member .footer__col a[href="/signup"],
html.is-member .footer__col a[href^="/signup?"] { display: none; }
html.is-member .footer__cta--alt { display: flex; }
.footer__cta--alt { display: none; }

/* ── 헤더 오른쪽(로그인/계정)은 상태를 안 뒤에 보여 준다 ──
   '로그인'이 잠깐 보였다가 계정으로 바뀌는 깜빡임을 없앤다.
   스크립트가 실패해도 1.5초 뒤에는 무조건 보이게 해 헤더가 비지 않는다. */
#authArea { animation: authReveal 0s linear 1.5s forwards; }
html:not(.auth-ready) #authArea { visibility: hidden; }
@keyframes authReveal { to { visibility: visible; } }

/* 앱 설치 안내 — 한 번 닫아도 서랍 메뉴에서 언제든 다시 볼 수 있다 */
.snav__install {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; margin-bottom: 8px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-family: inherit; font-size: 13.5px; text-align: left;
}
.snav__install:hover { border-color: var(--purple); }
.appguide-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(4, 8, 18, .68);
  display: grid; place-items: center; padding: 18px; }
.appguide { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.appguide h3 { margin: 0 0 8px; font-size: 18px; }
.appguide__lede { margin: 0 0 12px; color: var(--text-soft); font-size: 13.5px; line-height: 1.7; }
.appguide__list { margin: 0 0 16px; padding-left: 20px; color: var(--text-soft); font-size: 13.5px; line-height: 1.9; }
.appguide__list b { color: var(--text); }

/* ── 입력 요소 기본 모양 (공통) ──
   화면마다 따로 정의해 두어, 정작 필요한 화면(게시판 댓글 등)에서
   흰 바탕 기본 입력칸이 나오던 문제를 막는다 (파파님 2026-10-15) */
.fld { margin-bottom: 12px; }
.fld label { display: block; font-size: 12.5px; color: var(--text-soft); margin-bottom: 6px; }
.fld input:not([type="checkbox"]):not([type="radio"]), .fld select, .fld textarea {
  width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 14.5px; font-family: inherit;
}
.fld textarea { min-height: 120px; resize: vertical; line-height: 1.75; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--text-dim); }
.fld input[type="checkbox"], .fld input[type="radio"] { width: auto; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--purple); }

/* ── 화면 어디에 놓인 입력칸이든 어둡게 (게시판 검색칸이 흰 바탕에 검은 글자로 나오던 문제) ──
   .search·.fld 안의 입력칸은 각자 규칙이 더 세밀해 그대로 유지된다. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select, textarea {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: 14.5px;
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }

/* ── 통일 다듬기 (2026-10-15 전 화면 점검) ── */
.btn { line-height: 1.15; }              /* 단추마다 줄높이가 달라 글자 위치가 흔들리던 것 */
.btn--white { font-size: 15px; }         /* 13.5px 로 작게 나오던 것 */
.ai-mark { line-height: 1; }             /* AI 표시가 문맥마다 다른 줄높이를 물려받던 것 */
/* 도토리(유료) 작품 표시 — 제목 앞 아이콘. 표지 위 배지 대신 쓴다(파파님 2026-10-19) */
.acorn-mark {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: -4px;
  width: 19px; height: 19px; margin-right: 5px; line-height: 1; background: transparent;
}
.acorn-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.acorn-mark svg { display: block; }
.acorn-mark--text { width: auto; padding: 0 6px 0 4px; gap: 3px; font-size: 10.5px; font-weight: 800; }
.panel { border-radius: var(--radius-card); }

/* ── 고객센터 — 글줄 목록 대신 카드 메뉴 (파파님 2026-10-15) ── */
.footer__col .fcard { display: grid; gap: 8px; margin-top: 4px; }
.footer__col .fcard__state { display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-dim); font-size: 12.5px; line-height: 1.4; }
.footer__col .fcard__state::before { content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #34D399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .16); }
.footer__col .fcard__row { display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text-soft); font-size: 13px; line-height: 1.35;
  text-decoration: none; transition: .16s; }
.footer__col .fcard__row:hover { border-color: var(--purple); color: var(--text);
  background: var(--surface-2); transform: translateY(-1px); }
.footer__col .fcard__icon { font-size: 15px; line-height: 1; }
.footer__col .fcard__t { display: block; }
.footer__col .fcard__t b { color: var(--text-dim); font-size: 11.5px; font-weight: 400; margin: 1px 0 0; }
.footer__col .fcard__arrow { margin-left: auto; color: var(--text-dim); font-size: 15px; }

/* 약관·정책 아래 문의 줄 — 한 줄씩, 메일 주소만 링크 */
.footer__col .footer__mail { display: block; color: var(--text-dim); font-size: 13px; line-height: 1.85; }
.footer__col .footer__mail a { display: inline; color: var(--text-soft); }
.footer__col .footer__mail a:hover { color: var(--text); text-decoration: underline; }

.footer__col .fcard__icon { display: grid; place-items: center; width: 17px; height: 17px; color: var(--purple-soft, #A78BFA); }
.footer__col .fcard__icon svg { display: block; }

/* ── 표지·삽화 이미지 규격 (파파님 2026-10-15) ──
   · 대표이미지(작품 표지) = 세로 4:3  → .card__cover / .work-cover / .wcard__cover
   · 그 밖의 목록·삽화    = 가로 4:3  → .row__thumb / .rankcard__cover / .rk__cover / 본문 삽화
   원본 크기·비율이 어떻든 칸 비율을 지키고, 넘치는 부분은 잘라 쓴다(object-fit: cover). */
.card__cover, .work-cover, .wcard__cover { aspect-ratio: 3 / 4; }
.row__thumb, .rankcard__cover, .rk__cover { aspect-ratio: 4 / 3; }
.card__cover, .work-cover, .wcard__cover, .row__thumb, .rankcard__cover, .rk__cover { overflow: hidden; }
.card__cover img, .work-cover img, .wcard__cover img, .row__thumb img,
.rankcard__cover img, .rk__cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 본문 그림은 이제 잘라 쓰지 않는다 — 원본 비율 그대로, 크기·배치는 작가가 정한다(아래 .ep-body 규칙). */

/* 표지 칸은 모두 같은 방식으로 — 자리표시자는 가운데, 이미지는 칸을 가득 채우고 잘라 쓴다 */
.card__cover, .work-cover, .wcard__cover, .row__thumb, .rankcard__cover, .rk__cover {
  display: grid; place-items: center;
}

/* 표지 이미지는 칸에 딱 맞춘다 — 칸보다 커져도 잘라서 보여 준다(비율 유지) */
.card__cover, .work-cover, .wcard__cover, .row__thumb, .rankcard__cover, .rk__cover { position: relative; }
.card__cover > img, .work-cover > img, .wcard__cover > img, .row__thumb > img,
.rankcard__cover > img, .rk__cover > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* ══ 본문 렌더링 공통 규칙 ══════════════════════════════════════════
   작가 편집 화면(.editor__area)과 독자 화면(.reader__body)이 **같은 규칙**을 쓴다.
   그래서 쓰는 그대로가 구독자가 보는 화면이 된다. (파파님 기획서 5장)
   · 그림 크기 = style="width:NN%" (칸 폭에 대한 비율 — 화면이 좁아지면 같이 줄어든다)
   · 정렬 = data-align(left|center|right)   · 글 흐름 = data-layout(block|float-left|float-right) */
/* 본문 글꼴과 크기는 작가가 바꿀 수 없다 — 보는 사람이 편하도록 한 가지로 고정한다(파파님 지시).
   붙여넣거나 외부에서 올린 글에 글꼴·크기가 섞여 들어와도 여기서 되돌린다. */
.ep-body { position: relative;   /* 자유 위치 그림의 기준 */
  font-size: var(--reader-fs, 17px); line-height: 1.9; color: var(--text); word-break: keep-all;
  font-family: var(--reader-ff, 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif); }
.ep-body p, .ep-body li, .ep-body blockquote, .ep-body figcaption, .ep-body span, .ep-body div,
.ep-body b, .ep-body strong, .ep-body i, .ep-body em, .ep-body u, .ep-body s {
  font-family: inherit; }
.ep-body [style*="font-size"], .ep-body [style*="font-family"], .ep-body [style*="line-height"] {
  font-size: inherit !important; font-family: inherit !important; line-height: inherit !important; }
.ep-body font { font-size: inherit; font-family: inherit; }
.ep-body p { margin: 0 0 1.15em; }
/* 붙여넣은 글 — 줄바꿈·줄간격·띄어쓰기·들여쓰기를 그대로 보여 준다 */
.ep-body p[data-ws="pre"] { white-space: pre-wrap; }
.editor__area p[data-ws="pre"] { white-space: pre-wrap; }
.ep-body h2 { font-size: 21px; margin: 1.6em 0 .6em; }
.ep-body h3 { font-size: 18.5px; margin: 1.4em 0 .5em; }
.ep-body blockquote { border-left: 3px solid var(--primary); padding: 4px 0 4px 16px; margin: 1.3em 0;
  color: var(--text-soft); font-style: italic; }
.ep-body hr { border: 0; border-top: 1px solid var(--border); margin: 1.8em 0; }
.ep-body ul, .ep-body ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.ep-body li { margin: 0 0 .35em; }
.ep-body figure.ep-img { margin: 22px 0; max-width: 100%; }
.ep-body figure.ep-img img { width: 100%; height: auto; display: block; border-radius: 10px; }
.ep-body figure.ep-img figcaption { margin-top: 8px; font-size: 13px; color: var(--text-dim); text-align: center; }
.ep-body figure.ep-img[data-align="left"] { margin-right: auto; margin-left: 0; }
.ep-body figure.ep-img[data-align="center"] { margin-left: auto; margin-right: auto; }
.ep-body figure.ep-img[data-align="right"] { margin-left: auto; margin-right: 0; }
.ep-body figure.ep-img[data-layout="float-left"] { float: left; margin: 6px 20px 14px 0; }
.ep-body figure.ep-img[data-layout="float-right"] { float: right; margin: 6px 0 14px 20px; }
/* 자유 위치 — 글은 그대로 두고 그림만 마우스로 이리저리 옮긴 자리에 놓인다 */
/* 자유 위치 — 글은 그림 둘레로 글자 단위로 흘러 피한다(겹치지 않는다).
   가로는 여백(%), 세로는 놓인 자리(문단 사이)로 정해진다. */
.ep-body figure.ep-img[data-layout="free"] { float: left; width: 50%; margin: 6px 20px 14px 0; }
.ep-body figure.ep-img[data-layout="free"][data-wrap="right"] { float: right; margin: 6px 0 14px 20px; }
.ep-body::after { content: ''; display: block; clear: both; }
.ep-body figure.ep-img:not([style]) img[data-size="25"] { width: 25%; }
.ep-body figure.ep-img:not([style]) img[data-size="50"] { width: 50%; }
.ep-body figure.ep-img:not([style]) img[data-size="75"] { width: 75%; }
.ep-body figure.ep-img:not([style]) img[data-size="100"] { width: 100%; }
@media (max-width: 720px) {
  .ep-body { font-size: 16.5px; line-height: 1.85; }
  .ep-body figure.ep-img[data-layout="float-left"],
  .ep-body figure.ep-img[data-layout="float-right"] { float: none; width: 100% !important; margin: 18px 0; }
  /* 좁은 화면에서는 자유 위치를 풀고 문단 사이 그림으로 되돌린다(글자를 덮지 않게) */
  .ep-body figure.ep-img[data-layout="free"] { float: none; width: 100% !important; margin: 18px 0 !important; }
  .ep-body figure.ep-img { max-width: 100%; }
}

/* ── 본문 미리보기 (독자 화면 그대로) ───────────────────────────── */
.ep-prev { position: fixed; inset: 0; z-index: 95; background: rgba(4,7,14,.82); backdrop-filter: blur(3px); }
.ep-prev__box { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(1000px, 96vw); max-height: 94vh; display: flex; flex-direction: column;
  background: var(--surface, #121826); border: 1px solid var(--border, #2A2740); border-radius: 16px; padding: 16px; }
.ep-prev__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ep-prev__head b { font-size: 16px; }
.ep-prev__head span { font-size: 12.5px; color: var(--text-dim, #93A0B8); margin-right: 6px; }
.ep-prev__stage { overflow: auto; background: var(--bg, #0B1220); border: 1px solid var(--border, #2A2740);
  border-radius: 12px; padding: 22px; }
.ep-prev__stage.mo { padding: 0; display: flex; justify-content: center; background: #0B1220; }
.ep-prev__body { max-width: 760px; margin: 0 auto; }
.ep-prev__stage.mo .ep-prev__body { width: 390px; max-width: 390px; padding: 18px 16px; background: var(--surface, #121826);
  border-left: 1px solid var(--border, #2A2740); border-right: 1px solid var(--border, #2A2740); min-height: 100%; }
/* 모바일 미리보기에서는 좁은 화면 규칙이 그대로 적용된다 — 좌우 붙임은 위아래로 펴진다 */
.ep-prev__stage.mo .ep-body figure.ep-img[data-layout="float-left"],
.ep-prev__stage.mo .ep-body figure.ep-img[data-layout="float-right"] { float: none; width: 100% !important; margin: 18px 0; }
/* 미리보기 '모바일 보기' 에서도 자유 위치는 풀어 준다(글자를 덮지 않게) */
.ep-prev__stage.mo .ep-body figure.ep-img[data-layout="free"] { float: none; width: 100% !important; margin: 18px 0 !important; }

/* ── 그림 설명 입력칸 ── */
.editor__cap { flex: 1 1 160px; min-width: 120px; padding: 5px 10px; font-size: 13px; border-radius: 8px;
  background: var(--bg, #0B1220); border: 1px solid var(--border, #2A2740); color: var(--text, #E6E9F2); }
/* ── 임시 저장 안내 줄 ── */
.editor__draft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px;
  padding: 9px 12px; border-radius: 10px; font-size: 13px;
  background: color-mix(in srgb, var(--primary, #6C5CE7) 14%, transparent); border: 1px solid var(--border, #2A2740); }
.editor__draft .ebtn { padding: 4px 10px; }

.editor__saved { font-size: 12.5px; color: var(--text-dim, #93A0B8); }


/* ── 히어로(대문) 배너 렌더링 보정 — 2026-10-17 ──────────────────────────
   ★배경 그림은 1600×667 이다. background-size 규칙이 없으면 원본 크기로 깔려
     좁은 화면에서는 그림 일부만 1:1 로 잘려 그라데이션처럼 보인다(실측).
   ★.hero 는 자식이 3개(슬라이드·안내문·페이저)라 가로 flex 로 두면 서로 겹친다 → 세로 배치. */
.hero { display: flex; flex-direction: column; align-items: stretch; }
.hero__slides { flex: 1 1 auto; width: 100%; min-height: 340px; display: flex; align-items: flex-end; }
.hero__slide {
  width: 100%; min-height: 340px; position: relative;
  background-size: cover; background-position: center 32%; background-repeat: no-repeat;
}
.hero__slide.on { display: flex; align-items: flex-end; }
.hero__slide::before {              /* 글자가 그림 위에서 읽히도록 어둡게 깔아 준다 */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(9,12,18,.32) 0%, rgba(9,12,18,.10) 34%, rgba(9,12,18,.86) 100%),
    linear-gradient(90deg, rgba(9,12,18,.74) 0%, rgba(9,12,18,0) 68%);
}
.hero__body { position: relative; z-index: 2; width: 100%;
  padding: clamp(20px, 3.2vw, 34px) clamp(18px, 3.4vw, 36px) clamp(16px, 2.4vw, 26px); }
.hero__note { padding: 10px 2px 0; color: var(--text-soft); font-size: 13px; }
.hero__foot { padding: 0 2px 2px; margin-top: 10px; }
@media (max-width: 640px) {
  .hero, .hero__slides, .hero__slide { min-height: 262px; }
  .hero__slide { background-position: center 30%; }
  .hero__body { padding: 18px 16px 16px; }
}

/* 대문은 가로:세로 = 16:9 — 폭은 그대로 두고 높이만 줄인다 (파파님 2026-10-19)
   ★aspect-ratio 를 못 쓰는 브라우저에서도 똑같이 보이도록 padding-bottom(75%) 방식으로 잡는다. */
@media (max-width: 720px) {
  .hero { min-height: 0 !important; }
  .hero__slides {
    position: relative !important; display: block !important;
    height: 0 !important; min-height: 0 !important;
    padding-bottom: 56.25% !important;       /* 16:9 — 대문 그림 원본 비율에 맞춰 덜 잘리게 */
  }
  .hero__slide {
    position: absolute !important; inset: 0 !important;
    height: 100% !important; min-height: 0 !important;
    background-size: cover; background-position: center 30%;
  }
  .hero__slide.on { display: block !important; }
  /* 16:9 로 낮아진 만큼 대문 글자도 줄여 넘치지 않게 */
  .hero__body { position: absolute !important; left: 0; right: 0; bottom: 0;
    padding: 14px 14px 14px !important; }
  .hero__body .hero__tag { font-size: 11px !important; padding: 3px 9px !important; margin: 0 0 6px !important; }
  .hero__body h1 { font-size: 20px !important; line-height: 1.28 !important; margin: 0 0 4px !important; }
  .hero__body p { font-size: 12.5px !important; margin: 0 !important; }
  /* 넘김 단추(‹ 2/4 ›, 점)는 대문 오른쪽 위로 — 아래에 두면 제목과 겹친다 */
  .hero__foot { position: absolute !important; top: 8px; right: 10px; bottom: auto !important;
    left: auto !important; margin: 0 !important; padding: 0 !important; z-index: 4; }
  .hero__foot > * { transform: scale(.92); transform-origin: top right; }
}

/* ── 이미지 편집 패널 정리 (2026-10-17 파파님 지시) ─────────────────────
   ① 크기 버튼(25/50/75/전체) 삭제 — 마우스로 드래그해 조절(그림 위 배지에 % 표시)
   ② 자유 위치에서는 '정렬·위로/아래로' 감춤(.be-off) — 마우스 드래그로 처리
   ③ 이미지 배치 편집은 데스크탑(마우스) 전용 — 터치 전용 기기·좁은 창에서는 감춤(.be-nodesk, JS 판정)
   ★CSS 판정은 JS 판정(be-nodesk)과 같은 기준을 써야 한다 — 폭 기준을 CSS 에만 넣으면
     JS 는 편집 허용인데 메뉴만 사라지는 불일치가 생긴다(실측 2026-10-17). */
.editor__size-hint { color: var(--text-dim); }
.img-mobile-note, .img-mobile-note-static { display: none; }
#imgPanel.be-nodesk .ebtn[data-bsize], #imgPanel.be-nodesk .ebtn[data-balign],
#imgPanel.be-nodesk .ebtn[data-blayout], #imgPanel.be-nodesk .ebtn[data-bgrp],
#imgPanel.be-nodesk .ebtn__sep, #imgPanel.be-nodesk .editor__size-lbl { display: none !important; }
#imgPanel.be-nodesk .img-mobile-note { display: block !important; flex: 1 1 100%; }
@media (pointer: coarse) {
  #imgPanel .ebtn[data-bsize], #imgPanel .ebtn[data-balign], #imgPanel .ebtn[data-blayout],
  #imgPanel .ebtn[data-bgrp], #imgPanel .ebtn__sep, #imgPanel .editor__size-lbl { display: none !important; }
  #imgPanel .img-mobile-note { display: block !important; flex: 1 1 100%; }
  .img-mobile-note-static { display: inline !important; }
  .ep-body figure .be-handles { display: none !important; }
}
/* 좁은 창에서도 안내는 보이게(JS 가 편집을 막는 폭) */
@media (max-width: 600px) { .img-mobile-note-static { display: inline !important; } }

/* ── 좌측 메뉴 = 대분류 3개 + 아코디언 (2026-10-17 파파님 지시) ────────────────
   「홈 · 독자메뉴 · 작가메뉴」 세 덩어리로 나누고, 덩어리를 눌러 접었다 펼 수 있게 한다.
   ★아코디언 본문은 display 토글로 처리한다(max-height 애니메이션은 항목이 늘면 잘린다). */
.snav__group { display: flex; flex-direction: column; gap: 2px; }
.snav__group-head {
  appearance: none; width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent;
  color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; text-align: left;
}
.snav__group-head:hover { background: var(--surface-2); }
.snav__group.on > .snav__group-head { background: var(--surface-2); border-color: var(--border); }
.snav__dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.snav__caret { margin-left: 6px; color: var(--text-dim); font-size: 11px; transition: transform .16s ease; }
.snav__group-head:not(.has-on) .snav__caret { margin-left: auto; }
.snav__group.on > .snav__group-head .snav__caret { transform: rotate(90deg); }
.snav__group-body {
  display: none; flex-direction: column; gap: 2px;
  padding: 2px 0 6px 8px; margin-left: 9px; border-left: 1px solid var(--border);
}
.snav__group.on > .snav__group-body { display: flex; }
.snav__group-body a { padding: 8px 10px; font-size: 13.5px; }
.snav__group-body a .snav__icon { font-size: 14px; width: 18px; }

/* 좌측 서랍은 앱 설치 안내(200)·설치 바(120)보다 위에 — 메뉴가 가려지면 안 된다(실측 2026-10-17) */
.snav-overlay { z-index: 205; }
.snav { z-index: 210; }
body.snav-open .install-bar { display: none !important; }
body.snav-open .appguide-overlay { display: none !important; }

/* 사이트 헤더가 없는 화면(작가 스튜디오)의 메뉴 줄 — 홈으로 나가는 길 (2026-10-17) */
.snav-home-row { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.snav-home-row .snav-toggle { width: 34px; height: 34px; flex: 0 0 auto; }
.snav-home-link {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.snav-home-link:hover { border-color: var(--purple); }

/* ── 작품 카드의 '관심 담기' 단추 (2026-10-17 파파님 지시) ─────────────────────
   카드 전체가 <a> 라 단추는 덮개(__cover) 안에 절대 위치로 얹고, 클릭은 카드 이동과 분리한다. */
.subbtn {
  position: absolute; right: 6px; top: 6px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(10,12,20,.72); color: var(--text);
  font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.45);
  backdrop-filter: blur(2px); transition: background .15s ease, border-color .15s ease;
}
.subbtn:hover { border-color: var(--purple); }
.subbtn.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.subbtn:disabled { opacity: .55; cursor: default; }
/* 작은 표지(랭킹·베스트 목록)는 단추도 작게 */
.rankcard__cover .subbtn, .rk__cover .subbtn { width: 24px; height: 24px; font-size: 12px; right: 4px; top: 4px; }
.subtoast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(10px);
  bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 220;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 14px; font-size: 13px; color: var(--text); box-shadow: 0 10px 26px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; max-width: 86vw;
}
.subtoast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 721px) { .subtoast { bottom: 22px; } }

/* ── 첫 화면 대문: 큰 이미지 4장 슬라이드 (엘마 2026-10-17 · 파파님 지시) ───────
   기존 텍스트 배너 규칙을 덮어쓴다. 이미지는 /assets/img/hero/ 1600×667(2.4:1).
   ★ 이 블록은 반드시 아래(뒤)에 있어야 위쪽 옛 규칙을 이긴다. */
.hero {
  display: block; min-height: clamp(300px, 30vw, 430px);
  background: #0b0b12;                     /* 그림 오기 전 바탕(번쩍임 방지) */
}
.hero__slides { position: absolute; inset: 0; min-height: 0; }
.hero__slide {
  position: absolute; inset: 0; display: block; opacity: 0; animation: none;
  background-size: cover; background-position: center 38%; background-repeat: no-repeat;
  transition: opacity .65s ease;
}
.hero__slide::before { content: none; }    /* 위쪽 옛 규칙의 어둡게 깔기가 겹치지 않게 끈다 */
.hero__slide.on { opacity: 1; }
.hero__slide::after {                      /* 글자 가독성 — 왼쪽·아래를 어둡게 */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,6,12,.94) 0%, rgba(6,6,12,.78) 32%, rgba(6,6,12,.20) 64%, rgba(6,6,12,.60) 100%),
    linear-gradient(0deg, rgba(6,6,12,.90) 0%, rgba(6,6,12,0) 48%);
}
.hero__body {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: 30px 36px 34px; max-width: min(680px, 70%);
}
.hero h1 { color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .6); }
.hero p { color: rgba(236, 236, 246, .88); text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.hero__body .hero__tag { background: rgba(124, 58, 237, .34); color: #E4DBFF; backdrop-filter: blur(4px); }
.hero__note {
  position: absolute; top: 16px; right: 20px; z-index: 3;
  font-size: 12.5px; color: rgba(236, 236, 246, .80);
  background: rgba(10, 10, 18, .46); border: 1px solid rgba(255, 255, 255, .10);
  padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px);
}
.hero__foot { position: absolute; right: 18px; bottom: 16px; z-index: 3; margin: 0; }
.hero__foot > span:first-child { flex: 0 0 auto; min-width: 0; }
.hero__pager {
  background: rgba(10, 10, 18, .52); border: 1px solid rgba(255, 255, 255, .10);
  padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(6px);
}
.hero__pager #heroCount { color: rgba(240, 240, 250, .88); font-size: 12.5px; }
.hero__arrow { color: #fff; font-size: 18px; }
.hero .dots i { background: rgba(255, 255, 255, .32); }
.hero .dots i.on { background: #fff; }
@media (max-width: 720px) {
  .hero { min-height: 330px; }
  .hero__slide { background-position: center 34%; }
  .hero__body { max-width: 100%; padding: 20px 18px 58px; }
  .hero__body h1 { font-size: 24px; }
  .hero__note { display: none; }
  .hero__foot { left: 18px; right: auto; bottom: 12px; }
}


/* ── 랭킹 목록 배치 (파파님 2026-10-19) ─────────────────────────
   데스크탑: 2단으로 채우고 번호는 세로로 흐르게 1/6, 2/7, 3/8, 4/9, 5/10 → 11/16 …
   모바일  : 지금처럼 한 줄에 하나 */
.rk-block { display: block; }
.rk-block + .rk-block { margin-top: 0; }
@media (max-width: 899px) {
  .rk__cover { width: 120px; border-radius: 8px; }   /* 4:3 — 1위 기준 AI 배지~무협 줄 높이(90px)에 맞춤 */
  .rk { gap: 10px; padding: 12px 2px; }
  .rk__no { flex: 0 0 38px; }
  .rk__no b { font-size: 19px; }
  /* 글자 4줄 높이를 줄여 표지(120px)보다 낮게 — 표지가 글자보다 커 보이도록 */
  .rk__title { font-size: 14px; line-height: 1.25; }
  .rk__author { margin: 2px 0 0; }
  .rk__stats { margin: 2px 0 0; }
  .rk__tags { margin: 2px 0 0; }
}
@media (min-width: 900px) {
  .rk-block {
    display: grid;
    grid-template-columns: 1fr 1fr;       /* 두 단 */
    grid-template-rows: repeat(10, auto); /* 열 줄씩 — 왼쪽 1~10위, 오른쪽 11~20위 */
    grid-auto-flow: column;
    column-gap: 30px;
  }
  .rk { align-items: center; }
}

/* ── 예약 발행 (스튜디오) ───────────────────────────────── */
.ep-sched { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); }
.ep-sched > label { font-size: 12px; color: var(--text-dim); }
.ep-sched input[type="datetime-local"] {
  font-size: 12px; font-family: inherit; padding: 4px 7px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2, #1b1e24); color: inherit;
}
.ep-sched #epSchedNow { font-size: 12px; font-weight: 600; }
.st-pill--sched { background: rgba(108, 156, 247, .14); color: #6C9CF7; border: 1px solid rgba(108, 156, 247, .35); }