html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

body {
	background-color: #000000;  /* K=50 검정색 */
	min-height: 100vh;
	color: white !important;  /* 추가: 기본 텍스트 색상 */
}

/* 상단 네비게이션 바의 텍스트만 흰색으로 지정 */
.w3-top {
	color: white;
}

.w3-top .w3-bar-item,
.w3-top .times,
.w3-top .w3-button {
	color: white !important;
}

/* 추가: 모든 텍스트 요소에 대한 색상 강제 지정 */
.w3-bar-item,
.times,
.times-big,
.w3-button,
a {
	color: white !important;
}

a.custom-hover-color:hover { 
    background-color: transparent !important;
    color: transparent !important;
  }

/* 특별한 색상이 필요한 요소들은 제외 */
.times-pink,
[style*="color: #FF005C"] {
	color: #FF005C !important;
}

#canvas-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

#canvas2D {
	height: 100vh;
	width: auto;
}

@media screen and (min-width: 768px) {
	#canvas-container {
		justify-content: flex-end;
	}
	
	#canvas2D {
		width: 70vw;
		height: auto;
		margin-right: 0;
	}
}


/* 이하 기존 웹사이트 내용 요소 */

.home_img_font {
    /* 컨테이너의 가로폭을 100%로 설정하여 전체 화면을 차지하도록 합니다. */
    width: 100%;
    /* 글자색을 그라데이션으로 설정합니다. */
    /* color: linear-gradient(rgb(237, 0, 118), rgba(41, 45, 52, 1)); */
    color : rgba(255, 255, 255);
    position: absolute;
    top: 50%;
    left: 50%;
    /* font-family: Times; */
    /* font-weight: thin; */
    font-size: 48px;
    opacity: 0.93;
    text-align: center;
    transform: translate(-50%, -50%);
  }

.roboto-mono {
    font-size: 38px;
    font-family: 'Roboto Mono', monospace;
    }

.times-big{
    /* font-family:"Times New Roman", Times, serif; */
    font-family: Times; font-size: 38px; font-style: medium; font-variant: normal; 
    }
.times{
    /* font-family:"Times New Roman", Times, serif; */
    font-family: Times; font-size: 14px; font-style: normal; font-variant: normal; color:rgb(45, 45, 45)
    }

.times-pink {
      color: #d81365; 
      font-family: Times; 
      font-size: 48px;
      font-style: bold; 
      font-variant: normal; 
    }
    
.times-mid{
    /* font-family:"Times New Roman", Times, serif; */
    font-family: Times; font-size: 22px; font-style: thin; font-variant: normal; 
    }

.prosto {
    font-family: "Prosto One", sans-serif;
    font-weight: 400;
    font-style: normal;

      }
      
.green_big {    
    /* width: 315px; */
    color: #ffffff; 
    font-size: 18px; 
    font-family: Share Tech Mono; 
    font-weight: 400;
    opacity: 0.8;
    }

.space-mono-regular {
    color: #ffffff; 
    font-size: 18px; 
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: normal;
    opacity: 0.85;
  }

.top_box {
    width: 100%;
    height: 200%;  /* 100%에서 200%로 변경 */
    background: rgba(0, 0, 0, 0.9);
    opacity: .9;
    position: absolute;
    top: -50%;  /* 0%에서 -50%로 변경하여 위쪽으로도 확장 */
    left: 0px;
    overflow: hidden;
    z-index: -1;
}

/* GEN Section 스타일 수정 */
.w3-container.w3-row.w3-center.bg {
    width: 70%;  /* 전체 화면의 60% */
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(100vh - 150px);  /* 캔버스 아래에 위치하도록 조정 */
    margin-bottom: 50px;
    min-height: 80vh;  /* 섹션의 최소 높이 설정 */
    padding: 40px 0;   /* 상하 여백 추가 */
    position: relative; /* 위치 상대값으로 설정 */
    top: 200px; /* 디스플레이 해상도 고려하여 아래로 이동 */
    
    z-index: 1; /* 캔버스보다 위에 표시 */
}

/* 반응형 디자인을 위한 미디어 쿼리 추가 */
@media screen and (max-width: 768px) {
    .w3-container.w3-row.w3-center.bg {
        width: 90%;    /* 모바일에서는 더 넓게 */
        margin-top: calc(100vh - 100px); /* 모바일에서 위치 조정 */
    }
}


.horizontal-line {
    width: 100%;
    height: 1.25px; /* 선의 두께 */
    background-color: rgb(230, 230, 230); /* 선의 색상 */
  }


.semi-title-style{
    color: rgba(255,255,255,1);
    font-family: Pretendard;
    font-weight: regular;
    font-size: 19px;
    opacity: 1;
  }

  .norm_font{
    color: rgba(255,255,255,1);
    font-family: Pretendard;
    font-weight: 300;
    font-size: 14px;
    opacity: 1;
  }

  .form_font{
    color: rgb(255, 255, 255);
    font-family: Pretendard;
    font-weight: 400;
    font-size: 14px;
    opacity: 1;
  }


  .green_norm {
    width: 315px;
    color: #e4e4e4; 
    font-size: 14.3px; 
    font-family: "Space Mono", monospace; 
    font-weight: 200;
    opacity: 0.8;
  }
/* 
  .space-mono-regular {
    color: #ffffff; 
    font-size: 18px; 
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: normal;
    opacity: 0.85;
  } */


/* 연락 */
  .main {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    position: relative;
    margin: 0;
    margin-top: 100px; /* GEN 섹션과의 간격 조정 */
    overflow-x: hidden;
}

    .main > .content {
        width: 45em;
        max-width: calc(100% - 4em);
        margin: 0 auto;
    }

        .main.style3.secondary {
            background: transparent;
        }

.box {
    background: transparent;
    /* color: #39454b; */
    padding: 2em;
}


#contact {
    overflow: hidden;
    padding-bottom: 0;
}

    #contact .box {
        -moz-transition: -moz-transform 1s ease;
        -webkit-transition: -webkit-transform 1s ease;
        -ms-transition: -ms-transform 1s ease;
        transition: transform 1s ease;
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        position: relative;
    }

    #contact.inactive .box {
        -moz-transform: translateY(100%);
        -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%);
    }


    
    /* 추후 미디어쿼리 앞쪽이랑 통합할것. */
    @media screen and (max-width: 736px) {

        #contact .box {
            padding: 1.5em 1.5em 2em 1.5em;
        }

    }

    @media screen and (max-width: 480px) {

        #contact .box {
            padding: 1em 1em 2em 1em;
        }

    }

    ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		cursor: default;
		list-style: none;
		margin-left: -1em;
		padding-left: 0;
	}

		ul.actions li {
			padding: 0 0 0 1em;
			vertical-align: middle;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}



/* Form */

form {
    margin: 0 0 2em 0;
}

    form > :last-child {
        margin-bottom: 0;
    }

    form > .fields {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: calc(100% + 3em);
        margin: -1.5em 0 2em -1.5em;
    }

        form > .fields > .field {
            -moz-flex-grow: 0;
            -webkit-flex-grow: 0;
            -ms-flex-grow: 0;
            flex-grow: 0;
            -moz-flex-shrink: 0;
            -webkit-flex-shrink: 0;
            -ms-flex-shrink: 0;
            flex-shrink: 0;
            padding: 1.5em 0 0 1.5em;
            width: calc(100% - 1.5em);
        }

            form > .fields > .field.half {
                width: calc(50% - 0.75em);
            }

            form > .fields > .field.third {
                width: calc(100%/3 - 0.5em);
            }

            form > .fields > .field.quarter {
                width: calc(25% - 0.375em);
            }

    @media screen and (max-width: 480px) {

        form > .fields {
            width: calc(100% + 2em);
            margin: -1em 0 2em -1em;
        }

            form > .fields > .field {
                padding: 1em 0 0 1em;
                width: calc(100% - 1em);
            }

                form > .fields > .field.half {
                    width: calc(100% - 1em);
                }

                form > .fields > .field.third {
                    width: calc(100% - 1em);
                }

                form > .fields > .field.quarter {
                    width: calc(100% - 1em);
                }

    }