.rectangle20{
	width:200px;
	height:160px;
	border-radius:15px 50px 30px;
	border: 10px double steelblue;
	background : skyblue;
	font-weight:bold;
	font-size: 30px;
	color: steelblue;
	text-shadow:0px 1px 1px #f0f8ff7d, 0px -1px 1px steelblue;
	box-shadow:0px 1px 1px #f0f8ff7d inset, 0px -1px 1px steelblue inset;
}
.rectangle20:active{
	text-shadow:0px -1px 1px #f0f8ff7d, 0px 1px 1px steelblue;
	box-shadow:0px -1px 1px #f0f8ff7d inset, 0px 1px 1px steelblue inset;
}
.rectangle20Y {
    width: 200px;
    height: 160px;
    border-radius: 15px 50px 30px;
    border: 10px double #00000000;
    background: burlywood;
    font-weight: bold;
    font-size: 30px;
    color: #00000000;
    text-shadow: 0px 1px 1px #f0f8ff7d, 0px -1px 1px saddlebrown;
    box-shadow: 0px 1px 1px #f0f8ff7d inset, 0px -1px 1px saddlebrown inset;
}
.rectangle20Y:active{
	text-shadow:0px -1px 1px #f0f8ff7d, 0px 1px 1px saddlebrown;
	box-shadow:0px -1px 1px #f0f8ff7d inset, 0px 1px 1px saddlebrown inset;
}

/* 새로운 세련된 버튼 스타일 */
.modern-button {
    width: 180px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(145deg, #6a11cb 0%, #2575fc 100%);
    border: none;
    color: white;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(37, 117, 252, 0.4), 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.modern-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
}

.modern-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(37, 117, 252, 0.6), 0 2px 4px rgba(0, 0, 0, 0.15);
}

.modern-button:hover::before {
    left: 100%;
}

.modern-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(37, 117, 252, 0.3), 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* 성공 버튼 변형 */
.modern-button.success {
    background: linear-gradient(145deg, #11cb4f 0%, #25fc8a 100%);
    box-shadow: 0 4px 15px rgba(37, 252, 138, 0.4), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.modern-button.success:hover {
    box-shadow: 0 7px 20px rgba(37, 252, 138, 0.6), 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* 경고 버튼 변형 */
.modern-button.warning {
    background: linear-gradient(145deg, #cb5511 0%, #fc9025 100%);
    box-shadow: 0 4px 15px rgba(252, 144, 37, 0.4), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.modern-button.warning:hover {
    box-shadow: 0 7px 20px rgba(252, 144, 37, 0.6), 0 2px 4px rgba(0, 0, 0, 0.15);
}
.rectangleHalfCircle{
	width:200px;
	height:160px;
	border-radius:0px 80px 80px 0px;
	border: 10px double steelblue;
	background : skyblue;
	font-weight:bold;
	font-size: 30px;
	color: steelblue;
	text-shadow:0px 1px 1px #f0f8ff7d, 0px -1px 1px steelblue;
	box-shadow:0px 1px 1px #f0f8ff7d inset, 0px -1px 1px steelblue inset;
}
.rectangleHalfCircle:active{
	text-shadow:0px -1px 1px #f0f8ff7d, 0px 1px 1px steelblue;
	box-shadow:0px -1px 1px #f0f8ff7d inset, 0px 1px 1px steelblue inset;
}
.cockroach{
	z-index:9;
	/*background-color: #f0f8ff01;*/
	/*background-image:url('../img/insect-200_60.png');*/
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	font-weight:bold;
	font-size: 30px;
	color: steelblue;
	text-shadow:0px 1px 1px #f0f8ff7d, 0px -1px 1px steelblue;
}
.cockroach-cover{
	z-index:10;
	width:100%;
	height:100%;
	/*background-color: #f0f8ff01;*/
	background-image:url('../img/insect-200_60.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	font-weight:bold;
	font-size: 30px;
	color: steelblue;
	text-shadow:0px 1px 1px #f0f8ff7d, 0px -1px 1px steelblue;
}
.cockroach:active{
	text-shadow:0px -1px 1px #f0f8ff7d, 0px 1px 1px steelblue;
	box-shadow:0px -1px 1px #f0f8ff7d inset, 0px 1px 1px steelblue inset;
}
.cockroach .feeler{
	z-index:0;
	transform-origin:0% 50%;
	/*background-color: #f0f8ff01;*/
	background-size: contain;
	background-repeat:no-repeat;
	background-position: left center;
	color: steelblue;
	text-shadow:0px 1px 1px #f0f8ff7d, 0px -1px 1px steelblue;
	width:55%;
	height:88%; 
	left:95%;
	top:0%;
	background-image:url('../img/insect-feeler_100_48.png');
}
.cockroach .leg{
	z-index:0;
	transform-origin:0% 50%;
	/*background-color: #f0f8ff01;*/
	background-size: contain;
	background-repeat:no-repeat;
	background-position: left center;
	color: steelblue;
	text-shadow:0px 1px 1px #f0f8ff7d, 0px -1px 1px steelblue;
	
	width:44%;
	height:88%; 
}
.cockroach .leg1{
	left:70%;
	top:30%;
	background-image:url('../img/insect-leg-first_100_48.png');
}
.cockroach .leg2{
	left:60%;
	top:43%;
	background-image:url('../img/insect-leg-middle_100_48.png');
}
.cockroach .leg3{
	left:45%;
	top:40%;
	background-image:url('../img/insect-leg-last_100_48.png');
}
.cockroach .leg4{
	left:70%;
	top:-10%;
	background-image:url('../img/insect-leg-first_100_48.png');
}
.cockroach .leg5{
	left:60%;
	top:-23%;
	background-image:url('../img/insect-leg-middle_100_48.png');
}
.cockroach .leg6{
	left:45%;
	top:-20%;
	background-image:url('../img/insect-leg-last_100_48.png');
}

.cockroach.gold
,.cockroach.gold .leg
,.cockroach.gold .feeler{
	filter: brightness(5);
}

.pos_fixed {
	position:fixed;
}
.pos_absolute {
	position:absolute;
}

.testdiv {width:100%;height:128px;font-size:3vmin;}
.redback{background-color: red;}
.blueback{background-color: blue;}
.purpleback{background-color: purple;}
.yellowback{background-color: yellow;}
.aliceback{background-color: aliceblue;}
.whiteback{background-color: white;}