/* ============================================================
   REELCONOMY · v0.4 레트로 키치 OVERRIDE  v2.0
   Source of truth: 사이트_리뉴얼_2026-05-25/prototypes/reelconomy-renewal-v0.4.css
   레트로 키치 / 손글씨 스티커 / 아케이드 퀘스트.
   크림 + 민트·코랄·라임·블루·핑크 + Gaegu 손글씨.
   기존 클래스명 오버라이드. body HTML·로직 미수정.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Space+Grotesk:wght@500;700&display=swap');

:root{
  --ink:#17130f;     --ink2:#3A352C;
  --paper:#fffaf0;   --panel:#fffdf2;   --cream:#fff8e4;   --mat:#fff8e4;
  --accent:#5fd2c3;  --accent-d:#17130f;
  --coral:#f47f72;   --coral-d:#5a1a12;
  --lime:#dff36a;    --lime-d:#3a420a;
  --blue:#687dde;    --blue-d:#1a2a6a;
  --pink:#edb8d2;    --pink-d:#6a2a4a;
  --amber:#f4c06a;   --amber-d:#5a3a06;
  --mute:#746d62;    --line:#17130f;
  --shadow:7px 7px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
}

/* ---- base: v0.4 그리드 + 코랄/민트 글로우 ---- */
html,body{
  background:
    linear-gradient(90deg, rgba(23,19,15,.045) 1px, transparent 1px),
    linear-gradient(rgba(23,19,15,.045) 1px, transparent 1px),
    radial-gradient(circle at 12% 8%, rgba(244,127,114,.20), transparent 28%),
    radial-gradient(circle at 84% 14%, rgba(95,210,195,.22), transparent 24%),
    var(--cream) !important;
  background-size:28px 28px,28px 28px,auto,auto,auto !important;
  color:var(--ink);
}
body{ font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',system-ui,sans-serif; }
.hand{ font-family:'Gaegu','Noto Sans KR',cursive !important; font-weight:700; }
.intro-kicker,.sec-kicker{ font-family:'Gaegu','Noto Sans KR',cursive !important; font-weight:700; letter-spacing:.02em; }
::selection{ background:var(--accent); color:var(--ink); }

/* ---- typography: 명조/세리프 → Pretendard, 사이즈 ↓ (큰 글씨 금지) ---- */
.serif,.sec-head,.paper-title,.intro-title,
.prog-row .pr-name,.case-cell h3,.formula-cell .fc-v,
.ledger-row .val,.bio-chron-item h4,
footer.paper-foot .brand{
  font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif !important;
  font-weight:800; letter-spacing:-.02em;
}
.myeongjo,.paper-sub,.pullquote,.sec-lede,
.ms-item .q,.voice-card .v-quote,.bio-chron-item p,
.prog-row .pr-desc,.case-cell .case-note,.final-cta .note,
footer.paper-foot .tagline{
  font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif !important;
  font-weight:500;
}
.mono,.sec-num,.sec-kicker,.edition-bar,.ticker-item,
.bio-chron-item .year,.formula-cell .fc-n,.case-cell .case-n,
.voice-card .v-src,.prog-row .pr-n,.ledger-row .n,
footer.paper-foot h5,footer.paper-foot .colophon,.countdown-bar .cb-timer{
  font-family:'JetBrains Mono',ui-monospace,monospace !important;
}
.intro-title{ font-size:clamp(30px,7vw,92px) !important; }
.paper-title{ font-size:clamp(30px,6.4vw,84px) !important; margin:24px 0 18px !important; white-space:nowrap; }
.sec-head{ font-size:clamp(24px,4.2vw,46px) !important; line-height:1.12 !important; }
.paper-sub{ font-size:clamp(15px,1.9vw,20px) !important; }

/* accent emphasis: 민트 → 라임/핑크 */
.paper-title em,.sec-head em,.intro-title em,.formula-cell:last-child .fc-v em,
.ledger-row .val em,.case-cell .case-ba .a em,footer.paper-foot .brand em{
  color:var(--accent) !important; background:transparent;
}
.bio-chron-item h4 em{ color:var(--accent-d) !important; background:var(--accent) !important; padding:0 5px; border-radius:5px; }
.ms-item .q em,.voice-card .v-quote em{
  background:linear-gradient(transparent 60%, rgba(194,240,60,.55) 60%) !important;
  color:var(--ink) !important; padding:0 3px; font-weight:700;
}

/* ---- intro splash ---- */
#intro-overlay{
  background:
    radial-gradient(circle at 1px 1px, rgba(244,236,221,.12) 1px, transparent 0) 0 0/16px 16px,
    var(--ink) !important;
  transition:opacity .8s ease, transform .8s ease;
}
.intro-title em{ font-family:'Pretendard Variable',Pretendard,sans-serif !important; color:var(--accent) !important; }
.intro-rule{ background:var(--accent); height:4px; width:64px; border-radius:2px; }
.intro-kicker{ color:rgba(244,236,221,.55); }

/* ---- nav: 크림 + 두꺼운 보더 ---- */
.topnav{
  background:var(--paper) !important; backdrop-filter:none !important;
  border-bottom:3px solid var(--ink) !important;
}

/* ---- buttons: 청키(하단 보더 깊이) ---- */
.btn-primary,.btn-ghost,.cb-btn,.countdown-bar .cb-btn{
  border-radius:12px !important; border:2px solid var(--ink) !important;
  border-bottom-width:5px !important; font-family:'Pretendard Variable',Pretendard,sans-serif !important;
  font-weight:800 !important; transition:transform .1s !important;
}
.btn-primary{ background:var(--coral) !important; color:#fffdf2 !important; }
.btn-primary:hover{ background:var(--coral) !important; color:#fffdf2 !important; transform:translate(-1px,-1px); box-shadow:var(--shadow-sm); }
.btn-primary:active,.btn-ghost:active{ transform:translateY(2px); border-bottom-width:2px !important; }
.btn-ghost{ background:var(--panel) !important; color:var(--ink) !important; }
.btn-ghost:hover{ border-color:var(--ink) !important; color:var(--ink) !important; background:var(--cream) !important; }

/* ---- HERO ---- */
.hero{ background:#23201B !important; }
.edition-bar{ color:rgba(244,236,221,.6); border-color:rgba(244,236,221,.3); }
.ticker{ border-color:rgba(244,236,221,.25); }
.ticker-item b{ color:var(--accent); }

/* ---- editorial section bg ---- */
section.editorial{ padding:84px 24px !important; }
.sec-kicker{ color:var(--ink); }

/* manuscript: 룰드 페이퍼 제거 → 패널 카드 */
.manuscript{ background:var(--panel) !important; border:3px solid var(--ink); border-radius:18px; }
.manuscript::before{ display:none !important; }
.ms-item{ border-color:rgba(35,32,27,.16) !important; }

/* pull quote */
.pullquote{ border-left:5px solid var(--accent) !important; }

/* ledger */
.ledger{ border-top:3px solid var(--ink); border:3px solid var(--ink); border-radius:16px; padding:6px 18px; background:var(--panel); }
.ledger-row{ border-color:rgba(35,32,27,.14) !important; }

/* formula diagram → 청키 카드 */
.formula{ border:3px solid var(--ink) !important; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); }
.formula-cell{ background:var(--panel); }
.formula-cell:last-child{ background:var(--ink) !important; }
.formula-cell:last-child .fc-v em{ color:var(--accent) !important; }
.formula-cell::after{ background:var(--accent) !important; color:var(--accent-d); border:2px solid var(--ink); border-radius:50%; font-weight:800; }

/* bio chronology dots → 라임 */
.bio-chron{ border-left:2px solid var(--ink); }
.bio-chron-item::before{ background:var(--ink) !important; border:2px solid var(--ink); }
.bio-chron-item.now::before{ background:var(--accent) !important; box-shadow:0 0 0 4px rgba(194,240,60,.3) !important; }
.bio-portrait{ border:3px solid var(--ink); border-radius:16px; overflow:hidden; }

/* case cards → 청키 */
.case-stack{ border:3px solid var(--ink) !important; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); }
.case-cell{ background:var(--panel); }
.case-cell .case-ba .a em{ color:var(--accent-d) !important; background:var(--accent); padding:0 5px; border-radius:5px; }

/* voice cards → 둥근+그림자 */
.voice-card{ border:2px solid var(--ink) !important; border-radius:16px !important; background:var(--panel) !important; box-shadow:var(--shadow-sm); }

/* program rows → 청키 카드 스택 */
.prog-stack{ border-top:none !important; gap:12px !important; }
.prog-row{
  border:2px solid var(--ink) !important; border-radius:16px; background:var(--panel) !important;
  box-shadow:var(--shadow-sm); padding:18px !important; transition:transform .12s,box-shadow .12s !important;
}
.prog-row:hover{ background:var(--panel) !important; transform:translate(-2px,-2px); box-shadow:var(--shadow); padding:18px !important; }
.prog-row .pr-arrow{ color:var(--ink); }
.prog-row:hover .pr-arrow{ color:var(--accent-d); }

/* final CTA → ink + dot grid */
.final-cta{
  background:
    radial-gradient(circle at 1px 1px, rgba(244,236,221,.10) 1px, transparent 0) 0 0/16px 16px,
    var(--ink) !important;
}
.final-cta .note{ color:rgba(244,236,221,.65); }

/* footer */
footer.paper-foot{ border-top:3px solid var(--ink) !important; }
footer.paper-foot a:hover{ color:var(--accent) !important; }

/* countdown bar → 라임 칩 */
.countdown-bar{ border-top:3px solid var(--accent) !important; }
.countdown-bar .cb-unit{ background:var(--accent) !important; color:var(--accent-d) !important; border:2px solid var(--ink); border-radius:7px; }
.countdown-bar .cb-text em{ color:var(--accent) !important; }
.countdown-bar .cb-btn{ background:var(--accent) !important; color:var(--accent-d) !important; border-radius:10px !important; }

/* login modal (app.js 연동, 구조 유지 / 메인 톤 통일) */
#login-modal{
  background:rgba(23,19,15,.68) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  padding:18px;
}
#login-modal .lm-card,#login-modal>div{
  background:var(--panel) !important;
  border:3px solid var(--ink) !important;
  border-radius:18px !important;
  box-shadow:var(--shadow) !important;
  color:var(--ink) !important;
}
#login-modal h2{
  color:var(--ink) !important;
  font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif !important;
  font-weight:900 !important;
}
#login-modal p{ color:var(--mute) !important; }
#login-modal button[onclick="kakaoLogin()"],
#login-modal button[onclick="googleLogin()"]{
  border:2px solid var(--ink) !important;
  border-radius:12px !important;
  box-shadow:var(--shadow-sm) !important;
  transform:translate(0,0);
  transition:transform .14s,box-shadow .14s,background .14s !important;
}
#login-modal button[onclick="kakaoLogin()"]:hover,
#login-modal button[onclick="googleLogin()"]:hover{
  transform:translate(-2px,-2px);
  box-shadow:var(--shadow) !important;
}
#login-modal button[onclick="closeLoginModal()"]{
  color:var(--ink) !important;
  font-weight:800;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-decoration-color:var(--accent);
  text-underline-offset:4px;
}
#login-modal [data-preview-auth-button="true"]{
  background:var(--accent) !important;
  color:var(--ink) !important;
  border:2px solid var(--ink) !important;
  box-shadow:var(--shadow-sm) !important;
}

/* ============ 서브페이지 공유 클래스 (reelconomy.css 대체용) ============ */
.page-head{ background:var(--ink) !important; border-bottom:3px solid var(--accent) !important; }
.btn-row .btn-primary,.btn-row .btn-ghost{ min-height:48px; }
.card-grid{ border:3px solid var(--ink) !important; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); }
.card-cell{ background:var(--panel); }
.card-cell h3 em{ color:var(--accent-d) !important; background:var(--accent); padding:0 5px; border-radius:5px; }
.topnav-brand em{ color:var(--accent) !important; }
.topnav-mobile a.is-current{ background:var(--accent) !important; color:var(--accent-d) !important; border-radius:7px; }

/* page-head / cards / brand fonts → Pretendard */
.page-head h1,.card-cell h3,.topnav-brand,.curri-week .w-title,.mission-card h2{
  font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif !important; font-weight:800;
}
.page-head h1{ font-size:clamp(32px,7vw,68px) !important; }
.page-head .lede,.curri-week li{ font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif !important; }

/* class /class page-specific */
.mission-card{ border-radius:16px !important; box-shadow:var(--shadow-sm) !important; }
.mission-loop span{ border:2px solid var(--ink) !important; border-radius:11px; }

/* curriculum (/class) */
.curriculum{ border-top:3px solid var(--ink); }
.curri-week .w-title em{ color:var(--accent-d) !important; background:var(--accent); padding:0 5px; border-radius:5px; }
.curri-week li::before{ color:var(--accent); }

/* ============ 인트로 시네마틱 시퀀스 (Creator economy → 영상 → 메인 진입) ============ */
#intro-overlay{ overflow:hidden; }
#intro-overlay .intro-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s ease; z-index:1; pointer-events:none;
}
#intro-overlay .intro-stage{ position:relative; z-index:2; text-align:center; transition:opacity .7s ease, transform .7s ease; }
/* phase: video — beat1 사라지고 영상 재생 → finish에서 메인으로 전환 */
#intro-overlay[data-phase="video"] .intro-stage[data-beat="1"]{ opacity:0; transform:translateY(-14px); }
#intro-overlay[data-phase="video"] .intro-video{ opacity:.95; }

/* ============ 강조어 가독성 (밝은 크림 배경에서 형광 강조가 안 보이는 문제) ============ */
/* 헤딩·before→after 수치 강조: 코랄 + ink 외곽선 + 하드 그림자 → 또렷하게 */
.sec-head em,
.case-cell .case-ba .a em,
.ledger-row .val em,
footer.paper-foot .brand em{
  color:var(--coral) !important;
  background:transparent !important;
  -webkit-text-stroke:1.2px var(--ink);
  paint-order:stroke fill;
  text-shadow:2px 2px 0 rgba(23,19,15,.20);
  border-radius:0; padding:0;
}
/* 어두운 섹션 안의 헤딩 강조는 외곽선만(그림자 불필요) */
section.ink .sec-head em,.final-cta .sec-head em{ text-shadow:none; }
/* 본문/인용 형광펜: 코랄 틴트 + ink 밑줄 → 마커가 보이게 */
.ms-item .q em{
  color:var(--ink) !important;
  background:rgba(244,127,114,.22) !important;
  box-shadow:inset 0 -3px 0 var(--coral);
  padding:0 3px; border-radius:3px;
  -webkit-text-stroke:0;
}
.voice-card .v-quote em{
  color:var(--ink) !important;
  background:linear-gradient(transparent 50%, rgba(244,127,114,.42) 50%) !important;
  padding:0 2px; -webkit-text-stroke:0;
}
/* 옅은 라임/민트 형광 잔재 정리: 본문 일반 강조도 ink 유지 */
.paper-sub b,.sec-lede b,.lede b{ border-bottom:3px solid var(--coral) !important; color:inherit; }