/* 써치픽 — 플랫 클린 디자인 (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:minmax(0,1fr)!important}
  .report-dash{grid-template-columns:minmax(0,1fr)!important}
  .metrics4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:760px){
  .best-grid{grid-template-columns:1fr 1fr!important}
  .feed-grid{grid-template-columns:1fr!important}
  /* 상단 메뉴: 모바일에서 숨기지 않고 로고 아래 한 줄 가로 스크롤로 노출(오늘 꿀팁 등 접근) */
  .hdr-row{flex-wrap:wrap!important;row-gap:9px}
  #sphead header>div{flex-wrap:wrap!important;row-gap:9px}
  .hdr-navwrap, #sphead nav{display:flex!important;order:9;flex-basis:100%;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hdr-navwrap::-webkit-scrollbar, #sphead nav::-webkit-scrollbar{display:none}
  .hdr-nav, #sphead nav a{display:inline-block!important;white-space:nowrap;flex:none;padding:7px 12px!important;font-size:13.5px!important;background:var(--bg-soft);border-radius:8px}
  /* 가로 오버플로 가드: 레이더 차트 반응형 + 화면 밖 박스 클립 */
  .report-dash svg[width="300"]{max-width:100%;height:auto}
  .app{overflow-x:clip}
}
@media (max-width:520px){
  .best-grid{grid-template-columns:1fr!important}
}

/* ===== 리디자인 홈(보드) ===== */
.hn-hover{transition:background .12s,border-color .12s,box-shadow .12s}
.hn-row:hover,.hn-feed:hover{background:var(--card-2)}
.hn-catbtn:hover,.hn-card:hover{border-color:#cfd6de;background:var(--card-2)}
.app[data-theme="dark"] .hn-catbtn:hover,.app[data-theme="dark"] .hn-card:hover{border-color:#2b3a4d}
.hn-search:focus-within{border-color:var(--accent)!important;box-shadow:0 0 0 4px var(--accent-soft)!important}
.hn-drop-item:hover{background:var(--bg-soft)}
.hn-rowgrid{display:grid;grid-template-columns:34px minmax(0,1fr) 72px 128px 92px 82px 60px 30px;align-items:center;gap:14px}
@media (max-width:900px){ .hn-cd{grid-template-columns:1fr!important} }
@media (max-width:760px){
  .hn-rowgrid{grid-template-columns:32px minmax(0,1fr) auto;gap:10px}
  .hn-col-opp,.hn-col-search,.hn-col-spark,.hn-col-arrow{display:none!important}
  .hn-feedgrid{grid-template-columns:1fr!important}
  .hn-str{grid-template-columns:1fr!important}
  .hn-catgrid{grid-template-columns:repeat(2,1fr)!important}
}