/* 리드테마 3분할 (메인 #5)
   디자인 시스템: Ink #293237 / Navy #1B2440 / Teal #12A99B·#0E8478
   상승 #DE2F26 · 보합 #8A959B · 하락 #1A6CCC (국내 관례)
   색만으로 뜻을 전하지 않습니다 — ▲▼ 기호를 함께 씁니다. */

.rdtt-mk{
  --m-ink:#293237; --m-navy:#1B2440; --m-teal:#12A99B; --m-teal-d:#0E8478;
  --m-recess:#F2F5F6; --m-line:#D5DDE0; --m-muted:#6B7780; --m-paper:#FFFFFF;
  --m-up:#DE2F26; --m-flat:#8A959B; --m-down:#1A6CCC;
  --m-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  box-sizing:border-box;color:var(--m-ink);
  word-break:keep-all; overflow-wrap:break-word;   /* 어절 중간에서 끊기지 않게 */
  background:var(--m-paper);
  border:1px solid var(--m-line);border-radius:10px;
  padding:16px 18px 13px;
  font-size:15px;line-height:1.6;
}
.rdtt-mk *{box-sizing:border-box}
.rdtt-mk :where(p,ul,ol,li,h3){margin:0;padding:0}
.rdtt-mk :where(ul,ol){list-style:none}

.rdtt-mk__h{display:flex;align-items:baseline;gap:10px;margin-bottom:11px}
.rdtt-mk__t{font-size:15.5px;font-weight:700;letter-spacing:-.015em;color:var(--m-navy)}
.rdtt-mk__d{
  font-family:var(--m-mono);font-size:10.5px;color:var(--m-muted);
  font-variant-numeric:tabular-nums;margin-left:auto;white-space:nowrap;
}
.rdtt-mk__more{
  margin-left:auto;font-size:12.5px;font-weight:500;
  color:var(--m-teal-d);text-decoration:none;white-space:nowrap;
}
.rdtt-mk__more:hover{text-decoration:underline}

/* 순위 줄 — 이름은 줄어들고 숫자는 오른쪽에서 자리를 지킵니다 */
.rdtt-mk__l{display:grid;gap:1px}
.rdtt-mk__r{
  display:flex;align-items:baseline;gap:9px;
  padding:6px 0;border-bottom:1px solid var(--m-recess);
}
.rdtt-mk__r:last-child{border-bottom:none}
.rdtt-mk__rk{
  font-family:var(--m-mono);font-size:11px;color:var(--m-muted);
  width:13px;flex:none;font-variant-numeric:tabular-nums;
}
.rdtt-mk__n{
  font-size:14px;font-weight:500;color:var(--m-ink);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rdtt-mk__x{font-weight:600;color:#293237}
.rdtt-mk__v{
  margin-left:auto;font-family:var(--m-mono);font-size:11.5px;
  color:var(--m-muted);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.rdtt-mk__p{
  font-family:var(--m-mono);font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  min-width:66px;text-align:right;
}
/* 거래대금 칸에는 금액이 이미 auto 마진을 먹었으므로 등락률만 밀어냅니다 */
.rdtt-mk--gain .rdtt-mk__p{margin-left:auto}
.rdtt-mk__p--up{color:var(--m-up)}
.rdtt-mk__p--dn{color:var(--m-down)}
.rdtt-mk__p--fl{color:var(--m-flat)}

.rdtt-mk__f{
  margin-top:11px!important;padding-top:9px;border-top:1px solid var(--m-line);
  font-size:10.5px;line-height:1.55;color:var(--m-muted);
}

/* 최신 글 칸 */
.rdtt-mk__posts{display:grid;gap:1px}
.rdtt-mk__posts li{
  display:flex;align-items:baseline;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--m-recess);
}
.rdtt-mk__posts li:last-child{border-bottom:none}
.rdtt-mk__posts a{
  font-size:14px;line-height:1.5;color:var(--m-ink);text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rdtt-mk__posts a:hover{color:var(--m-teal-d)}
.rdtt-mk__date{
  margin-left:auto;flex:none;font-family:var(--m-mono);
  font-size:10.5px;color:var(--m-muted);font-variant-numeric:tabular-nums;
}

/* 관리자에게만 보이는 빈 칸 안내 */
.rdtt-mk--empty{
  font-size:12.5px;line-height:1.6;color:#6B7780;
  background:#F2F5F6;border-style:dashed;
}

/* 세 칸 */
.rdtt-mk3__wrap{box-sizing:border-box}
.rdtt-mk3{display:grid;gap:16px;align-items:start}
.rdtt-mk3__f{
  margin:11px 0 0!important;font-size:11px;line-height:1.6;color:#6B7780;
  font-family:"IBM Plex Sans KR",system-ui,sans-serif;
}
.rdtt-mk3--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rdtt-mk3--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rdtt-mk3--1{grid-template-columns:minmax(0,1fr)}

/* 한 칸이 300px 밑으로 내려가면 종목명이 잘리기 시작합니다.
   3열은 950px, 2열은 640px 을 기준으로 접습니다. */
@media (max-width:950px){
  .rdtt-mk3--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .rdtt-mk3--3,.rdtt-mk3--2{grid-template-columns:minmax(0,1fr)}
  .rdtt-mk{padding:14px 15px 11px}
}

/* ── 테마 지형 히트맵 ───────────────────────────────────
   가로 = 날짜. 300px 안에 이름·오늘값·N칸이 다 들어가야 하므로
   이름과 숫자는 고정폭으로 잡고 칸만 남은 폭을 나눠 갖습니다. */
.rdtt-tg__g{
  display:grid;
  grid-template-columns:74px 36px repeat(var(--tg-n,10),minmax(0,1fr));
  gap:4px 2px;align-items:center;
}
/* 빈도 칸(최근20/60일)이 붙으면 이름을 조금 줄여 자리를 만듭니다 */
.rdtt-tg--f .rdtt-tg__g{
  grid-template-columns:60px 32px 34px repeat(var(--tg-n,10),minmax(0,1fr));
}
/* 30칸을 넘으면 칸 사이를 좁혀야 한 칸이 보입니다 (넓은 페이지 전용) */
.rdtt-tg--dense .rdtt-tg__g{gap:3px 1px}
.rdtt-tg--dense .rdtt-tg__c{border-radius:1px}
.rdtt-tg__n{
  font-size:11px;line-height:1.3;color:var(--m-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rdtt-tg__p{
  font-family:var(--m-mono);font-size:10px;font-weight:600;
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;
}
/* 최근 20일 / 60일 올라온 횟수 */
.rdtt-tg__f{
  font-family:var(--m-mono);font-size:9.5px;color:var(--m-muted);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;
  letter-spacing:-.02em;
}
.rdtt-tg__f.is-hot{color:var(--m-ink);font-weight:700}
/* 숫자 칸 머리글 — 「6/23」이 날짜로 읽히지 않게 무엇인지 밝힙니다 */
.rdtt-tg__hd{
  font-family:var(--m-mono);font-size:8.5px;line-height:1;color:#9AA6B0;
  white-space:nowrap;letter-spacing:-.03em;
}
.rdtt-tg__hd--f,.rdtt-tg__hd--p{text-align:right}
.rdtt-tg__hot{color:var(--m-ink);font-weight:700;font-family:var(--m-mono);font-size:9.5px}
.rdtt-tg__c{
  height:14px;border-radius:2px;background:var(--m-recess);
  border:1px solid transparent;
}
.rdtt-tg__c.v1{background:#F3AEA9}
.rdtt-tg__c.v2{background:#E8635B}
.rdtt-tg__c.v3{background:var(--m-up)}
.rdtt-tg__c.is-today{border-color:var(--m-navy)}

.rdtt-tg__x{
  display:flex;justify-content:space-between;gap:8px;
  margin-top:7px!important;font-family:var(--m-mono);
  font-size:9.5px;color:var(--m-muted);
}
.rdtt-tg__lg{
  display:flex;flex-wrap:wrap;gap:3px 12px;
  margin-top:9px;font-size:10px;line-height:1.5;color:var(--m-muted);
}
.rdtt-tg__lg i{
  display:inline-block;width:9px;height:9px;border-radius:2px;
  margin-right:2px;vertical-align:-1px;
}
.rdtt-tg__lg i.v1{background:#F3AEA9}
.rdtt-tg__lg i.v2{background:#E8635B}
.rdtt-tg__lg i.v3{background:var(--m-up)}
.rdtt-tg .rdtt-mk__f a{color:var(--m-teal-d);text-decoration:none}
.rdtt-tg .rdtt-mk__f a:hover{text-decoration:underline}

@media (min-width:900px){
  .rdtt-tg--f .rdtt-tg__g{
    grid-template-columns:112px 40px 44px repeat(var(--tg-n,10),minmax(0,1fr));
  }
  .rdtt-tg__n{font-size:11.5px}
  .rdtt-tg__f{font-size:10px}
}

/* 한 칸이 좁아지면 이름 자리를 조금 더 줍니다 */
@media (max-width:640px){
  .rdtt-tg__g{grid-template-columns:84px 40px repeat(var(--tg-n,10),minmax(0,1fr))}
  .rdtt-tg--f .rdtt-tg__g{
    grid-template-columns:70px 38px 40px repeat(var(--tg-n,10),minmax(0,1fr));
  }
  .rdtt-tg__c{height:16px}
}

/* 3분할 종목 링크 */
.rdtt-mk__n .rdtg-sl{color:inherit;text-decoration:none;border-bottom:1px solid rgba(18,169,155,.35)}
.rdtt-mk__n .rdtg-sl:hover{border-bottom-color:var(--teal,#12A99B)}