/* 써치픽 — 플랫 클린 디자인 (Claude Design 핸드오프 반영) */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Pretendard Variable',Pretendard,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}

.app{
  --bg:#f5f6f8; --bg-soft:#eceff3; --card:#ffffff; --card-2:#fafbfc;
  --ink:#0f1f2b; --muted:#5b7384; --faint:#90a0ae;
  --line:#e6e9ee; --line-soft:#eef1f4;
  --accent:#2563eb; --accent-2:#3b82f6; --accent-soft:#eaf1fe;
  --up:#0fa371; --up-soft:#e6f6ef; --warn:#e0890a; --warn-soft:#fcf2e1; --down:#e2536a; --down-soft:#fcebed;
  --grid:#edf0f4;
  --shadow-sm:0 1px 2px rgba(15,31,43,.05); --shadow:0 10px 30px -16px rgba(15,31,43,.28);
  --brand:linear-gradient(135deg,#3b82f6,#6366f1,#a855f7);
  /* 구버전 정적 페이지(가이드/소개/약관/블로그) 호환 별칭 — 플랫 토큰으로 매핑 */
  --card-glass:var(--card); --glass:var(--card); --glass-2:var(--card-2); --stroke:var(--line); --panel:var(--bg-soft);
  color:var(--ink); background:var(--bg); min-height:100vh;
}
.app[data-theme="dark"]{
  --bg:#0a1019; --bg-soft:#0e1722; --card:#121b28; --card-2:#0f1825;
  --ink:#e8eef4; --muted:#94a6b8; --faint:#62748a;
  --line:#1e2a39; --line-soft:#18222f;
  --accent:#5b95ff; --accent-2:#7aa9ff; --accent-soft:#15243c;
  --up:#23b985; --up-soft:#10241e; --warn:#eaa53a; --warn-soft:#2a2110; --down:#ef6a80; --down-soft:#2a1419;
  --grid:#1c2734;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 14px 36px -18px rgba(0,0,0,.7);
}

.kcard{animation:spRise .4s cubic-bezier(.22,1,.36,1) both;transition:transform .2s,box-shadow .2s,border-color .2s}
.kcard:hover{transform:translateY(-3px);border-color:var(--accent)!important;box-shadow:var(--shadow)!important}
input::placeholder{color:var(--faint)}
.sp-scroll::-webkit-scrollbar{height:0}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}

@keyframes spDrawer{from{transform:translateX(-102%)}to{transform:translateX(0)}}
@keyframes spFade{from{opacity:0}to{opacity:1}}
@keyframes spRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:900px){
  .trends-asym{grid-template-columns:1fr!important}
  .report-dash{grid-template-columns:1fr!important}
  .metrics4{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:760px){
  .best-grid{grid-template-columns:1fr 1fr!important}
  .feed-grid{grid-template-columns:1fr!important}
  .hdr-nav{display:none!important}
}
@media (max-width:520px){
  .best-grid{grid-template-columns:1fr!important}
}