/* ck-coinhead 11/11 (owner mockup of /premium/MANTRA "이렇게 디자인해"): the top of every coin page - the purple ticker pill beside the
   title, the price card (bigger price, the right panel with the 24-hour line, the "24시간" pill, the volume with a bar icon) and the
   two premium cards with round icons. Overrides premium_coin.php's own inline rules by more specific selectors - no important flags. */
.ck-coin .ck-h1row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 10px}
.ck-coin .ck-h1row h1.ck-coin-h1{margin:0}
.ck-coin .ck-sympill{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 16px 0 5px;border-radius:999px;background:linear-gradient(90deg,#B21DE5,#6A3CF4);color:#fff;font-size:15px;font-weight:800;letter-spacing:.3px;box-shadow:0 3px 10px rgba(124,58,237,.28);white-space:nowrap}
.ck-coin .ck-sp-ic{display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:50%;background:#fff;color:#7C3AED;font-size:13px;font-style:normal;font-weight:900;overflow:hidden}
.ck-coin .ck-sp-ic img{width:23px;height:23px;border-radius:50%}

/* the price card */
.ck-coin .ck-coin-price.ck-ph{align-items:center;gap:14px 24px;margin:6px 0 16px;padding:22px 22px 22px 26px;border-radius:20px;background:#F5F6F8}
.ck-coin .ck-coin-price.ck-ph .cp-k{font-size:15px;color:#3F4652}
.ck-coin .ck-coin-price.ck-ph .cp-v{margin:6px 0 0}
.ck-coin .ck-coin-price.ck-ph .cp-px{font-size:40px;font-weight:800;letter-spacing:-1px}
.ck-coin .ck-coin-price.ck-ph .cp-v small{margin-left:5px;font-size:21px;font-weight:800;color:#222}
.ck-coin .ck-coin-price.ck-ph .cp-c{margin:8px 0 0;font-size:17px;font-weight:800}
.ck-coin .ck-coin-price.ck-ph .cp-c small{margin-left:8px;font-size:15px;font-weight:500;color:#5f6673}
.ck-coin .ck-coin-price .cks{display:flex;align-items:center;gap:18px;flex:0 1 58%;min-width:0;margin-left:auto;align-self:stretch;padding:16px 18px 14px 20px;border-radius:18px;background:#fff;box-shadow:0 2px 12px rgba(15,23,42,.06)}
.ck-coin .ck-coin-price .cks-g{position:relative;flex:1 1 auto;min-width:0;height:108px}
.ck-coin .ck-coin-price .cks.up .cks-g{color:#F0144A}.ck-coin .ck-coin-price .cks.dn .cks-g{color:#1F5FD6}
.ck-coin .ck-coin-price .cks-svg{display:block;width:100%;height:100%;overflow:visible}
.ck-coin .ck-coin-price .cks-dot{position:absolute;right:-6px;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px rgba(240,20,74,.18)}
.ck-coin .ck-coin-price .cks.dn .cks-dot{box-shadow:0 0 0 5px rgba(31,95,214,.18)}
/* ck-sparknew 11/11: a new listing's line starts where its record starts - a small "기록 N시간" note at the top left says so */
.ck-coin .ck-coin-price .cks-rec{position:absolute;left:0;top:0;padding:2px 8px;border-radius:7px;background:#F1F4F8;color:#5B6576;font-size:12px;font-weight:700;line-height:1.5}
body.dm .ck-coin .ck-coin-price .cks-rec{background:#243041;color:#CBD5E1}
.ck-coin .ck-coin-price .cks-r{display:flex;flex:none;flex-direction:column;align-items:flex-start;gap:12px;min-width:150px;text-align:left}   /* owner sample 11/11: the column reads from the left */
.ck-coin .ck-coin-price .cks-pill{display:inline-flex;align-items:baseline;gap:8px;padding:8px 16px;border-radius:999px;background:#EEF1F5;color:#2B3038;font-size:16px;font-weight:600;white-space:nowrap}
.ck-coin .ck-coin-price .cks-pill b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.ck-coin .ck-coin-price .cks-pill.ck-up{background:#FFE6EC}.ck-coin .ck-coin-price .cks-pill.ck-up b{color:#E8174A}
.ck-coin .ck-coin-price .cks-pill.ck-dn{background:#E6EEFC}.ck-coin .ck-coin-price .cks-pill.ck-dn b{color:#1F5FD6}
.ck-coin .ck-coin-price .cks .cp-vol{align-self:stretch;margin:0;text-align:left}
.ck-coin .ck-coin-price .cks .cp-vol span{display:block;font-size:14px;color:#4B5563}
.ck-coin .ck-coin-price .cks .cp-vol .cks-vr{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-top:4px}   /* the bar icon right before the amount */
.ck-coin .ck-coin-price .cks-vi{display:inline-flex;flex:none;width:22px;height:22px}
.ck-coin .ck-coin-price .cks-vi svg{width:100%;height:100%}
.ck-coin .ck-coin-price .cks .cp-vol b{font-size:24px;font-weight:900;letter-spacing:-.4px;color:#111}

/* the two premium cards */
.ck-coin .ck-coin-stats.ck-two{gap:16px;margin:0 0 20px}
.ck-coin .ck-coin-stats.ck-two li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:18px;row-gap:2px;padding:18px 22px;border:1px solid #ECEEF3;border-radius:18px;background:linear-gradient(180deg,#fff,#F8F9FB);box-shadow:0 2px 10px rgba(15,23,42,.05)}
.ck-coin .ck-coin-stats.ck-two li .ck-st-i{grid-row:1 / 3;display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;font-style:normal}
.ck-coin .ck-coin-stats.ck-two li .ck-st-i svg{width:30px;height:30px}
.ck-coin .ck-coin-stats.ck-two li.ck-st-k .ck-st-i{background:#FFE8EE;color:#E8174A}
.ck-coin .ck-coin-stats.ck-two li.ck-st-t .ck-st-i{background:#ECEBFF;color:#4338CA}
.ck-coin .ck-coin-stats.ck-two li span{align-self:end;font-size:15.5px;color:#2B3038}
.ck-coin .ck-coin-stats.ck-two li strong{align-self:start;font-size:32px;font-weight:800;letter-spacing:-.6px;line-height:1.2;font-variant-numeric:tabular-nums}
.ck-coin .ck-coin-stats.ck-two li strong.ck-up{color:#E8174A}

@media (max-width:640px){
	.ck-coin .ck-h1row{gap:8px 10px}
	.ck-coin .ck-sympill{height:32px;padding:0 12px 0 4px;font-size:13px}
	.ck-coin .ck-sp-ic{width:25px;height:25px}.ck-coin .ck-sp-ic img{width:20px;height:20px}
	.ck-coin .ck-coin-price.ck-ph{padding:16px 14px;border-radius:16px}
	.ck-coin .ck-coin-price.ck-ph .cp-px{font-size:32px}
	.ck-coin .ck-coin-price.ck-ph .cp-c{font-size:15px}
	.ck-coin .ck-coin-price .cks{gap:10px;margin:14px 0 0;padding:12px 12px 10px 14px;border-radius:14px}
	.ck-coin .ck-coin-price .cks-g{height:70px}
	.ck-coin .ck-coin-price .cks-r{gap:8px;min-width:0}
	.ck-coin .ck-coin-price .cks-pill{padding:5px 11px;font-size:13px}.ck-coin .ck-coin-price .cks-pill b{font-size:15px}
	.ck-coin .ck-coin-price .cks .cp-vol{display:block;padding:0;border:0}
	.ck-coin .ck-coin-price .cks .cp-vol span{font-size:12px}
	.ck-coin .ck-coin-price .cks-vi{width:18px;height:18px}
	.ck-coin .ck-coin-price .cks .cp-vol b{font-size:18px}
	.ck-coin .ck-coin-stats.ck-two{gap:10px}
	.ck-coin .ck-coin-stats.ck-two li{column-gap:10px;padding:13px 12px;border-radius:14px}
	.ck-coin .ck-coin-stats.ck-two li .ck-st-i{width:40px;height:40px}.ck-coin .ck-coin-stats.ck-two li .ck-st-i svg{width:21px;height:21px}
	.ck-coin .ck-coin-stats.ck-two li span{font-size:12.5px;line-height:1.35}
	.ck-coin .ck-coin-stats.ck-two li strong{font-size:22px}
}
/* dark */
body.dm .ck-coin .ck-coin-price.ck-ph{background:#222E3D}
body.dm .ck-coin .ck-coin-price.ck-ph .cp-k{color:#A8B8CC}
body.dm .ck-coin .ck-coin-price.ck-ph .cp-v small{color:#E2E8F0}
body.dm .ck-coin .ck-coin-price .cks{background:linear-gradient(180deg,#2A394C,#253346);box-shadow:none}
body.dm .ck-coin .ck-coin-price .cks.up .cks-g{color:#FF6575}body.dm .ck-coin .ck-coin-price .cks.dn .cks-g{color:#60A5FA}
body.dm .ck-coin .ck-coin-price .cks-pill{background:rgba(148,163,184,.16);color:#CBD5E1}
body.dm .ck-coin .ck-coin-price .cks-pill.ck-up{background:rgba(255,101,117,.16)}body.dm .ck-coin .ck-coin-price .cks-pill.ck-up b{color:#FF8A97}
body.dm .ck-coin .ck-coin-price .cks-pill.ck-dn{background:rgba(96,165,250,.16)}body.dm .ck-coin .ck-coin-price .cks-pill.ck-dn b{color:#93C5FD}
body.dm .ck-coin .ck-coin-price .cks .cp-vol span{color:#A8B8CC}body.dm .ck-coin .ck-coin-price .cks .cp-vol b{color:#F1F5F9}
body.dm .ck-coin .ck-coin-stats.ck-two li{border-color:#344458;background:linear-gradient(180deg,#243245,#212E3F);box-shadow:none}
body.dm .ck-coin .ck-coin-stats.ck-two li span{color:#CBD5E1}
body.dm .ck-coin .ck-coin-stats.ck-two li.ck-st-k .ck-st-i{background:rgba(255,101,117,.16);color:#FF8A97}
body.dm .ck-coin .ck-coin-stats.ck-two li.ck-st-t .ck-st-i{background:rgba(129,140,248,.18);color:#A5B4FC}
body.dm .ck-coin .ck-coin-stats.ck-two li strong.ck-up{color:#FF6575}
