/* 17차-1 크리에이터 스튜디오 (작업지시_17차-1_스튜디오.md): 5탭 · 오늘 할 일 · 정산 자동 계산 · 잎 입력 · 고마워요 · 글 미리보기 · 목표(기간)
   색·글꼴·모서리는 우리 규칙 변수 그대로 (style.css · themes.css): --card --soft --text --sub --faint --accent --on-accent --accent-ink --accent-soft --radius --track */

/* ---------- 탭 5개 (폰에서도 한 줄 · 옆으로 밀기 없음) + 탭 안의 칸 ---------- */
.tabs.st5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; overflow: visible; margin: 12px 0 8px; }
.tabs.st5 a { justify-content: center; min-height: 40px; padding: 8px 4px; font-size: 14px; white-space: nowrap; }
.st-sub { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.st-sub a { padding: 10px 12px; font-size: 14px; font-weight: 700; color: var(--sub); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.st-sub a.on { color: var(--text); border-bottom-color: var(--accent); }
body.studio-mode .studio-head .page-title.big { margin: 0; }

/* ---------- 홈: 오늘 할 일 · 오늘 수입 · 정산 가능 잎 ---------- */
.st-todo { padding: 14px 16px; }
.st-todo .card-h { font-size: 17px; }
.todo-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.todo { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--text); font-size: 14px; }
.todo b { color: var(--accent-ink); }
.todo:hover { background: var(--accent-soft-2, var(--accent-soft)); }
.todo-go { color: var(--accent-ink); font-weight: 800; }
.todo-done { margin: 8px 0 0; font-size: 15px; font-weight: 700; color: var(--ok, var(--accent-ink)); }
.st-now { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; margin-top: 12px; }
.st-now .stat { padding: 14px 16px; }
.st-now .stat .v { font-size: 24px; margin-top: 4px; }
.pay-calc { margin-top: 6px; font-size: 13px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.stat.accent .pay-calc, .stat.accent .pay-min { color: var(--on-accent); }
.pay-min { margin-top: 2px; font-size: 12px; opacity: .85; }
.pay-calc.big { font-size: 15px; padding: 10px 12px; border-radius: var(--radius); background: var(--accent-soft); color: var(--text); }
#leaf-pay .pay-calc { color: var(--sub); }
.sg-done { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 14px; border-radius: var(--radius); background: var(--card); font-size: 14px; font-weight: 700; color: var(--sub); }
.sg-done .linkbtn { margin-left: auto; font-size: 13px; }
.st-now + .start-guide { margin-top: 16px; }

/* ---------- 목표 (기간) ---------- */
.goal-due { font-size: 13px; font-weight: 800; color: var(--accent-ink); }
.goal-now.ended .goal-due { color: var(--sub); }
.goal-now.ended .goal-line i { background: var(--track-strong); }
.goal-end { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.goal-end .input { height: 38px; width: 160px; }
.goal-hist summary { cursor: pointer; }

/* ---------- 잎 입력 (🍃 + 숫자) ---------- */
.leaf-in { display: inline-flex; align-items: center; gap: 6px; }
.leaf-in > span[aria-hidden] { font-size: 16px; line-height: 1; }
.field > .leaf-in { display: flex; font-size: inherit; font-weight: inherit; color: inherit; margin: 0; }
.field > .leaf-in > span[aria-hidden] { display: inline; margin: 0; }
.field .leaf-in .input { flex: 1; }
.price-in .input { max-width: 130px; }
.leaf-in.hidden { display: none; }

/* ---------- 내 게시물 한 줄 성과 ---------- */
.post-perf { margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }

/* ---------- 글 올리기: 팬에게 이렇게 보여요 (메시지 미리보기 bc-sample 과 같은 모양) ---------- */
.post-prev { margin-top: 12px; }
.pp-who { font-weight: 400; }
.pp-sample { margin: 8px 0 0; width: 240px; }
.pp-photo { aspect-ratio: 5 / 3; background-size: cover; background-position: center; }
.pp-photo::before { content: ''; position: absolute; inset: -20px; background: inherit; filter: blur(var(--blur, 14px)); }
.pp-photo .b-lock { z-index: 1; font-weight: 800; }
.pp-sample .b-unlock { cursor: default; }

/* ---------- 고마워요 보내기 ---------- */
.gift-row { align-items: center; }
.gift-row .thank-btn, .gift-row .thanked { flex: none; white-space: nowrap; }
.thanks-list { display: grid; gap: 8px; }
.thanks-opt { text-align: left; padding: 12px 14px; border: 0; border-radius: var(--radius); background: var(--soft); color: var(--text); font: inherit; font-size: 15px; line-height: 1.5; cursor: pointer; }
.thanks-opt:hover { background: var(--accent-soft); }
.thanks-opt:disabled { opacity: .6; cursor: default; }

/* ---------- 크리에이터 페이지 목표 바 (cp-feat 안, 멤버십 위) ---------- */
.cp-goal { padding: 10px 14px; background-color: var(--card); border-radius: var(--radius); display: grid; gap: 4px; }
.cp-goal + .cp-tiers { margin-top: 8px; }
.cg-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cg-k { font-size: 13px; font-weight: 800; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.cg-due { font-size: 12px; font-weight: 700; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cg-pct { margin-left: auto; font-size: 16px; font-weight: 800; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.cg-t { font-size: 13px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-t b { color: var(--text); }
.cp-goal .goal-line { height: 6px; margin: 2px 0; }
.cp-goal.ended .goal-line i { background-color: var(--track-strong); }
.cp-goal.ended .cg-due { color: var(--text); }
.cg-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.cg-meta a { color: var(--accent-ink); font-weight: 700; }
@media (max-width: 600px) {
  /* 폰 첫 화면을 짧게: 목표 · 마감 · % 한 줄 + 달성하면 한 줄 + 진행바 (모인 잎·남은 잎 줄은 PC 에서만) */
  .cp-goal { padding: 8px 12px; gap: 2px; }
  .cg-meta { display: none; }
}
@media (min-width: 1024px) {
  .cp-goal { padding: 14px 20px; gap: 6px; margin-bottom: 16px; }
  .cp-goal + .cp-tiers { margin-top: 0; }
  .cg-k { font-size: 15px; }
  .cg-due { font-size: 13px; }
  .cg-pct { font-size: 22px; }
  .cg-t { font-size: 15px; }
  .cg-meta { font-size: 13px; }
}
/* 16차-3b 테마 미리보기에도 목표가 있는 경우만 한 줄 */
.pm2-goal { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 2px 8px; font-size: 11px; padding: 6px 8px; border-radius: 8px; background-color: var(--card); }
.pm2-goal .pm2-bar { grid-column: 1 / -1; }

/* ---------- 폰 ---------- */
@media (max-width: 600px) {
  body.studio-mode .studio-head .page-title.big { font-size: 24px; }
  body.studio-mode .studio-sub { font-size: 13px; margin-top: 2px; }
  .tabs.st5 { gap: 4px; margin: 10px 0 6px; }
  .tabs.st5 a { font-size: 13px; padding: 8px 2px; min-height: 40px; }
  .st-sub a { padding: 9px 10px; font-size: 13px; }
  .st-now { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
  .st-now .stat .v { font-size: 22px; }
  .goal-end, .goal-end .input { width: 100%; }
  .pp-sample { width: 100%; max-width: 260px; }
}