/* =====================================================================
   세계지식포럼(WKF) — 디자인 시스템
   Coinbase 가이드 구조 + WKF 크림슨 컬러 + Paperlogy
   ===================================================================== */
@import url('/css/fonts.css');

:root {
  /* ── 브랜드 컬러 (이미지의 크림슨/마젠타 기반) ── */
  --primary:          #C8154C;   /* WKF 크림슨 — 핵심 액션색 */
  --primary-active:   #A10E3D;
  --primary-soft:     #F7D9E2;
  --primary-disabled: #E0A9BB;
  --accent-gold:      #E0A33D;   /* 무대 조명 골드 (희소 사용) */

  /* ── 잉크 / 본문 ── */
  --ink:         #1A0E12;
  --body:        #5C5158;
  --muted:       #8B8088;
  --muted-soft:  #B4ACB1;

  /* ── 서피스 ── */
  --canvas:        #FFFFFF;
  --surface-soft:  #FAF6F7;
  --surface-strong:#F2EAEC;
  --surface-dark:        #16060B;  /* 딥 와인-블랙 (히어로) */
  --surface-dark-elev:   #24121A;
  --hairline:      #E7DEE1;
  --hairline-soft: #F0E9EB;

  /* ── 텍스트 on 컬러 ── */
  --on-primary:  #FFFFFF;
  --on-dark:     #FFFFFF;
  --on-dark-soft:#C9B9C0;

  /* ── 시맨틱 ── */
  --live:    #E11D48;  /* LIVE 표시 */
  --success: #0E9F6E;

  /* ── 라운드 ── */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:100px; --r-full:9999px;

  /* ── 간격 ── */
  --s-xxs:4px; --s-xs:8px; --s-sm:12px; --s-base:16px; --s-md:20px;
  --s-lg:24px; --s-xl:32px; --s-xxl:48px; --s-section:96px;

  --shadow-soft: 0 4px 14px rgba(26,14,18,.06);
  --shadow-card: 0 10px 40px rgba(26,14,18,.10);

  --maxw: 1200px;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family:'Paperlogy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--canvas);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; }
.container { max-width:var(--maxw); margin:0 auto; padding:0 var(--s-lg); }

/* ── 타이포 ── */
.display-mega { font-size:72px; font-weight:800; line-height:1.02; letter-spacing:-2px; }
.display-xl   { font-size:56px; font-weight:800; line-height:1.04; letter-spacing:-1.5px; }
.display-lg   { font-size:44px; font-weight:700; line-height:1.08; letter-spacing:-1px; }
.display-md   { font-size:34px; font-weight:700; line-height:1.12; letter-spacing:-.6px; }
.title-lg     { font-size:26px; font-weight:700; letter-spacing:-.4px; }
.title-md     { font-size:20px; font-weight:600; }
.title-sm     { font-size:16px; font-weight:600; }
.body-md      { font-size:16px; font-weight:400; }
.body-sm      { font-size:14px; font-weight:400; }
.caption      { font-size:13px; font-weight:400; color:var(--muted); }

/* ── 버튼 ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:var(--r-pill); font-weight:600; font-size:16px;
  padding:0 24px; height:48px; transition:background .15s, transform .1s, box-shadow .15s;
}
.btn:active { transform:translateY(1px); }
.btn-primary    { background:var(--primary); color:var(--on-primary); }
.btn-primary:hover  { background:var(--primary-active); }
.btn-primary:disabled { background:var(--primary-disabled); cursor:not-allowed; }
.btn-secondary  { background:var(--surface-strong); color:var(--ink); }
.btn-secondary:hover { background:var(--hairline); }
.btn-outline-dark { background:transparent; color:var(--on-dark); border:1.5px solid rgba(255,255,255,.55); }
.btn-outline-dark:hover { background:rgba(255,255,255,.1); }
.btn-lg { height:56px; padding:0 32px; font-size:17px; }
.btn-block { width:100%; }

/* ── 폼 입력 ── */
.input {
  width:100%; height:52px; padding:0 16px; font-size:16px; font-family:inherit;
  border:1.5px solid var(--hairline); border-radius:var(--r-md); background:var(--canvas);
  color:var(--ink); transition:border-color .15s;
}
.input:focus { outline:none; border-color:var(--primary); }
.input::placeholder { color:var(--muted-soft); }
.field-label { display:block; font-size:13px; font-weight:600; color:var(--body); margin-bottom:8px; }

/* ── 배지 ── */
.badge {
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px;
  border-radius:var(--r-pill); font-size:12px; font-weight:700; letter-spacing:.3px;
  background:var(--surface-strong); color:var(--ink);
}
.badge-live {
  background:var(--live); color:#fff;
}
.badge-live .dot {
  width:7px; height:7px; border-radius:50%; background:#fff;
  animation:livePulse 1.2s infinite;
}
@keyframes livePulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ── 카드 ── */
.card {
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:var(--r-xl); padding:var(--s-xl);
}

/* ── 헤더 (화이트) ── */
.wkf-header {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.wkf-header .inner {
  max-width:var(--maxw); margin:0 auto; height:68px; padding:0 var(--s-lg);
  display:flex; align-items:center; justify-content:space-between;
}
.wkf-logo { color:var(--ink); font-weight:900; font-size:18px; line-height:1; letter-spacing:.5px; }
.wkf-logo small { display:block; font-size:9px; font-weight:600; letter-spacing:3px; color:var(--primary); margin-top:3px; }
.wkf-nav { display:flex; align-items:center; gap:22px; }
.wkf-nav a { color:var(--body); font-size:14px; font-weight:500; }
.wkf-nav a:hover, .wkf-nav a.active { color:var(--primary); }

/* ── 푸터 ── */
.wkf-footer {
  background:var(--surface-dark); color:var(--on-dark-soft);
  padding:48px var(--s-lg); font-size:13px;
}
.wkf-footer .inner { max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; }

/* ── 유틸 ── */
.text-center { text-align:center; }
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;}
.hidden { display:none !important; }

@media (max-width:768px){
  .display-mega{font-size:44px;} .display-xl{font-size:36px;} .display-lg{font-size:30px;}
  .wkf-nav{gap:14px;} .wkf-nav a{font-size:13px;}
}