/* 홈 히어로 (2026-10-26) — 흰 바탕 + 왼쪽 한 문장·숫자 넷 + 오른쪽 실시간 버블 */
.hh{margin:6px 0 10px;padding:22px 24px 16px;border-radius:18px;background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:0 8px 30px -22px rgba(15,23,42,.35)}
.hh-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px;align-items:stretch}
.hh-k{display:block;font-size:12.5px;font-weight:700;color:var(--blue);letter-spacing:.02em;margin-bottom:6px}
.hh-h{margin:0;font-size:27px;line-height:1.28;font-weight:800;letter-spacing:-.02em;color:var(--ink);word-break:keep-all}
.hh-s{margin:8px 0 0;font-size:13px;color:var(--ink-2);line-height:1.5;word-break:keep-all}
.hh-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.hh-t{position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;background:var(--bg-2,var(--card-2));border:1px solid var(--line);color:var(--ink);text-decoration:none;min-width:0}
.hh-t:hover{border-color:var(--ink-3)}
.hh-t small{font-size:11.5px;color:var(--ink-3);font-weight:600}
.hh-t b{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.hh-t b em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.hh-t.up b{color:var(--up)}.hh-t.dn b{color:var(--down)}.hh-t.flat b{color:var(--ink)}
.hh-t span{font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hh-r{position:relative;display:flex;flex-direction:column;min-height:320px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden;text-decoration:none;color:var(--ink)}
.hh-cvh{position:relative;flex:1;min-height:260px}.hh-cv{display:block;position:absolute;inset:0}
.hh-tip{position:absolute;z-index:3;pointer-events:none;background:rgba(10,16,36,.94);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:6px 9px;font-size:12px;color:#fff;max-width:180px;line-height:1.35}.hh-tip b{margin-right:4px}.hh-tip span{font-variant-numeric:tabular-nums;font-weight:700}.hh-tip span.u{color:#ff6b7a}.hh-tip span.d{color:#5aa8ff}.hh-tip small{display:block;color:#b7c3dd;font-size:11px}
.hh-cvl{font-size:11px;color:var(--ink-3);padding:6px 10px;border-top:1px solid var(--line);background:var(--card);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff5a6a;margin-right:6px;box-shadow:0 0 0 0 rgba(255,90,106,.6);animation:hhp 1.6s infinite}@keyframes hhp{0%{box-shadow:0 0 0 0 rgba(255,90,106,.6)}100%{box-shadow:0 0 0 8px rgba(255,90,106,0)}}
.hh-minis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
@media(max-width:1100px){.hh-minis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hh-m{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:9px 12px;border-radius:10px;border:1px dashed var(--line);color:var(--ink);text-decoration:none;min-width:0}
.hh-m img{grid-row:1/3;width:28px;height:28px;border-radius:50%;background:#fff}
.hh-m small{grid-column:2;font-size:11px;color:var(--ink-3)}
.hh-m b{grid-column:2;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-m span{grid-column:2;font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-m:not(:has(img)) small,.hh-m:not(:has(img)) b,.hh-m:not(:has(img)) span{grid-column:1/3}
.hh-m:hover{border-style:solid;border-color:var(--ink-3)}
@media(max-width:900px){.hh{padding:16px 16px 12px}.hh-grid{grid-template-columns:1fr}.hh-h{font-size:21px}.hh-r{min-height:230px}.hh-cvh{min-height:200px}.hh-minis{grid-template-columns:1fr}.hh-t b{font-size:22px}}
.hh-tl{position:absolute;right:12px;top:11px;width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--line);object-fit:contain}
.hh-t:has(.hh-tl) b{padding-right:38px}
/* 2026-10-28: 눌러 보기 유도 — '자세히 →' 와 hover 들림 */
.hh-t,.hh-m{transition:transform .14s,box-shadow .14s,border-color .14s;cursor:pointer}
.hh-t:hover,.hh-m:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(15,23,42,.35);border-color:var(--blue)}
.hh-go{display:inline-flex;align-items:center;gap:2px;margin-top:6px;font-size:11.5px;font-weight:700;font-style:normal;color:var(--blue)}
.hh-t .hh-go{margin-top:4px}
.hh-t:hover .hh-go,.hh-m:hover .hh-go{text-decoration:underline}
.hh-m .hh-go{grid-column:2}
.hh-m:not(:has(img)) .hh-go{grid-column:1/3}
.hh-m{border-style:solid;grid-template-rows:auto auto auto}
.hh-m img{grid-row:1/4}
/* 2026-10-28: 뉴스 제목 칸 */
.hh-t.news b{font-size:15.5px;line-height:1.35;white-space:normal;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
/* 2026-10-28: '오늘 알아보는 코인' 카드만 눈에 띄게 — 파란 그라데이션 */
.hh-m.today{position:relative;overflow:hidden;background:linear-gradient(135deg,#0B5CFF 0%,#4F46E5 60%,#7C3AED 100%);border-color:transparent;color:#fff;box-shadow:0 12px 28px -14px rgba(11,92,255,.6)}
.hh-m.today::before{content:'TODAY';position:absolute;right:12px;top:10px;font-size:10px;font-weight:800;letter-spacing:.12em;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:2px 8px}
.hh-m.today::after{content:'';position:absolute;right:-40px;bottom:-60px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.hh-m.today small{color:rgba(255,255,255,.85)}
.hh-m.today b{color:#fff;font-size:15px}
.hh-m.today span{color:rgba(255,255,255,.88)}
.hh-m.today .hh-go{color:#fff}
.hh-m.today img{border:2px solid rgba(255,255,255,.6);background:#fff}
.hh-m.today:hover{border-color:transparent;box-shadow:0 16px 34px -14px rgba(11,92,255,.75)}
:root[data-theme="dark"] .hh-m.today, :root:not([data-theme="light"]):has(body.sys-dark) .hh-m.today{background:linear-gradient(135deg,#1B3F8F 0%,#3730A3 60%,#5B21B6 100%)}

/* 2026-10-29: 타일 네 장 — 색 없이 흰 카드(알록달록하다 해서 윗선·점 색 뺌). 등락 숫자만 빨강·파랑, 링크는 사이트 파랑 */
.hh-t[class*="k-"]{background:var(--card);border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.04)}
.hh-t[class*="k-"]>small:first-child{color:var(--ink-2)}
.hh-t[class*="k-"] .hh-go{color:var(--blue)}
.hh-t.k-hot b,.hh-t.k-news b,.hh-t.k-flow b{color:var(--ink)}
.hh-t[class*="k-"]:hover{border-color:var(--ink-3);box-shadow:0 10px 24px -14px rgba(15,23,42,.35)}
:root[data-theme="dark"] .hh-t[class*="k-"], :root:not([data-theme="light"]):has(body.sys-dark) .hh-t[class*="k-"]{box-shadow:none}

/* 2026-10-29: 목록형 타일(어제 100만원 샀으면 · 지금 많이 찾는 코인) */
.hh-t .hh-list{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.hh-t .hh-list li{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;line-height:1.3}
.hh-t .hh-list img,.hh-t .hh-list u{width:18px;height:18px;border-radius:50%;flex:none;background:#fff;border:1px solid var(--line);object-fit:contain;display:inline-block}
.hh-t .hh-list .rk{font-style:normal;font-weight:800;font-size:12px;color:var(--ink-3);width:12px;flex:none;text-align:center}
.hh-t .hh-list b{display:block;flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink);padding-right:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0}
.hh-t .hh-list b s{text-decoration:none;font-weight:500;color:var(--ink-3);font-size:11.5px;margin-left:2px}
.hh-t .hh-list em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;font-size:13px}
.hh-t .hh-list em small{font-weight:600;color:var(--ink-3);font-size:11px;margin-left:2px}
.hh-t .hh-list em.up{color:var(--up)}.hh-t .hh-list em.up small{color:var(--up)}
.hh-t.has-list span{margin-top:2px}

/* 2026-10-29: 순위 타일 1~10위 두 열, 오른쪽은 어제 대비 등락만 */
.hh-t .hh-list.cols2{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:4px 16px}
.hh-t .hh-list em.dn{color:var(--down)}.hh-t .hh-list em.flat{color:var(--ink-3);font-weight:500}.hh-t .hh-list em.new{color:var(--blue);font-size:10.5px;letter-spacing:.04em}
.hh-t .hh-list.cols2 em{font-size:12px;min-width:28px;text-align:right}
@media(max-width:900px){.hh-t .hh-list.cols2{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}}

/* 2026-10-29: 어제 100만원 샀으면 — 로고 세 개를 눌러야 금액이 보인다(클릭 유도) */
.hh-t.has-pick{cursor:default}
.hh-pk{display:flex;gap:8px;margin:6px 0 8px;flex-wrap:wrap}
.hh-pk button{font:inherit;display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 5px;border:1px solid var(--line);border-radius:999px;background:var(--card);cursor:pointer;color:var(--ink-2);font-size:12.5px;font-weight:700;transition:border-color .12s,transform .12s}
.hh-pk button img,.hh-pk button u{width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--line);object-fit:contain;display:inline-block}
.hh-pk button s{text-decoration:none}
.hh-pk button:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.hh-pk button.on{background:var(--ink);border-color:var(--ink);color:var(--bg,#fff);box-shadow:none;transform:none}
.hh-pk button.on img,.hh-pk button.on u{border-color:rgba(255,255,255,.6)}
.hh-pk button:active{transform:scale(.96)}
.hh-pk button.on:hover{transform:none;border-color:var(--ink)}
.hh-pk-res{display:flex;flex-direction:column;gap:4px;min-height:46px}
.hh-t .hh-pk-hint{font-size:12px;color:var(--ink-3);line-height:1.5;white-space:normal;overflow:visible;text-overflow:clip}
.hh-t .hh-pk-more{display:block;font-size:12px;color:var(--ink-3);white-space:normal;line-height:1.5}
.hh-t .hh-pk-more i{font-style:normal;color:var(--ink-2)}.hh-t .hh-pk-more i b{font-size:12px;display:inline;font-weight:700;letter-spacing:0;padding:0}.hh-t .hh-pk-more i b.up{color:var(--up)}.hh-t .hh-pk-more i b.dn{color:var(--down)}
.hh-t.has-pick .hh-pk-res > b em.up{color:var(--up)}.hh-t.has-pick .hh-pk-res > b em.dn{color:var(--down)}.hh-t.has-pick .hh-pk-res > b{color:var(--ink)}

/* 2026-10-29: 타일 제목 부각 — '어제 100만원 샀으면 지금' 같은 이름이 숫자보다 먼저 읽히게 */
.hh-t > small:first-of-type,.hh-t[class*="k-"]>small:first-child{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-bottom:2px;display:block}
.hh-t.has-pick > small:first-of-type{font-size:15.5px}
.hh-m > small:first-child{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.hh-m.today > small:first-child{color:rgba(255,255,255,.92)}
@media(max-width:900px){.hh-t > small:first-of-type{font-size:13.5px}}

/* 2026-10-29: 큰 뉴스 타일 — 기사 사진을 오른쪽에 */
.hh-t.has-img{padding-right:112px}
.hh-t .hh-ti{position:absolute;right:12px;top:12px;width:88px;height:66px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--bg-2,var(--card-2))}
@media(max-width:900px){.hh-t.has-img{padding-right:14px}.hh-t .hh-ti{position:static;width:100%;height:120px;margin:4px 0 6px;order:-1}}

/* 2026-10-29: '오늘 알아보는 코인'이 타일 자리로(큰 뉴스·입출금·1분 급등·큰 입금 카드는 뺌) */
.hh-t.k-today{position:relative;overflow:hidden;background:linear-gradient(135deg,#0B5CFF 0%,#4F46E5 60%,#7C3AED 100%) !important;border-color:transparent !important;color:#fff;box-shadow:0 12px 28px -14px rgba(11,92,255,.6)}
.hh-t.k-today::before{content:'TODAY';position:absolute;right:12px;top:12px;font-size:10px;font-weight:800;letter-spacing:.12em;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:2px 8px}
.hh-t.k-today::after{content:'';position:absolute;right:-40px;bottom:-60px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.hh-t.k-today > small:first-of-type{color:rgba(255,255,255,.92) !important}
.hh-t.k-today .hh-td{display:flex;align-items:center;gap:10px;margin:6px 0 2px}
.hh-t.k-today .hh-td img{width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid rgba(255,255,255,.6);object-fit:contain;flex:none}
.hh-t.k-today .hh-td b{font-size:22px;color:#fff;display:block;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-t.k-today span{color:rgba(255,255,255,.88)}
.hh-t.k-today .hh-go{color:#fff !important}
.hh-t.k-today:hover{border-color:transparent !important;box-shadow:0 16px 34px -14px rgba(11,92,255,.75)}
:root[data-theme="dark"] .hh-t.k-today, :root:not([data-theme="light"]):has(body.sys-dark) .hh-t.k-today{background:linear-gradient(135deg,#1B3F8F 0%,#3730A3 60%,#5B21B6 100%) !important}

/* 2026-10-29: 가장 핫한 코인 — 로고를 이름 앞에 크게(카드형) */
.hh-t.k-hot .hh-td{display:flex;align-items:center;gap:12px;margin:6px 0 2px;min-width:0}
.hh-t.k-hot .hh-td img{width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);object-fit:contain;flex:none;box-shadow:0 2px 6px rgba(15,23,42,.08)}
.hh-t.k-hot .hh-td b{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:24px;padding:0;min-width:0;white-space:nowrap;overflow:hidden}
.hh-t.k-hot .hh-td b em{font-size:12.5px;font-weight:600;color:var(--ink-2)}

/* 2026-10-29: 오늘 알아보는 코인 — 한 줄 소개(두 줄까지) + 작은 칩(후보 점수·시총·해외 상장·조달) */
.hh-t.k-today > span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45}
.hh-t.k-today .hh-tc{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.hh-t.k-today .hh-tc span{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;white-space:nowrap;display:inline-block;-webkit-line-clamp:unset}

/* 2026-10-29: 가장 핫한 코인 — 언급 건수 대신 '오늘 한 줄' 문장 + 칩(24h·어제 순위·거래대금·X·텔레그램) */
.hh-t.k-hot > span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;color:var(--ink-2)}
.hh-t.k-hot .hh-tc{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.hh-t.k-hot .hh-tc span{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--bg-2,var(--card-2));border:1px solid var(--line);color:var(--ink-2);white-space:nowrap;display:inline-block}
.hh-t.k-hot .hh-tc span.up{color:var(--up)}.hh-t.k-hot .hh-tc span.dn{color:var(--down)}