/* CSS Document */

        body {
            font-family:'Oracle Sans' ,'OracleSansFB', 'Noto Sans KR', sans-serif; word-break:keep-all; 
        }
        /* Custom scrollbar for result details */
        .result-scroll::-webkit-scrollbar {
            width: 8px;
        }
        .result-scroll::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        .result-scroll::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }
        .result-scroll::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        /* Animation for screen transitions */
        .screen {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* Toast message style */
        .toast {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.75);
            color: white;
            padding: 10px 20px;
            border-radius: 20px;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            animation: fadein-toast 0.5s, fadeout-toast 0.5s 2.5s;
        }
        @keyframes fadein-toast {
            from {bottom: 0; opacity: 0;}
            to {bottom: 20px; opacity: 1;}
        }
        @keyframes fadeout-toast {
            from {bottom: 20px; opacity: 1;}
            to {bottom: 0; opacity: 0;}
        }
        


body  {background: #b9dbda url('../images/bg.png') fixed center bottom no-repeat; background-size: 100%; padding-bottom: 100px; letter-spacing: -0.5px;}
.max-w-4xl  {min-height: 500px}

.top-logo { background: #312d2a; padding: 15px 40px }
.top-logo img {width:130px; border:0; vertical-align: middle}

.text-red-600  { color: #c74634 !important }
.text-green-600  { color:#3f6b4b !important  }
.text-green-400   { color:#74a683 !important  }
.bg-red-600   {background-color: #c74634 !important }
.bg-red-600:hover   {background-color: #a82f1e !important }
.border-green-500  {border-color: #548c62 !important }
.border-green-400  {border-color: #74a683 !important }
.bg-green-600 {background-color: #3f6b4b !important }
.bg-green-600:hover {background-color: #244f30 !important }
.shadow-sm  { box-shadow: 1px 1px 5px #e0e0e0 !important}


.result-img { margin-top:-30px; margin-bottom:-30px; }
.result-img image { width:100%; max-width:830px; }

form table {width:100%; max-width: 600px}
form th {padding: 8px; text-align: left; font-weight: normal}
form td {padding: 8px; }

.temp  {position: fixed; right:10px; top: 10px; opacity:0.7}


@media only screen and (max-width: 780px) {
  body { padding:0 !important; display: block !important }
  .max-w-4xl { border-radius: 0 !important; margin:0;  min-height: 100vh; padding-bottom: 20vw; background: #b9dbda url('../images/bg_m.png') center bottom no-repeat; background-size: 100% }
  .top-logo { padding: 15px 25px }    
  .top-logo img {width:100px;   }
  .result-details {margin-top: 10px;}
    
  .temp  {top:auto; bottom: 10px}
  .temp span  {display: none}
 }

.space-blur {
    position: relative;
}

.space-blur::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(255, 255, 255, 0.95);
}

.space-blur::after {
    content: '해당 내용은 하기 개인정보 제출 후 확인하실 수 있습니다';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.agree-box {
    border: 1px solid rgb(243 244 246);
}

.agree-input {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}