/* 48 — 손들어 공용 디자인 시스템 v1
   하이라키: 48로고 → 메뉴 → H1 → 서브 → 기준칩 → 해석 → KPI → 시그널 → 리스트 → 푸터 */
:root{
  --bg:#f6f6f7; --card:#ffffff; --surface-2:#f0f0f1;
  --ink:#0a0a0b; --muted:#5f6168; --hint:#9a9ca3;
  --line:rgba(10,10,15,.10); --track:#ececed;
  /* 데이터 색: 매수(+)=빨강, 매도(−)=파랑 */
  --buy:#e23a30; --buybg:#fbeae8; --sell:#1f6feb; --sellbg:#e9f1fd;
  --r:16px; --r2:12px; --ease:cubic-bezier(.2,.8,.2,1);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:15px; line-height:1.45; letter-spacing:-0.011em; }
.wrap{ max-width:600px; margin:0 auto; padding:24px 22px 80px; }

/* 헤더 */
.head{ margin-top:20px; }
.head h1{ font-size:25px; font-weight:800; margin:0; letter-spacing:-0.03em; }
.head .sub{ color:var(--muted); font-size:14px; margin-top:6px; line-height:1.5; }

/* 해석 박스 */
.insight{ background:var(--card); border:1px solid var(--line); border-left:3px solid var(--ink);
  border-radius:var(--r2); padding:16px 17px; margin:20px 0 0; }
.insight .it{ font-size:14px; font-weight:800; letter-spacing:-0.02em; margin-bottom:8px; }
.insight .ib{ font-size:13px; color:var(--muted); line-height:1.7; }
.insight .ib b{ color:var(--ink); }
.insight .id{ font-size:11px; color:var(--hint); margin-top:10px; }

/* KPI */
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0 0; }
.kpi{ background:var(--card); border:1px solid var(--line); border-radius:var(--r2); padding:13px 12px; }
.kpi .k{ font-size:12px; color:var(--muted); font-weight:600; }
.kpi .v{ font-size:20px; font-weight:800; margin-top:3px; letter-spacing:-0.02em; }
.v.g{ color:var(--buy); } .v.r{ color:var(--sell); }

/* 섹션 헤더 */
.sech{ font-size:15px; font-weight:800; margin:32px 4px 12px; display:flex; align-items:center; gap:7px; }
.dot{ width:8px;height:8px;border-radius:50%; } .dot.g{ background:var(--buy);} .dot.r{ background:var(--sell);}

/* 시그널 카드 */
.sig{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px 17px; margin-bottom:12px; }
.sig .top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sig .nm{ font-weight:800; font-size:15px; letter-spacing:-0.02em; min-width:0; }
.sig .nm a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
.sig .nm .tk{ color:var(--hint); font-weight:600; font-size:12px; }
.sig .ev{ font-size:13px; color:var(--muted); margin-top:8px; line-height:1.6; }
.badge{ font-size:11.5px; font-weight:800; line-height:1; padding:5px 10px; border-radius:999px; white-space:nowrap; display:inline-flex; }
.b-buy{ background:var(--buy); color:#fff; } .b-sell{ background:var(--sell); color:#fff; }
.b-info{ background:var(--ink); color:#fff; }
.b-score{ background:var(--track); color:var(--muted); margin-left:6px; }

/* 리스트 행 */
.row{ background:var(--card); border:1px solid var(--line); border-radius:var(--r2); padding:13px 16px; margin-bottom:10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; }
.row .nm{ font-weight:700; font-size:13.5px; word-break:break-all; }
.row .nm a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.row .nm .tk{ color:var(--hint); font-weight:600; font-size:11.5px; }
.row .sub2{ font-size:11.5px; color:var(--hint); margin-top:3px; }
.row .rt{ text-align:right; flex-shrink:0; }
.row .amt{ font-weight:800; font-size:13.5px; white-space:nowrap; }
.amt.g{ color:var(--buy); } .amt.r{ color:var(--sell); }
.row .pctc{ font-size:11.5px; color:var(--muted); margin-top:2px; white-space:nowrap; }
.tag{ font-size:10px; font-weight:700; padding:2px 6px; border-radius:5px; background:var(--track); color:var(--muted); margin-left:6px; vertical-align:1px; white-space:nowrap; }
.tag.warn{ background:#fdf2d4; color:#9a6b00; }

/* 보유 행 (버핏) */
.hrow{ background:var(--card); border:1px solid var(--line); border-radius:var(--r2); padding:13px 16px; margin-bottom:10px; }
.hrow .l1{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.hrow .nm{ font-weight:700; font-size:14px; }
.hrow .nm .tk{ color:var(--hint); font-weight:600; font-size:11.5px; }
.hrow .pct{ font-weight:800; font-size:13px; color:var(--muted); white-space:nowrap; }
.hrow .sub2{ font-size:11.5px; color:var(--hint); margin-top:2px; }
.hbar{ height:5px; background:var(--track); border-radius:99px; margin-top:7px; overflow:hidden; }
.hbar i{ display:block; height:100%; background:var(--ink); border-radius:99px; }

/* 안내·푸터 */
.note{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r2); padding:12px 15px; font-size:12.5px; color:var(--muted); line-height:1.65; margin:12px 0 0; }
.foot{ margin-top:44px; padding-top:18px; border-top:1px solid var(--line); font-size:11.5px; color:var(--hint); line-height:1.9; }
.foot a{ color:var(--muted); }
.empty{ color:var(--hint); font-size:13px; padding:16px 4px; }
.more{ width:100%; border:1px solid var(--line); background:var(--card); color:var(--muted); font-weight:700;
  font-size:13px; padding:11px; border-radius:11px; cursor:pointer; margin-top:2px; }


/* 그룹 카드 (투자자별 상세 등) */
.inv{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:17px 18px; margin-bottom:12px; }
.inv .ih{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; border-bottom:1px solid var(--line); padding-bottom:12px; flex-wrap:wrap; }
.inv .inm{ font-size:17px; font-weight:800; letter-spacing:-0.02em; }
.inv .imeta{ font-size:11.5px; color:var(--hint); white-space:nowrap; text-align:right; line-height:1.5; }
.inv .grp{ font-size:12px; font-weight:800; color:var(--muted); margin:14px 0 6px; }
.line{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; font-size:13.5px; }
.line .n{ min-width:0; font-weight:600; }
.line .n .op{ font-size:10.5px; font-weight:700; color:var(--hint); }
.line .a{ white-space:nowrap; font-weight:800; }
.line .a.g{ color:var(--buy); } .line .a.r{ color:var(--sell); } .line .a.m{ color:var(--muted); font-weight:600; }
/* 매수/매도 비율 바 (합의와 논쟁) */
.vbar{ height:8px; border-radius:999px; overflow:hidden; display:flex; margin-top:8px; background:var(--track); }
.vbar .vb{ background:var(--buy); } .vbar .vs{ background:var(--sell); }
/* 색 유틸 (인라인 스타일 금지) */
.tb{ color:var(--buy); font-weight:700; } .ts{ color:var(--sell); font-weight:700; }
/* 섹션 헤더 바로 아래 안내문은 위 여백 제거 */
.sech + .note{ margin:0 0 10px; }
@media (max-width:480px){
  .inv{ padding:14px 15px; }
  .inv .inm{ font-size:15px; }
  .line{ font-size:12.5px; }
}

/* ===== 모바일 (<=480px) ===== */
@media (max-width:480px){
  .wrap{ padding:18px 16px 64px; }
  .head{ margin-top:16px; }
  .head h1{ font-size:22px; }
  .head .sub{ font-size:13px; }
  .basischip{ font-size:11px; padding:5px 10px; }
  .insight{ padding:14px 15px; }
  .insight .ib{ font-size:12.5px; }
  .kpis{ gap:8px; }
  .kpi{ padding:11px 10px; }
  .kpi .v{ font-size:17px; }
  .kpi .k{ font-size:11px; }
  .sech{ margin:28px 2px 10px; font-size:14px; }
  .sig{ padding:14px 15px; }
  .sig .nm{ font-size:14px; }
  .sig .ev{ font-size:12.5px; }
  .badge{ font-size:10.5px; padding:4px 8px; }
  .row{ padding:12px 13px; }
  .row .nm{ font-size:13px; }
  .row .amt{ font-size:13px; }
  .hrow{ padding:12px 13px; }
  .note{ font-size:12px; }
}