/* NEO — Tailwind 보조 커스텀 (페이지 공통) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;600;700&display=swap');

:root{
  --neo-ink:#334155; --neo-dim:#475569; --neo-blue:#2563eb;
  --neo-grad-1:#c7d2fe; --neo-grad-2:#a5b4fc;
}
body{font-family:'Noto Serif KR', serif; color:var(--neo-ink); background:#f8fafc}

/* ===== 상단 네비 한 줄 고정 ===== */
.neo-nav{backdrop-filter:blur(10px)}
.neo-nav .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap}
.neo-nav .menu{display:flex;gap:28px;flex:1 1 auto;min-width:0;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.neo-nav .menu::-webkit-scrollbar{display:none}
.neo-nav .srch{display:flex;align-items:center;gap:8px}
.neo-nav .srch .ipt{width:280px}
@media (max-width:1100px){ .neo-nav .srch .ipt{width:240px} }
@media (max-width:980px){  .neo-nav .srch .ipt{width:200px} }

/* 로고 라인에 은은한 그라데이션 보더 */
.neo-nav { border-bottom:1px solid rgba(148,163,184,.25); }
.neo-nav .logo span{background:linear-gradient(90deg,#06b6d4,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== 유리/글로우 공통 ===== */
.glass-card{background:rgba(255,255,255,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.35); box-shadow:0 16px 40px rgba(31,38,135,.12); border-radius:16px; transition:all .35s cubic-bezier(.4,0,.2,1)}
.glass-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(31,38,135,.16)}

.content-card{background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.4);border-radius:16px;transition:all .25s}
.content-card:hover{transform:translateY(-4px);box-shadow:0 20px 36px rgba(0,0,0,.08);background:#fff}

.audio-card .play-btn{transition:transform .18s, box-shadow .18s, background-color .18s}
.audio-card:hover .play-btn{transform:scale(1.1);box-shadow:0 10px 22px rgba(0,0,0,.12);background:#fff}

.testimonial-card{background:linear-gradient(to bottom right,#ffffff,#f9f9f9)}
.section-divider{height:90px;background:linear-gradient(to bottom,rgba(248,245,242,1),rgba(248,245,242,0))}

/* 그라데이션 텍스트 애니 */
.animate-text{background-size:200% auto;animation:textShine 3s ease-in-out infinite alternate}
@keyframes textShine{0%{background-position:0% 50%}100%{background-position:100% 50%}}

/* 떠다니는 뱃지 */
.floating-btn{animation:float 3s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}

/* 버튼 글로우 */
.glow-effect{box-shadow:0 0 18px rgba(165,180,252,.3);transition:box-shadow .25s,transform .25s}
.glow-effect:hover{box-shadow:0 0 26px rgba(165,180,252,.5);transform:translateY(-2px)}

/* 히어로 배경 그라데이션 업그레이드 */
.hero-gradient{background:linear-gradient(135deg, rgba(199,210,254,.8) 0%, rgba(165,180,252,.85) 50%, rgba(56,189,248,.75) 100%);backdrop-filter:blur(10px)}

/* 카드 이미지 라운드 일관화 */
.card-cover{border-top-left-radius:16px;border-top-right-radius:16px}

/* ===== Audiobook — Buttons (pretty) ===== */
.ab-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.2rem;border-radius:9999px;font-weight:700;letter-spacing:.1px;
  transition:all .25s ease;user-select:none;text-decoration:none!important}
.ab-btn i{font-size:1rem;opacity:.95}
.ab-btn:focus-visible{outline:3px solid rgba(99,102,241,.35);outline-offset:2px}

/* 메인 CTA: 인디고→블루 그라디언트 + 유리광 */
.ab-btn-primary{color:#fff;background:linear-gradient(135deg,#6366f1 0%,#3b82f6 100%);
  box-shadow:0 10px 22px rgba(99,102,241,.28), inset 0 0 0 1px rgba(255,255,255,.12)}
.ab-btn-primary:hover{transform:translateY(-1px) scale(1.01);
  box-shadow:0 16px 30px rgba(59,130,246,.35), inset 0 0 0 1px rgba(255,255,255,.2)}
.ab-btn-primary .ab-glow{position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(40% 60% at 50% 8%,rgba(255,255,255,.35),transparent 60%);opacity:0;transition:opacity .25s}
.ab-btn-primary:hover .ab-glow{opacity:.85}

/* 유리 느낌의 고스트 버튼(목록/보조버튼 용) */
.ab-btn-ghost{color:#1f2937;background:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.65);box-shadow:0 6px 18px rgba(2,6,23,.06);backdrop-filter:blur(8px)}
.ab-btn-ghost:hover{background:#fff;transform:translateY(-1px)}

/* 코인 톤(충전 버튼에 추천) */
.ab-btn-coin{color:#111827;background:linear-gradient(135deg,#f59e0b 0%,#fbbf24 100%);
  box-shadow:0 10px 20px rgba(245,158,11,.25)}
.ab-btn-coin:hover{transform:translateY(-1px);box-shadow:0 16px 28px rgba(245,158,11,.35)}

/* 살짝 반짝이는 리플 */
.ab-ripple{overflow:hidden}
.ab-ripple::after{content:'';position:absolute;inset:-40%;
  background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.35),transparent 45%);
  transform:translateY(60%);transition:transform .45s ease}
.ab-ripple:hover::after{transform:translateY(-10%)}
/* ===== Compact Cards & Icon-only buttons (mobile) ===== */
@media (max-width: 767px){
  /* 전체 여백/폰트 살짝 컴팩트 */
  .ab-compact-gap { gap: .75rem !important; }
  .ab-compact-card { padding: .65rem !important; }

  /* 카드 제목/보조문구 축소 */
  .ab-title-sm { font-size: .95rem !important; }
  .ab-sub-sm   { font-size: .78rem !important; }

  /* 아이콘만 쓰는 버튼 (모바일에만 적용) */
  .ab-onlyicon { 
    padding: 0 !important; width: 42px !important; height: 42px !important; 
    border-radius: 9999px !important; display: inline-flex; align-items: center; justify-content: center;
  }
  .ab-onlyicon .ab-glow { display: none !important; }
}

/* 데스크탑에서 조금만 콤팩트하게 */
@media (min-width: 768px){
  .ab-btn.ab-btn-primary, .ab-btn.ab-btn-ghost { padding: .7rem 1rem; }
}