@charset "utf-8";

body.overscroll{overflow: hidden;}

:root {
/*     --stroke-Gra: linear-gradient(281deg, #EEA00F -2.81%, #64B3F4 103.03%); */
    --stroke-Gra: linear-gradient(91.78deg, #2DC537 0%, #237DBD 107.42%);
    --stroke-Gra2: linear-gradient(91.78deg, #237DBD 0%, #2DC537 107.42%);
    --green-Gra: linear-gradient(95.97deg, #23CE4F 0%, #072C81 224.22%);
    --util-topGradi: linear-gradient(91deg, #D7162D 43.16%, #DE2E2E 217.25%);
    --color-link: #1373B7;
    --color-link2: #02A45C;
    --color-bbs-link: #F3810F;
    --color-green: #02A45C;
    --color-green2: #007641;
    --color-green-bright: #ECF9F3;
    --color-green-bright2: #F3FFFA;
    --color-blue: #1283D3;
    --color-blue2: #05609F;
    --color-dark: #4F4F4F;
    --color-dark2: #222;
    --color-silver: #D8DBE2;
    --color-silver-light: #F1F3F8;
    --color-silver2: #D8DBE2;
    --color-silver-hover: #565656;
    --color-point: #F35F0F; /* 주황 */
    --color-point2: #F9954E; /* 주황 */
    
    --color-old: #0086f8;
    --color-old2: #00aa4b;
/*     --icon-plus: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.14294 8L14.8572 8' stroke='%2302A45C' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8 1.14282L8 14.8571' stroke='%2302A45C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A"); */
    --icon-plus: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.85712 7L12.1428 7' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M7 1.85742L7 12.1431' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    --icon-down: url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3125 11.5625L7.65626 5.90626L2.00002 11.5625' stroke='%23FFB37D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}


a.link {color: var(--color-link);}
a.link2 {color: #222;}
a.link2:hover, a.link2:focus, a.link2:active {color: var(--color-link2);}
.btn {
	padding: .7em;
	border: none;
	border-radius: .54em;
	background-color: var(--color-dark);
	color: #fff;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	min-width: 100px;
	line-height: 1.4;
	
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
	
	transition: .3s;
}
.btn:hover, .btn:focus, .btn:hover {background-color: #000;}
.btn-dark {background-color: var(--color-dark); color: #fff;}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active {background-color: #000; color: #fff;}
.btn-dark-i {background-color: var(--color-dark) !important; color: #fff !important;}
.btn-dark-i:hover, .btn-dark-i:focus, .btn-dark-i:active {background-color: #000 !important; color: #fff !important;}
.btn-silver {background-color: var(--color-silver); color: var(--color-dark2);}
.btn-silver:hover, .btn-silver:focus, .btn-silver:active {background-color: var(--color-silver-hover); color: #fff;}
.btn-silver-i {background-color: var(--color-silver) !important; color: var(--color-dark2) !important;}
.btn-silver-i:hover, .btn-silver-i:focus, .btn-silver-i:active {background-color: var(--color-silver-hover) !important; color: #fff !important;}
.btn-silver-light {background-color: var(--color-silver-light); color: var(--color-dark2);}
.btn-silver-light:hover, .btn-silver-light:focus, .btn-silver-light:active {background-color: var(--color-dark2); color: #fff;}
.btn-silver2 {background-color: var(--color-silver); color: var(--color-dark2);}
.btn-silver2:hover, .btn-silver2:focus, .btn-silver2:active {background-color: var(--color-dark2); color: #fff;}
.btn-silver2-i {background-color: var(--color-silver) !important; color: var(--color-dark2) !important;}
.btn-silver2-i:hover, .btn-silver2-i:focus, .btn-silver2-i:active {background-color: var(--color-dark2) !important; color: #fff !important;}
.btn-green, a.btn-green {background-color: var(--color-green); color: #fff;}
.btn-green:hover, .btn-green:focus, .btn-green:active {background-color: var(--color-green2);}
.btn-green-i {background-color: var(--color-green) !important; color: #fff !important;}
.btn-green-i:hover, .btn-green-i:focus, .btn-green-i:active {background-color: var(--color-green2) !important;}
.btn-green-alt, a.btn-green-alt {background-color: #fff; color: var(--color-green); border: 1px solid var(--color-green);}
.btn-green-alt:hover, .btn-green-alt:focus, .btn-green-alt:active {background-color: var(--color-green); color: #fff;}
.btn-green-alt-i {background-color: #fff !important; color: var(--color-green) !important; border: 1px solid var(--color-green) !important;}
.btn-green-alt-i:hover, .btn-green-alt-i:focus, .btn-green-alt-i:active {background-color: var(--color-green) !important; color: #fff !important;}
.btn-blue {background-color: var(--color-blue); color: #fff;}
.btn-blue:hover, .btn-blue:focus, .btn-blue:active {background-color: var(--color-blue2); color: #fff;}
.btn-blue-i {background-color: var(--color-blue) !important; color: #fff !important;}
.btn-blue-i:hover, .btn-blue-i:focus, .btn-blue-i:active {background-color: var(--color-blue2) !important; color: #fff !important;}
.btn-warning {background-color: var(--color-silver-light); color: var(--color-dark2);}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {background-color: var(--color-point); color: #fff;}
.btn-warning-i {background-color: var(--color-silver-light) !important; color: var(--color-dark2) !important;}
.btn-warning-i:hover, .btn-warning-i:focus, .btn-warning-i:active {background-color: var(--color-point) !important; color: #fff !important;}
.btn-plus::after, .btn-plus-before::before {
	content: ''; background: none;
	display: block; width: 12px; height: 12px; transition: .3s;
	background-color: var(--color-dark2);
	mask-image: var(--icon-plus);
	mask-repeat: no-repeat;
/* 	mask-position: center left; */
	mask-position: center;
	mask-size: contain;
}
.btn-plus:hover::after,  .btn-plus:focus::after, .btn-plus:active::after, 
.btn-plus-before:hover::before, .btn-plus-before:focus::before, .btn-plus-before:active::before {background-color: #fff;}
.btn-plus-i::after, .btn-plus-before-i::before {
	content: '' !important; background: none !important;
	display: block; width: 12px; height: 12px; transition: .3s;
	background-color: var(--color-dark2);
	mask-image: var(--icon-plus);
	mask-repeat: no-repeat;
/* 	mask-position: center left; */
	mask-position: center;
	mask-size: contain;
}
.btn-plus-i:hover::after,  .btn-plus-i:focus::after, .btn-plus-i:active::after, 
.btn-plus-i-before:hover::before, .btn-plus-before-i:focus::before, .btn-plus-before-i:active::before {background-color: #fff !important;}
.btn-plus.btn-green-alt::after {background-color: var(--color-green);}
.btn-plus-i.btn-green-alt-i::after {background-color: var(--color-green) !important;}
.btn-plus-i.btn-green-alt-i:hover::after, .btn-plus-i.btn-green-alt-i:focus::after, .btn-plus-i.btn-green-alt-i:active::after,
.btn-plus.btn-green-alt-i:hover::after, .btn-plus.btn-green-alt-i:focus::after, .btn-plus.btn-green-alt-i:active::after {background-color: #fff !important;}
input:text, input:number, input:search {}
.border, .juyo_info {
	background-origin: border-box;
	background-clip: content-box, border-box;
	backdrop-filter: blur(4px);
	border: 2px solid transparent;
	background-image: linear-gradient(#fff, #fff), var(--stroke-Gra);
}
.main .border {border-width: 1px; backdrop-filter: blur(2px); background-image: linear-gradient(#fff, #fff), var(--stroke-Gra2);}


.note-modal-content, .note-modal-header, .note-modal-body, .note-modal-footer {box-sizing: content-box;}
.btn.note-btn {
  display: inline-block;
  font-weight: 400;
  margin-bottom: 0;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  outline: 0;
  color: #333;
  background-color: #fff;
  border: 1px solid #dae0e5;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  border-radius: 0;
  min-width: auto;
  transition: none;
}
.btn.note-btn-primary {
  background: #fa6362;
  color: #fff;
}
.btn.note-btn.disabled, .btn.note-btn[disabled], fieldset[disabled] .btn.note-btn {
  cursor: not-allowed;
  -webkit-opacity: .65;
  -khtml-opacity: .65;
  -moz-opacity: .65;
  opacity: .65;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=65);
  filter: alpha(opacity=65);
  box-shadow: none;
}
.btn.note-btn-primary.focus, .btn.note-btn-primary:focus, .btn.note-btn-primary:hover {
  color: #fff;
  text-decoration: none;
  border: 1px solid #dae0e5;
  background-color: #fa6362;
  border-radius: 1px;
}


/* 비주얼 */

/* .main #header .right_new_btn, */
.main #hsearchForm, .main #header .sear_ch_com {
    display: none;
}

.main #header .inner {
	max-width: 1600px;
}

/* .sear_ch_com{position: relative; height: 60px; width: 100%; border: 2px solid #0086f8; box-sizing: border-box; border-radius: 10px; overflow: hidden;} */
.sear_ch_com input{width: 100%; height: 100%; padding: 0 70px 0 30px; font-size: 18px; letter-spacing: -0.025em; color: #222; border: none; outline: none; box-sizing: border-box;}
/* .sear_ch_com input::placeholder{color: #aaaaaa;} */
/* .sear_ch_com .sear_btn{ height: 82%; aspect-ratio: 1/1; border-radius: 10px; background-color: #0086f8; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; right: 5px; transform: translateY(-50%);} */


.main {
    overflow-x: hidden;
    background: #fff;
    background-size: cover;
}


.main .main-visual::before {
    content: '';
    display: block;
    width: 100vw;
    height: 100vh;
    background: none; /*url(/img/dandelion.svg) repeat left bottom;*/
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -2;
}

.bg,
.main .main-visual {
    width: 100vw;
    /* height: calc(100vh - 110px); */
    box-sizing: border-box;
    position: relative;
}

.bg {
    height: 100vh;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.bg .top::before,
.bg .top::after,
.bg .bottom::before,
.bg .bottom::after {
    content: '';
    display: block;
    width: 220%;
    height: 220%;
    background: url(/img/blue_cir.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    left: -122%;
    bottom: 22%;
    animation:rot 10s linear infinite;
    transform-origin: center;
}

.bg .top::after {
    background-image: url(/img/yellow_cir.svg);
    left: -112%;
    bottom: 35%;
    animation:rot 8s linear infinite;
}


.bg .bottom::before,
.bg .bottom::after {
    width: 190%;
    height: 190%;
    background-image: url(/img/blue_cir2.svg);
    left: -1%;
    bottom: -131%;
    animation-direction: reverse;
}

.bg .bottom::after {
    background-image: url(/img/yellow_cir2.svg);
    left: -3%;
    bottom: -145%;
    width: 215%;
    height: 215%;
    animation:rot 8s linear infinite reverse;
}

@keyframes rot{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

.main .main-visual .inner {
    width: 100%;
    height: 100%;
    max-width: 1600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main .inner .left {
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-self: start;
    /*padding-top: 100px;*/
    position: relative;
}

.main .inner .left > * {
    width: 100%;
}
.main .inner .new_sear_ch{
    height: 120px;
}



.visual-tit {
    color: var(--bk_00, #000);
    font-family: Pretendard;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}
.visual-tit a.num,
.visual-tit a.num:link,
.visual-tit a.num:visited,
.visual-tit a.num:hover,
.visual-tit a.num:active,
.visual-tit a.num:focus {
    color: var(--bk_00, #000);
    font-family: Pretendard;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

.main .comomn-btn-list {
    display: flex;
    gap: 20px;
}

.main .comomn-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
}

.main .comomn-btn span {
/*     width: calc(100% - 60px); */
    padding-left: 25px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

.main .comomn-btn i {
    display: block;
    min-width: 60px;
    height: 60px;
    background: #252525;
    border-left: 1px solid var(--color-black);
    transition: .3s;
    overflow: hidden;
    position: relative;
}


.main .comomn-btn i::after {
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    background: url(/img/ico_btn_plus.svg) no-repeat center;
    transition: .3s;
}
.main .comomn-btn:not(.link) i::after{
  background: url(/img/ico_main_book.png) no-repeat center;
  background-size: contain;
}
.main .comomn-btn:not(.link) i .book_right{
  left: 35px;
  position: absolute;
  bottom: 10px;   /* 아래쪽 기준 */
  transition: transform 0.5s linear;
  transform-origin: bottom center; /* 회전 기준 */
	
}

.main .comomn-btn:not(.link):hover i .book_right, .main .comomn-btn:not(.link):focus i .book_right {
    transform: rotate(15deg); /* 시계방향으로 기울기 */
}
.main .comomn-btn.link i::after {
    background-image: url(/img/ico_main_lounge.png);
    background-size: contain;
}


.main .main-visual .new_sear_ch > form {
	display:flex;
	justify-content: center;
}
.main .main-visual .sear_ch_com {
    border: 2px solid #363636;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.10);
    margin: 1.5rem 0 5rem 0;
    width: 99%;
}

.sear_ch_com.visual {
    height: fit-content;
}

.sear_ch_com.visual input {
    font-size: 24px;
    font-weight: 500;
    line-height: 140%;
    padding: 19px 4rem 15px 2rem;
}

.sear_ch_com.visual input::placeholder {
    color: #989898;
}

.sear_ch_com.visual .sear_btn {
    width: 60px;
    background-size: 60px;
}

.main .inner .right {
    width: 55%;
    padding-bottom: 70px;
    min-height: 596px;
}

.main .visual-card-list {
    width: 100%;
    height: 100%;
    min-height: 880px;
    display: flex;
    gap: 20px;
}
.main .visual-card-list .btn-lounge {
	display: none;
}

.main .visual-card-list > div {
    width: calc(50% - 10px);
    height: calc(100% - 80px);
    height: 91.11%;
    display: flex;
    flex-direction: column;
    gap: 20px;    
}

.main .visual-card-list .compare {
    margin-top: auto;
    margin-top: 80px;
}

.main .visual-card {
    display: block;
    width: 100%;
    /* height: 100%; */
    align-items: center;
    border-radius: 20px;
    backdrop-filter: blur(2px);
    position: relative;
    border: 1px solid transparent;
    background-image: linear-gradient(#fff, #fff), var(--stroke-Gra2);
    background-origin: border-box;
    background-clip: content-box, border-box;
    position: relative;
    transition: .3s;
}

.main .visual-card:hover, .main .visual-card:focus {
    background-color: rgba(0, 0, 0, 0.50);
    background-image:  rgba(0, 0, 0, 0.50), var(--stroke-Gra);
}

.main .visual-card::after {
    content: '';
    display: block;
    width: 87px;
    height: 87px;
    background:  rgba(255, 255, 255, 0.90) url(/img/ico_card-hover2.svg) no-repeat center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(5px);
    visibility: hidden;
}

.main .visual-card:hover::after, .main .visual-card:focus::after {
    visibility: visible;
}

.main .visual-card .cont {
    width: 100%;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 175px;
}

.main .visual-card .cont > * {
    width: 100%;
}

.main .visual-card .tit {
    color: var(--bk_00, #000);
    font-size: 26px;
    font-size: clamp(20px, 1.3542vw, 26px);
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

.main .visual-card .tit,
.main .visual-card .txt {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.main .visual-card .txt {
    color: var(--bk_32, #323232);
    text-align: right;
    font-size: clamp(18px, 0.9375vw, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

@media all and (max-width:1620px){
    
    .main .main-visual .inner {
		width: calc(100% - 40px);
		max-width: none;
	}
}

@media all and (max-width:1400px){
    .visual-tit {
        font-size: 32px;
    }

    .visual-tit .num {
        font-size: 48px;
    }

    .sear_ch_com.visual input {
        font-size: 20px;
    }

    .main .comomn-btn span {
        font-size: 16px;
        padding-left: 1rem;
    }

    .main .comomn-btn i {
        min-width: 50px;
        height: 50px;
    }
}

@media all and (max-width:1024px){

    #header:not(:has(~ main.rival_m_scroll)) {
        padding: 10px 20px;
        border-bottom: 1px solid #DADADA;
        background-color: #fff;
    }

    #header:not(:has(~ main.rival_m_scroll)) .logo img {
        width: 103px;
    }

    #header:not(:has(~ main.rival_m_scroll)) .user_href a img,
    #header:not(:has(~ main.rival_m_scroll)) .user_href a {
        width: 40px;
        height: 40px;
    }

    #header:not(:has(~ main.rival_m_scroll)) .user_href a {
        background-color: #434343;
    }

    main:not(.rival_m_scroll) ~ #footer {
        padding: 30px 20px;
    }

    main:not(.rival_m_scroll) ~ #footer h1 {
        padding-bottom: 30px;
    }

    main:not(.rival_m_scroll) ~ #footer h1 img {
        height: 19px;
    }

    main:not(.rival_m_scroll) ~ #footer .top_foot {
        padding-bottom: 0;
    }

    main:not(.rival_m_scroll) ~ #footer .top_foot .copy {
        font-size: 14px;
    }

    .bg .top::before, .bg .top::after, .bg .bottom::before, .bg .bottom::after {
        display: none;
    }

    .sear_ch_com.visual .sear_btn {
        background-size: 50px;
    }

    .main .main-visual::before {
        width: 100%;
        height: 100%;
        top: -770px;
        left: 0;
        background-size: 980px;
    }

    .main .main-visual .inner {
		flex-direction: column;
	}

    .main .main-visual .sear_ch_com {
        margin: 1rem 0 2rem;
    }

    .main .inner .left,
    .main .inner .right {
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
    }

    .main .inner .right {
        padding-bottom: 60px;
    }

    .sear_ch_com.visual input {
        font-size: 16px;
        padding: 20px 5rem 12px 17px;
    }

    .main .comomn-btn span {
        font-size: 16px;
    }

    .main .comomn-btn-list {
        padding-bottom: 30px;
    }

    .visual-tit {
        font-size: 24px;
        text-align: center;
    }

    .visual-tit .num {
        font-size: 32px;
    }

    .main .visual-card-list > div {
        width: 100%;
    }

    .main .visual-card-list .compare {
        /* display: none; */
        margin-top: 0;
    }
    .main .visual-card-list {
    	flex-direction: column;
    	gap: 20px;
    }
	.main .visual-card-list .btn-lounge {
		display: inherit;
	}

    .main .visual-card .cont {
        padding: 20px;
        min-height: 144px;
    }

    .main .visual-card .txt {
        font-size: 16px;
    }

    .main .visual-card::after {
        width: 60px;
        height: 60px;
        background-size: 60px;
    }
}


@media all and (max-width:768px){
    
}

@media all and (max-width:460px){
    .main .comomn-btn-list {
    	flex-direction: column;
    }
}

/* /////////////////////////////////////
랜덤연혁 추천 ///////////////////////////////
///////////////////////////////// */

.wrap3d{
  width: 100%;
  height: 400px;
  --edge: 20px;
  --mid: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  perspective: 1100px;
  margin: 30px 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.wrap3d .randomTextBox{
  background: rgba(0,0,0,0.06);
  display:flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
@media (hover: hover) and (pointer: fine) {
  .wrap3d .randomTextBox:hover{
    background: rgba(0,0,0,1);
  }
  .wrap3d .randomTextBox:hover .pencilPrint{
    color: #fff;
  }
}
.wrap3d .randomTextBox:active{
  background: rgba(0,0,0,1);
}
.wrap3d .randomTextBox:active .pencilPrint{
  color: #fff;
}
.wrap3d .panel1{border-radius: var(--edge) var(--edge) var(--mid) var(--edge);}
.wrap3d .panel2{border-radius: var(--edge) var(--edge) var(--edge) var(--mid);}
.wrap3d .panel3{border-radius: var(--edge) var(--mid) var(--edge) var(--edge);}
.wrap3d .panel4{border-radius: var(--mid) var(--edge) var(--edge) var(--edge);}



/* ✅ 봉은 “피칭만” */
.batonPitch{
  width: 100%;
  height: 80px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s ease-in-out;
}

/* 상태별 정면 */
.batonPitch.step0{ transform: rotateX(0deg); }
.batonPitch.step1{ transform: rotateX(120deg); }
.batonPitch.step2{ transform: rotateX(240deg); }
.batonPitch.step3{ transform: rotateX(360deg); }

.batonPitch.notrans{
  transition: none;
}


/* ✅ 삼각기둥(길이축이 X축) */
.triPrism{
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;

  /* 화면에서 “가로로 누워있는 봉”처럼 보이게 약간만 세팅 */
  transform: translate(-50%,-50%) rotateY(0deg);
}

/* 3면 공통: “긴 직사각형 면” */
.pencilSide{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;   /* 길이(가로로 뻗는 축 = X) */
  height: 50px;   /* 면 폭 */
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

/* ✅ 핵심: X축 기준으로 0/120/240도 회전 → 삼각 단면 */
.pencilSide{ --r: 14.43px; } /* 두께(각짐) */

.pencilSide.a{
  transform: translate(-50%,-50%) rotateX(0deg)   translateZ(var(--r));
}
.pencilSide.b{
  transform: translate(-50%,-50%) rotateX(240deg) translateZ(var(--r));
}
.pencilSide.c{
  transform: translate(-50%,-50%) rotateX(120deg) translateZ(var(--r));
}

/* 글자는 한 면에만 */
.pencilPrint, .pencilPrint:visited, .pencilPrint:hover, .pencilPrint:active{
  position:absolute;
  left: 50%;
  top: 50%;
  width: 90%;
  transform: translate(-50%,-50%) translateZ(1px);
  font-size: 30px;
  font-weight: 700;
  color: #000;
  backface-visibility: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* 최대 2줄 */
  -webkit-box-orient: vertical;
  word-break: keep-all;
  overflow: hidden;
  text-align: center;
}

@media all and (max-width:1024px){
	.wrap3d{
		height: 200px;
		margin: 15px 0;
	}
	.pencilPrint, .pencilPrint:visited, .pencilPrint:hover, .pencilPrint:active{
		font-size: 20px;
	}
}

/*		///////////////////////////////////////////							
									테트리스														
	////////////////////////////////////////////					*/
													
													

#game-container {
  position: absolute;
  --tetrisCols: 10;
  --tetrisRows: 12;
  --tetrisBlock: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 230px;
  z-index: 10;
}
/* 항상 보이는 상단 */
.game-header {
  height: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
/* 접히는 본체 */
.game-body {
  overflow: hidden;
  border:4px solid #444;
  border-radius: 10px;
  max-height: 0;
  max-width: 0;
  transition: max-height 0.5s linear, max-width 0.5s linear, transform 0.5s linear;
  display: block;
  align-items: stretch;
  position: relative; /* 부모 기준 위치 */
  background: #fff;
  transform: translateY(-30%);
  will-change: max-width, max-height;
}

/* 열렸을 때 */
#game-container.open .game-body {
  max-width: 560px;
  max-height: calc(var(--tetrisRows) * var(--tetrisBlock) + 8px);      /* 충분히 큰 값 */
  transform: translateY(-30%);
}
#game-container.open .tetris-circle{
	right: calc(50% - (var(--tetrisCols) * var(--tetrisBlock) * 0.5) + 30px);
	top: calc((var(--tetrisRows) * var(--tetrisBlock) * -0.3) + 30px);
}
#game-container.open .tetris-circle::after {
  content: "X";
}
#game-container.open .tetris-t span:nth-child(1){
  transform: scale(0);}
#game-container.open .tetris-t span:nth-child(2){
  transform: scale(0);}
#game-container.open .tetris-t span:nth-child(3){
  transform: scale(0);}
#game-container.open .tetris-t span:nth-child(4){
  transform: scale(0);}
/*	transform: translateX(40%) translateY(-30%) rotate(45deg);
}
#game-container.open .tetris-t span:nth-child(2){
	transform: translateX(-75%) translateY(115%) rotate(45deg);
}
#game-container.open .tetris-t span:nth-child(3){
	transform: translateX(-40%) translateY(-30%) rotate(45deg);
}
#game-container.open .tetris-t span:nth-child(4){
	transform: translateX(75%) translateY(1%) rotate(45deg);
}*/
canvas {
  background:transparent;
  box-sizing: content-box;
  width: calc(var(--tetrisCols) * var(--tetrisBlock)) !important;
  height: calc(var(--tetrisRows) * var(--tetrisBlock));
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

@media all and (max-width:1620px){
  #game-container {
  --tetrisBlock: 40px;
  }
  #game-container.open .game-body {
  	transform: translateY(-50%);
  }
  #game-container.open .tetris-circle{
	top: calc((var(--tetrisRows) * var(--tetrisBlock) * -0.5) + 30px);
  }
}
@media all and (max-width:1400px){
  #game-container {
  --tetrisBlock: 36px;
  }
}
@media all and (max-width:1150px){
  #game-container {
  --tetrisBlock: 32px;
  }
}
@media all and (max-width:1024px){
  #game-container {
  --tetrisBlock: 34px;
  top: 115px;
  }
  .game-body {
  border:2px solid #444;
  }
  #game-container.open .game-body {
  	transform: translateY(-25%);
    max-height: calc(var(--tetrisRows) * var(--tetrisBlock) + 4px);      /* 충분히 큰 값 */
  }
  #game-container.open .tetris-circle{
	top: calc((var(--tetrisRows) * var(--tetrisBlock) * -0.25) + 30px);
  }
}
@media all and (max-width:424px){
  #game-container {
  --tetrisBlock: 32px;
  }
}
@media all and (max-width:404px){
  #game-container {
  --tetrisBlock: 30px;
  }
}
@media all and (max-width:384px){
  #game-container {
  --tetrisBlock: 28px;
  }
}
@media all and (max-width:364px){
  #game-container {
  --tetrisBlock: 26px;
  }
}
@media all and (max-width:344px){
  #game-container {
  --tetrisBlock: 24px;
  }
}
@media all and (max-width:324px){
  #game-container {
  --tetrisBlock: 22px;
  }
}
@media all and (max-width:304px){
  #game-container {
  --tetrisBlock: 20px;
  }
}


.resetButton {
  position: absolute;
  top: 55px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #444;
  background: #fff;
  font-size: 24px;
  letter-spacing: -2px;
  cursor: pointer;
  color: #555;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
@media (hover: hover) and (pointer: fine) {
  .resetButton:hover {
    background: #eee;
  }
}
.resetButton.FF{
  top: 100px;
  font-size: 12px;
  line-height: 1;
}
.resetButton.FF.on{
  background: #ee2240;
}
/* 원형 버튼 */
.tetris-circle {
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(50%) translateY(-50%);

  width: 40px;
  height: 40px;
  border-radius: 50%;

  background: #fff;       /* ⭕ 투명 */
  border: 2px solid #444;        /* ⭕ 테두리만 */
  padding: 0;
  font-size: 24px;
  color: #555;

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;

  cursor: pointer;
  
  transition: right 0.5s linear, top 0.5s linear;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.tetris-circle::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  pointer-events: none;
}

/* T 블록 컨테이너 */
.tetris-t {
  display: grid;
  grid-template-columns: repeat(3, 8px);
  grid-template-rows: repeat(2, 8px);
  gap: 1px;                      /* ⬅️ 흰색 줄 */
  background: transparent;              /* gap 색 */
  padding: 3px 1px 1px 1px;
}
.tetris-t span{
	border-radius: 2px;
}

/* T자 형태 */
.tetris-t span:nth-child(1) { grid-column: 1; grid-row: 1; background:#e54c47; transition: transform 0.5s linear;
/*  transform: translateX(0%) translateY(0%) rotate(0deg);}*/
  transform: scale(1);}
.tetris-t span:nth-child(2) { grid-column: 2; grid-row: 1; background:#e57f31; transition: transform 0.5s linear;
  transform: scale(1);}
.tetris-t span:nth-child(3) { grid-column: 3; grid-row: 1; background:#0084f8; transition: transform 0.5s linear;
  transform: scale(1);}
.tetris-t span:nth-child(4) { grid-column: 2; grid-row: 2; background:#2caf63; transition: transform 0.5s linear;
  transform: scale(1);}

@media (hover: hover) and (pointer: fine) {
  .tetris-circle:hover {
    background: #eee;
  }
}