/* 12차 색 (사드 확정 · shots/색시안_라이트그린.png · 색시안_다크골드.png 와 같은 값) — 보라 0
   라이트(기본): 흰 바탕 #FFFFFF · 글자 #111 · 포인트 딥그린 #0F5132 · 골드 #B8862B 는 배지·멤버십 칩에만 조금
   다크(헤더 ☀/🌙): 바탕 #0B0B0B · 카드 #161616 · 글자 #F5F5F5 · 포인트 골드 #C9A227
   처음엔 시스템 설정(prefers-color-scheme), 누르면 localStorage 에 기억 (public/theme.js) */
:root {
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --card-rgb: 255, 255, 255;
  --topbar: #FFFFFF;
  --line: #E6E6E6;
  --text: #111111;
  --text-2: #333333;
  --sub: #555555;
  --faint: #6B6B6B;
  --accent: #0F5132;
  --accent-rgb: 15, 81, 50;
  --accent-ink: #0B3D26;
  --accent-2: #3E8A63;
  --accent-soft: #E8F1EC;
  --accent-soft-2: #D3E6DB;
  --on-accent: #FFFFFF;
  --on-accent-rgb: 255, 255, 255;
  --soft: #F5F5F5;
  --hover: #EDEDED;
  --track: #EAEAEA;
  --track-strong: #D4D4D4;
  --sk1: #ECECEC;
  --sk2: #F7F7F7;
  --ink-block: #111111;
  --gold: #B8862B;
  --gold-soft: #F6EEDC;
  --gold-ink: #7A5518;
  --on-gold: #111111;
  --ok: #12a150;
  --ok-soft: #E7F7EE;
  --ok-tint: #F4FAF6;
  --danger: #e5484d;
  --logo-fill: #0F5132; /* 헤더 로고(eon8_logo.svg) 색 */
  --wordmark-fill: #0F5132; /* 로그인·푸터 워드마크 색 */
  --radius: 16px;
  --shadow: 0 0 0 1px #EEEEEE, 0 8px 24px rgba(0, 0, 0, .05);
  color-scheme: light;
  font-family: Pretendard, "Pretendard Variable", "Malgun Gothic", "Apple SD Gothic Neo", -apple-system, "Noto Sans KR", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
:root[data-theme="dark"] {
  --bg: #0B0B0B;
  --card: #161616;
  --card-rgb: 22, 22, 22;
  --topbar: #0B0B0B;
  --line: #2A2A2A;
  --text: #F5F5F5;
  --text-2: #DADADA;
  --sub: #B3B3B3;
  --faint: #9A9A9A;
  --accent: #C9A227;
  --accent-rgb: 201, 162, 39;
  --accent-ink: #DDB84A;
  --accent-2: #8A6F1A;
  --accent-soft: #2A2412;
  --accent-soft-2: #3A3218;
  --on-accent: #0B0B0B;
  --on-accent-rgb: 11, 11, 11;
  --soft: #1E1E1E;
  --hover: #262626;
  --track: #2A2A2A;
  --track-strong: #3A3A3A;
  --sk1: #1C1C1C;
  --sk2: #262626;
  --ink-block: #262626;
  --gold: #C9A227;
  --gold-soft: #2A2412;
  --gold-ink: #E0BC4A;
  --on-gold: #0B0B0B;
  --ok: #12a150;
  --ok-soft: #12261A;
  --ok-tint: #121A15;
  --danger: #EF5B5F;
  --logo-fill: #FFFFFF;
  --wordmark-fill: #C9A227;
  --shadow: 0 0 0 1px #222222, 0 8px 24px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; background: var(--bg); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
main.wrap { flex: 1; padding-top: 20px; padding-bottom: 48px; }
main.wrap.flush { padding-top: 0; }

/* 상단바 */
.topbar { position: sticky; top: 0; z-index: 20; height: 60px; background: var(--topbar); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; gap: 12px; box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; letter-spacing: -.04em; flex: none; }
/* 12차 헤더 로고: "EON8" 글자 없이 로고만 (public/brand/eon8_logo.svg). 높이 PC 28px · 폰 24px
   라이트 = 같은 모양을 fill 변수(--logo-fill, 딥그린 #0F5132)로 칠함 · 다크 = eon8_logo_white.svg 그대로. 파일이 없으면 글자 "EON8" */
.brand-word { display: inline-flex; align-items: center; height: 28px; font-size: 24px; line-height: 1; font-weight: 800; letter-spacing: .02em; color: var(--text); }
.brand-logo, .brand-logo-l { display: block; height: 28px; width: auto; aspect-ratio: 4520 / 2522; max-width: 160px; }
.brand-logo-l { background: var(--logo-fill); -webkit-mask: url("/brand/eon8_logo.svg") center / contain no-repeat; mask: url("/brand/eon8_logo.svg") center / contain no-repeat; }
:root:not([data-theme="dark"]) .brand-logo[data-dark], :root[data-theme="dark"] .brand-logo-l { display: none; }
.brand-word[hidden], .brand-logo[hidden], .brand-logo-l[hidden], .brand-mark[hidden] { display: none; }
@media (max-width: 700px) { .brand-word { height: 24px; font-size: 21px; } .brand-logo, .brand-logo-l { height: 24px; max-width: 132px; } }
/* 12차 ☀/🌙 라이트·다크 바꾸기 (헤더 맨 오른쪽) */
.nav { margin-left: auto; }
.theme-btn { flex: none; }
.theme-btn .t-sun, :root[data-theme="dark"] .theme-btn .t-moon { display: none; }
:root[data-theme="dark"] .theme-btn .t-sun { display: block; }
.brand-mark { width: 28px; height: 28px; border-radius: 9px; background: var(--accent); display: grid; place-items: center; }
.brand-mark svg { width: 16px; height: 16px; }
/* 결제 · 스튜디오 화면 상단은 글자 로고만 (디자인2/06·07) */
body.pay-mode .brand-mark, body.studio-mode .brand-mark { display: none; }
body.pay-mode .brand, body.studio-mode .brand { font-size: 15px; }
body.pay-mode .nav > :not(.ic-wallet) { display: none; }
.nav { display: flex; align-items: center; gap: 4px; position: relative; }
.menu { position: absolute; right: 0; top: 46px; background: var(--card); border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .14); padding: 6px; min-width: 200px; display: none; }
.menu.open { display: block; }
.menu a, .menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: 0; background: none; cursor: pointer; font-size: 14px; }
.menu a:hover, .menu button:hover { background: var(--soft); }
.menu-me { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 14px; }
@media (max-width: 800px) { .topbar { padding: 0 12px; } .nav { gap: 0; } }

/* 버튼: 주 버튼 하나만 진한 보라, 나머지는 흰색·연보라 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--card); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); font-weight: 700; font-size: 15px; cursor: pointer; transition: background .15s, box-shadow .15s; }
.btn:hover { background: var(--soft); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 6px 16px rgba(var(--accent-rgb), .25); }
.btn.primary:hover { background: var(--accent-ink); }
.btn.soft { background: var(--accent-soft); border-color: transparent; color: var(--accent); box-shadow: none; }
.btn.sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.danger { color: var(--danger); }

/* 카드 공통 */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.pad { padding: 18px; }
.muted { color: var(--sub); }
.faint { color: var(--faint); font-size: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.stack > * + * { margin-top: 12px; }
.grid { display: grid; gap: 12px; }
.section-title { font-size: 22px; font-weight: 800; margin: 28px 0 12px; letter-spacing: -.03em; }
.page-title { font-size: 26px; font-weight: 800; letter-spacing: -.04em; margin: 4px 0 4px; }
.page-title.big { font-size: 32px; margin: 0; }
.card-h { font-size: 20px; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--soft); color: var(--sub); }
.pill.accent { background: var(--accent-soft); color: var(--accent); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: #fff4e0; color: #b26a00; }
.avatar { border-radius: 50%; object-fit: cover; background: var(--accent-soft); flex: none; }
.avatar-ph { border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }

/* 랜딩 */
.landing { padding: 0 4px; }
/* 외부 테스터용 안내 띠: 문구 단위로 줄바꿈 */
.test-band { margin: 16px 0 0; padding: 10px 14px; border-radius: 12px; background: #FFF6DB; border: 1px solid #F3DF9C; color: #6B4E00; font-size: 13px; font-weight: 700; line-height: 1.55; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.test-band span { display: inline-block; max-width: 100%; }
.test-band span + span::before { content: '·'; margin: 0 7px; font-weight: 400; opacity: .6; }
/* 16차-1b BETA_TOOLS 꺼짐(정식): 테스트 띠 · 가상 결제 띠 · 테스트 상태로 복구 숨김 */
[data-nobeta] .test-band, [data-nobeta] .ep-foot, [data-nobeta] .ps-foot, [data-nobeta] #reset-box { display: none !important; }
@media (max-width: 480px) {
  .test-band { text-align: left; }
  .test-band span { display: block; }
  .test-band span:first-child { margin-bottom: 2px; }
  .test-band span + span::before { margin: 0 6px 0 2px; }
}
.feedback-cta { text-align: center; padding: 8px 0 56px; }
.feedback-cta .btn { margin-top: 10px; }
/* 랜딩 (디자인2/03·04) */
.hero { padding: 44px 0 20px; text-align: center; }
.hero h1 { margin: 0 auto 10px; max-width: 680px; font-size: 44px; line-height: 1.2; font-weight: 800; letter-spacing: -.045em; white-space: pre-line; }
.hero .sub { margin: 0 auto; max-width: 480px; color: var(--faint); font-size: 16px; line-height: 1.6; }
.hero .cta { display: inline-flex; align-items: center; height: 48px; padding: 0 20px; margin-top: 18px; border-radius: 14px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 16px; box-shadow: 0 10px 22px rgba(var(--accent-rgb), .28); }
.hero .cta:hover { background: var(--accent-ink); }
.logins { display: flex; gap: 8px; justify-content: center; margin: 14px 0 8px; flex-wrap: wrap; }
.lbtn { height: 44px; border-radius: 14px; border: 0; background: var(--card); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 0 14px; cursor: pointer; }
.lbtn.kakao { background: #FEE500; color: #191600; }
.lbtn.naver { background: #03C75A; color: #fff; }
.lbtn.primary { background: var(--accent); color: var(--on-accent); }
/* 랜딩 히어로의 소셜 버튼은 흰 버튼 한 줄 (로그인 화면은 브랜드 색 유지) */
.hero .lbtn { background: var(--card); color: var(--text); }
.hero .lbtn .gdot { display: none; }
.hero .lbtn.primary { background: var(--accent); color: var(--on-accent); }
.gdot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0 100%); }
.landing .section { padding: 28px 0 48px; max-width: 1080px; margin: 0 auto; }
.h2 { font-size: 22px; font-weight: 700; margin: 8px 0 18px; letter-spacing: -.03em; }
.cgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ccard { padding: 14px 14px 16px; display: block; transition: box-shadow .15s, transform .15s; }
.ccard:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .12); transform: translateY(-1px); }
.ccard .avatar, .ccard .avatar-ph { width: 72px; height: 72px; margin-bottom: 14px; }
.ccard .nm { font-weight: 800; font-size: 18px; letter-spacing: -.03em; }
.ccard .job { color: var(--faint); font-size: 12px; margin-top: 2px; }
.guide-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.guide-grid .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 18px; font-weight: 800; }
.guide-grid h3 { font-size: 16px; margin-top: 12px; letter-spacing: -.03em; }
.guide-grid p { color: var(--sub); font-size: 14px; margin-top: 6px; line-height: 1.6; }
@media (max-width: 800px) {
  .hero { padding: 32px 0 12px; }
  .hero h1 { font-size: 30px; }
  .hero .sub { font-size: 14px; }
  .cgrid { grid-template-columns: 1fr 1fr; }
  .hero .logins { gap: 6px; }
  .hero .lbtn { padding: 0 12px; font-size: 14px; height: 42px; }
  .guide-grid { grid-template-columns: 1fr; }
}

/* 로그인 */
.auth { max-width: 420px; margin: 24px auto; }
.auth h1 { font-size: 24px; font-weight: 800; text-align: center; letter-spacing: -.04em; }
.auth .sub { text-align: center; color: var(--sub); margin-top: 8px; font-size: 14px; }
.auth .logins { flex-direction: column; align-items: stretch; margin: 24px 0 0; }
.auth .lbtn { width: 100%; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; margin: 20px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* 폼 */
.field { display: block; }
.field > span { display: block; font-size: 13px; font-weight: 700; color: var(--sub); margin-bottom: 6px; }
.input, textarea.input, select.input { width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); padding: 0 12px; font-size: 15px; outline: none; }
textarea.input { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.input:focus { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-soft); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-weight: 800; cursor: pointer; font-size: 14px; }
.chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.seg { display: inline-flex; background: var(--soft); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { border: 0; background: none; height: 36px; padding: 0 14px; border-radius: 9px; font-weight: 700; cursor: pointer; color: var(--sub); }
.seg button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.err { color: var(--danger); font-size: 13px; min-height: 18px; }

/* 알약 탭 (크리에이터 페이지·스튜디오) */
.tabs { display: flex; gap: 8px; margin: 14px 0; overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs button { flex: none; background: var(--card); border: 0; border-radius: 999px; padding: 8px 13px; font-size: 13px; font-weight: 700; color: var(--sub); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.tabs .on { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 14px rgba(var(--accent-rgb), .25); }
.cols { display: grid; gap: 16px; }
@media (min-width: 900px) { .cols { grid-template-columns: 1fr 320px; align-items: start; } .cols aside { position: sticky; top: 80px; } }

/* 크리에이터 페이지 (디자인2/01·02): 큰 커버 · 커버 아래선에 겹치는 큰 프로필 원 · 버튼 한 줄 · 카드 격자 */
.cover { height: 320px; overflow: hidden; margin: 0 calc(50% - 50vw + 20px); position: relative; z-index: 1; background: var(--soft); border-radius: var(--radius); }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.profile { position: relative; z-index: 2; margin-top: -60px; display: flex; align-items: flex-start; gap: 18px; }
.profile .av { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 4px solid var(--card); flex: none; background: var(--card); box-shadow: 0 10px 24px rgba(0, 0, 0, .16); }
.profile .av img, .profile .av .avatar-ph { width: 100% !important; height: 100% !important; object-fit: cover; }
.profile .info { min-width: 0; margin-top: 64px; }
.profile .name { font-size: 32px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; }
.profile .job { color: var(--faint); font-size: 13px; margin-top: 4px; }
.pact { margin: 74px 0 0 auto; display: flex; gap: 8px; flex: none; }
.pbtn { height: 40px; padding: 0 16px; border-radius: 14px; font-size: 14px; font-weight: 800; }
.pbtn.on { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.cbio { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.cmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.links { display: flex; gap: 6px; flex-wrap: wrap; }
.links a { background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; }
.cmeta .linkbtn { font-size: 12px; }
.csec { scroll-margin-top: 76px; }
.sec-h { font-size: 24px; font-weight: 800; letter-spacing: -.04em; margin: 24px 0 12px; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* 게시물 카드: 흰 카드 · 모서리 16px · 살짝 그림자 */
.post { border-radius: var(--radius); overflow: hidden; background: var(--card); display: block; box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s; }
a.post:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .12); transform: translateY(-1px); }
.post .ph { height: 132px; position: relative; overflow: hidden; background: var(--soft); }
.post .ph img { width: 100%; height: 100%; object-fit: cover; }
.post .ph .txt { padding: 12px; font-size: 13px; line-height: 1.5; color: var(--sub); height: 100%; background: var(--soft); }
.post .cap { margin: 12px 12px 2px; font-size: 15px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post .pmeta { margin: 0 12px 12px; font-size: 12px; color: var(--faint); }
.post.locked .ph img { filter: blur(7px); transform: scale(1.12); }
.post.locked .ph .txt { filter: blur(3px); }
.lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(var(--card-rgb), .25) 0, rgba(var(--card-rgb), .35) 80%, rgba(var(--card-rgb), .9) 100%); }
/* 11차 멤버십 칩: 왼쪽 위 · 자물쇠 + 등급명 (12차: 골드 — 골드는 배지·멤버십 칩에만) */
.mem-chip { position: absolute; left: 8px; top: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 64px); height: 26px; padding: 0 10px 0 8px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.mem-chip svg { flex: none; }
.ph .mem-chip ~ .hid { top: 40px; }
.mem-chip.inline { position: static; max-width: 45%; height: 24px; box-shadow: none; }
.mem-chip.inline.open { background: var(--gold-soft); color: var(--gold-ink); }
.mem-chip.open { background: rgba(var(--card-rgb), .95); color: var(--gold-ink); }
.lk-chip { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 15px; color: var(--text); }
/* 위시 카드: 게시물 카드와 같은 모양 + 진행바 · % · 선물하기 */
.wish { border-radius: var(--radius); overflow: hidden; background: var(--card); display: flex; flex-direction: column; min-width: 0; box-shadow: var(--shadow); }
.wish .pic { height: 132px; position: relative; overflow: hidden; background: var(--soft); }
.wish .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 11차: 달성 띠는 초록(--ok) · 제목 16px · 모은 금액 굵게 */
.wish .achieved { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ok); color: #fff; font-size: 13px; font-weight: 800; text-align: center; padding: 6px 4px; letter-spacing: -.01em; }
.wish.done .bar > i { background: var(--ok); }
.wish .body { flex: 1; min-width: 0; padding: 12px; display: flex; flex-direction: column; }
.wish .wtitle { font-weight: 700; font-size: 16px; line-height: 1.35; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
.wish .meta { color: var(--faint); font-size: 12px; margin: 4px 0 10px; line-height: 1.4; overflow-wrap: anywhere; }
.wish .meta .wamt { color: var(--text); font-size: 14px; font-weight: 800; }
.wfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; min-height: 40px; }
.wpct { font-size: 12px; color: var(--faint); }
.wfoot [data-ach] { width: auto; }
.wish .w-act { position: absolute; right: 6px; top: 6px; display: flex; gap: 6px; }
.w-ic { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(var(--card-rgb), .92); color: var(--text); font-size: 15px; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); padding: 0; }
.w-ic:hover { background: var(--card); color: var(--accent); }
.w-ic.del:hover { color: var(--danger); }
/* 선물하기를 누른 카드는 한 줄을 다 쓰고 사진을 왼쪽으로 (좁은 칸에서 금액 버튼이 잘리지 않게) */
.wgrid .wish.open { grid-column: 1 / -1; flex-direction: row; }
.wgrid .wish.open .pic { width: 120px; height: 120px; flex: none; align-self: flex-start; margin: 12px 0 12px 12px; border-radius: 12px; }
.wgrid .wish.open .wfoot { flex-wrap: wrap; }
.wgrid .wish.open .give { width: 100%; }
@media (max-width: 480px) { .wgrid .wish.open .pic { width: 84px; height: 84px; } }
.bar { height: 6px; background: var(--track); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .6s ease; }
.gift { background: var(--accent-soft); color: var(--accent); border: 0; border-radius: 999px; padding: 7px 12px; font-weight: 800; font-size: 12px; cursor: pointer; white-space: nowrap; }
.gift:hover { background: var(--accent-soft-2); }
.wish .give { margin-top: 4px; }
.wish .give .chips { gap: 6px; }
.wish .give .chip { height: 36px; font-size: 13px; padding: 0 10px; }
.tips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tip { border: 0; border-radius: 14px; padding: 12px 10px; text-align: center; font-weight: 800; font-size: 14px; background: var(--soft); color: var(--text-2); cursor: pointer; }
.tip.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.tipform .input { margin-top: 8px; height: 44px; font-size: 14px; }
.tipform textarea.input { height: auto; min-height: 0; }
.dmcheck { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--sub); cursor: pointer; }
.dmcheck input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.send { width: 100%; margin-top: 8px; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 14px; padding: 12px; font-weight: 800; font-size: 14px; cursor: pointer; min-height: 46px; box-shadow: 0 8px 18px rgba(var(--accent-rgb), .25); }
.send:hover { background: var(--accent-ink); }
.send:disabled { opacity: .5; }
.note { color: var(--sub); font-size: 12px; margin-top: 8px; line-height: 1.5; }
@media (max-width: 800px) {
  .cover { height: 200px; margin: 0 calc(50% - 50vw + 10px); }
  .profile { margin-top: -50px; gap: 12px; flex-wrap: wrap; }
  .profile .av { width: 100px; height: 100px; }
  .profile .info { margin-top: 54px; flex: 1; }
  .profile .name { font-size: 26px; }
  .pact { margin: 0; flex-basis: 100%; }
  .cbio { font-size: 14px; margin-top: 12px; }
  .sec-h { font-size: 21px; margin: 20px 0 10px; }
  .pgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .post .ph, .wish .pic { height: 110px; }
  .post .cap { font-size: 14px; }
  .post .cap { margin: 10px 10px 2px; }
  .post .pmeta { margin: 0 10px 10px; }
  .wish .body { padding: 10px; }
}

/* 게시물 그리드 (내 후원 등) */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 800px) { .post-grid { grid-template-columns: 1fr 1fr; } }

.supporter { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.supporter:first-child { border-top: 0; }

/* 게시물 상세 */
.post-detail { max-width: 640px; margin: 0 auto; overflow: hidden; }
.post-detail .media { position: relative; background: var(--soft); }
.post-detail .media img { width: 100%; max-height: 80vh; object-fit: contain; background: var(--soft); }
.post-detail .media .blurwrap { overflow: hidden; aspect-ratio: 3 / 4; }
.post-detail .media .blurwrap img { height: 100%; object-fit: cover; filter: blur(24px); transform: scale(1.2); background: none; }
.unlock-box { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: var(--text); padding: 20px; background: rgba(var(--card-rgb), .35); }
.unlock-box .price { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.unlock-box .lk { width: 48px; height: 48px; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; font-size: 22px; }

/* 결제 */
.pay { max-width: 560px; margin: 0 auto; }
.pay-sum { display: flex; justify-content: space-between; align-items: center; }
.pay-sum .amt { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.testnote { background: var(--accent-soft); color: var(--accent-ink); border-radius: 14px; padding: 10px 14px; font-size: 13px; line-height: 1.5; }
.done-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 8px auto 0; }

/* 스튜디오/관리자 */
.stats { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat .k { color: var(--faint); font-size: 12px; font-weight: 600; }
.stat .v { font-size: 26px; font-weight: 800; margin-top: 8px; letter-spacing: -.035em; }
.stat .faint { margin-top: 2px; }
.stat.accent { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 24px rgba(var(--accent-rgb), .28); }
.stat.accent .k, .stat.accent .faint { color: rgba(var(--on-accent-rgb), .8); }
.list > .item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.list > .item:first-child { border-top: 0; }
.item .grow { flex: 1; min-width: 0; }
.item .amt { font-weight: 800; white-space: nowrap; }
.item .bar { margin: 8px 0 6px; }
.thumb { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--soft); flex: none; }
.drop { border: 2px dashed var(--line); border-radius: 14px; padding: 18px; text-align: center; color: var(--sub); cursor: pointer; display: block; background: var(--soft); }
.drop img { max-height: 220px; margin: 0 auto; border-radius: 10px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--line); white-space: nowrap; }
.tbl th { color: var(--sub); font-size: 12px; font-weight: 700; border-top: 0; }
.scroll-x { overflow-x: auto; }

/* ---------- 2차: 메시지(DM) ---------- */
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #FF4D6A; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.icon-btn { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; color: var(--text); cursor: pointer; flex: none; padding: 0; }
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
.icon-btn .badge { position: absolute; top: 0; right: -3px; border: 2px solid var(--card); height: 18px; min-width: 18px; font-size: 10px; padding: 0 4px; }
@media (max-width: 400px) { .icon-btn { width: 32px; } }
/* 11차 상단 아이콘: PC는 아이콘 아래 작은 글자 라벨, 폰(700px 이하)은 검색·알림·프로필만 + 라벨 없음 */
.icon-btn .ic-l { display: none; }
.icon-btn .ic-av { display: none; }
@media (min-width: 701px) {
  .nav .icon-btn, .topbar .theme-btn { width: auto; min-width: 48px; height: 48px; padding: 4px 6px 3px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
  .nav .icon-btn .ic-l, .topbar .theme-btn .ic-l { display: block; font-size: 11px; line-height: 1.2; font-weight: 700; color: var(--sub); white-space: nowrap; }
  .nav .icon-btn:hover .ic-l, .topbar .theme-btn:hover .ic-l { color: var(--accent); }
  .nav .icon-btn .badge { top: 1px; right: 4px; }
  .nav .ic-gear { display: grid; }
}
@media (max-width: 700px) {
  .nav .nav-txt, .nav .ic-home, .nav .ic-msg, .nav .ic-gift, .nav .ic-heart:not(.ic-bell), body:not(.pay-mode) .nav .ic-wallet { display: none; }
  .nav .icon-btn, .topbar .theme-btn { width: 40px; height: 40px; }
  /* 프로필 자리는 내 사진 */
  #me-chip .ic-gear { display: none; }
  #me-chip .ic-av { display: grid; }
  #me-chip .ic-av .avatar, #me-chip .ic-av .avatar-ph { box-shadow: 0 0 0 1.5px var(--line); }
}
.bellmenu { width: 320px; max-width: calc(100vw - 24px); right: 0; padding: 6px; max-height: 70vh; overflow-y: auto; }
.bell-head { font-weight: 800; font-size: 14px; padding: 8px 10px 6px; }
.menu .bell-item { display: block; padding: 10px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
.menu .bell-item.new { background: var(--accent-soft); }
.menu .bell-item .faint { font-size: 12px; margin-top: 2px; }


.pill.gold { background: var(--gold-soft); color: var(--gold-ink); }
.row > .grow { flex: 1; min-width: 0; }
.mt4 { margin-top: 4px; }
.seg.sm { padding: 3px; }
.seg a { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--sub); }
.seg a.on { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

main.wrap.dmwrap { padding-top: 16px; padding-bottom: 16px; }
.dm { display: grid; grid-template-columns: 340px 1fr; gap: 16px; height: calc(100vh - 60px - 32px); min-height: 540px; }
.dm-list { display: flex; flex-direction: column; overflow: hidden; }
.dm-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 10px; }
.dm-list-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.dm-items { overflow-y: auto; flex: 1; padding: 0 8px 8px; }
.dm-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 14px; }
.dm-item:hover { background: var(--soft); }
.dm-item.on { background: var(--accent-soft); }
.dm-item .grow { flex: 1; min-width: 0; }
.dm-item .nm { font-size: 15px; }
.dm-item .pv { color: var(--sub); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; margin-top: 3px; }
.dm-item .row { gap: 6px; }

/* 대화방 (디자인2/05): 상대 흰 말풍선 · 나 보라 · 후원 금색 띠 · 잠금 흐린 사진 · 입력창 위 금액 칩 */
.dm-chat { display: flex; flex-direction: column; overflow: hidden; min-width: 0; background: var(--soft); }
.chat-empty { margin: auto; text-align: center; color: var(--faint); }
.chat-empty svg { width: 44px; height: 44px; margin: 0 auto 8px; }
.chat-top { display: none; align-items: center; gap: 6px; height: 48px; padding: 0 12px; background: var(--card); font-size: 15px; }
.chat-top .back { font-size: 24px; line-height: 1; color: var(--accent); padding: 0 6px 3px 0; }
.chat-head { display: flex; align-items: center; gap: 10px; margin: 10px 10px 0; padding: 10px 12px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.chat-head .grow { flex: 1; min-width: 0; }
.chat-head .grow b { font-size: 15px; }
.chat-head .icon-btn { width: 34px; height: 34px; }
.chat-body { flex: 1; overflow-y: auto; padding: 8px 10px 16px; }
.chat-first { text-align: center; color: var(--sub); margin-top: 18vh; }
.chat-first .avatar, .chat-first .avatar-ph { margin: 0 auto 10px; }
.day-sep { text-align: center; margin: 14px 0 10px; }
.day-sep span { font-size: 12px; color: var(--faint); }
.msg { display: flex; margin: 8px 0; }
.msg.me { justify-content: flex-end; }
.b-col { max-width: min(78%, 440px); min-width: 0; }
.bubble { background: var(--card); border-radius: 14px; overflow: hidden; font-size: 14px; line-height: 1.5; min-width: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .07); padding-bottom: 8px; }
.msg.me .bubble { background: var(--accent); color: var(--on-accent); }
.b-text { padding: 9px 12px 0; white-space: pre-wrap; word-break: break-word; }
.b-locked { color: var(--sub); font-weight: 700; }
.b-meta { padding: 2px 12px 0; font-size: 11px; color: var(--faint); white-space: nowrap; }
.msg.me .b-meta { color: rgba(var(--on-accent-rgb), .78); }
.bubble.has-photo { width: 200px; max-width: 100%; }
.b-photo { display: block; position: relative; overflow: hidden; margin: 8px 8px 0; border-radius: 10px; background: var(--accent-soft); }
.b-photo img { width: 100%; max-height: 260px; object-fit: cover; }
.b-photo.locked, .b-photo.sealed { aspect-ratio: 5 / 3; }
.b-photo.locked img, .b-photo.sealed img { height: 100%; max-height: none; filter: blur(14px); transform: scale(1.2); }
.b-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; background: rgba(var(--card-rgb), .25); }
.b-unlock { display: inline-flex; align-items: center; margin: 8px 8px 0; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 12px; padding: 6px 12px; cursor: pointer; }
.b-unlock:hover { background: var(--accent-ink); }
.b-paid { padding: 8px 8px 0; }
.b-chip { display: inline-flex; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 12px; padding: 4px 10px; }
.msg.me .b-chip { background: var(--card); }
.b-tip { margin: 8px 8px 0; border-radius: 10px; padding: 8px 10px; background: linear-gradient(90deg, #F6E3A8, #FFF6DD); color: #7A5500; display: flex; flex-direction: column; }
.b-tip small { font-size: 12px; font-weight: 700; color: #8A6400; }
.b-tip b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.25; }
.bubble.tipped { min-width: 120px; }
.bc-sample { width: 220px; margin-left: auto; margin-right: auto; background: var(--card); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); padding-bottom: 8px; }
.bc-sample .b-unlock { cursor: default; }

.composer { background: var(--card); padding: 8px 10px 10px; box-shadow: 0 -4px 16px rgba(0, 0, 0, .05); }
.cmp-opt { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
.cmp-label { font-size: 12px; font-weight: 800; color: var(--faint); flex: none; }
.mini-chips { flex-wrap: nowrap; gap: 6px; align-items: center; }
#bc-form .mini-chips { flex-wrap: wrap; }
.mini-chips .chip { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 999px; flex: none; border: 0; background: var(--accent-soft); color: var(--accent); }
.mini-chips .chip.on { background: var(--accent); color: var(--on-accent); }
.mini-chips .lp-custom { width: 110px; height: 28px; font-size: 13px; flex: none; }
.cmp-note { font-size: 12px; color: #8A5A00; background: #FFF4D6; border-radius: 10px; padding: 6px 10px; margin-bottom: 6px; }
.composer .err { min-height: 0; }
.composer .err:not(:empty) { margin-bottom: 6px; }
.cmp-att { position: relative; width: 84px; margin-bottom: 6px; }
.cmp-att img { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; }
.att-x { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--text); color: var(--bg); font-size: 12px; cursor: pointer; }
.cmp-row { display: flex; align-items: flex-end; gap: 8px; }
.att-btn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--faint); cursor: pointer; flex: none; background: var(--soft); }
.cmp-row textarea { flex: 1; min-width: 0; resize: none; border: 0; background: var(--soft); border-radius: 12px; padding: 9px 12px; font-size: 15px; line-height: 1.4; height: 40px; max-height: 120px; outline: none; }
.cmp-row textarea:focus { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--accent); }
.send-btn { height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 14px; cursor: pointer; flex: none; white-space: nowrap; box-shadow: 0 6px 14px rgba(var(--accent-rgb), .25); }
.send-btn:disabled { opacity: .5; }
@media (max-width: 800px) {
  body.dm-mode .foot { display: none; }
  body.dm-chat .topbar { display: none; }
  main.wrap.dmwrap { padding: 0; }
  .dm { display: block; height: calc(100dvh - 60px); min-height: 0; }
  body.dm-chat .dm { height: 100dvh; }
  .dm .card { border-radius: 0; height: 100%; box-shadow: none; }
  .dm.has-chat .dm-list { display: none; }
  .dm:not(.has-chat) .dm-chat { display: none; }
  .chat-top { display: flex; }
  .composer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* 스튜디오 > 메시지 설정 */
.set-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.set-row.col { flex-direction: column; gap: 10px; align-items: stretch; }
.set-row .grow { flex: 1; min-width: 0; }
.mini { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.mini .input { width: 120px; height: 38px; }
.switch { position: relative; width: 46px; height: 28px; flex: none; margin-top: 2px; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--track-strong); border-radius: 999px; cursor: pointer; transition: .2s; }
.switch span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); transition: .2s; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }
.recv { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--soft); }
.recv-h { font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.recv .kk { background: #FEE500; color: #191600; border-radius: 6px; padding: 1px 6px; }
#bc-drop img { max-height: 160px; }

/* ---------- 2차b: 테스트 띠 · 공지 · 시트 ---------- */
/* 결제 화면 전 단계 맨 위 고정 (시트·팝업보다 위) */
.testband { position: sticky; top: 0; z-index: 1000; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0 10px; background: #FFE14D; color: #3D3200; font-size: 13px; font-weight: 800; letter-spacing: -.02em; text-align: center; line-height: 1.2; border-bottom: 1px solid #E8C400; box-shadow: 0 1px 4px rgba(61, 50, 0, .12); }
.testband[hidden] { display: none; }
body.pay-mode .topbar { top: 36px; }
@media (max-width: 420px) { .testband { font-size: 12px; } }
.notice { background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 700; text-align: center; padding: 9px 16px; border-bottom: 1px solid var(--accent-soft-2); line-height: 1.45; }
.notice[hidden] { display: none; }
@media (max-width: 800px) { body.dm-mode .notice { display: none; } }

.sheet-bg { position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; padding: 52px 16px 16px; animation: fadein .15s; }
body.sheet-open { overflow: hidden; }
.sheet { background: var(--card); border-radius: 22px; width: 100%; max-width: 440px; max-height: calc(100vh - 68px); overflow-y: auto; box-shadow: 0 18px 48px rgba(0, 0, 0, .25); animation: up .2s ease-out; }
@keyframes fadein { from { opacity: 0; } }
@keyframes up { from { transform: translateY(24px); opacity: .6; } }
@media (max-width: 600px) {
  .sheet-bg { align-items: flex-end; padding: 52px 0 0; }
  .sheet { max-width: none; border-radius: 22px 22px 0 0; max-height: calc(100dvh - 52px); padding-bottom: env(safe-area-inset-bottom); }
  .sheet.vp-pop { margin: 0 12px 16px; border-radius: 22px; }
  .sheet-bg:has(.vp-pop) { align-items: center; }
}
.vp-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; font-weight: 800; font-size: 16px; border-bottom: 1px solid var(--line); }
.vp-sheet-h > span { display: flex; align-items: center; gap: 10px; }
.vp-sheet-h.dark { background: var(--ink-block); color: #fff; border-bottom: 0; }
.vp-sheet-h .pm-logo { width: 34px; height: 34px; }
.x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(127, 127, 140, .14); color: inherit; cursor: pointer; font-size: 14px; flex: none; }
.linkbtn { border: 0; background: none; color: var(--accent); font-weight: 700; font-size: 13px; cursor: pointer; padding: 0; }

/* 가상 결제 화면 */
.vpay { max-width: 560px; }
.vp-steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
/* 단계 알약 (디자인2/07): 지금 단계만 진한 보라, 나머지 흰 알약 */
.vp-steps li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--faint); background: var(--soft); border-radius: 999px; padding: 7px 10px; }
.vp-steps li i { font-style: normal; font-size: 12px; }
.vp-steps li.on { color: var(--on-accent); background: var(--accent); }
.vp-steps li.done { color: var(--accent); background: var(--accent-soft); }
.vp-order .pay-sum { align-items: flex-end; gap: 12px; }
.vp-name { font-size: 22px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 2px; }
.vp-order .pay-sum .amt { font-size: 26px; }
.vp-msg { font-size: 14px; }
.vp-h { font-weight: 800; font-size: 20px; letter-spacing: -.03em; margin: 0 0 12px; }
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--soft); cursor: pointer; font-size: 13px; font-weight: 800; color: var(--text); text-align: left; transition: background .12s, box-shadow .12s; }
.pm:hover { background: var(--hover); }
.pm.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.pm .pm-logo { display: none; }
.pm-name { white-space: nowrap; }
.pm-logo { width: 44px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 1px; font-weight: 900; font-size: 13px; letter-spacing: -.04em; flex: none; font-family: Arial, "Malgun Gothic", sans-serif; }
.pm-logo.card { background: var(--ink-block); color: #fff; }
.pm-logo.npay { background: #03C75A; color: #fff; }
.pm-logo.npay b { font-size: 15px; margin-right: 1px; }
.pm-logo.kpay { background: #FEE500; color: #191600; }
.pm-logo.kpay i { width: 13px; height: 11px; background: #191600; border-radius: 50%; position: relative; margin-right: 2px; }
.pm-logo.kpay i::after { content: ''; position: absolute; left: 2px; bottom: -3px; border: 3px solid transparent; border-top-color: #191600; border-left-color: #191600; }
.pm-logo.tpay { background: #0064FF; color: #fff; font-size: 10px; width: 54px; }
.pm-logo.tpay b { font-weight: 900; margin-left: 1px; opacity: .85; }
.pm-logo.bank { background: #E9EEF6; color: #31507E; }
.pm-hint { display: none; }
.rc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; }
.rc-row > span:first-child { color: var(--faint); font-size: 13px; }
.rc-row.big { font-size: 15px; font-weight: 800; }
.rc-row.big > span:first-child { color: var(--text); font-size: 16px; font-weight: 700; }
.rc-row.big b { font-size: 15px; }
.vp-agree { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 12px; color: var(--faint); cursor: pointer; line-height: 1.5; }
.vp-agree input { width: 16px; height: 16px; accent-color: var(--accent); margin: 1px 0 0; flex: none; }
.vp-agree b { color: var(--accent); }
.vp-paybtn { height: 50px; font-size: 16px; border-radius: 14px; }
.vp-cancel { display: block; width: 100%; border: 0; background: none; color: var(--faint); font-weight: 700; font-size: 14px; padding: 8px; cursor: pointer; }
.vp-cancel:hover { color: var(--text); }
.vp-cancel:disabled { opacity: .5; }
.vp-mini { display: flex; justify-content: space-between; gap: 10px; background: var(--soft); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.vp-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sub); }
.card-cos .chip { height: 34px; font-size: 13px; padding: 0 11px; }
.receipt .rc-row { border-top: 1px dashed var(--line); }
.receipt .rc-row:first-child { border-top: 0; }
.vacct { border: 1px solid var(--line); border-radius: 14px; padding: 6px 14px; background: var(--soft); }
.vacct .rc-row + .rc-row { border-top: 1px solid var(--line); }
.accent-t { color: var(--accent); }
.vp-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 44px 20px 40px; text-align: center; min-height: 240px; }
.vp-loading b { font-size: 17px; }
.vp-loading.ok b { color: var(--ok); }
.vp-loading.ok .done-ic { background: var(--ok-soft); color: var(--ok); margin: 0; }
.spin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* 간편결제 팝업 (네이버·카카오·토스 색) */
.sheet.vp-pop { max-width: 380px; overflow: hidden; }
.ep-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }
.ep-h .pm-logo { width: 74px; height: 32px; font-size: 18px; border-radius: 0; background: none; }
.ep-h .pm-logo.npay b { font-size: 21px; }
.ep-h .pm-logo.kpay i { width: 20px; height: 16px; }
.ep-h .pm-logo.tpay { font-size: 17px; }
.ep-naverpay .ep-h { background: #03C75A; color: #fff; }
.ep-kakaopay .ep-h { background: #FEE500; color: #191600; }
.ep-tosspay .ep-h { background: #0064FF; color: #fff; }
.ep-h .x { background: rgba(255, 255, 255, .25); }
.ep-kakaopay .ep-h .x { background: rgba(0, 0, 0, .08); }
.ep-body { padding: 18px 18px 14px; }
.ep-title { font-size: 15px; font-weight: 800; color: var(--sub); }
.ep-amt { font-size: 30px; font-weight: 900; letter-spacing: -.04em; margin: 4px 0 12px; }
.ep-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 7px 0; border-top: 1px solid var(--line); }
.ep-row span { color: var(--sub); flex: none; }
.ep-row b { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-btn { width: 100%; height: 52px; border: 0; border-radius: 14px; font-size: 16px; font-weight: 800; cursor: pointer; margin-top: 8px; }
.ep-naverpay .ep-btn { background: #03C75A; color: #fff; }
.ep-kakaopay .ep-btn { background: #FEE500; color: #191600; }
.ep-tosspay .ep-btn { background: #0064FF; color: #fff; }
.ep-foot { text-align: center; color: var(--faint); font-size: 11px; margin-top: 10px; }
@media (max-width: 520px) {
  .vp-steps li { padding: 6px 8px; font-size: 11px; }
}

/* 결제수단 표시 */
.mpill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.mpill i { width: 9px; height: 9px; border-radius: 50%; background: #B5B5B5; flex: none; }
.mpill.card i, .bl-bar i.card { background: var(--ink-block); }
.mpill.npay i, .bl-bar i.npay { background: #03C75A; }
.mpill.kpay i, .bl-bar i.kpay { background: #F2D600; }
.mpill.tpay i, .bl-bar i.tpay { background: #0064FF; }
.mpill.bank i, .bl-bar i.bank { background: #6B87B5; }

/* 막대 목록 */
.barlist { display: grid; gap: 10px; }
.bl-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; }
.bl-bar { height: 10px; background: var(--track); border-radius: 99px; overflow: hidden; }
.bl-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.bl-v { display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; min-width: 84px; }
.bl-v .faint { font-size: 11px; }
.two { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 800px) { .two { grid-template-columns: 1fr; } }

/* 반응형 표: 폰에서는 한 줄씩 카드 */
.rtbl td { vertical-align: middle; }
.rtbl .what { color: var(--sub); }
.rtbl .pill { white-space: nowrap; }
@media (max-width: 700px) {
  .rtbl thead { display: none; }
  .rtbl, .rtbl tbody, .rtbl tr, .rtbl td { display: block; width: 100%; }
  .rtbl tr { border-top: 1px solid var(--line); padding: 10px 0; }
  .rtbl tr:first-child { border-top: 0; }
  .rtbl td { border: 0; padding: 3px 0; white-space: normal; display: flex; gap: 10px; align-items: center; justify-content: space-between; text-align: right; min-height: 26px; }
  .rtbl td::before { content: attr(data-l); color: var(--faint); font-size: 12px; font-weight: 700; text-align: left; flex: none; }
  .rtbl td[data-l=""]::before { content: none; }
  .rtbl td[data-l=""] { justify-content: flex-end; }
  .rtbl td > * { min-width: 0; }
}

/* /me */
.me-head .page-title { font-size: 22px; }
.me-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.me-stats > div { background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.me-stats .k { font-size: 12px; color: var(--sub); font-weight: 700; }
.me-stats .v { font-size: 18px; font-weight: 800; letter-spacing: -.03em; margin-top: 2px; }
@media (max-width: 600px) { .me-stats { grid-template-columns: 1fr 1fr; } }
.fgrid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fgrid { grid-template-columns: 1fr; } }
.fcard .fbio { font-size: 13px; line-height: 1.55; margin: 10px 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; }
.fcard .row { gap: 6px; }
.follow-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.btn { white-space: nowrap; }
.prof-form { max-width: 520px; }
.prof-av { gap: 16px; }
.txt-thumb { display: grid; place-items: center; font-size: 22px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.item:hover { background: var(--soft); }

/* 스튜디오 · 관리자 */
a.stat { display: block; }
.rank { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--soft); color: var(--sub); flex: none; margin-top: 6px; }
.rank.r1 { background: #FFE38A; color: #6B4A00; }
.rank.r2 { background: #E3E6EE; color: #4B5263; }
.rank.r3 { background: #F2D2B6; color: #6E3F17; }
.fan-row { align-items: center !important; }
.fan-row .rank { margin-top: 0; }
.pill.danger { background: #FDECEC; color: var(--danger); }
.btn.ghost { border-style: dashed; color: var(--faint); cursor: default; background: none; }
.btn.danger.primary { background: var(--danger); border-color: var(--danger); color: #fff; }
.input.sm { height: 36px; font-size: 13px; width: auto; padding: 0 8px; }
.fee-in { width: 76px; height: 34px; padding: 0 8px; font-size: 13px; }
.tabs .badge { margin-left: 5px; height: 17px; min-width: 17px; font-size: 10px; }
.tabs a { display: inline-flex; align-items: center; }
.snip { background: var(--soft); border-radius: 12px; padding: 8px 12px; font-size: 13px; color: var(--sub); line-height: 1.55; }
.report .r-act { flex: none; max-width: 260px; }
@media (max-width: 700px) { .list > .item.report { flex-direction: column; } .report .r-act { max-width: none; justify-content: flex-start !important; } }
.report-btn { width: 34px; height: 34px; }

.empty { text-align: center; color: var(--faint); padding: 36px 12px; font-size: 14px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: .2s; z-index: 50; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* 10차: 토스트 종류 — 앞에 작은 동그라미 표시만 (색은 상태색, 포인트 보라는 주 버튼만) */
.toast.ok, .toast.err { display: flex; align-items: center; gap: 8px; }
.toast.ok::before, .toast.err::before { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.toast.ok::before { content: '✓'; background: var(--ok); }
.toast.err::before { content: '!'; background: var(--danger); }
.toast.err { background: #3A1A1A; color: #fff; }

/* 10차: 로딩 스켈레톤 — 0.15초 넘게 걸릴 때만 서서히 보임 */
.skel { display: flex; flex-direction: column; gap: 14px; animation: skel-in .25s .15s both; }
@keyframes skel-in { from { opacity: 0; } }
.sk { display: block; max-width: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--sk1) 0, var(--sk2) 40%, var(--sk1) 80%) 0 0 / 300% 100%; animation: sk-shine 1.3s linear infinite; }
.sk.r { border-radius: 50%; flex: none; }
.sk.img { border-radius: 12px; }
@keyframes sk-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sk-card { display: flex; flex-direction: column; gap: 10px; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.sk-row .grow { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sk-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.skel.mini { gap: 10px; padding: 12px; animation-delay: .1s; }
@media (max-width: 700px) { .sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sk-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sk-tile { gap: 0; overflow: hidden; }
.sk-tile > .sk.img { border-radius: 0; }
.err-box { max-width: 560px; margin: 24px auto; }
.empty-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.foot { color: var(--sub); font-size: 12px; padding: 20px 16px 28px; text-align: center; }
.center { text-align: center; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.hidden { display: none !important; }

/* ---------- 3차 ---------- */
.notice.banned { background: #FDECEC; color: #A3262A; border-bottom-color: #F6C8CA; }
.notice.banned a { text-decoration: underline; }
.foot { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.foot-links { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.foot-links a:hover { color: var(--text); }
.brand-mark.img { background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.brand-mark.img img { width: 100%; height: 100%; object-fit: cover; }
.brand-mark.big { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); flex: none; }
.brand-mark.big svg { width: 24px; height: 24px; }
.accent-t { color: var(--accent); font-weight: 700; }
.danger-t { color: var(--danger); }

/* 404 */
.nf { max-width: 520px; margin: 40px auto; text-align: center; padding: 40px 24px; }
.nf-code { font-size: 64px; font-weight: 900; color: var(--accent); letter-spacing: -.05em; line-height: 1; }
.nf h1 { font-size: 22px; font-weight: 800; margin: 12px 0 8px; letter-spacing: -.03em; }
.nf-act { justify-content: center; margin-top: 20px; flex-wrap: wrap; }

/* 둘러보기 */
.ex-bar { display: flex; gap: 8px; }
.ex-bar select { max-width: 150px; }
.ex-cats .chip { height: 34px; font-size: 13px; }
.exgrid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .exgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .exgrid { grid-template-columns: 1fr; } .ex-bar select { max-width: 120px; } }
.excard { overflow: hidden; }
.ex-cover { display: block; height: 96px; background: var(--accent-soft); }
.ex-cover img { width: 100%; height: 100%; object-fit: cover; }
.excard .pad { padding: 14px 16px 16px; }
.excard .avatar, .excard .avatar-ph { margin-top: -34px; border: 3px solid var(--card); box-sizing: content-box; }
.ex-bio { font-size: 13px; line-height: 1.55; margin: 10px 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; }
.ex-empty { grid-column: 1 / -1; }

/* 약관 · 문의 */
.doc { max-width: 760px; margin: 0 auto; padding: 28px; }
.doc h2 { font-size: 16px; font-weight: 800; margin: 22px 0 8px; }
.doc p { color: var(--sub); line-height: 1.75; font-size: 14px; margin-top: 4px; }
.contact { max-width: 640px; margin: 0 auto; }

/* 크리에이터 페이지 · 게시물 */
.preview-band { background: #FFF4D6; color: #6B4A00; font-size: 13px; font-weight: 700; text-align: center; padding: 9px 14px; border-radius: 12px; margin: 12px 0; }
.preview-band.warn { background: #FDECEC; color: #A3262A; }
.post.locked .ph img { filter: blur(var(--blur, 7px)); }
.pcount { position: absolute; right: 6px; top: 6px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 7px; }
.hid { position: absolute; left: 6px; top: 6px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 7px; }
.post.is-hidden { opacity: .6; }
.post-detail .media .blurwrap img { filter: blur(var(--blur, 24px)); }
.gallery { display: grid; gap: 2px; background: var(--line); }
.gallery img { width: 100%; }
.wish.done { background: var(--ok-tint); }
.done-ic.cancel { background: var(--soft); color: var(--sub); }

/* 그래프 */
.bchart { position: relative; padding-top: 16px; }
.bchart svg { width: 100%; height: 150px; display: block; overflow: visible; }
.bc-bar { fill: var(--accent); }
.bc-g.on .bc-bar { fill: var(--accent-ink); }
.bc-hit { fill: transparent; }
.bc-g.on .bc-hit { fill: rgba(var(--accent-rgb), .06); }
.bc-axis { stroke: var(--track-strong); stroke-width: 1; }
.bc-grid { stroke: var(--track); stroke-width: 1; stroke-dasharray: 3 4; }
.bc-x { position: relative; height: 18px; margin-top: 6px; }
.bc-x span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--faint); white-space: nowrap; }
.bc-x span:first-child { transform: none; left: 0 !important; }
.bc-x span:last-child { transform: none; left: auto !important; right: 0; }
.bc-max { position: absolute; left: 0; top: 0; font-size: 11px; }
.bc-tip { position: absolute; top: 0; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none; z-index: 2; }
.tbl-view summary { cursor: pointer; margin-bottom: 6px; }
@media (pointer: coarse), (max-width: 700px) { .hint-pc { display: none; } }
/* 카드 머리줄: 제목과 설명이 좁으면 줄바꿈 (폰에서 제목이 눌리지 않게) */
.card > .row.between, .card .row.between:first-child { flex-wrap: wrap; gap: 4px 10px; }
.card > .row.between > b { flex: none; }

/* 스튜디오 */
/* 스튜디오 (디자인2/06): 큰 제목 · 알약 탭 · 숫자 카드 4 (정산 가능만 보라) · 최근 받은 후원 + 정산 신청 */
.studio-head { padding-top: 8px; }
.studio-sub { color: var(--faint); font-size: 15px; margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.studio-links { margin-left: auto; display: inline-flex; gap: 14px; font-size: 13px; font-weight: 700; }
.studio-links a { color: var(--accent); }
.studio-links .linkbtn { font-size: 13px; }
@media (min-width: 720px) { #income.stats { grid-template-columns: 1fr 1fr 1fr 1.2fr; } }
.cols-home { display: grid; gap: 12px; grid-template-columns: 1.85fr 1fr; align-items: stretch; }
.cols-home .card-h { margin-bottom: 8px; }
.rlist > .item { padding: 11px 0; }
.rlist .item b { font-size: 15px; }
.rlist .item .amt { font-size: 15px; }
.po-mini { display: flex; gap: 10px; align-items: center; }
@media (max-width: 800px) { .cols-home { grid-template-columns: 1fr; } .studio-links { margin-left: 0; } .page-title.big { font-size: 28px; } }

/* 빈 상태: 작은 일러스트 + 한 줄 (빈 상자만 두지 않음) */
.empty:not(.ill)::before { content: ''; display: block; width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 16px; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 19.5s-7.5-4.6-7.5-9.4A4 4 0 0 1 12 8a4 4 0 0 1 7.5 2.1c0 4.8-7.5 9.4-7.5 9.4z'/%3E%3C/svg%3E") center / 26px no-repeat; }
.empty.ill { display: flex; align-items: center; gap: 14px; text-align: left; padding: 8px 0; color: var(--text); }
.empty.ill > div { min-width: 0; }
.card > .empty.ill, .list > .empty.ill, .feed > .empty.ill { padding: 12px 4px; }
.empty.ill b { font-size: 15px; }
.empty.ill .faint { margin-top: 2px; }
.ill-pic { width: 64px; height: 64px; border-radius: 16px; background: var(--accent-soft); display: grid; place-items: center; flex: none; color: var(--text); }
.ill-pic svg { width: 30px; height: 30px; }
.pending-box { background: #FFF9EA; border-color: #F3DFA5; }
.ph-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.ph-thumb { position: relative; width: 92px; height: 92px; }
.ph-thumb img { width: 92px; height: 92px; object-fit: cover; border-radius: 12px; }
.ph-first { position: absolute; left: 6px; bottom: 6px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 800; border-radius: 6px; padding: 1px 5px; }
.ph-add { width: 92px; height: 92px; border: 2px dashed var(--line); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--sub); cursor: pointer; font-size: 22px; background: var(--soft); text-align: center; line-height: 1.25; }
.ph-add span { font-size: 12px; font-weight: 700; margin-top: 2px; }
.blur-row { background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.blur-prev { width: 84px; height: 60px; border-radius: 10px; position: relative; overflow: hidden; background-size: cover; background-position: center; }
.blur-prev::before { content: ''; position: absolute; inset: -12px; background-image: inherit; background-size: cover; background-position: center; filter: blur(var(--blur, 14px)); }
.blur-prev span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; }
.item-act { gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
@media (max-width: 600px) { .list > .item:has(.item-act) { flex-wrap: wrap; } .item-act { width: 100%; justify-content: flex-start; } }
.wdrop { width: 96px; flex: none; padding: 8px; display: flex; align-items: center; justify-content: center; }
.wdrop img { max-height: 80px; }
.cover-drop { padding: 0; overflow: hidden; }
.cover-drop .cd-img { height: 130px; background: var(--soft) center 30% / cover; }
.cover-drop > span { display: block; padding: 8px; }
.ap-prof { gap: 14px; }
.ap-av { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--accent); flex: none; }
.handle-in { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); padding-left: 12px; }
.handle-in span { color: var(--faint); font-weight: 700; }
.handle-in .input { border: 0; background: none; box-shadow: none; padding-left: 4px; }
.apply { max-width: 560px; margin: 0 auto; }
.sheet.wide { max-width: 560px; }

/* 관리자 */
.filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.f-q { min-width: 200px; flex: 1; }
.f-date { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--faint); font-weight: 700; }
.f-date .input { width: 140px; }
@media (max-width: 600px) { .filters > * { flex: 1 1 45%; } .f-date .input { width: 100%; } .f-q { min-width: 0; flex-basis: 100%; } }
.sum-row td { background: var(--soft); }
.danger-zone { border-color: #F6C8CA; background: #FFFAFA; }

/* ===== 7차: 피드 · 좋아요·댓글 · 후원자 배지 · 후원 메시지 벽 · 결제 완료 자랑하기 (08 규칙 그대로: 흰 카드·16px·주 버튼만 보라) ===== */
.nav-txt { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; margin-right: 4px; border-radius: 999px; font-size: 14px; font-weight: 800; color: var(--sub); flex: none; }
.nav-txt:hover, .nav-txt.on { background: var(--accent-soft); color: var(--accent); }
body.pay-mode .nav-txt { display: none; }
@media (max-width: 420px) { .nav-txt { padding: 0 9px; margin-right: 0; font-size: 13px; } .topbar { gap: 6px; } }

/* 배지: 작은 알약, 단계별 색 점 */
.bdg { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; vertical-align: middle; background: var(--soft); color: var(--sub); flex: none; }
.bdg::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bdg.bronze { background: #FBEFE6; color: #9A5B2E; }
.bdg.silver { background: #EEF0F5; color: #5B6577; }
.bdg.gold { background: var(--gold-soft); color: var(--gold-ink); }
.bdg.diamond { background: #E6F4FD; color: #1D6FA8; }
.bdg.creator { background: var(--accent); color: var(--on-accent); }
.bdg.creator::before { background: var(--on-accent); }
.nm-row, .fan-nm, .wi-who, .cm-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.dm-item .nm-row { flex-wrap: nowrap; overflow: hidden; }
.my-badge { display: inline-flex; align-items: center; gap: 6px; }

/* 게시물 카드: ♥ 수 */
.post .pmeta { display: flex; justify-content: space-between; gap: 8px; }
.post .pmeta .pstat { flex: none; }
.post .pmeta .liked { color: #FF4D6A; }

/* 좋아요 · 댓글 버튼 */
.post-act, .fi-act { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.act-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px; border-radius: 999px; border: 0; background: var(--soft); color: var(--sub); font-weight: 800; font-size: 14px; cursor: pointer; }
.act-btn svg { fill: none; flex: none; }
.act-btn:hover { background: var(--accent-soft); color: var(--accent); }
.act-btn.like.on { background: #FFEEF1; color: #FF4D6A; }
.act-btn.like.on svg { fill: currentColor; }

/* 댓글 */
.post-comments { max-width: 640px; margin: 16px auto 0; scroll-margin-top: 76px; }
.cm-form { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; }
.cm-form textarea { flex: 1; min-width: 0; min-height: 40px; height: 40px; resize: none; padding: 9px 12px; font-size: 14px; line-height: 1.5; }
.cm-form .btn { height: 40px; flex: none; }
.cm-form.sm textarea { min-height: 34px; height: 34px; padding: 6px 10px; }
.cm-form.sm .btn { height: 34px; }
.cm-list { margin-top: 8px; }
.cm { display: flex; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.cm-list > .cm:first-child { border-top: 0; }
.cm .grow { flex: 1; min-width: 0; }
.cm-who b { font-size: 14px; }
.cm-who .faint { font-size: 12px; }
.cm-text { margin-top: 4px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-act { display: flex; gap: 12px; margin-top: 4px; }
.cm-act .linkbtn { font-size: 12px; color: var(--faint); }
.cm-act .linkbtn:hover { color: var(--accent); }
.cm.reply { padding: 10px 0 0; border-top: 0; }
.cm-replies { margin-top: 2px; padding-left: 2px; }
.cm.reply.by-creator .cm-text { background: var(--accent-soft); border-radius: 4px 14px 14px 14px; padding: 8px 12px; display: inline-block; }
.cm-locked { margin-top: 10px; padding: 16px; border-radius: 14px; background: var(--soft); color: var(--sub); font-size: 14px; font-weight: 700; text-align: center; }
.post-comments .empty.ill { padding: 12px 0 4px; }

/* 피드 */
.feedwrap { max-width: 680px; }
.feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.feed-follows { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 12px; }
.feed-follows::-webkit-scrollbar { display: none; }
.ff { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; flex: none; font-size: 12px; font-weight: 700; color: var(--sub); }
.ff span:last-child { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff .avatar { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent-soft); }
.ff-plus { width: 52px; height: 52px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); display: grid; place-items: center; font-size: 22px; color: var(--accent); }
.feed { display: flex; flex-direction: column; gap: 14px; }
.feed-item { overflow: hidden; }
.fi-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.fi-head .row { gap: 10px; min-width: 0; }
.fi-head b { font-size: 15px; }
.fi-media { position: relative; display: block; background: var(--soft); aspect-ratio: 4 / 3; overflow: hidden; }
.fi-media img { width: 100%; height: 100%; object-fit: cover; }
.fi-media.locked img { filter: blur(var(--blur, 20px)); transform: scale(1.15); }
.fi-media.locked { background: linear-gradient(135deg, var(--accent-soft), var(--soft)); }
.fi-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(var(--card-rgb), .35); }
.fi-lock .lk-chip { background: var(--card); border-radius: 999px; padding: 8px 14px; box-shadow: var(--shadow); }
.fi-lock-t { font-size: 13px; font-weight: 700; color: var(--text); }
.fi-body { display: block; padding: 12px 16px 0; }
.fi-title { display: block; font-size: 17px; letter-spacing: -.02em; }
.fi-text { margin-top: 4px; font-size: 14px; line-height: 1.65; color: var(--sub); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fi-text.only { color: var(--text); font-size: 15px; margin-top: 0; }
.fi-act { padding: 0 16px 14px; }
.feed-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 560px) { .feed-empty .btn { width: 100%; } .fi-head { padding: 12px 14px; } .fi-body { padding: 10px 14px 0; } .fi-act { padding: 0 14px 12px; } }

/* 크리에이터 페이지: 칸 탭 + 후원 메시지 벽 */
.ctabs { margin: 18px 0 0; position: sticky; top: 60px; z-index: 5; padding: 8px 0; background: linear-gradient(var(--bg) 70%, transparent); }
.ctabs .tn { margin-left: 4px; opacity: .7; font-weight: 800; }
.creator-page .csec { scroll-margin-top: 120px; }
.sec-sub { font-size: 13px; font-weight: 700; letter-spacing: 0; margin-left: 6px; }
.wall-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
.wall-item { padding: 14px 16px; }
.wall-item.mine { box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }
.wi-top { display: flex; align-items: center; gap: 10px; }
.wi-top .grow { flex: 1; min-width: 0; }
.wi-top .faint { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wi-amt { flex: none; font-weight: 800; font-size: 15px; color: #8A5A00; background: #FFF4D6; border-radius: 10px; padding: 4px 9px; }
.wi-msg { margin-top: 10px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.wi-hide { margin-top: 8px; font-size: 12px; color: var(--faint); }
.avatar-ph.anon { background: var(--soft); color: var(--faint); font-size: 15px; }
.wall-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wall { grid-template-columns: 1fr; } .wall-empty .btn { width: 100%; } .ctabs { top: 56px; } }
.wallcheck { margin-top: 2px; }
.dmcheck.sub { margin-left: 24px; margin-top: 4px; }
.dmcheck.off { opacity: .45; cursor: default; }
.give .wallcheck .dmcheck { margin-top: 2px; font-size: 12px; }

/* 결제 완료: 팔로우 + 자랑하기 */
.after-share .as-who { gap: 10px; align-items: center; }
.after-share .as-who .btn { flex: none; }
.share-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.share-row .btn { height: 44px; font-size: 14px; }
.share-x { background: #111 !important; color: #fff; box-shadow: none; }
.share-x b { font-size: 16px; margin-right: 2px; }
.share-kakao { background: #FEE500 !important; color: #191600; box-shadow: none; }
.kk-dot { width: 16px; height: 14px; border-radius: 50% / 45%; background: #191600; flex: none; }
.share-text { margin-top: 10px; font-size: 12px; line-height: 1.55; background: var(--soft); border-radius: 12px; padding: 10px 12px; overflow-wrap: anywhere; }
@media (max-width: 380px) { .after-share .as-who { flex-wrap: wrap; } .after-share .as-who .btn { width: 100%; } }

/* 스튜디오: 배지 설정 */
.bf-list { display: flex; flex-direction: column; gap: 8px; }
.bf-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 48px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--soft); }
.bf-row .bdg { justify-self: start; max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
.bf-name .input { height: 38px; width: 100%; }
.bf-min .input { width: 130px; }
.bf-n { text-align: right; font-size: 12px; }
@media (max-width: 600px) {
  .bf-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bf-name { grid-column: 1 / -1; order: 2; }
  .bf-min { grid-column: 1 / -1; order: 3; }
  .bf-min .input { width: 100%; flex: 1; }
  .bf-n { order: 1; }
}

/* ================= 8차: 목표 바 · 멤버십 · 예약/임시저장 · 잠금 DM 템플릿 · 수입 리포트 · 프로필 꾸미기 ================= */
/* 커버 색 · 그라데이션 (사진 대신) */
.cs-c-violet { background: #EFE3C4; }
.cs-c-peach { background: #FFDCCB; }
.cs-c-mint { background: #C8EEDD; }
.cs-c-sky { background: #CDE6FF; }
.cs-c-night { background: #1E1E1E; }
.cs-g-violet { background: linear-gradient(120deg, #8A6420 0%, #C9A227 50%, #F6EEDC 100%); }
.cs-g-sunset { background: linear-gradient(120deg, #FF7A59 0%, #FFB36B 45%, #FFD9E4 100%); }
.cs-g-ocean { background: linear-gradient(120deg, #2D6FE8 0%, #4FC3F0 55%, #D3F4FF 100%); }
.cs-g-mint { background: linear-gradient(120deg, #0F9D84 0%, #4DD39A 55%, #DDF8E8 100%); }
.cs-g-night { background: linear-gradient(120deg, #0B0B0B 0%, #0F5132 60%, #5E9C7A 100%); }
.cover[data-cover-style] { box-shadow: inset 0 -60px 80px -60px rgba(0, 0, 0, .12); }
.cs-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-opt { width: 44px; height: 44px; border-radius: 12px; border: 0; cursor: pointer; box-shadow: 0 0 0 1px var(--line); position: relative; padding: 0; }
.cs-opt.photo { background: var(--soft); font-size: 11px; font-weight: 800; color: var(--sub); }
.cs-opt.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
.cs-preview { height: 90px; border-radius: 14px; }
.tagline { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--text-2); letter-spacing: -.02em; overflow-wrap: anywhere; }
.emoji-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.emo { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--soft); font-size: 17px; cursor: pointer; }
.emo:hover { background: var(--accent-soft); }

/* 외부 링크 아이콘 (주소 보고 자동) */
.links a.slink { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; }
.slink svg, .lk-prev svg { flex: none; }
.links a.lk-instagram, .lk-prev.lk-instagram { background: #FDECF4; color: #B5306E; }
.links a.lk-youtube, .lk-prev.lk-youtube { background: #FFE9E9; color: #D41919; }
.links a.lk-x, .lk-prev.lk-x { background: #EDEDF0; color: #15141A; }
.links a.lk-chzzk, .lk-prev.lk-chzzk { background: #E3FAF0; color: #078A55; }
.links a.lk-afreeca, .lk-prev.lk-afreeca { background: #E7F0FF; color: #1D5FD1; }
.lk-prev { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.link-row { gap: 8px; }
.link-row .input { min-width: 0; }

/* 이번 달 목표 */
.goal { margin-top: 16px; padding: 16px 18px; overflow: hidden; }
.goal-top { display: flex; align-items: flex-end; gap: 12px; }
.goal-top .grow { flex: 1; min-width: 0; }
.goal-k { font-size: 12px; font-weight: 800; color: var(--faint); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.goal-t { margin-top: 4px; font-size: 16px; color: var(--sub); overflow-wrap: anywhere; }
.goal-t b { color: var(--text); }
.goal-pct { font-size: 28px; font-weight: 800; letter-spacing: -.04em; color: var(--accent); flex: none; }
.goal-line { height: 10px; margin-top: 10px; }
.goal-line > i { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.goal.done { box-shadow: 0 0 0 2px #D8F3E3, var(--shadow); }
.goal.done .goal-pct { color: var(--ok); }
.goal-meta { display: flex; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }
.goal-meta a { color: var(--accent); font-weight: 700; }
.goal-now { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--soft); }
.goal-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.goal-form .mini .input { width: 150px; }
.goal-text { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.goal-text .input { height: 38px; flex: 1; min-width: 0; }
.goal-btns .btn { height: 38px; }
.goal-hit { display: flex; gap: 12px; align-items: flex-start; box-shadow: 0 0 0 2px var(--accent-soft-2), var(--shadow); overflow: hidden; }
.gh-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); display: grid; place-items: center; font-size: 22px; flex: none; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.confetti i { position: absolute; top: -10px; width: 7px; height: 11px; border-radius: 2px; opacity: 0; animation: confetti 1.9s ease-out forwards; }
@keyframes confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx), 150px) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }
@media (max-width: 560px) {
  .goal { padding: 14px; }
  .goal-pct { font-size: 22px; }
  .goal-t { font-size: 14px; }
  .goal-form .mini, .goal-form .mini .input { width: 100%; }
  .goal-text { min-width: 100%; }
  .goal-btns { width: 100%; }
  .goal-btns .btn { flex: 1; }
}

/* 멤버십 (크리에이터 페이지 · 스튜디오 · 내 후원) */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.tier { padding: 18px; display: flex; flex-direction: column; gap: 6px; position: relative; min-width: 0; }
.tier.pick { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.tier.mine { box-shadow: 0 0 0 2px #CDEFD9, var(--shadow); }
.tier-pick { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 8px; }
.tier-name { font-size: 16px; font-weight: 800; letter-spacing: -.02em; padding-right: 48px; }
.tier-price { font-size: 26px; font-weight: 800; letter-spacing: -.04em; }
.tier-price span { font-size: 13px; color: var(--faint); font-weight: 700; letter-spacing: 0; }
.tier-perks { margin: 4px 0 0; padding: 0; list-style: none; flex: 1; }
.tier-perks li { font-size: 14px; color: var(--sub); line-height: 1.5; padding: 3px 0 3px 20px; position: relative; }
.tier-perks li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 10px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.tier-foot { margin-top: 4px; }
.tier .btn { margin-top: 6px; }
.tier-mine { margin-top: 6px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); font-weight: 800; }
.member-now { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 16px; background: var(--accent-soft); box-shadow: none; }
.member-now .linkbtn { margin-left: auto; }
.tier-note a { color: var(--accent); font-weight: 700; }
.lk-chip.member { color: var(--accent); }
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-rows { display: flex; flex-direction: column; gap: 10px; }
.tier-row { padding: 12px; border-radius: 14px; background: var(--soft); display: flex; flex-direction: column; gap: 8px; }
.tier-row.off { display: none; }
.tier-row .tr-top { gap: 8px; }
.tier-row .tr-top > .input { flex: 1; min-width: 0; height: 40px; background: var(--card); }
.tier-row .tr-price .input { width: 110px; height: 40px; background: var(--card); }
.tier-row .tr-perks { height: auto; min-height: 60px; padding: 8px 12px; background: var(--card); resize: vertical; }
.tier-row .w-ic { width: 32px; height: 32px; border-radius: 10px; border: 0; background: var(--card); cursor: pointer; flex: none; color: var(--faint); }
@media (max-width: 560px) {
  .tier-row .tr-top { flex-wrap: wrap; }
  .tier-row .tr-top > .input { flex-basis: calc(100% - 40px); }
  .tier-row .tr-price { width: 100%; }
  .tier-row .tr-price .input { flex: 1; width: auto; }
}
.mcard { display: flex; flex-direction: column; gap: 10px; }
.mcard > .row { gap: 10px; }
.mc-tier { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); }
.mc-tier b { color: var(--accent); }
.mc-tier span { font-weight: 800; font-size: 14px; }
.mc-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mc-dates > div { display: flex; flex-direction: column; gap: 2px; }
.mc-dates b { font-size: 15px; }
.mc-act { gap: 8px; }

/* 글쓰기: 잠금 종류 · 발행(지금·예약·임시저장) */
.tier-sel { max-width: 260px; height: 44px; }
.pub-row { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.pub-at { max-width: 240px; height: 44px; }
.item.not-live { background: linear-gradient(90deg, rgba(var(--accent-rgb), .07), transparent 60%); border-radius: 12px; }
@media (max-width: 560px) { .tier-sel, .pub-at { max-width: none; width: 100%; } }

/* 잠금 DM 템플릿 · 열람률 */
.bc-btns { gap: 8px; flex-wrap: wrap; }
.bc-btns .btn { flex: 1 1 160px; }
.tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tpl { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--soft); min-width: 0; }
.tpl .grow { flex: 1; min-width: 0; }
.tpl-img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; filter: blur(2px); }
.tpl-img.txt { filter: none; display: grid; place-items: center; background: var(--card); color: var(--faint); font-weight: 800; font-size: 13px; }
.tpl-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tpl-t b { font-size: 14px; }
.tpl-x { font-size: 13px; color: var(--sub); margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.tpl-act .linkbtn { font-size: 12px; color: var(--faint); }
.tpl-grid > .empty.ill { grid-column: 1 / -1; }
.bc-what { display: inline-block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.bc-rate { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mini-bar { width: 80px; height: 6px; display: inline-block; }
.mini-bar > i { height: 6px; }
@media (max-width: 700px) {
  .tpl-grid { grid-template-columns: 1fr; }
  .tpl { flex-wrap: wrap; }
  .tpl-act { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; }
  .bc-what { max-width: 210px; }
}

/* 수입 리포트 · 정산 내역서(인쇄) */
.rep-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rep-sum > div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: var(--soft); min-width: 0; }
.rep-sum b { font-size: 18px; letter-spacing: -.03em; }
.rep-act { gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) { .rep-sum { grid-template-columns: 1fr 1fr; } .rep-act .btn { flex: 1; } }
.statement { max-width: 900px; }
.st-bar { margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.st-bar .row { gap: 6px; }
.st-paper { padding: 32px 36px; }
.st-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 2px solid var(--text); padding-bottom: 16px; }
.st-brand { font-size: 13px; font-weight: 800; color: var(--accent); }
.st-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -.04em; margin: 2px 0; }
.st-who { text-align: right; font-size: 14px; line-height: 1.6; }
.st-paper h2 { font-size: 16px; font-weight: 800; margin: 24px 0 8px; }
.st-sum { width: 100%; border-collapse: collapse; margin-top: 16px; }
.st-sum th, .st-sum td { padding: 10px 4px; border-bottom: 1px solid var(--line); text-align: left; font-size: 15px; }
.st-sum th { font-weight: 600; color: var(--sub); }
.st-sum td { text-align: right; font-weight: 700; white-space: nowrap; }
.st-sum tr.tot th, .st-sum tr.tot td { font-size: 18px; font-weight: 800; color: var(--text); border-bottom: 2px solid var(--text); }
.st-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-tbl th, .st-tbl td { padding: 7px 6px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.st-tbl th { color: var(--sub); font-size: 12px; background: var(--soft); }
.st-tbl td:nth-last-child(-n+3), .st-tbl thead th:nth-last-child(-n+3) { text-align: right; }
.st-what { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.st-scroll { overflow-x: auto; }
.st-note { margin-top: 20px; line-height: 1.6; }
@media (max-width: 700px) {
  .st-paper { padding: 18px 14px; }
  .st-head { flex-direction: column; }
  .st-who { text-align: left; }
  .st-head h1 { font-size: 22px; }
}
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff !important; }
  .topbar, .foot, .no-print, #notice, #banned, #toast, .testband { display: none !important; }
  main.wrap { padding: 0 !important; max-width: none; }
  .statement { max-width: none; }
  .st-paper { box-shadow: none; padding: 0; border-radius: 0; }
  .st-scroll { overflow: visible; }
  .st-what { max-width: none; white-space: normal; }
  .st-tbl th { background: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tabbar, .skip { display: none !important; }
}

/* ================= 9차: 알림 센터 · 검색 · 차단 · 접근성(초점·대비·하단 탭바) · 온보딩 · 시작 가이드 ================= */
/* 글자 대비: 연한 글씨도 흰 배경·연보라 배경에서 4.5:1 이상 (디자인2/08 "메타 12px 연하게"는 유지) */
.links a, .pill.accent, .chip.on, .linkbtn, .accent-t { color: var(--accent-ink); }

/* 키보드 초점: 마우스 클릭에는 안 보이고 Tab 으로 움직일 때만 보라 테두리 */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
.btn.primary:focus-visible, .tabs .on:focus-visible { outline-color: var(--text); }
.switch input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
main:focus { outline: none; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 2000; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 12px; font-weight: 800; font-size: 14px; transition: top .15s; }
.skip:focus, .skip:focus-visible { top: 10px; }
mark { background: #FFE98A; color: inherit; border-radius: 3px; padding: 0 1px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }

/* 🔔 미리보기 */
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu .bell-head .linkbtn { width: auto; padding: 4px 6px; font-size: 12px; }
.sheet:focus { outline: none; }
.excard { display: flex; flex-direction: column; }
.excard .pad { flex: 1; display: flex; flex-direction: column; }
.excard .pad > .row.between { margin-top: auto; }
.menu .bell-item, .nc-item { display: flex; gap: 10px; align-items: flex-start; position: relative; }
.n-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.n-ic.k-support { background: #FFEFF3; color: #D6336C; }
.n-ic.k-comment { background: #EAF4FF; color: #1D64C9; }
.n-ic.k-follow { background: #E9F8EF; color: #11823F; }
.n-ic.k-dm { background: var(--accent-soft); color: var(--accent); }
.n-ic.k-payout { background: #FFF4D6; color: #8A5A00; }
.n-ic.k-admin { background: var(--soft); color: var(--sub); }
.bell-item .grow, .nc-item .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.n-text { overflow-wrap: anywhere; }
.n-meta { font-size: 12px; }
.n-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF4D6A; flex: none; margin-top: 6px; }
.bell-all { display: block; text-align: center; padding: 10px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 800; color: var(--accent-ink); }
.menu a.bell-all:hover { background: var(--soft); }

/* /notifications */
main.wrap.notifwrap { max-width: 760px; }
.nc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.nc-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.nc-kinds .chip { height: 36px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.nc-kinds .chip .badge { height: 17px; min-width: 17px; font-size: 10px; }
.nc-act { gap: 10px; }
.nc-unread { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--sub); cursor: pointer; }
.nc-unread input { width: 18px; height: 18px; accent-color: var(--accent); }
.nc-list { padding: 6px; }
.nc-item { padding: 12px 10px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.nc-item + .nc-item { margin-top: 2px; }
.nc-item:hover { background: var(--soft); }
.nc-item.new { background: var(--accent-soft); }
.nc-item.new .n-text { font-weight: 700; }
.nc-row { cursor: pointer; align-items: center; }
.nc-row .grow { display: flex; flex-direction: column; gap: 2px; }
.nc-row .switch { margin-top: 0; }
.nc-set .set-row:first-child { border-top: 0; }

/* 둘러보기: 검색칸 · 정렬 3가지 · 분야 칩(수) */
.ex-bar { flex-wrap: wrap; align-items: center; }
.ex-q { position: relative; flex: 1 1 280px; min-width: 0; }
.ex-q svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.ex-q .input { padding-left: 38px; }
.ex-sort { flex: none; }
.ex-sort button { height: 38px; }
.ex-cats .chip { display: inline-flex; align-items: center; gap: 5px; }
.ex-cats .cn { font-size: 11px; font-weight: 800; color: var(--faint); }
.ex-cats .chip.on .cn { color: var(--accent); }
.ex-tag { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--text-2); overflow-wrap: anywhere; }
.ex-tag + .ex-bio { margin-top: 4px; }
.ex-cover[class*="cs-"] { box-shadow: none; }
.ex-stat { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .ex-sort { width: 100%; } .ex-sort button { flex: 1; padding: 0 8px; } }

/* 차단 · 더보기 */
/* 11차: 로그인 위 심볼 자리 (public/brand/eon8_symbol.svg, 없으면 글자 워드마크) */
.auth-sym { display: grid; place-items: center; height: 56px; margin-bottom: 8px; }
.auth-sym img { height: 56px; width: auto; max-width: 120px; }
.auth-word { font-size: 28px; font-weight: 800; letter-spacing: .02em; color: var(--text); }
/* 11차: 스튜디오 수입·정산 탭 상단 오른쪽 버튼 줄 */
.tab-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 12px; }
.tab-top .card-h { margin: 0; }
.tab-act { gap: 8px; flex-wrap: wrap; margin-left: auto; }
.tab-act .btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 700px) { .tab-act { width: 100%; } .tab-act .btn { flex: 1; justify-content: center; } .tab-act select { flex: none; width: auto; } }
/* 11차: "…" 대신 "공유"(아이콘 + 글자) */
.share-pbtn { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 0 14px; }
.share-pbtn svg { flex: none; }
.share-url { background: var(--soft); border-radius: 10px; padding: 10px 12px; font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 800px) { .pact .pbtn { flex: 1 1 auto; padding: 0 10px; min-width: 0; } .pact .share-pbtn { flex: none; padding: 0 12px; } }
.block-band { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #FDECEC; color: #9B2226; font-size: 13px; font-weight: 700; line-height: 1.5; }
.block-band .linkbtn { color: #9B2226; text-decoration: underline; margin-left: 4px; }
.chat-block { margin: 0 10px 10px; }
.more-list .btn { justify-content: flex-start; gap: 8px; }
.r-log { font-size: 13px; color: var(--sub); background: var(--soft); border-radius: 10px; padding: 8px 10px; line-height: 1.5; }
.r-log b { color: var(--text); margin-right: 4px; }
.r-memo { margin-top: 2px; color: var(--text); }
.r-memo-in { max-width: 420px; height: 36px; font-size: 13px; }

/* 크리에이터 시작 가이드 (프로필 완성도 %) */
.start-guide { margin-bottom: 16px; }
.sg-top { display: flex; align-items: center; gap: 14px; }
.sg-top .grow { flex: 1; min-width: 0; }
.sg-ring { --p: 0; width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--track) 0); }
.sg-ring b { width: 44px; height: 44px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--accent-ink); }
.sg-bar { height: 6px; }
.sg-list { list-style: none; margin: 12px 0 0; padding: 0; display: none; grid-template-columns: 1fr 1fr; gap: 8px; }
.start-guide.open .sg-list { display: grid; }
.sg-list a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--soft); min-height: 52px; }
.sg-list a:hover { background: var(--accent-soft); }
.sg-list .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sg-list b { font-size: 14px; }
.sg-chk { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--track-strong); flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.sg-list li.ok .sg-chk { background: var(--ok); border-color: var(--ok); }
.sg-list li.ok b { color: var(--sub); text-decoration: line-through; text-decoration-color: var(--faint); }
.sg-go { color: var(--accent); font-weight: 800; }
@media (max-width: 700px) { .sg-list { grid-template-columns: 1fr; } }

/* 첫 방문 안내 3장 */
.ob-sheet { max-width: 400px; }
.ob { position: relative; padding: 28px 22px 22px; text-align: center; }
.ob-skip { position: absolute; top: 14px; right: 16px; color: var(--sub); font-size: 13px; }
.ob-pic { width: 84px; height: 84px; margin: 6px auto 14px; border-radius: 26px; background: linear-gradient(135deg, var(--accent-soft), var(--accent-soft-2)); color: var(--accent); display: grid; place-items: center; }
.ob-pic svg { width: 40px; height: 40px; stroke-width: 1.5; }
.ob-step { font-weight: 800; }
.ob-t { font-size: 22px; font-weight: 800; letter-spacing: -.04em; margin-top: 4px; }
.ob-s { color: var(--sub); font-size: 15px; line-height: 1.65; margin-top: 8px; min-height: 74px; }
.ob-dots { display: flex; justify-content: center; gap: 6px; margin: 16px 0 14px; }
.ob-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--track-strong); transition: width .2s; }
.ob-dots i.on { width: 20px; background: var(--accent); }
.ob-btns { gap: 8px; }

/* 폰 하단 탭바: 홈 · 피드 · 메시지 · 알림 · 내 정보 (엄지 닿는 아래, 버튼 높이 56px) */
.tabbar { display: none; }
@media (max-width: 700px) {
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(var(--card-rgb), .97); box-shadow: 0 -1px 0 var(--line), 0 -6px 18px rgba(0, 0, 0, .06); padding: 0 4px env(safe-area-inset-bottom); backdrop-filter: saturate(1.4) blur(8px); }
  .tb-item { flex: 1; min-width: 0; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--faint); font-size: 11px; font-weight: 700; border-radius: 12px; }
  .tb-item.on { color: var(--accent-ink); }
  .tb-item.on .tb-ic { background: var(--accent-soft); }
  .tb-ic { position: relative; width: 44px; height: 28px; border-radius: 999px; display: grid; place-items: center; }
  .tb-ic .badge { position: absolute; top: -4px; right: 2px; height: 17px; min-width: 17px; font-size: 10px; padding: 0 4px; border: 2px solid var(--card); }
  .tb-l { white-space: nowrap; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* 탭바가 필요 없는 화면: 대화방 · 결제 · 시트 열림 · 인쇄 화면 */
  body.dm-chat .tabbar, body.pay-mode .tabbar, body.sheet-open .tabbar, body.statement-mode .tabbar { display: none; }
  body.dm-chat, body.pay-mode, body.statement-mode { padding-bottom: 0; }
  body.dm-chat .toast, body.pay-mode .toast { bottom: 24px; }
  body.dm-mode:not(.dm-chat) .dm { height: calc(100dvh - 60px - 60px - env(safe-area-inset-bottom)); }
  /* 위아래 메뉴가 겹치지 않게: 상단에서는 홈·메시지 아이콘 숨김 (아래 탭바에 있음) */
  .nav .ic-home, .nav .ic-msg { display: none; }
}

/* ================= 12차: 로고(로그인·푸터 워드마크) · 사업자 정보 푸터 · /business · 다크 모드 덮어쓰기 ================= */
/* 로그인 위 = 워드마크(로고+EON8) 크게. 색은 --wordmark-fill (라이트 딥그린 · 다크 골드) */
.auth-sym { height: auto; margin: 4px 0 14px; }
.auth-wm { display: block; height: 64px; aspect-ratio: 8711 / 2522; max-width: 100%; background: var(--wordmark-fill); -webkit-mask: url("/brand/eon8_wordmark.svg") center / contain no-repeat; mask: url("/brand/eon8_wordmark.svg") center / contain no-repeat; }
@media (max-width: 480px) { .auth-wm { height: 52px; } }

/* 푸터: 워드마크 · 사업자 정보(EON8_회사정보.md 그대로) · 법적 링크. 폰 390에서 잘리지 않게 항목 단위 줄바꿈 */
.foot { gap: 12px; padding: 28px 16px 32px; border-top: 1px solid var(--line); margin-top: 8px; }
.foot-wm-wrap { display: inline-flex; align-items: center; }
.foot-wm { display: block; height: 22px; aspect-ratio: 8711 / 2522; background: var(--wordmark-fill); -webkit-mask: url("/brand/eon8_wordmark.svg") center / contain no-repeat; mask: url("/brand/eon8_wordmark.svg") center / contain no-repeat; }
.foot-wm[hidden], .foot-name[hidden] { display: none; }
.foot-name { font-weight: 800; font-size: 15px; color: var(--text); }
.foot-biz { max-width: 760px; margin: 0; font-size: 12px; line-height: 1.75; color: var(--sub); overflow-wrap: anywhere; }
.foot-biz > span { display: block; }
.foot-biz i { font-style: normal; display: inline-block; max-width: 100%; }
.foot-biz i + i::before { content: '/'; margin: 0 7px; color: var(--faint); }
.foot-biz b { color: var(--text); }
@media (max-width: 480px) { .foot-biz i { display: block; } .foot-biz i + i::before { content: none; } }
.foot-links a[aria-current="page"] { color: var(--text); text-decoration: underline; }

/* /business 사업자 정보 · 법적 문서 원문 */
.biz-tbl { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
.biz-tbl th, .biz-tbl td { text-align: left; padding: 11px 8px; border-top: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.biz-tbl th { width: 34%; color: var(--sub); font-weight: 700; white-space: nowrap; }
.biz-tbl td { color: var(--text); font-weight: 600; }
@media (max-width: 480px) { .biz-tbl th { width: auto; white-space: normal; } }
.doc .legal-src { color: var(--text-2); }
.doc .legal-links { display: flex; gap: 8px 14px; flex-wrap: wrap; margin-top: 24px; font-size: 13px; }
.doc .legal-links a { color: var(--accent-ink); font-weight: 700; }

/* 다크 모드: 상태색(노랑·빨강·초록·파랑)과 사진 위 막을 어둡게 */
:root[data-theme="dark"] .pill.warn { background: #2B2210; color: #F0B45A; }
:root[data-theme="dark"] .pill.danger { background: #2E1416; color: #F3A5A7; }
:root[data-theme="dark"] .test-band { background: #2A2410; border-color: #4A3E14; color: #F0D68A; }
:root[data-theme="dark"] .b-tip { background: linear-gradient(90deg, #3A2E10, #2A2412); color: #F0D68A; }
:root[data-theme="dark"] .b-tip small { color: #E0BC4A; }
:root[data-theme="dark"] .cmp-note, :root[data-theme="dark"] .wi-amt, :root[data-theme="dark"] .n-ic.k-payout { background: #2A2410; color: #F0D68A; }
:root[data-theme="dark"] .preview-band { background: #2A2410; color: #F0D68A; }
:root[data-theme="dark"] .preview-band.warn, :root[data-theme="dark"] .notice.banned, :root[data-theme="dark"] .block-band { background: #2E1416; color: #F3A5A7; border-color: #4A2023; }
:root[data-theme="dark"] .block-band .linkbtn { color: #F3A5A7; }
:root[data-theme="dark"] .danger-zone { background: #1C1213; border-color: #4A2023; }
:root[data-theme="dark"] .pending-box { background: #1E1A0E; border-color: #4A3E14; }
:root[data-theme="dark"] .n-ic.k-support { background: #34161F; color: #F58BAA; }
:root[data-theme="dark"] .n-ic.k-comment { background: #13233A; color: #8DBBF2; }
:root[data-theme="dark"] .n-ic.k-follow { background: #12261A; color: #6FD39A; }
:root[data-theme="dark"] .bdg.bronze { background: #2E1F14; color: #E0A47A; }
:root[data-theme="dark"] .bdg.silver { background: #22252B; color: #C2C9D6; }
:root[data-theme="dark"] .bdg.diamond { background: #12263A; color: #8CCBF5; }
:root[data-theme="dark"] .links a.lk-instagram, :root[data-theme="dark"] .lk-prev.lk-instagram { background: #3A1620; color: #F58BAA; }
:root[data-theme="dark"] .links a.lk-youtube, :root[data-theme="dark"] .lk-prev.lk-youtube { background: #341616; color: #FF8A8A; }
:root[data-theme="dark"] .links a.lk-x, :root[data-theme="dark"] .lk-prev.lk-x { background: #262626; color: #EDEDED; }
:root[data-theme="dark"] .links a.lk-chzzk, :root[data-theme="dark"] .lk-prev.lk-chzzk { background: #12261C; color: #5FE0A6; }
:root[data-theme="dark"] .links a.lk-afreeca, :root[data-theme="dark"] .lk-prev.lk-afreeca { background: #13213A; color: #8DB3F5; }
:root[data-theme="dark"] .act-btn.like.on { background: #3A1A22; }
:root[data-theme="dark"] .tier.mine { box-shadow: 0 0 0 2px #1F4A30, var(--shadow); }
:root[data-theme="dark"] .goal.done { box-shadow: 0 0 0 2px #1F4A30, var(--shadow); }
:root[data-theme="dark"] .pm-logo.bank { background: #1E2633; color: #9DB6E0; }
:root[data-theme="dark"] .toast.err { background: #FBE3E3; color: #5A1010; }
:root[data-theme="dark"] mark { background: #5A4A10; }
:root[data-theme="dark"] .empty:not(.ill)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F5F5' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 19.5s-7.5-4.6-7.5-9.4A4 4 0 0 1 12 8a4 4 0 0 1 7.5 2.1c0 4.8-7.5 9.4-7.5 9.4z'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .btn, :root[data-theme="dark"] .lbtn:not(.kakao):not(.naver), :root[data-theme="dark"] .tabs a, :root[data-theme="dark"] .tabs button { box-shadow: 0 0 0 1px var(--line); }
:root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .tabs .on, :root[data-theme="dark"] .lbtn.primary { box-shadow: none; }
:root[data-theme="dark"] .post .ph img, :root[data-theme="dark"] .wish .pic img { filter: brightness(.92); }
:root[data-theme="dark"] .post.locked .ph img { filter: blur(var(--blur, 7px)) brightness(.85); }