/* 웹폰트 — 테마 옵션에서 이미 불러오고 있다면 아래 @import 줄을 지우세요 */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ── 색상 · 모든 값은 .kspt 안에서만 유효 ──
   다크모드가 필요하면 이 블록을 복사해
   @media (prefers-color-scheme:dark){ .kspt{ ...어두운 값... } } 로 추가하세요.
   단, 워드프레스 사이트 전체가 라이트 모드라면 켜지 마세요 — 위젯만 검게 뜹니다. */
.kspt{
  --kspt-surface:#FFFFFF;
  --kspt-surface-2:#EDF0F4;
  --kspt-recess:#E8EBF1;
  --kspt-line:#DEE3EB;
  --kspt-line-soft:#E9ECF2;
  --kspt-ink:#121722;
  --kspt-ink-2:#4B5364;
  --kspt-ink-3:#79818F;
  --kspt-accent:#1B2440;
  --kspt-up:#DE2F26;
  --kspt-up-bar:rgba(222,47,38,.13);
  --kspt-down:#1A6CCC;
  --kspt-flat:#98A0AE;
  --kspt-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  container-type:inline-size;
  container-name:kspt;
  background:var(--kspt-surface);
  border:1px solid var(--kspt-line);
  border-radius:4px;
  box-shadow:0 1px 2px rgba(18,23,34,.05), 0 8px 24px -16px rgba(18,23,34,.28);
  overflow:hidden;
  color:var(--kspt-ink);
  font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:15px;
  line-height:1.6;
  text-align:left;
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* 테마 CSS 간섭 차단 — 위젯 안에서만 초기화.
   워드프레스 테마가 article·p 등에 margin 을 걸어두면 카드 간격이 깨지므로 전부 0으로 눕힙니다.
   위젯 내부 간격은 margin 이 아니라 gap·padding 으로만 잡혀 있어 안전합니다. */
.kspt *,.kspt *::before,.kspt *::after{box-sizing:border-box}
.kspt *{margin:0;float:none;letter-spacing:normal;text-transform:none}
.kspt h2{padding:0;font-weight:700}
.kspt p{padding:0}
.kspt a{text-decoration:none;box-shadow:none;background:none}
.kspt svg{display:block;max-width:none;vertical-align:middle}
.kspt button{font-family:inherit;letter-spacing:normal;text-shadow:none;border-radius:0}
.kspt article{display:flex;position:static}

/* 헤더 */
.kspt-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:15px 18px;border-bottom:1px solid var(--kspt-line);
}
.kspt-head-l{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.kspt-h2{font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.4;color:var(--kspt-ink)}
.kspt-stamp{font-size:11.5px;color:var(--kspt-ink-3);font-family:var(--kspt-mono);font-variant-numeric:tabular-nums}
.kspt-more{
  font-size:12.5px;font-weight:600;color:var(--kspt-ink-2);
  border-bottom:1px solid var(--kspt-line);padding-bottom:1px;
  transition:color .15s,border-color .15s;
}
.kspt-more:hover{color:var(--kspt-up);border-color:var(--kspt-up)}
.kspt-more:focus-visible{outline:2px solid var(--kspt-up);outline-offset:3px}

/* 카드 격자 — 열 수는 위젯이 놓인 칸의 폭이 결정 */
.kspt-cards{
  display:grid;gap:10px;padding:12px;background:var(--kspt-recess);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,318px),1fr));
}
.kspt-card{
  background:var(--kspt-surface);padding:12px 14px 11px;
  border:1px solid var(--kspt-line);border-radius:3px;
  display:flex;flex-direction:column;gap:7px;
  transition:border-color .14s,box-shadow .14s;
}
.kspt-card:hover{
  border-color:var(--kspt-ink-3);
  box-shadow:0 1px 2px rgba(18,23,34,.05), 0 8px 24px -16px rgba(18,23,34,.28);
}

/* 1행 */
.kspt-top{display:flex;align-items:baseline;gap:9px}
.kspt-rank{
  font-family:var(--kspt-mono);font-variant-numeric:tabular-nums;
  font-size:11.5px;font-weight:600;color:var(--kspt-ink-3);
  flex:none;width:15px;text-align:right;
}
.kspt-card:nth-child(-n+3) .kspt-rank{color:var(--kspt-up)}
.kspt-name{
  font-weight:600;font-size:14.5px;letter-spacing:-.02em;line-height:1.4;
  flex:1 1 auto;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.kspt-pct{
  font-family:var(--kspt-mono);font-variant-numeric:tabular-nums;
  font-size:19px;font-weight:600;color:var(--kspt-up);
  letter-spacing:-.02em;line-height:1;flex:none;
}

/* 2행 */
.kspt-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;line-height:1.4}
.kspt-tag{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--kspt-line);border-radius:2px;padding:1px 7px;
  color:var(--kspt-ink-2);font-weight:600;
}
.kspt-tag::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--kspt-accent);opacity:.6}
.kspt-meta svg{flex:none}
.kspt-d3{color:var(--kspt-ink-3);font-family:var(--kspt-mono);font-variant-numeric:tabular-nums}
.kspt-news{color:var(--kspt-ink-3);border-bottom:1px dotted var(--kspt-line)}
.kspt-news:hover{color:var(--kspt-ink-2)}
.kspt-news:focus-visible{outline:2px solid var(--kspt-up);outline-offset:2px}

/* 3행 — 요약 2줄 고정 */
.kspt-sum{
  font-size:12.5px;line-height:1.62;color:var(--kspt-ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.4em;
}

/* 4행 */
.kspt-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  margin-top:auto;padding-top:8px;border-top:1px solid var(--kspt-line-soft);
}
.kspt-leads{display:flex;gap:4px;flex-wrap:wrap}
.kspt-chip{
  font-size:11px;color:var(--kspt-ink-2);background:var(--kspt-surface-2);
  border:1px solid var(--kspt-line-soft);border-radius:2px;padding:1px 6px;white-space:nowrap;
}
.kspt-chip-top{
  color:var(--kspt-up);border-color:var(--kspt-up-bar);background:var(--kspt-up-bar);
}
.kspt-chip-top b{font-family:var(--kspt-mono);font-variant-numeric:tabular-nums;font-weight:600}
.kspt-counts{display:flex;align-items:center;gap:7px;white-space:nowrap}
.kspt-cnum{font-family:var(--kspt-mono);font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--kspt-ink-3)}
.kspt-cnum b{font-weight:600;color:var(--kspt-up)}
.kspt-cnum s{text-decoration:none;color:var(--kspt-down)}
.kspt-cbar{display:flex;height:5px;width:54px;border-radius:1px;overflow:hidden;background:var(--kspt-surface-2);flex:none}
.kspt-cbar i{display:block;height:100%}
.kspt-cbar .u{background:var(--kspt-up)}
.kspt-cbar .f{background:var(--kspt-flat)}
.kspt-cbar .d{background:var(--kspt-down)}

/* 더보기 — 좁은 칸에서만 노출 */
.kspt-morewrap{display:none;border-top:1px solid var(--kspt-line)}
.kspt-morebtn{
  appearance:none;-webkit-appearance:none;width:100%;border:0;
  background:var(--kspt-surface);cursor:pointer;
  font-size:13px;font-weight:600;color:var(--kspt-ink-2);
  padding:0 16px;min-height:46px;transition:background .15s;
}
.kspt-morebtn:hover{background:var(--kspt-surface-2)}
.kspt-morebtn:focus-visible{outline:2px solid var(--kspt-up);outline-offset:-2px}

.kspt-disc{
  padding:10px 18px;border-top:1px solid var(--kspt-line);background:var(--kspt-surface-2);
  font-size:11px;color:var(--kspt-ink-3);line-height:1.6;
}

/* 폭별 대응 — 브라우저 창이 아니라 위젯이 놓인 칸의 폭 기준 */
@container kspt (max-width:699px){
  .kspt-morewrap{display:block}
  .kspt-cards:not(.kspt-exp) .kspt-card:nth-child(n+7){display:none}
}
@container kspt (max-width:430px){
  .kspt-cards{padding:10px;gap:8px}
  .kspt-card{padding:11px 12px 10px}
  .kspt-name{font-size:14px}
  .kspt-pct{font-size:18px}
  .kspt-head{padding:13px 14px}
  .kspt-disc{padding:10px 14px}
}
@container kspt (max-width:430px){
  /* 좁은 화면에서는 칩과 종목 수를 한 줄에 욱여넣지 않고 두 줄로 나눕니다.
     예전에는 세 번째 칩을 숨겼는데, 모바일에서 가장 유용한 정보를 지우는 셈이라 바꿨습니다. */
  .kspt-foot{flex-direction:column;align-items:flex-start;gap:6px}
  .kspt-leads{width:100%}
}
@container kspt (max-width:340px){
  .kspt-d3,.kspt-meta svg{display:none}
  /* 자리가 정말 없으면 고정 주도주 둘째를 접습니다. 오늘의 1위 칩은 끝까지 남깁니다. */
  .kspt-leads .kspt-chip-lead:nth-child(n+2){display:none}
}
@container kspt (min-width:1400px){
  .kspt-cards{grid-template-columns:repeat(4,1fr)}
}

/* 컨테이너 쿼리 미지원 구형 브라우저 대비 — 창 폭 기준 보조 규칙 */
@supports not (container-type:inline-size){
  @media (max-width:699px){
    .kspt-morewrap{display:block}
    .kspt-cards:not(.kspt-exp) .kspt-card:nth-child(n+7){display:none}
  }
}

@media (prefers-reduced-motion:reduce){
  .kspt *{transition:none !important}
}

/* 하락 테마 (등락률이 음수일 때) */
.kspt-pct.kspt-neg{color:var(--kspt-down)}
.kspt-card:nth-child(-n+3) .kspt-rank{color:var(--kspt-up)}
/* 요약이 비어 있을 때 카드 높이 유지 */
.kspt-sum:empty{min-height:2.4em}

/* 접기 — 설정한 개수를 넘는 카드는 [더보기] 뒤로. 화면폭과 무관하게 적용됩니다. */
.kspt-cards:not(.kspt-exp) .kspt-card.kspt-extra{display:none}
.kspt-folded .kspt-morewrap{display:block}

/* 재료를 본 거래일이 오늘과 다를 때 (v2.3.2)
   지우지도 숨기지도 않고 언제 것인지 밝힙니다. */
.kspt-asof{
	margin:-4px 0 0;font-size:11px;line-height:1.5;
	color:var(--kspt-ink-3);font-family:var(--kspt-mono);
	font-variant-numeric:tabular-nums;opacity:.85;
}
.kspt-asof::before{content:"\2514  ";opacity:.6}

/* 하락장 처리 (v2.4.0)
   '강세테마'라는 이름을 쓰는 한 내린 테마를 올릴 수 없습니다.
   억지로 채우는 대신 조용한 날은 조용하다고 말합니다. */
.kspt-thin{
  margin:0 0 12px;padding:8px 12px;
  border:1px solid var(--kspt-line);border-left:3px solid var(--kspt-ink-3);
  border-radius:6px;background:var(--kspt-recess);
  font-size:12px;line-height:1.55;color:var(--kspt-ink-2);
}
.kspt-none{
  margin:0;padding:26px 18px;text-align:center;
  font-size:13.5px;line-height:1.7;color:var(--kspt-ink-2);
  background:var(--kspt-recess);border:1px solid var(--kspt-line);border-radius:8px;
}

/* ── 요약(컴팩트) 모드 — 메인화면용 (v2.9.0)
   설계 시안 v1.1 11쪽: 카드가 아니라 「테마명 + 등락률」 칩 한 줄.
   메인에서 강세테마의 세로 면적 예산은 13% 입니다. */
.kspt-mini{
  background:var(--kspt-recess);border:1px solid var(--kspt-line);
  border-radius:10px;padding:14px 16px 12px;
}
.kspt-mini__h{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:11px;
}
.kspt-mini__t{font-size:16px;font-weight:700;color:var(--kspt-ink);letter-spacing:-.015em}
.kspt-mini__d{
  font-family:var(--kspt-mono);font-size:11px;color:var(--kspt-ink-3);
  font-variant-numeric:tabular-nums;
}
.kspt-mini__more{
  margin-left:auto;font-size:12.5px;font-weight:500;
  color:var(--kspt-accent);text-decoration:none;white-space:nowrap;
}
.kspt-mini__more:hover{text-decoration:underline}

/* 넓은 화면에서는 줄바꿈 — 잘린 칩이 보이면 고장으로 읽힙니다.
   좁은 화면에서만 가로 스크롤로 둡니다(줄바꿈하면 6줄이 되어 너무 높아집니다). */
.kspt-mini__row{
  display:flex;gap:7px;flex-wrap:wrap;
}
.kspt-chipt{
  display:inline-flex;align-items:baseline;gap:7px;flex:0 0 auto;
  background:var(--kspt-surface);border:1px solid var(--kspt-line);
  border-radius:7px;padding:8px 12px;text-decoration:none;color:inherit;
  transition:border-color .12s;
}
a.kspt-chipt:hover{border-color:var(--kspt-accent)}
.kspt-chipt__r{
  font-family:var(--kspt-mono);font-size:10.5px;font-style:normal;
  color:var(--kspt-ink-3);min-width:9px;
}
.kspt-chipt__n{font-size:13.5px;font-weight:600;white-space:nowrap;color:var(--kspt-ink)}
.kspt-chipt__p{
  font-family:var(--kspt-mono);font-size:13px;font-style:normal;font-weight:600;
  color:var(--kspt-up);font-variant-numeric:tabular-nums;
}
.kspt-mini__none{
  margin:0;padding:14px;text-align:center;font-size:13px;color:var(--kspt-ink-2);
  background:var(--kspt-surface);border:1px solid var(--kspt-line);border-radius:7px;
}
.kspt-mini__f{
  margin:9px 0 0;font-size:10.5px;line-height:1.6;color:var(--kspt-ink-3);
}
@media (max-width:560px){
  .kspt-mini{padding:12px 13px 10px}
  .kspt-mini__t{font-size:15px}
  .kspt-mini__more{margin-left:0;flex-basis:100%}
  .kspt-mini__row{
    flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  }
}

/* 위젯 안 종목 칩의 링크 */
.kspt-chip .kspg-sl{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.kspt-chip .kspg-sl:hover{border-bottom-color:currentColor}