body{
font-family:sans-serif;
background:#f2f2f2;
display:flex;
justify-content:center;
padding:20px;
}

.ct-wrap{
max-width:700px;
width:100%;
margin:20px auto;
background:white;
padding:20px;
border:1px solid #bbb;
}

.ct-title{
font-size:18px;
margin-bottom:10px;
}

.ct-preview{
height:90px;
border:1px solid #777;
margin-bottom:10px;
}


.ct-row label{
width:20px;
}

/* 数値入力 */
.ct-row input[type=number]{
width:60px;
margin:0 5px;
}

.ct-row input[type=range]{
flex:1;
}

.ct-hexinput{
width:100%;
margin-top:8px;
padding:5px;
}

.ct-out{
margin-top:8px;
}

.ct-copy{
border:1px solid #888;
padding:6px;
margin:3px 0;
cursor:pointer;
}

.ct-palette{
display:flex;
gap:4px;
margin-top:8px;
}

.ct-p{
width:40px;
height:40px;
border:1px solid #777;
}

.ct-code{
margin-top:10px;
font-size:12px;
}

.ct-history{
display:flex;
flex-wrap:wrap;
gap:4px;
margin-top:8px;
}

.ct-h{
width:28px;
height:28px;
border:1px solid #777;
cursor:pointer;
}


#copyNotice{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
background:#333;
color:white;
padding:8px 14px;
border-radius:6px;
font-size:14px;
opacity:0;
pointer-events:none;
transition:opacity .3s;
}

#copyNotice.show{
opacity:1;
}

.ct-r{color:#e53935;}
.ct-g{color:#43a047;}
.ct-b{color:#1e88e5;}

/* スライダー */

input[type="range"]{
width:100%;
height:6px;
border-radius:4px;
background:#e4e6eb;
outline:none;
}

/* つまみ */

input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;
appearance:none;
width:16px;
height:16px;
border-radius:50%;
background:#444;
border:2px solid white;
cursor:pointer;
}

/* hover */

input[type="range"]:hover::-webkit-slider-thumb{
background:#222;
}

/* フォーカス */

input[type="range"]:focus{
outline:none;
}

/* 行レイアウト */

.ct-row{
display:flex;
align-items:center;
gap:10px;
margin:8px 0;
}


/* 新規履歴が光る */
.ct-h.flash{
box-shadow:0 0 0 3px #4caf50;
transition:box-shadow .3s;
}

/* クリアボタンレイアウト */
#ct-clear{
margin-top:6px;
padding:4px 8px;
font-size:12px;
cursor:pointer;
}

#ct-picker{
cursor:pointer;
}