/* 기본 숨기기 */
.hidden { display: none; }

/* 기본 설정 */

@font-face {
   font-family: 'Paperlogy';
   src: url("../font/Paperlogy-7Bold.ttf") format('truetype'); 
   font-weight: 700;
   font-style: normal;
}

@font-face {
   font-family: 'Paperlogy';
   src: url("../font/Paperlogy-6SemiBold.ttf") format('truetype'); 
   font-weight: 700;
   font-style: normal;
}

@font-face {
   font-family: 'Paperlogy';
   src: url("../font/Paperlogy-5Medium.ttf") format('truetype'); 
   font-weight: 500;
   font-style: normal;
}

@font-face {
   font-family: 'Paperlogy';
   src: url("../font/Paperlogy-4Regular.ttf") format('truetype');
   font-weight: 400;
   font-style: normal;
}

@font-face {
   font-family: 'Paperlogy';
   src: url("../font/Paperlogy-3Light.ttf") format('truetype'); 
   font-weight: 300;
   font-style: normal;
}

body {
   font-family : 'Paperlogy', sans-serif;
   font-weight: 400;
}

.header {
   width: 1920px;
   height: 95px;
   position: fixed;
   top: 0;
   z-index: 1000;
   display: flex;
   justify-content: center;
   align-items: center;
}

.header-box {
   width : 1893px;
   height: 57px;
   background-color : #6472C5;
   border-radius: 35px;
   display: flex;
   padding-left: 20px;
   align-items: center;
   gap: 20px;
}

.hicon-bell {
   position: relative;
   width: 45px;
   height: 45px;
}

.icon-bellwall {
   width: 100%;
   height: 100%;
}

.icon-bell {
   position: absolute;
   top: 50%;
   left: 50%;
   transform : translate(-50%, -50%);
   width: 30px;
   height: 30px;
}

.header-text {
   font-size : 30px;
   font-weight : 500;
   line-height: 52px;
   color: #FFFFFF;
}

/* 시작페이지 */

.page {
   width : 1920px;
   margin : 0 auto;
   background-color : rgba(255, 255, 255, 1);
   position : relative;
   overflow-y : auto;
}

.page-start {
   min-height : 1680px;
}

/* 슬라이더 */

 .slider {
   margin-top: 120px;
   margin-bottom: 60px;
   position: relative;
   max-width: 1920px;
   width: 100%;
   height: 380px; 
   overflow: hidden;
}

.slides {
   display: flex;
   height: 100%;
   transition: transform 1.2s ease-in-out;
}

.slide {
   width: 100%;
   flex-shrink: 0;
   height: 380px;
   background-size: cover;
   background-position: center;
   position: relative;
   color: white;
}
    
/* 텍스트 스타일 설정 */

.slide-content {
   position: absolute;
   color: white;
   max-width: 80%; 
   text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.slide-content h2 {
   margin-bottom: 15px;
   line-height: 1.3; 
}
    
.slide-content p {
   line-height: 1.5; 
}


/* 슬라이드별 스타일 적용 */

/* 1번 슬라이드 */
.slide-1 .slide-content {
   top: 50%; 
   left: 25%; 
   transform: translateY(-50%); 
   text-align: left; 
}

.slide-1 h2 { 
   font-size: 38px; 
   font-weight: 700;
}

.slide-1 p { 
   font-size: 26px;
   font-weight: 400; 
}

/* 2번 슬라이드 */
.slide-2 .slide-content {
   top: 50%; 
   left: 20%;
   transform: translateY(-50%); 
   text-align: left; 
}
.slide-2 h2 { 
   font-size: 38px; 
   font-weight: 700;
}

.slide-2 p { 
   font-size: 26px; 
   font-weight: 400; 
}

/* 3번 슬라이드 */
.slide-3 .slide-content {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); 
   text-align: center; 
}

.slide-3 h2 { 
   font-size: 38px;
   font-weight: 700; 
}

.slide-3 p { 
   font-size: 26px; 
   font-weight: 400; 
}

/* 화살표 */
.slider-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   font-size: 3rem;
   color: rgba(255,255,255,0.9);
   cursor: pointer;
   z-index: 15;
   padding: 0 15px;
   user-select: none;
}

.slider-arrow.left { left: 10px; }
.slider-arrow.right { right: 10px; }

/* 하단 dots */
.slider-dots {
   position: absolute;
   bottom: 15px;
   width: 100%;
   display: flex;
   justify-content: center;
   gap: 8px;
   z-index: 20;
}

.slider-dots div {
   width: 10px;
   height: 10px;
   background: rgba(255,255,255,0.5);
   border-radius: 50%;
   cursor: pointer;
}

.slider-dots .active {
   background: white;
}

.big-box {
   width : 100%;
   height: 791px;
   margin-top: 80px;
   display: flex;
   justify-content: center;
}

.round-box {
   width : 1160px;
   height : 711px;
   position : relative;

   background-color : rgba(194, 206, 227, 0.92);
   background-image : url("../images/start_round_box.png");
   background-size : cover;
   background-position : center;
   border-radius : 96px;
}

.small-box.link-box {
   width : 766px;
   height : 309px;
   position : absolute;

   top : 110px;
   left : 197px;

   border-radius : 109px;
   background-color : rgba(228, 227, 223, 1);
   box-shadow : 7px 7px 2px 4px rgba(0, 0, 0, 0.25);

   cursor : pointer;

   display : flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 25px;

   font-weight: 600;
   color :rgba(0, 0, 0, 1);
   text-decoration: none;
}

.top-row {
   display: flex;
   align-items: center;
   gap: 15px;
}

.small-box.link-box .line1 {
   position : static;
   font-size : 55px;
   line-height : 48px;
   white-space : nowrap;
}

.arrow-icon {
   position : static;
   width: 60px;
   height: auto;
}

.small-box.link-box .line2 {
   position: static;
   font-size : 30px;
   line-height : 48px;
   white-space: nowrap;
}

.small-box {
   width : 818px;
   height : 117px;

   position : absolute;
   top : 484px;
   left : 171px;

   border-radius : 30px;
   background-color : rgba(237, 231, 212, 1);

   display : flex;
   justify-content : center;
   align-items: center;

   font-size : 30px;
   font-weight : 500;
   color :rgba(0, 0, 0, 1);

   line-height: 40px;
   text-align: center;
}

.frame2 {
   width: 100%;
   height: 319px;
   margin-top: 0px;
   background-color: rgba(244, 244, 247, 0.936);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 30px;
   font-family: 'Paperlogy', sans-serif;
}

.line3 {
   margin-bottom: 5px;
   line-height : 30px;
   font-size : 30px;
   font-weight : 400;
   color :rgba(0, 0, 0, 1);
   text-align: center;
}

.m-line {
   width : 1160px;
   height : 1px;
   margin : 5px 0 5px 0;
   background-color : rgba(0, 0, 0, 1);
}

.line4 {
   line-height : 40px;
   font-size : 30px;
   font-weight : 400;
   color :rgba(0, 0, 0, 1);
   text-align: center;
}


/* info페이지 */

.page-info {
   min-height : 1080px;
}

.info-box {
   width : 100%;
   height: 1020px;
   margin-top: 70px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
}

.infotitle-box {
   width: 881px;
   height: 73px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 76px;
   background-color: rgba(232, 222, 192, 1);
   border-radius: 30px;

   line-height: 100%;
   font-size : 32px;
   font-weight: 600;
   color :rgb(0, 0, 0);
   text-align: center;
}

.warning-box {
   display: flex;
   align-items: center;
   margin-top: 25px;
   gap : 20px;
}

.icon-warning {
   position: relative;
   width: 55px;
   height: 55px;
}

.warning-text {
   line-height : 100%;
   font-size : 28px;
   font-weight : 500;
   color :rgb(0, 0, 0);
}

.example-wrap {
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap : 110px;
   margin-top : 50px; 
}

.example-box {
   width : 290px;
   height : auto;
   display : flex;
   flex-direction: column;
   align-items: flex-start;
   text-align: left;
   gap : 15px;
}

.step-box {
   width: 119px;
   height: 47px;
   border-radius: 5px;
   background-color: rgba(198, 210, 229, 0.85);

   line-height: 41px;
   font-size : 27px;
   font-weight: 600;
   color :rgb(0, 0, 0);
   text-align: center;
}

.explain-box {
   line-height: 30px;
   font-size : 22px;
   font-weight: 500;
   color :rgb(0, 0, 0);
}

.step-img {
   width : 315px;
   height: 449px;
   align-self: center;
}

.touch-box {
   width: 400px;
   height: 80px;

   display: flex;
   align-items: center;
   justify-content: center;

   margin-top: 70px;
   margin-bottom: 80px;
   background-color: rgba(234, 214, 154, 1);
   border-radius: 28px;
   box-shadow : 4px 4px 2px 3px rgba(0, 0, 0, 0.35);

   line-height: 100%;
   font-size : 30px;
   font-weight: 700;
   color :rgb(0, 0, 0);
   text-align: center;
   text-decoration: none;
}

/* test page */

.page-test {
   min-height: 1100px;
}

.test-box {
   width: 100%;
   height: 1020px;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 70px;
   gap: 20px;
}

.title-box {
   width: 964px;
   height: 80px;
   border-radius: 15px;
   background-color: #E7DFC6;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 40px;

   color :rgb(0, 0, 0);
   line-height: 52px;
   text-align: center;
   gap: 12px;
}

.t1 {
   font-size: 34px;
   font-weight: 500;
}

.t2 {
   font-size: 30px;
   font-weight: 400;
}

.smallresult-box {
    width: 450px;
    height: 120px;
    border-radius: 50px;
    background-color: #DADDDF;

    border: 2px solid #706860;

    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-right: 20px;
    padding-left: 12px;
    
    font-size: 38px;
    font-weight: 600;
    letter-spacing: 3px;
    color :rgb(0, 0, 0);
    line-height: normal;
    text-align: center;
    gap: 30px;
}

.summary {
   width: 180px;
   height: 70px;
   border-radius: 50px;
   background-color: #FFFFFF;

   border: 2px solid #544B41;
   margin-top: -1px;

   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 40px;
   font-weight: 600;
}

.inout-box {
   width: 1920px;
   height: auto;
   margin-top: 40px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: 60px;
}

.intitle {
   width: 660px;
   height: 520px;
   background-color: #DADDDF;

   display: flex;
   flex-direction: column;
   align-items: center;
   padding-top: 23px;

   font-size: 40px;
   font-weight: 500;
   color :rgb(0, 0, 0);
   text-align: center;

}

textarea {
   font-family: 'Paperlogy', sans-serif;
   font-size: 30px;

}

::placeholder {
   color:rgb(80, 80, 80, 0.8);
   font-family: 'Paperlogy', sans-serif;
   font-size: 30px;
   font-weight: 500;
   padding: 10px;
}

.input-area {
   width: 565px;
   height: 390px;
   background-color: #FFFFFF;

   border: none;
   outline: none;
   resize: none;

   padding: 20px;
   font-size: 30px;
   font-weight: 400;
   color :rgb(0, 0, 0);
   line-height: 1.4;
   text-align: left;

   margin-top: 20px;
}

.arrow {
   width: 80px;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 100px;
   font-weight: 700;
   color: #666666;

}

.outtitle {
   width: 660px;
   height: 520px;
   background-color: rgba(100, 114, 197, 0.55);

   display: flex;
   flex-direction: column;
   align-items: center;
   padding-top: 23px;

   font-size: 40px;
   font-weight: 500;
   color :rgb(0, 0, 0);
   text-align: center;
}

.output-box {
   width: 565px;
   height: 390px;
   background-color: #FFFFFF;

   padding: 20px;
   font-size: 30px;
   line-height: 1.4;
   text-align: left;

   margin-top: 20px;

   overflow-y: auto;

   display: block;
}

.watch-result {
   width: 350px;
   height: 90px;

   display: flex;
   align-items: center;
   justify-content: center;

   margin-top: 65px;
   margin-bottom: 30px;
   background-color: #DADDDF;
   border-radius: 15px;
   border: none;
   box-shadow : 2px 4px 4px 0 rgba(0, 0, 0, 0.35);

   line-height: auto;
   font-family: 'Paperlogy', sans-serif;
   font-size : 30px;
   font-weight: 600;
   color :rgb(14, 1, 48);
   text-align: center;
}


/* 결과 페이지 */

.loading-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   transform: translateY(-30px);
}

.loading-text {
   font-size:34px;
   margin-bottom:40px;
}


.dots {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 0px;
}

.dots span {
  width: 27px;
  height: 27px;
  background-color: #8491B4;
  border-radius: 50%;
  animation: blink 1.4s infinite;
}

.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0%   { opacity: 0.2; }
  20%  { opacity: 1; }
  100% { opacity: 0.2; }
}

.safe-wrapper {
   width: 100%;
   height: 100%;

   display: flex;
   align-items: center;
   justify-content: center;
}

.safe-message {
   font-size: 32px;
   text-align: center;
}

.fancy-container {
   display: flex;
    width: 565px;
    height: 370px;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-family : 'Paperlogy', sans-serif;
}

.fancy-row {
   width: 530px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #FFFFFF;
    padding: 10px;
}

.short-box {
    width: 110px;
    height: 70px;
    background-color: #E7DFC6;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 22px;
}

.long-box {
    width: 500px;
    height: 70px;

    overflow-x: hidden;
    overflow: auto;
    
    text-align: left;
    overflow-y: auto;
    line-height: 1.4;

    padding-left: 15px;
}