/* ═══════════════════════════════════════════════════════════
   Crowny Finance — 월드 엔트리 (프리미엄 컨시어지)
   "크라우니파이낸스의 세계로 입장하는" 시네마틱 경험
   디자인 표준: 골드 #C9A961 · 웜다크 로비 · 세리프 우아함 · TOAU
   ═══════════════════════════════════════════════════════════ */

:root{
  --e-gold:#C9A961; --e-gold-bright:#E6C878; --e-gold-deep:#A08840;
  --e-ink:#0B0907; --e-ink2:#15100B; --e-ink3:#221A12;
  --e-cream:#F6EFE2; --e-cream-dim:#C9BCA6;
  --e-serif:'Cormorant Garamond','Georgia','Times New Roman',serif;
  --e-sans:-apple-system,'Pretendard','Noto Sans KR',BlinkMacSystemFont,sans-serif;
}

/* 입장 전 챗 가림 — 오버레이 활성 중 본문 스크롤 잠금 */
body.cf-entry-lock{overflow:hidden}

/* ── 오버레이 셸 ── */
#cfEntry{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--e-sans);
  color:var(--e-cream);
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(230,200,120,.22), transparent 55%),
    radial-gradient(90% 60% at 50% 120%, rgba(201,169,97,.10), transparent 60%),
    linear-gradient(180deg, #1C140C 0%, #120D08 45%, #0A0706 100%);
  opacity:1; transition:opacity .7s ease;
  -webkit-font-smoothing:antialiased;
}
#cfEntry.cf-leaving{opacity:0; pointer-events:none}
#cfEntry.cf-done{display:none}

/* 미세 골드 입자 (부유) */
#cfEntry::before, #cfEntry::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(230,200,120,.55), transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(230,200,120,.40), transparent),
    radial-gradient(1px 1px at 45% 65%, rgba(230,200,120,.45), transparent),
    radial-gradient(1.5px 1.5px at 85% 75%, rgba(230,200,120,.35), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(230,200,120,.40), transparent);
  background-repeat:no-repeat;
  animation:cfFloat 14s ease-in-out infinite;
}
#cfEntry::after{animation-duration:20s; animation-direction:reverse; opacity:.6}
@keyframes cfFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-18px)}
}

/* ── 골드 게이트 (문 열림) ── */
.cf-gate{position:absolute; inset:0; z-index:3; pointer-events:none}
.cf-gate i{
  position:absolute; top:0; bottom:0; width:50.5%;
  background:linear-gradient(180deg,#1A130B,#0C0805);
  box-shadow:inset 0 0 60px rgba(0,0,0,.6);
}
.cf-gate i::after{ /* 골드 테두리 */
  content:""; position:absolute; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,transparent,var(--e-gold),transparent);
  opacity:.8;
}
.cf-gate .gl{left:0; border-right:1px solid rgba(201,169,97,.3); transform:translateX(0)}
.cf-gate .gl::after{right:0}
.cf-gate .gr{right:0; border-left:1px solid rgba(201,169,97,.3); transform:translateX(0)}
.cf-gate .gr::after{left:0}
#cfEntry.cf-open .cf-gate .gl{transform:translateX(-101%); transition:transform 1.5s cubic-bezier(.7,0,.2,1) .15s}
#cfEntry.cf-open .cf-gate .gr{transform:translateX(101%); transition:transform 1.5s cubic-bezier(.7,0,.2,1) .15s}

/* ── 무대 (중앙 콘텐츠) ── */
.cf-stage{
  position:relative; z-index:5; width:100%; max-width:560px;
  padding:32px 24px; text-align:center;
  max-height:100dvh; overflow-y:auto; scrollbar-width:none;
}
.cf-stage::-webkit-scrollbar{display:none}

/* 브랜드 마크 */
.cf-mark{
  font-size:46px; line-height:1; color:var(--e-gold);
  text-shadow:0 0 30px rgba(201,169,97,.55), 0 0 60px rgba(201,169,97,.25);
  animation:cfMarkIn 1.2s cubic-bezier(.2,.8,.2,1) both, cfPulse 4s ease-in-out 1.4s infinite;
}
@keyframes cfMarkIn{from{opacity:0; transform:scale(.6) rotate(-25deg)} to{opacity:1; transform:scale(1) rotate(0)}}
@keyframes cfPulse{0%,100%{text-shadow:0 0 30px rgba(201,169,97,.5),0 0 60px rgba(201,169,97,.22)} 50%{text-shadow:0 0 40px rgba(201,169,97,.75),0 0 80px rgba(201,169,97,.4)}}

.cf-brand{
  margin-top:14px; font-family:var(--e-serif);
  font-size:42px; font-weight:600; letter-spacing:.5px; color:var(--e-cream);
}
.cf-brand b{color:var(--e-gold); font-weight:700}
.cf-rule{
  width:0; height:1px; margin:18px auto 0;
  background:linear-gradient(90deg,transparent,var(--e-gold),transparent);
}
#cfEntry.cf-open .cf-rule{width:200px; transition:width 1s ease .6s}
.cf-kicker{
  margin-top:16px; font-family:var(--e-serif); font-style:italic;
  font-size:18px; color:var(--e-gold-bright); letter-spacing:.5px;
  opacity:0; animation:cfFadeUp .9s ease .8s both;
}

/* 공통 페이드업 */
@keyframes cfFadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}}

/* ── 컨시어지 인사 패널 ── */
.cf-greet{
  margin-top:30px; opacity:0;
}
.cf-greet.show{animation:cfFadeUp 1s ease both}
.cf-greet .role-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:2.5px; text-transform:uppercase; font-weight:700;
  color:var(--e-gold-bright);
  border:1px solid rgba(201,169,97,.4); border-radius:999px;
  padding:6px 16px; margin-bottom:16px;
}
.cf-greet .role-badge::before{content:"✦"; font-size:12px}
.cf-greet h2{
  font-family:var(--e-serif); font-size:30px; font-weight:600;
  line-height:1.3; color:var(--e-cream); letter-spacing:.3px;
}
.cf-greet h2 .nm{color:var(--e-gold-bright)}
.cf-greet p{margin-top:12px; font-size:15px; color:var(--e-cream-dim); line-height:1.7}

/* 관리자 브리핑 */
.cf-brief{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px;
}
.cf-brief .kpi{
  background:rgba(255,246,233,.05); border:1px solid rgba(201,169,97,.22);
  border-radius:12px; padding:12px 18px; min-width:96px;
}
.cf-brief .kpi .v{font-size:22px; font-weight:700; color:var(--e-gold-bright)}
.cf-brief .kpi .l{font-size:11px; color:var(--e-cream-dim); margin-top:3px; letter-spacing:.5px}

/* ── 서비스 선택 (게임 클래스 느낌) ── */
.cf-menu{margin-top:28px; opacity:0}
.cf-menu.show{animation:cfFadeUp 1s ease both}
.cf-menu .ask{
  font-family:var(--e-serif); font-size:20px; color:var(--e-cream);
  margin-bottom:18px; letter-spacing:.3px;
}
.cf-cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
.cf-card{
  position:relative; overflow:hidden; cursor:pointer;
  background:linear-gradient(165deg, rgba(255,246,233,.06), rgba(255,246,233,.02));
  border:1px solid rgba(201,169,97,.25); border-radius:16px;
  padding:18px 16px; text-align:left;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s, background .25s;
  animation:cfCardIn .6s cubic-bezier(.2,.8,.2,1) both;
}
.cf-card:nth-child(1){animation-delay:.05s}
.cf-card:nth-child(2){animation-delay:.12s}
.cf-card:nth-child(3){animation-delay:.19s}
.cf-card:nth-child(4){animation-delay:.26s}
.cf-card:nth-child(5){animation-delay:.33s}
.cf-card:nth-child(6){animation-delay:.40s}
@keyframes cfCardIn{from{opacity:0; transform:translateY(20px) scale(.96)} to{opacity:1; transform:translateY(0) scale(1)}}
.cf-card::after{ /* 골드 쉬머 */
  content:""; position:absolute; top:0; left:-60%; width:50%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(230,200,120,.18), transparent);
  transform:skewX(-18deg); transition:left .6s ease;
}
.cf-card:hover{
  transform:translateY(-4px);
  border-color:var(--e-gold);
  background:linear-gradient(165deg, rgba(201,169,97,.14), rgba(255,246,233,.03));
  box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(201,169,97,.3);
}
.cf-card:hover::after{left:120%}
.cf-card:active{transform:translateY(-1px) scale(.99)}
.cf-card.chosen{
  border-color:var(--e-gold-bright);
  background:linear-gradient(165deg, rgba(201,169,97,.28), rgba(201,169,97,.08));
  transform:scale(1.04);
  box-shadow:0 0 0 2px var(--e-gold), 0 18px 44px rgba(201,169,97,.3);
}
.cf-card .ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px; font-size:20px;
  background:rgba(201,169,97,.14); border:1px solid rgba(201,169,97,.3);
  color:var(--e-gold-bright); margin-bottom:12px;
}
.cf-card .nm{font-family:var(--e-serif); font-size:19px; font-weight:600; color:var(--e-cream)}
.cf-card .de{margin-top:5px; font-size:12.5px; color:var(--e-cream-dim); line-height:1.5}

/* 액션 버튼 (이어가기/관리데스크 등) */
.cf-acts{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px}
.cf-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--e-sans); font-size:14.5px; font-weight:700;
  padding:13px 24px; border-radius:999px; border:1px solid transparent;
  transition:transform .12s, box-shadow .2s, background .2s;
}
.cf-btn:active{transform:scale(.97)}
.cf-btn.gold{background:linear-gradient(180deg,var(--e-gold-bright),var(--e-gold-deep)); color:#2A1E0C; box-shadow:0 8px 22px rgba(201,169,97,.4)}
.cf-btn.gold:hover{box-shadow:0 10px 28px rgba(201,169,97,.55)}
.cf-btn.ghost{background:rgba(255,246,233,.06); color:var(--e-cream); border-color:rgba(201,169,97,.4)}
.cf-btn.ghost:hover{background:rgba(255,246,233,.12)}

/* 건너뛰기 */
.cf-skip{
  position:absolute; top:18px; right:18px; z-index:8;
  font-size:12px; letter-spacing:.5px; color:var(--e-cream-dim);
  background:transparent; border:1px solid rgba(201,169,97,.25); border-radius:999px;
  padding:7px 14px; cursor:pointer; transition:all .2s; opacity:0;
  animation:cfFadeIn .6s ease 1.8s forwards;
}
.cf-skip:hover{color:var(--e-cream); border-color:var(--e-gold)}
@keyframes cfFadeIn{to{opacity:1}}

/* 풋 서명 */
.cf-sign{
  margin-top:26px; font-size:11.5px; color:rgba(201,188,166,.55); letter-spacing:.5px;
  opacity:0; animation:cfFadeIn 1s ease 1.2s forwards;
}

@media (max-width:480px){
  .cf-brand{font-size:34px} .cf-mark{font-size:40px}
  .cf-greet h2{font-size:25px} .cf-cards{gap:10px}
  .cf-card{padding:15px 13px} .cf-card .nm{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  #cfEntry *, #cfEntry::before, #cfEntry::after{animation:none !important; transition:opacity .3s ease !important}
  #cfEntry.cf-open .cf-gate .gl{transform:translateX(-101%)}
  #cfEntry.cf-open .cf-gate .gr{transform:translateX(101%)}
}