/* public/_lib/style.css , 브랜드 토큰 고정. 임의 색 추가 금지 */
/* ★모바일이 기본이다. 팔로워는 거의 전부 인스타 인앱 브라우저로 폰에서 들어온다.
   데스크톱은 넓어지기만 하면 되고, 폰에서 깨지는 것이 곧 서비스가 죽는 것이다. */
/* 정본 docs/_engine/cards/pro.js 의 팔레트를 그대로 옮긴다. 이름도 같게 둬야 대조가 쉽다. */
:root{
  --clay:#C6603D; --ink:#211d18; --muted:#6f665b; --faint:rgba(33,29,24,.14);
  --cream:#ece9e0; --pos:#3E8E5A; --neg:#B04A3A; --gold:#C99A3B;
  --card:#fbf9f4;   /* 카드 표면. cream 과 같게 두면 카드 경계가 사라진다 */
  --safe-b:env(safe-area-inset-bottom,0px);
  --kb:0px;                        /* 키보드 높이. mobile.js 가 채운다 */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--cream); color:var(--ink);
  /* ★웹폰트를 받지 않는다. 한글 웹폰트는 서브셋해도 수백 KB 라
     모바일 데이터에서 첫 글자가 늦게 뜬다. 시스템 한글 폰트로 충분하다. */
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",Pretendard,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;               /* 가로 스크롤이 생기면 폰에서 화면이 흔들린다 */
  overscroll-behavior-y:contain;   /* 당겨서 새로고침 방지. 실시간이라 새로고침이 필요없다 */
  touch-action:manipulation;       /* 더블탭 확대와 탭 300ms 지연 제거 */
}
/* 화면 사이를 오가는 띠. 이게 없으면 팔로워는 보드 말고 아무 데도 못 간다. */
.nav{display:flex;gap:6px;padding:8px 0 4px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:0 0 auto;min-height:40px;display:inline-flex;align-items:center;padding:0 14px;
  border-radius:999px;border:1px solid var(--faint);color:var(--muted);
  text-decoration:none;font-size:14px;white-space:nowrap}
.nav a.on{background:var(--clay);border-color:var(--clay);color:#fff;font-weight:700}

.wrap{max-width:720px;margin:0 auto;padding:16px 14px calc(110px + var(--safe-b))}
.top{position:sticky;top:0;z-index:20;background:var(--cream);padding:10px 0;border-bottom:1px solid var(--faint)}
.stat{display:flex;gap:14px;font-size:13px;color:var(--muted);align-items:center;flex-wrap:wrap}
.stat b{color:var(--clay);font-weight:700}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px}
.dot.live{background:var(--pos)} .dot.dead{background:var(--muted)}
h1{font-size:22px;margin:12px 0 4px;letter-spacing:-.4px}
.sub{color:var(--muted);font-size:14px;margin:0 0 14px}
/* ★한 페이지 세 구획. 고정 상단(top)에 맞춰 앵커 착지점을 내려준다(내용 없으면 120px 기본값).
   JS(syncTopH)가 --top-h 를 실측해 넣는다. */
section.sec{scroll-margin-top:var(--top-h,120px)}
section.sec + section.sec{margin-top:34px;padding-top:22px;border-top:1px solid var(--faint)}
/* ★맨 마지막 구획은 내용이 적으면(스프린트가 비었을 때 등) 문서 전체 길이가 모자라
   "그 구획 맨 위까지" 스크롤을 못 한다(브라우저가 scrollHeight-viewport 로 잘라낸다,
   실측: docHeight 1548 - innerHeight 932 = 616 = 그때 나온 scrollY 와 정확히 일치).
   마지막 구획에 최소 한 화면 분량을 보장해 항상 자기 자리까지 스크롤되게 한다. */
section.sec:last-of-type{min-height:100dvh}
.card{background:var(--card);border:1px solid var(--faint);border-radius:14px;padding:14px;margin:10px 0}
.card h3{margin:0 0 6px;font-size:17px;line-height:1.35}
.card p{margin:0 0 10px;color:var(--muted);font-size:14px;line-height:1.5;white-space:pre-wrap}
.meta{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted)}
.who{font-weight:700;color:var(--ink)}
.acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
/* ★터치 타겟은 44px 이상. 이보다 작으면 폰에서 옆 버튼이 눌린다 */
.btn{border:1px solid var(--faint);background:transparent;color:var(--ink);
     border-radius:999px;padding:0 15px;min-height:44px;font-size:14px;
     cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center}
.btn.on{background:var(--clay);border-color:var(--clay);color:#fff}
.btn.primary{background:var(--clay);border-color:var(--clay);color:#fff;font-weight:700}
.btn:active{transform:scale(.97)}

.feed{position:fixed;right:10px;bottom:calc(96px + var(--safe-b));
      width:min(210px,52vw);pointer-events:none;z-index:30}
.feed div{background:rgba(33,29,24,.86);color:#fff;font-size:12px;padding:7px 10px;
          border-radius:10px;margin-top:6px;animation:slide .4s both;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes slide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

.hearts{position:fixed;inset:0;pointer-events:none;z-index:25;overflow:hidden}
.hearts span{position:absolute;bottom:60px;font-size:22px;
             animation:rise 2.4s ease-out forwards;will-change:transform,opacity}
@keyframes rise{to{transform:translateY(-70dvh) scale(1.3);opacity:0}}

/* 아이폰 홈 인디케이터에 버튼이 깔리지 않게 안전영역만큼 띄운다 */
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--cream);
     border-top:1px solid var(--faint);z-index:40;
     padding:10px 14px calc(10px + var(--safe-b))}
.bar .btn{width:100%}

/* ★진행 상황은 세로 타임라인이다(2026-08-14, 가로 스크롤 칸반을 폰에서 아무도 안 밀어봐서 교체).
   단계 번호(01~04)는 큰 세리프 숫자. 웹폰트를 안 받으므로 숫자는 시스템 제네릭 세리프
   (ui-serif → Georgia → Times New Roman)로만 세리프를 낸다. 한글 라벨엔 세리프 시스템폰트가
   거의 없어(있어도 화면마다 다름) 라벨은 기존 산세리프를 크고 자간 좁게 쓰는 절충이다. */
.stage{margin-top:30px}
.stage:first-child{margin-top:6px}
.stage-num{font-family:ui-serif,Georgia,"Times New Roman",serif;font-size:46px;line-height:1;
  color:var(--clay);font-weight:600;letter-spacing:-1px}
.stage-head{display:flex;align-items:center;gap:10px;margin-top:2px}
.stage-label{font-size:16px;font-weight:800;letter-spacing:-.3px;white-space:nowrap}
.stage-line{flex:1;height:1px;background:var(--faint)}
.stage-count{font-size:13px;color:var(--muted);font-weight:700}
.stage-body{margin:12px 0 0 4px}
/* 세로선이 카드를 관통한다. 카드가 이어 붙어야(margin 없이 border-bottom 만) 선이 끊기지 않는다.
   내 카드만 border-left 를 굵은 clay 로 바꿔 "그 구간만" 두꺼워 보이게 한다. */
.tcard{border-left:2px solid var(--faint);border-bottom:1px solid var(--faint);
  padding:12px 0 12px 16px}
.tcard:last-child{border-bottom:none}
.tcard.mine{border-left:4px solid var(--clay);padding-left:14px}
.tcard h3{margin:0 0 6px;font-size:16px;line-height:1.35}
.tcard p{margin:0 0 8px;color:var(--muted);font-size:13px;line-height:1.5;white-space:pre-wrap}
.tcard .star{color:var(--clay)}
.bar-track{height:10px;background:var(--faint);border-radius:6px;margin-top:8px;overflow:hidden}
.bar-fill{height:100%;width:0;background:var(--clay);transition:width .3s}
.lead-big{text-align:center;margin-top:26px;padding-top:20px;border-top:1px solid var(--faint)}
.lead-label{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}
.lead-num{display:block;font-size:40px;font-weight:800;color:var(--clay);letter-spacing:-1px}
/* ★값이 없을 때까지 크게 쓰면 화면에서 제일 큰 글씨가 "아직 없음" 이 된다.
   이 자리는 자랑할 숫자가 생겼을 때만 커야 한다. */
.lead-num.empty{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}

/* ★16px 미만이면 포커스할 때 아이폰이 화면을 확대한다. 확대되면 되돌아오지 않는다 */
input,textarea{width:100%;font-family:inherit;font-size:16px;padding:12px;
  border:1px solid var(--faint);border-radius:10px;background:#fff;color:var(--ink)}
textarea{min-height:90px;resize:vertical}
label{display:block;font-size:13px;color:var(--muted);margin:12px 0 5px}

/* 다이얼로그는 폰에서 하단 시트로. 엄지가 닿는 자리에 버튼이 온다.
   키보드가 올라오면 mobile.js 가 --kb 를 채워 시트를 밀어 올린다 */
dialog{border:none;padding:18px;background:var(--cream);color:var(--ink);
  width:100%;max-width:560px;max-height:88dvh;overflow:auto;
  border-radius:18px 18px 0 0;margin:auto auto 0;
  padding-bottom:calc(18px + var(--safe-b));
  transform:translateY(calc(-1 * var(--kb)))}
dialog::backdrop{background:rgba(33,29,24,.45)}
@media (min-width:560px){
  dialog{border-radius:18px;margin:auto;padding-bottom:18px}
}