/* ck-heatmap 10/29 (owner's mockups "시세·김프 히트맵 시안" and "이렇게 디자인해줘" 22:00): /heatmap - the card, the title with the
   red bar, the buttons in their own card (exchange logos), the tiles (placed by heatmap.js), the notes box, the card per coin.
   Linked with media="all" from heatmap.php, so it stays out of the shared CSS bundle. Phones (<= 640px): the button rows stacked
   without labels and logos, short labels, the legend and the save / share buttons under the map, the coin card as a sheet. */
/* the owner's colour guide (10/30 "시세·김프 히트맵 색상 가이드", "샘플색대로"): only these colours in the light page - 배경 #FFFFFF,
   카드 배경 #F8FAFD, 테두리 #E5EAF2, 제목 텍스트 #0F172A, 보조 텍스트 #64748B, 양수 텍스트 #E11D48, 음수 텍스트 #2563EB, 버튼 활성 #111827,
   버튼 비활성 #F1F5F9 (the tile colours: heatmap.js). The site's dark mode keeps its own greys (the guide has none). */
.hm{position:relative;margin:0 0 28px;color:var(--hm-tx);--hm-card:#FFFFFF;--hm-card2:#F8FAFD;--hm-bd:#E5EAF2;--hm-tx:#0F172A;--hm-mu:#64748B;--hm-up:#E11D48;--hm-dn:#2563EB;--hm-on:#111827;--hm-off:#F1F5F9}
.hm-card{background:var(--hm-card);border:1px solid var(--hm-bd);border-radius:20px;padding:22px 20px 20px;box-shadow:0 2px 10px rgba(15,23,42,.04)}
/* the title: red bar, name, the line beside it, the buttons on the right; under it (the whole width) exchanges · time ·
   every minute · kimp index */
.hm-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px}
.hm-tl{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 9px;min-width:0}
.hm-h1{position:relative;margin:0;padding-left:16px;font-size:26px;font-weight:900;letter-spacing:-0.7px;line-height:1.25;color:var(--hm-tx)}
.hm-h1::before{content:"";position:absolute;left:0;top:.17em;width:6px;height:.95em;border-radius:3px;background:var(--hm-up)}
.hm-hv{color:var(--hm-up)}   /* 시세 / 김프: the view the map shows */
.hm-tag{margin-left:2px;font-size:14.5px;font-weight:500;letter-spacing:normal;color:var(--hm-mu)}   /* inside the h1 (SEO), looks as before */
.hm-sub{grid-column:1 / -1;margin:0;font-size:14px;line-height:1.5;color:var(--hm-mu)}
.hm-sub b{font-size:15.5px;font-weight:800}
.hm-acts{display:flex;align-items:center;gap:6px;flex:none}
.hm-acts-bot{display:none}
.hm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;padding:0 12px;border:1px solid var(--hm-bd);border-radius:12px;background:var(--hm-card);font:inherit;font-size:14px;font-weight:700;color:var(--hm-tx);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.hm-btn svg{width:19px;height:19px;flex:none}
.hm-btn:hover{background:var(--hm-card2)}
.hm-help{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:2px;border-radius:50%;background:var(--hm-bd);color:var(--hm-mu);font-size:16px;font-weight:800;text-decoration:none}
.hm-help:hover{background:var(--hm-mu);color:#fff}
/* the buttons, in their own card */
.hm-ctl{margin:18px 0 16px;padding:16px 18px;border:1px solid var(--hm-bd);border-radius:16px;background:var(--hm-card);box-shadow:0 4px 14px rgba(15,23,42,.06)}
.hm-row{display:flex;align-items:center;gap:8px 9px;flex-wrap:wrap}
.hm-row2{margin-top:12px}
.hm-lb{min-width:48px;font-size:15px;font-weight:700;color:var(--hm-tx)}
.hm-lb2{min-width:0}
.hm-exs{display:flex;flex-wrap:wrap;gap:6px}
/* buttons: 비활성 #F1F5F9, 활성 #111827 */
.hm-exs button,.hm-pills button{display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 11px;border:1px solid var(--hm-off);border-radius:11px;background:var(--hm-off);font:inherit;font-size:14px;font-weight:600;color:var(--hm-tx);cursor:pointer;white-space:nowrap}
.hm-exs img{width:18px;height:18px;border-radius:50%;flex:none}
.hm-exs button:hover,.hm-pills button:hover{background:var(--hm-bd);border-color:var(--hm-bd)}
.hm-exs button[aria-pressed="true"],.hm-pills button[aria-pressed="true"]{background:var(--hm-on);border-color:var(--hm-on);color:#fff;font-weight:800}
.hm-vw{display:inline-flex;align-items:center;gap:9px}   /* 보기 and its switch move together */
.hm-div{width:1px;height:28px;margin:0 2px;background:var(--hm-bd)}
.hm-seg{display:inline-flex;border:1px solid var(--hm-off);border-radius:11px;overflow:hidden;background:var(--hm-off)}
.hm-seg button{height:38px;min-width:64px;padding:0 12px;border:0;background:transparent;font:inherit;font-size:14.5px;font-weight:600;color:var(--hm-tx);cursor:pointer;white-space:nowrap}
.hm-seg button[aria-pressed="true"]{background:var(--hm-on);color:#fff;font-weight:800}
.hm-pills{display:inline-flex;gap:7px;flex-wrap:wrap}
.hm-pills button[hidden]{display:none}
.hm-mo{display:none}
.hm-legend{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--hm-mu);white-space:nowrap}
.hm-legend-top{margin-left:auto}
.hm-legend-bot{display:none}
.hm-lgbar{display:block;width:170px;height:12px;border-radius:6px}
/* the map: tiles placed by heatmap.js (every piece of a tile is placed inside it, the same list draws the saved image) */
.hm-map{position:relative;border-radius:12px;background:var(--hm-card2);-webkit-user-select:none;user-select:none}   /* 카드 배경 between the tiles */
.hm-t{position:absolute;box-sizing:border-box;border:0;margin:0;padding:0;overflow:hidden;cursor:pointer;font:inherit;text-align:left;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
.hm-t > *{position:absolute;pointer-events:none}
.hm-t > span{line-height:1.15;white-space:nowrap}
.hm-t:hover{filter:brightness(.97)}
.hm-t:focus-visible{outline:3px solid var(--hm-on);outline-offset:-3px}
.hm-rk{display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:26%;color:#fff;font-weight:800;line-height:1}
.hm-cr svg,.hm-st svg{display:block;width:100%;height:100%}
.hm-lg{border-radius:50%;object-fit:cover}
.hm-s{letter-spacing:-0.3px}
.hm-v{letter-spacing:-0.4px}
.hm-ic{width:.8em;height:.8em;flex:none;vertical-align:-0.1em}
.hm-empty{position:absolute;left:0;right:0;top:45%;margin:0;text-align:center;font-size:15px;color:var(--hm-mu)}
/* the notes: "i" sign and the list */
.hm-note{display:flex;align-items:flex-start;gap:16px;margin:18px 0 0;padding:18px 22px 16px 18px;border:1px solid var(--hm-bd);border-radius:16px;background:var(--hm-card2)}
.hm-ni{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--hm-dn);color:#fff;font-family:Georgia,serif;font-size:21px;font-weight:700;font-style:italic}
.hm-note ul{margin:0;padding:0 0 0 18px;font-size:14.5px;line-height:1.75;color:var(--hm-mu);list-style:disc}
.hm-note li{display:list-item;margin:0 0 2px;list-style:disc}
.hm-note li::marker{color:var(--hm-mu)}
.hm-note a{color:var(--hm-dn);font-weight:700;text-decoration:underline}
.hm-nkey b{color:var(--hm-tx);font-weight:800}   /* the kimp basis first, in the title colour */
.hm-note .hm-ic{width:16px;height:16px;vertical-align:-3px}
/* the card of one coin */
.hm-pop{position:absolute;z-index:30;width:430px;max-width:calc(100% - 16px);box-sizing:border-box;background:var(--hm-card);border-radius:16px;box-shadow:0 14px 36px rgba(15,23,42,.22);padding:18px 20px 16px;color:var(--hm-tx)}
.hm-pop[hidden]{display:none}
.hm-x{position:absolute;right:10px;top:8px;width:34px;height:34px;border:0;background:transparent;font-size:24px;line-height:1;color:var(--hm-mu);cursor:pointer}
.hm-pt{margin:0 30px 4px 0;font-size:19px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hm-pt b{font-weight:800}
.hm-pt .hm-ic{width:18px;height:18px}
.hm-ps{margin:0 0 10px;font-size:14px;color:var(--hm-mu)}
.hm-ps b{font-weight:700}
.hm-pcr{display:flex;align-items:center;gap:6px;margin:-4px 0 10px;font-size:13.5px;font-weight:600;color:var(--hm-mu)}
.hm-pcr .hm-cr{display:inline-block;width:20px;height:20px}
.hm-tb{width:100%;border-collapse:collapse;font-size:14px}
.hm-tb th{padding:8px 4px;font-size:13px;font-weight:500;color:var(--hm-mu);text-align:right;border-bottom:1px solid var(--hm-bd)}
.hm-tb th:first-child,.hm-tb td:first-child{text-align:left}
.hm-tb td{padding:9px 4px;text-align:right;border-bottom:1px solid var(--hm-off);white-space:nowrap}
.hm-tb td.hm-ce{white-space:normal}
.hm-tb tr.hm-na td{color:var(--hm-mu)}
.hm-tb tr.hm-na td[colspan]{text-align:right}
.hm-sus{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;color:var(--hm-up);font-weight:600}
.hm-sus .hm-ic{width:13px;height:13px}
.hm-go{display:block;margin:14px 0 0;padding:13px 10px;border-radius:12px;background:var(--hm-on);color:#fff;text-align:center;font-size:15px;font-weight:700;text-decoration:none}
.hm-go:hover{background:var(--hm-tx);color:#fff}
.hm-red{color:var(--hm-up)}
.hm-blue{color:var(--hm-dn)}
.hm-green{color:#15803D}
.hm-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:var(--hm-on);color:#fff;font-size:14px;padding:10px 16px;border-radius:10px}
.hm-toast[hidden]{display:none}
@media (max-width:640px){
	.hm-card{padding:16px 12px 14px;border-radius:16px}
	.hm-head{display:block}
	.hm-h1{font-size:22px;padding-left:14px}
	.hm-h1::before{width:5px}
	.hm-tag{display:block;margin:4px 0 0 -14px;font-size:14px}   /* its own line under the title, from the card's edge */
	.hm-dot{display:none}   /* the line goes under the title here */
	.hm-sub{margin-top:6px;font-size:13px}
	.hm-vw{display:contents}
	.hm-sub b{font-size:14px}
	.hm-acts-top,.hm-lb,.hm-div,.hm-legend-top,.hm-pc,.hm-exs img{display:none}
	.hm-mo{display:inline}
	/* the exchanges on their own line, then 시세 / 김프 with the range buttons beside it */
	.hm-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 10px;padding:10px;border-radius:14px}
	.hm-row{display:contents}
	.hm-exs{order:1;display:flex;flex-wrap:nowrap;gap:4px;width:100%}
	.hm-exs button{flex:1 1 auto;justify-content:center;height:36px;padding:0 4px;border-radius:10px;font-size:13.5px}
	.hm-seg{order:2;border-radius:10px}
	.hm-seg button{height:34px;min-width:0;padding:0 11px;font-size:13.5px}
	.hm-pills{order:3;margin-left:auto;gap:4px}
	.hm-pills button{height:36px;padding:0 9px;border-radius:10px;font-size:13px}
	.hm-legend-bot{display:flex;justify-content:center;margin:10px 0 0;font-size:12.5px}
	.hm-legend-bot .hm-lgbar{flex:0 1 auto;width:150px;min-width:36px;height:10px}   /* longer English labels ("High Kimchi Premium"): the bar gives way */
	.hm-acts-bot{display:flex;margin-top:12px}
	.hm-acts-bot .hm-btn{flex:1;height:42px}
	.hm-note{gap:10px;margin-top:14px;padding:14px 14px 12px 12px}
	.hm-ni{width:28px;height:28px;font-size:18px}
	.hm-note ul{padding-left:16px;font-size:13.5px;line-height:1.7}
	.hm-pop.hm-sheet{position:fixed;left:8px;right:8px;bottom:8px;top:auto;width:auto;max-width:none;max-height:78vh;overflow:auto;padding:16px 14px 14px}
	.hm-tb{font-size:13.5px}
}
/* the site's dark mode */
body.dm .hm{color:#e5e7eb;--hm-bd:#353b44;--hm-mu:#9ca3af;--hm-tx:#f3f4f6;--hm-card:#1d2127;--hm-card2:#20242a;--hm-off:#2a2f37}
body.dm .hm-card{border-color:#2d323a;box-shadow:none}
body.dm .hm-h1,body.dm .hm-pt{color:#f3f4f6}
body.dm .hm-tag{color:#d1d5db}
body.dm .hm-btn,body.dm .hm-exs button,body.dm .hm-pills button,body.dm .hm-seg{background:#23272e;border-color:#3a404a;color:#e5e7eb}
body.dm .hm-btn svg path,body.dm .hm-btn svg circle[fill="#0F172A"]{fill:#e5e7eb}
body.dm .hm-btn svg path[stroke]{fill:none;stroke:#e5e7eb}
body.dm .hm-seg button{color:#cbd5e1}
body.dm .hm-exs button[aria-pressed="true"],body.dm .hm-pills button[aria-pressed="true"],body.dm .hm-seg button[aria-pressed="true"]{background:#e5e7eb;border-color:#e5e7eb;color:#111827}
body.dm .hm-ctl{background:#20242a;border-color:#2d323a;box-shadow:none}
body.dm .hm-lb{color:#e5e7eb}
body.dm .hm-div{background:#3a404a}
body.dm .hm-note{background:#20242a;border-color:#2d323a}
body.dm .hm-map{background:#171a1f}
body.dm .hm-note ul{color:#d1d5db}
body.dm .hm-pop{background:#23272e;color:#e5e7eb}
body.dm .hm-tb th{border-color:#353b44}
body.dm .hm-tb td{border-color:#2d323a}
body.dm .hm-go{background:#e5e7eb;color:#111827}