/* Paleri — カラーピッカー（Figma「カラーピッカー」537:4025）。JS は assets/js/paleri-color-picker.js */
.paleri-picker{position:fixed;z-index:100000;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;width:min(340px,calc(100vw - 32px));padding:16px;border:1.5px solid #030303;border-radius:24px;background:#fff;color:#030303;font-family:'DM Sans','Jost',sans-serif;font-weight:700;--paleri-picker-hue:#f00;--paleri-picker-color:#000;--paleri-picker-shadow:rgba(3,3,3,.2);}
.paleri-picker[hidden]{display:none;}
.paleri-picker *,.paleri-picker *::before,.paleri-picker *::after{box-sizing:border-box;}
.paleri-picker :focus{outline:none;}
.paleri-picker :focus-visible{outline:2px solid #030303;outline-offset:2px;}

.paleri-picker__spectrum{position:relative;height:160px;border-radius:16px;overflow:hidden;cursor:crosshair;touch-action:none;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 100%),linear-gradient(90deg,#fff 0%,var(--paleri-picker-hue) 100%);}
.paleri-picker__pin{position:absolute;width:16px;height:16px;border:1px solid #030303;border-radius:50%;background:#fff;box-shadow:0 3px 6px var(--paleri-picker-shadow);transform:translate(-50%,-50%);pointer-events:none;}

.paleri-picker__strip{display:flex;align-items:center;gap:14px;}
.paleri-picker__preview{flex:none;width:28px;height:28px;border:1px solid #000;border-radius:50%;background:var(--paleri-picker-color);}
.paleri-picker__hue{position:relative;flex:1 1 0;min-width:0;height:16px;cursor:pointer;touch-action:none;}
.paleri-picker__hue::before{content:'';position:absolute;left:0;right:0;top:50%;height:8px;border:1px solid #000;border-radius:999px;transform:translateY(-50%);background:linear-gradient(90deg,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);}
.paleri-picker__hue-thumb{position:absolute;top:50%;width:18px;height:18px;border:1px solid #030303;border-radius:50%;background:#fff;transform:translate(-50%,-50%);pointer-events:none;}

.paleri-picker__inputs{display:flex;flex-direction:column;gap:8px;}
.paleri-picker__hex{display:flex;align-items:center;justify-content:space-between;gap:12px;height:38px;margin:0;padding:0 16px;border:1px solid #030303;border-radius:999px;background:#fff;cursor:text;}
.paleri-picker__hex:focus-within,.paleri-picker__rgb-input:focus{outline:2px solid #030303;outline-offset:2px;}
.paleri-picker__hex-label{font-size:12px;line-height:normal;font-variation-settings:'opsz' 14;}
.paleri-picker__hex-input{width:8ch;min-width:0;margin:0;padding:0;border:0;background:none;box-shadow:none;color:inherit;font:700 14px/normal 'JetBrains Mono',ui-monospace,monospace;text-align:right;text-transform:uppercase;}
.paleri-picker__hex-input:focus{outline:none;}
.paleri-picker__rgb{display:flex;gap:8px;}
.paleri-picker__rgb-col{display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:4px;min-width:0;margin:0;}
.paleri-picker__rgb-input{width:100%;height:36px;margin:0;padding:0 8px;border:1px solid #030303;border-radius:999px;background:#fff;box-shadow:none;color:inherit;font:700 13px/normal 'DM Sans','Jost',sans-serif;font-variation-settings:'opsz' 14;text-align:center;}
.paleri-picker__rgb-label{font-size:10px;line-height:13px;font-variation-settings:'opsz' 14;}

/* 開く前の丸。本体の input が外枠から上左に6pxずれて左上しか押せなかったので、外枠いっぱいに広げる。 */
.home-hex__picker,.ccode .ccode__pick{cursor:pointer;}
.ccode .ccode__pick input[type=color]{top:0;left:0;width:100%;height:100%;padding:0;}
.ccode .ccode__pick input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
.ccode .ccode__pick input[type=color]::-webkit-color-swatch{border:0;}
.ccode .ccode__pick input[type=color]::-moz-color-swatch{border:0;}