/* ck-calc v2 10/29 (live 10/29): 김프 계산기 (calc.php, /calc) on the owner's design reference - form card
   (coin / amount + quick amounts / direction / big button), "가장 많이 남는 조합" card, "조합별 순위" with bars, "계산 안 된 조합",
   notices, "계산 방법". Loaded by that page only (media="all" keeps it out of the shared CSS bundle, so the home page CSS is unchanged).
   The old .ck-calc rules in site.css no longer match this page (other class names); its link rules (.ck-calc-a, .ck-calc-cta) stay. */
.ck-cx{--ink:#191f28;--sub:#4e5968;--mute:#8b95a1;--card:#fff;--ln:#e3e9f2;--soft:#f3f5f8;--in:#fff;--blue:#1d5ff0;--up:#e5243b;--dn:#1f5fd6;
	margin:0 0 24px;color:var(--ink);word-break:keep-all;overflow-wrap:break-word;container-type:inline-size}
/* the page has its own title, so the theme's title bar is not shown - like the other pages with their own h1 */
html body .gxcon_area:has(> .ck-cx h1.cx-h1) > h2.con_title{display:none}
.ck-cx .up{color:var(--up)}.ck-cx .dn{color:var(--dn)}.ck-cx .zero{color:var(--mute)}
.ck-cx svg{display:block;flex:none}

/* title */
.ck-cx .cx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:4px 0 16px}
.ck-cx h1.cx-h1{position:static;float:none;width:auto;height:auto;margin:0 0 6px;padding:0;font-size:28px;font-weight:800;line-height:1.3;letter-spacing:-.5px;color:var(--ink);text-align:left}
.ck-cx .cx-lead{margin:0;font-size:14.5px;line-height:1.6;color:var(--sub)}
.ck-cx a.cx-how-btn{display:inline-flex;align-items:center;gap:6px;flex:none;height:38px;padding:0 14px;border:1px solid #d6e2f7;border-radius:999px;background:#f3f7ff;color:#3c4a63;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.ck-cx a.cx-how-btn svg{width:18px;height:18px;color:var(--blue)}
.ck-cx a.cx-how-btn:hover{border-color:#b9cdf3}

/* form card */
.ck-cx .cx-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"coin amt" ". quick" "dir ex" "go go";align-items:end;gap:20px 24px;margin:0 0 18px;padding:22px 24px;border:1px solid var(--ln);border-radius:18px;background:var(--card);box-shadow:0 6px 18px rgba(30,60,120,.06)}
.ck-cx .cx-f-coin{grid-area:coin;align-self:start}
.ck-cx .cx-f-amt{grid-area:amt}
.ck-cx .cx-f-dir{grid-area:dir;min-width:0}
.ck-cx .cx-f-go{grid-area:go}
.ck-cx .cx-lb{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:0;font-size:15px;font-weight:700;line-height:1.4;color:var(--ink)}
.ck-cx .cx-n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:21px;height:21px;border-radius:50%;background:#3b82f6;color:#fff;font-size:12px;font-weight:800}
.ck-cx .cx-sel{position:relative;display:flex;align-items:center;gap:10px;height:54px;padding:0 42px 0 12px;border:1px solid #dfe5ee;border-radius:12px;background:var(--in)}
.ck-cx .cx-sel:focus-within,.ck-cx .cx-amt:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,95,240,.15)}
.ck-cx .cx-sel img{width:30px;height:30px;border-radius:50%}
.ck-cx .cx-sel-t{min-width:0;overflow:hidden;font-size:15px;color:var(--mute);white-space:nowrap;text-overflow:ellipsis}
.ck-cx .cx-sel-t b{font-size:17px;font-weight:800;color:var(--ink)}
.ck-cx .cx-sel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;cursor:pointer}
.ck-cx .cx-sel > svg{position:absolute;top:50%;right:14px;width:18px;height:18px;margin-top:-9px;color:var(--ink);pointer-events:none}
/* ① coin search (owner 10/29 "코인 선택란에 검색할수있게"): the script turns the box into a button that opens a search field and the list
   (ticker, Korean name or its initial consonants); without the script the native select still works */
.ck-cx .cx-f-coin{position:relative}
.ck-cx .cx-sel.cx-js{cursor:pointer}
.ck-cx .cx-sel.cx-js select{pointer-events:none}
.ck-cx .cx-sel.cx-js:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ck-cx .cx-cs{position:absolute;top:100%;left:0;z-index:40;width:100%;margin-top:6px;padding:10px;border:1px solid var(--ln);border-radius:14px;background:var(--card);box-shadow:0 12px 32px rgba(20,40,80,.18)}
.ck-cx .cx-cs[hidden],.ck-cx .cx-cs li[hidden]{display:none}
.ck-cx input.cx-cs-q{width:100%;height:46px;padding:0 14px;border:1px solid #dfe5ee;border-radius:10px;background:var(--in);color:var(--ink);font-size:16px;outline:0}
.ck-cx input.cx-cs-q:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,95,240,.15)}
.ck-cx ul.cx-cs-l{max-height:min(360px,55vh);margin:8px 0 0;padding:0;list-style:none;overflow-y:auto;overscroll-behavior:contain}
.ck-cx ul.cx-cs-l button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 8px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.ck-cx ul.cx-cs-l button:hover,.ck-cx ul.cx-cs-l button:focus-visible{background:var(--soft);outline:0}
.ck-cx ul.cx-cs-l button.on{background:#eaf1ff}
.ck-cx ul.cx-cs-l img{width:24px;height:24px;border-radius:50%;flex:none}
.ck-cx ul.cx-cs-l .cx-all{width:24px;height:24px;padding:4px;border-radius:50%;background:#eaf1ff;color:var(--blue);fill:currentColor}
.ck-cx ul.cx-cs-l b{font-weight:800}
.ck-cx ul.cx-cs-l span{min-width:0;overflow:hidden;color:var(--mute);white-space:nowrap;text-overflow:ellipsis}
.ck-cx .cx-cs-none{margin:10px 4px 4px;font-size:14px;color:var(--mute)}
.ck-cx .cx-amt{display:flex;height:54px;border:1px solid #dfe5ee;border-radius:12px;background:var(--in);overflow:hidden}
.ck-cx .cx-amt input{flex:1;min-width:0;height:100%;padding:0 14px;border:0;background:transparent;color:var(--ink);font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;outline:0}
.ck-cx .cx-amt span{display:flex;align-items:center;justify-content:center;width:48px;border-left:1px solid #dfe5ee;background:var(--soft);color:var(--sub);font-size:15px}
/* the quick amounts are a grid cell of their own (under the amount on PC, the whole width on phones), 10px under the amount box */
.ck-cx .cx-quick{grid-area:quick;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:-10px}
.ck-cx .cx-quick button{height:42px;padding:0 4px;border:1px solid #dfe5ee;border-radius:10px;background:var(--card);color:var(--sub);font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
.ck-cx .cx-quick button:hover{border-color:#b9cdf3}
.ck-cx .cx-quick button.on{border-color:var(--blue);background:var(--blue);color:#fff}
.ck-cx .cx-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:#eef1f6}
.ck-cx .cx-seg label{position:relative;display:block;margin:0;cursor:pointer}
.ck-cx .cx-seg input{position:absolute;width:1px;height:1px;opacity:0}
.ck-cx .cx-seg span{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:11px;color:var(--sub);font-size:16px;font-weight:700;white-space:nowrap}
.ck-cx .cx-seg span svg{width:22px;height:22px;opacity:.7}
.ck-cx .cx-seg input:checked + span{background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(29,95,240,.28)}
.ck-cx .cx-seg input:checked + span svg{opacity:1}
.ck-cx .cx-seg input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}
/* ④ 거래소 직접 선택 (owner 10/29): the sending and the receiving exchange in the direction's order; "전체" = every exchange of that side */
.ck-cx .cx-f-ex{position:relative;grid-area:ex;min-width:0}   /* its search panel opens under both boxes */
.ck-cx .cx-f-ex .cx-lb{flex-wrap:wrap;row-gap:2px}
.ck-cx .cx-lb small{min-width:0;font-size:13px;font-weight:400;color:var(--mute)}
.ck-cx .cx-xs{display:flex;align-items:center;gap:8px}
.ck-cx .cx-xbox{flex:1 1 0;min-width:0}
.ck-cx .cx-sel-x{height:60px;gap:9px;padding:0 36px 0 12px}
.ck-cx .cx-sel-x > svg{right:12px}
.ck-cx .cx-xi{flex:none;width:26px;height:26px}
.ck-cx .cx-sel-x .cx-xi img,.ck-cx .cx-xi .cx-all{width:26px;height:26px;border-radius:50%}
.ck-cx .cx-xi .cx-all{padding:5px;background:#eaf1ff;color:var(--blue);fill:currentColor}
.ck-cx .cx-xbox [hidden]{display:none}
.ck-cx .cx-xt{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.ck-cx .cx-cap{font-size:12px;color:var(--mute);white-space:nowrap}
.ck-cx .cx-cap b{font-weight:700;color:var(--blue)}
.ck-cx .cx-sel-x .cx-sel-t{font-size:13px}
.ck-cx .cx-sel-x .cx-sel-t b{font-size:15.5px}
.ck-cx svg.cx-xarr{width:20px;height:20px;color:var(--mute)}
.ck-cx .cx-filt{margin:0 0 6px;font-size:13.5px;line-height:1.6;color:var(--sub)}
.ck-cx .cx-filt b{color:var(--ink);white-space:nowrap}
.ck-cx .cx-filt a{display:inline-block;margin-left:8px;color:#1a5fcf;font-weight:600;white-space:nowrap}
.ck-cx button.cx-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:62px;border:0;border-radius:14px;background:linear-gradient(180deg,#3483ff,#1557f0);color:#fff;font-size:20px;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(29,95,240,.3)}
.ck-cx button.cx-go svg{width:28px;height:28px}
.ck-cx button.cx-go:hover{filter:brightness(1.05)}
.ck-cx .cx-msg{margin:0 0 16px;padding:12px 16px;border-radius:12px;background:#fff6e5;color:#5a3b06;font-size:14.5px}

/* best pair */
.ck-cx .cx-best{position:relative;margin:0 0 18px;padding:22px 24px 18px;border:1px solid #f6c5cf;border-radius:18px;background:linear-gradient(135deg,#fff6f8,#ffecf0);overflow:hidden}
.ck-cx .cx-best.loss{border-color:#cfdcf5;background:linear-gradient(135deg,#f6f9ff,#ecf2ff)}
.ck-cx .cx-art{position:absolute;top:18px;right:22px;width:190px;height:auto;pointer-events:none}
.ck-cx .cx-best.loss .cx-art{display:none}
.ck-cx .cx-best > p,.ck-cx .cx-best > ul{position:relative}
.ck-cx .cx-best-k{display:flex;align-items:center;gap:8px;margin:0;color:var(--up);font-size:15.5px;font-weight:800}
.ck-cx .cx-best.loss .cx-best-k{color:var(--dn)}
.ck-cx .cx-best-k svg{width:26px;height:26px}
.ck-cx .cx-best-pair{margin:8px 0 2px;font-size:25px;font-weight:800;line-height:1.35;color:var(--ink)}
.ck-cx .cx-best-pair i{font-style:normal;color:var(--sub)}
.ck-cx .cx-best-v{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin:0 0 14px}
.ck-cx .cx-best-v b{font-size:46px;font-weight:900;line-height:1.15;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.ck-cx .cx-best-v span{font-size:24px;font-weight:800}
.ck-cx ul.cx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ck-cx ul.cx-chips li{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border:1px solid #ebe5e8;border-radius:999px;background:var(--card);color:var(--sub);font-size:14.5px;white-space:nowrap}
.ck-cx ul.cx-chips li b{font-weight:700;color:var(--ink)}
.ck-cx ul.cx-chips li.k{border-color:#cdeed8;background:#effbf3;color:#138a3e}
.ck-cx ul.cx-chips li.k b{color:#138a3e}
.ck-cx ul.cx-chips li.k svg{width:17px;height:17px}
.ck-cx ul.cx-chips li.r{border-color:#f6c5cf;background:#fff0f3;font-weight:700}
.ck-cx ul.cx-chips li.r.up,.ck-cx ul.cx-chips li.r.up b{color:var(--up)}
.ck-cx ul.cx-chips li.r.dn{border-color:#cfdcf5;background:#eef4ff}
.ck-cx ul.cx-chips li.r.dn,.ck-cx ul.cx-chips li.r.dn b{color:var(--dn)}
.ck-cx .cx-best-f{margin:14px 0 0;font-size:13.5px;color:var(--mute)}
.ck-cx .cx-best-f b.cx-best-amt{display:inline-block;margin:0 2px;padding:3px 12px;border-radius:999px;background:var(--blue);color:#fff;font-size:15.5px;font-weight:800;line-height:1.5;white-space:nowrap;vertical-align:middle;font-variant-numeric:tabular-nums}
.ck-cx button.cx-open{padding:0;border:0;background:none;color:var(--sub);font:inherit;font-weight:600;cursor:pointer}
.ck-cx button.cx-open:hover{color:var(--ink);text-decoration:underline}

/* ranking */
.ck-cx .cx-rank{margin:0 0 18px;padding:18px 22px 20px;border:1px solid var(--ln);border-radius:18px;background:var(--card)}
.ck-cx .cx-rank-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.ck-cx .cx-rank h2{margin:0;padding:0;border:0;font-size:21px;font-weight:800;color:var(--ink)}
.ck-cx .cx-rank h2 small{margin-left:8px;font-size:14px;font-weight:400;color:var(--mute)}
.ck-cx .cx-sort{position:relative;display:block;flex:none;margin:0}
.ck-cx .cx-sort select{height:42px;padding:0 38px 0 14px;border:1px solid #dfe5ee;border-radius:10px;background:var(--in);color:var(--ink);font-size:14.5px;font-weight:600;-webkit-appearance:none;appearance:none;cursor:pointer}
.ck-cx .cx-sort svg{position:absolute;top:50%;right:12px;width:18px;height:18px;margin-top:-9px;color:var(--ink);pointer-events:none}
.ck-cx .cx-empty{margin:10px 0 0;font-size:14.5px;color:var(--sub)}
.ck-cx ol.cx-list{margin:6px 0 0;padding:0;list-style:none}
.ck-cx .cx-it{border-bottom:1px solid #eef1f5}
.ck-cx button.cx-row{display:grid;grid-template-columns:36px minmax(0,1fr) 170px auto 18px;grid-template-areas:"no pair bar net chev" "no sub bar net chev";align-items:center;gap:4px 14px;width:100%;margin:0;padding:14px 4px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ck-cx button.cx-row:hover{background:#fafbfd}
.ck-cx .cx-no{grid-area:no;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--sub);font-size:15px;font-weight:800}
.ck-cx .cx-it:nth-child(1) .cx-no{background:#fff1c2;color:#b7791f}
.ck-cx .cx-it:nth-child(2) .cx-no{background:#eceff3;color:#5f6b7a}
.ck-cx .cx-it:nth-child(3) .cx-no{background:#fde3d3;color:#c05621}
.ck-cx .cx-pair{grid-area:pair;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0}
.ck-cx .cx-ex{display:inline-flex;align-items:center;gap:7px;min-width:0}
.ck-cx .cx-ex img{width:26px;height:26px;border-radius:50%;flex:none}
.ck-cx .cx-ex b{font-size:16px;font-weight:800;color:var(--ink);white-space:nowrap}
.ck-cx .cx-pair > i{font-style:normal;color:var(--mute)}
.ck-cx .cx-sub{grid-area:sub;padding-left:33px;font-size:13.5px;color:var(--mute)}
.ck-cx .cx-bar{grid-area:bar;display:block;height:8px;border-radius:4px;background:#f0f2f5;overflow:hidden}
.ck-cx .cx-bar i{display:block;height:100%;border-radius:4px;background:#f0506e}
.ck-cx .cx-bar.dn i{background:#4f86f7}.ck-cx .cx-bar.zero i{background:#b0b8c1}
.ck-cx .cx-net{grid-area:net;text-align:right;font-variant-numeric:tabular-nums}
.ck-cx .cx-net b{display:block;font-size:18px;font-weight:800;white-space:nowrap}
.ck-cx .cx-net small{display:block;margin-top:2px;font-size:13.5px;font-weight:600}
.ck-cx .cx-chev{grid-area:chev;width:18px;height:18px;color:#a0a8b3;transition:transform .15s}
.ck-cx .cx-it.open .cx-chev{transform:rotate(90deg)}
.ck-cx .cx-steps{margin:0 0 14px 50px;padding:12px 16px;border-radius:12px;background:var(--soft)}
.ck-cx ol.cx-st{margin:0;padding:0;list-style:none;counter-reset:st}
.ck-cx ol.cx-st li{display:grid;grid-template-columns:180px minmax(0,1fr);gap:10px;padding:5px 0;font-size:14px;line-height:1.6;counter-increment:st}
.ck-cx ol.cx-st li b{font-weight:700;color:var(--ink)}
.ck-cx ol.cx-st li b::before{content:counter(st) ". ";color:var(--mute);font-weight:600}
.ck-cx ol.cx-st li span{color:var(--sub);font-variant-numeric:tabular-nums}
.ck-cx .cx-slip,.ck-cx .cx-warn{margin:6px 0 0;font-size:13px;color:var(--mute)}
.ck-cx .cx-warn{color:#b45309}
.ck-cx button.cx-more{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:50px;margin:14px 0 0;border:0;border-radius:12px;background:var(--soft);color:var(--ink);font-size:15px;font-weight:600;cursor:pointer}
.ck-cx button.cx-more svg{width:18px;height:18px;transition:transform .15s}
.ck-cx button.cx-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.ck-cx details.cx-skip{margin:12px 0 0;border:1px solid var(--ln);border-radius:12px}
.ck-cx details.cx-skip summary{display:flex;align-items:center;gap:6px;padding:15px 16px;font-size:15px;font-weight:700;color:var(--ink);list-style:none;cursor:pointer}
.ck-cx details.cx-skip summary::-webkit-details-marker{display:none}
.ck-cx details.cx-skip summary .cx-skip-t{min-width:0}
.ck-cx details.cx-skip summary .cx-skip-t span{font-weight:400;color:var(--sub)}
.ck-cx details.cx-skip summary .cx-chev{margin-left:auto;color:var(--ink)}
.ck-cx details.cx-skip[open] summary .cx-chev{transform:rotate(90deg)}
.ck-cx details.cx-skip ul{margin:0;padding:0 16px 8px;list-style:none}
.ck-cx details.cx-skip li{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;padding:11px 0;border-top:1px solid #eef1f5}
.ck-cx details.cx-skip li .cx-ex b{font-size:14.5px;font-weight:700}
.ck-cx details.cx-skip li .cx-ex img{width:22px;height:22px}
.ck-cx .cx-why{font-size:13.5px;color:var(--sub)}
.ck-cx li.stop .cx-why{color:#c0392b}

/* notices + how it is calculated */
.ck-cx .cx-info{display:flex;align-items:flex-start;gap:14px;margin:0 0 16px;padding:16px 20px;border:1px solid #d9e5fb;border-radius:16px;background:#f5f8ff}
.ck-cx .cx-ii{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;font-family:Georgia,serif;font-size:20px;font-weight:700}
.ck-cx .cx-info ul{margin:2px 0 0;padding:0;list-style:none}
.ck-cx .cx-info li{font-size:14px;line-height:1.75;color:var(--sub)}
.ck-cx .cx-info li::before{content:"\00B7  ";color:var(--mute)}
.ck-cx .cx-how{padding:18px 22px;border:1px solid var(--ln);border-radius:16px;background:var(--card);scroll-margin-top:90px}
.ck-cx .cx-how h2{margin:0 0 10px;padding:0;border:0;font-size:18px;font-weight:800;color:var(--ink)}
.ck-cx .cx-how p{margin:0 0 8px;font-size:14.5px;line-height:1.75;color:var(--sub)}
.ck-cx .cx-how p b{color:var(--ink)}
.ck-cx .cx-how p.cx-basis{margin:12px 0 0;font-size:13px;color:var(--mute)}
.ck-cx .cx-how a{color:#1a5fcf;font-weight:600}
.ck-cx .cx-faq{margin-top:16px}
.ck-cx .cx-faq h3{margin:16px 0 4px;padding:0;border:0;font-size:15.5px;font-weight:700;line-height:1.5;color:var(--ink)}
.ck-cx .cx-faq h2 + h3{margin-top:4px}

/* narrower: the ranking rows get a smaller bar */
@container (max-width:760px){
	.ck-cx button.cx-row{grid-template-columns:32px minmax(0,1fr) 90px auto 14px;gap:4px 10px}
	.ck-cx .cx-art{width:150px;right:14px}
}
/* phones: the form one block under another, the bar under the fees line, the steps full width */
@container (max-width:520px){
	.ck-cx h1.cx-h1{font-size:23px}
	.ck-cx .cx-lead{font-size:13.5px}
	.ck-cx a.cx-how-btn{height:34px;padding:0 11px;font-size:13px}
	/* coin and amount on one line (owner 10/29 "한줄로"), the quick amounts, direction, exchanges and the button under them */
	.ck-cx .cx-form{grid-template-areas:"coin amt" "quick quick" "dir dir" "ex ex" "go go";gap:16px 8px;padding:16px}
	.ck-cx .cx-quick{margin-top:-8px}
	.ck-cx .cx-sel{gap:7px;padding:0 30px 0 10px}
	.ck-cx .cx-sel img{width:26px;height:26px}
	.ck-cx .cx-sel-t{font-size:12.5px}
	.ck-cx .cx-sel-t b{font-size:16px}
	.ck-cx .cx-sel > svg{right:9px;width:16px;height:16px;margin-top:-8px}
	.ck-cx .cx-amt input{padding:0 10px;font-size:18px}
	.ck-cx .cx-amt span{width:34px;font-size:14px}
	/* lower buttons on phones (owner 10/29 "파란색 버튼 위아래 높낮이가 너무 크다"): quick amounts 42 -> 36, direction 52 -> 42, 계산하기 62 -> 50 */
	.ck-cx .cx-quick button{height:36px;font-size:13.5px}
	.ck-cx .cx-seg span{height:42px;font-size:15px}
	.ck-cx .cx-seg span svg{width:20px;height:20px}
	.ck-cx button.cx-go{height:50px;border-radius:12px;font-size:18px}
	.ck-cx button.cx-go svg{width:24px;height:24px}
	/* the English page (/en/calc): "Overseas → Korea" is longer than "해외 → 국내" */
	html[lang=en] .ck-cx .cx-seg span{gap:5px;font-size:13.5px}
	html[lang=en] .ck-cx .cx-seg span svg{width:17px;height:17px}
	.ck-cx .cx-f-coin .cx-cs{width:calc(200% + 8px)}   /* the coin box is the left half: the search panel takes the whole form width */
	/* ④ the two exchange boxes on one line (owner 10/29 "한줄로"): smaller icon, caption and chevron so the names fit */
	.ck-cx .cx-xs{gap:4px}
	.ck-cx .cx-sel-x{height:56px;gap:6px;padding:0 22px 0 9px}
	.ck-cx .cx-sel-x > svg{right:6px;width:15px;height:15px;margin-top:-7.5px}
	.ck-cx .cx-xi,.ck-cx .cx-sel-x .cx-xi img,.ck-cx .cx-xi .cx-all{width:22px;height:22px}
	.ck-cx .cx-xi .cx-all{padding:4px}
	.ck-cx .cx-cap{font-size:11px}
	.ck-cx .cx-sel-x .cx-sel-t{font-size:11.5px}
	.ck-cx .cx-sel-x .cx-sel-t b{font-size:14px}
	.ck-cx svg.cx-xarr{width:16px;height:16px}
	.ck-cx .cx-best{padding:18px 16px 16px}
	.ck-cx .cx-art{top:12px;right:8px;width:110px}
	.ck-cx .cx-best-k{font-size:14.5px}
	.ck-cx .cx-best-pair{font-size:21px}
	.ck-cx .cx-best-v b{font-size:36px}
	.ck-cx .cx-best-v span{font-size:19px}
	.ck-cx ul.cx-chips li{height:34px;padding:0 11px;font-size:13.5px}
	.ck-cx .cx-best-f b.cx-best-amt{padding:2px 10px;font-size:14.5px}
	.ck-cx .cx-rank{padding:16px 14px 16px}
	.ck-cx .cx-rank h2{font-size:18.5px}
	.ck-cx .cx-rank h2 small{display:block;margin:2px 0 0;font-size:13px}
	.ck-cx .cx-sort select{height:38px;padding:0 32px 0 10px;font-size:13.5px}
	/* a row in three lines: the pair / premium + fees / bar with the amount and % at its right */
	.ck-cx button.cx-row{grid-template-columns:28px minmax(0,1fr) auto 14px;grid-template-areas:"no pair pair chev" "no sub sub chev" "no bar net chev";gap:5px 10px;padding:13px 0}
	.ck-cx .cx-no{width:28px;height:28px;font-size:13.5px}
	.ck-cx .cx-ex{gap:5px}
	.ck-cx .cx-ex img{width:22px;height:22px}
	.ck-cx .cx-ex b{font-size:15px}
	.ck-cx .cx-sub{padding-left:27px;font-size:12.5px}
	.ck-cx .cx-bar{height:6px;margin-left:27px}
	.ck-cx .cx-net{display:flex;align-items:baseline;justify-content:flex-end;gap:6px}
	.ck-cx .cx-net b{font-size:16px}
	.ck-cx .cx-net small{margin:0;font-size:12.5px}
	.ck-cx .cx-steps{margin:0 0 12px;padding:10px 12px}
	.ck-cx ol.cx-st li{grid-template-columns:minmax(0,1fr);gap:0;font-size:13.5px}
	.ck-cx .cx-info{padding:14px;gap:10px}
	.ck-cx .cx-ii{width:30px;height:30px;font-size:17px}
	.ck-cx .cx-info li{font-size:13.5px}
	.ck-cx .cx-how{padding:16px 14px}
}

/* small phones (360px): "50,000,000" fits the amount box */
@container (max-width:350px){
	.ck-cx .cx-amt input{padding:0 8px;font-size:16.5px}
	.ck-cx .cx-amt span{width:30px}
}

/* dark mode */
body.dm .ck-cx{--ink:#eceef1;--sub:#c4c9d0;--mute:#a3a9b3;--card:#2b2b2b;--ln:#3a3d42;--soft:#33363b;--in:#222;--up:#ff7d8f;--dn:#6aa4ff}
body.dm .ck-cx .cx-form{box-shadow:none}
body.dm .ck-cx a.cx-how-btn{border-color:#3d4a63;background:#26303f;color:#dfe3e8}
body.dm .ck-cx .cx-sel,body.dm .ck-cx .cx-amt,body.dm .ck-cx .cx-quick button,body.dm .ck-cx .cx-sort select{border-color:#44484f}
body.dm .ck-cx .cx-amt span{border-color:#44484f}
body.dm .ck-cx .cx-quick button.on{border-color:#3b74f0;background:#3b74f0}
body.dm .ck-cx .cx-seg{background:#33363b}
body.dm .ck-cx .cx-seg input:checked + span{background:#3b74f0;box-shadow:none}
body.dm .ck-cx .cx-best{border-color:#5a3440;background:linear-gradient(135deg,#3a252b,#31232a)}
body.dm .ck-cx .cx-best.loss{border-color:#34405a;background:linear-gradient(135deg,#232c3d,#262e3d)}
body.dm .ck-cx ul.cx-chips li{border-color:#44484f}
body.dm .ck-cx ul.cx-chips li.k{border-color:#2f5a3d;background:#1f3328;color:#6fd39a}
body.dm .ck-cx ul.cx-chips li.k b{color:#6fd39a}
body.dm .ck-cx ul.cx-chips li.r{border-color:#5a3440;background:#43262d}
body.dm .ck-cx ul.cx-chips li.r.dn{border-color:#34405a;background:#26303f}
body.dm .ck-cx .cx-it,body.dm .ck-cx details.cx-skip li{border-color:#3a3d42}
body.dm .ck-cx button.cx-row:hover{background:#30333a}
body.dm .ck-cx .cx-it:nth-child(1) .cx-no{background:#4a3d1c;color:#f5c451}
body.dm .ck-cx .cx-it:nth-child(2) .cx-no{background:#3d4148;color:#cfd4db}
body.dm .ck-cx .cx-it:nth-child(3) .cx-no{background:#4a2f22;color:#f0a37a}
body.dm .ck-cx .cx-bar{background:#3a3d42}
body.dm .ck-cx .cx-warn{color:#f0b35a}
body.dm .ck-cx li.stop .cx-why{color:#ff9b9b}
body.dm .ck-cx .cx-msg{background:#3a3222;color:#f3dca8}
body.dm .ck-cx .cx-info{border-color:#34405a;background:#232c3d}
body.dm .ck-cx .cx-ii{background:#3b74f0}
body.dm .ck-cx .cx-how a{color:#7fb3ff}
body.dm .ck-cx .cx-cs{box-shadow:0 12px 32px rgba(0,0,0,.5)}
body.dm .ck-cx input.cx-cs-q{border-color:#44484f}
body.dm .ck-cx ul.cx-cs-l button.on{background:#26303f}
body.dm .ck-cx ul.cx-cs-l .cx-all,body.dm .ck-cx .cx-xi .cx-all{background:#26303f;color:#7fb3ff}
body.dm .ck-cx .cx-cap b,body.dm .ck-cx .cx-filt a{color:#7fb3ff}