@charset "UTF-8";
/* ============================
   Reset ±âº»°ª ÃʱâÈ­
============================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================
   CSS Àü¿ª º¯¼ö
============================ */
:root {
    --header-height: 80px; /* ±âº» Çì´õ ³ôÀÌ */
    --footer-height: 50px;  /* ±âº» ǪÅÍ ³ôÀÌ */
}

/* ============================
   Body ±âº» ½ºÅ¸ÀÏ
============================ */
body {
    font-family: 'Arial', sans-serif;
    background-color: #F0F0F0;
    color: #333;
    width: 100%;
    min-height: 100vh;          /* È­¸é Àüü ³ôÀÌ º¸Àå */
    padding-top: var(--header-height);
    padding-bottom: 0;
    margin: 0;
    overflow-x: hidden;
    position: relative;
}

/* === ÁøÇà ´Ü°è »ö»ó »óÅÂ (ÃÖ¼Ò Ãß°¡) === */
.progress-steps .step.step--done {
  background: #e6f6ec;
  color: #0f5132;
  border: 1px solid #badbcc;
}

.progress-steps .step.step--active {
  background: #e7f1ff;
  color: #084298;
  border: 1px solid #b6d4fe;
}

.progress-steps .step.step--todo {
  background: #f1f3f5;
  color: #6c757d;
  border: 1px solid #dee2e6;
}

/* È­»ìÇ¥ »ö»óµµ ´Ü°è¿¡ ¸ÂÃç ÀÚ¿¬½º·´°Ô(¼±ÅÃ) */
.progress-steps .step.step--done + .arrow svg path { stroke: #198754; }
.progress-steps .step.step--active + .arrow svg path { stroke: #0d6efd; }
.progress-steps .step.step--todo + .arrow svg path { stroke: #6c757d; }

/* ±âº» .step¿¡ º¸´õ°¡ ¾ø´Â °æ¿ì ´ëºñ (Ãæµ¹ ¾øÀ¸¸é ¹«½ÃµÊ) */
/* step ¹Ú½º¿¡ ¹îÁö ÀÚ¸® È®º¸ */
.progress-steps .step {
  position: relative;
  padding-right: 36px;   /* ¹îÁö °ø°£ */
  overflow: hidden;      /* ±âÁ¸ °ª À¯ÁöÇصµ OK (¾ÈÂÊ ¹èÄ¡¶ó ¾È À߸²) */
}

/* ============================
   ¸ÞÀÎ ÄÁÅ×ÀÌ³Ê ±âº» ½ºÅ¸ÀÏ
============================ */
.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 0px; /* ÇÊ¿äÇϸé Á¶ÀýÇؼ­ »ç¿ë */
}

/* ============================
   Çì´õ ½ºÅ¸ÀÏ
============================ */
header {
    background-color: #ffffff;
    padding: 5px;
    border-top: 3px solid #03492b;
    border-bottom: 1px solid #afafaf;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
}

/* Çì´õ ÄÁÅ×ÀÌ³Ê */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.logo {
    width: 60px; /* ·Î°í À̹ÌÁö Å©±â °íÁ¤ */
    height: auto; /* ºñÀ² À¯Áö */
}

.site-title {
    text-align: center; /* ÅؽºÆ® °¡¿îµ¥ Á¤·Ä */
    flex: 1; /* °¡º¯ Æø */
    margin: 0;
    background-color: white; /* ¹è°æ»ö */
}

/* Çì´õ Á¦¸ñ */
header h1 {
    font-size: 28px;
    color: #5a5b5c;
    margin: 0;
    font-weight: bold;
}

/* Çì´õ ¹öÆ° ¿µ¿ª */
.header-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px; /* ÀÛÀº È­¸é¿¡¼­ Çì´õ°¡ ¹Ð¸± ¶§ ¿©¹é */
    flex-wrap: wrap; /* ¹öÆ° ÁÙ¹Ù²Þ Çã¿ë */
}

/* °øÅë Çì´õ ¹öÆ° */
.header-buttons a,
.header-buttons button {
    padding: 5px 10px; /* ÄÄÆÑÆ® Æеù */
    background-color: #464646;
    color: #ffffff;
    text-decoration: none;
    border: none;
    border-radius: 2px;
    font-size: 12px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-buttons a:hover,
.header-buttons button:hover {
    background-color: #4169e1;
}

.upload-button, .main-button {
    min-width: 30%; /* ÃÖ¼Ò ¹öÆ° Æø */
    min-height: calc(2vh);
}

/* ¾÷·Îµå ¹öÆ° */
.upload-button {
    background-color: #464646; 
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upload-button:hover {
    background-color: #45a049; /* »ì¦ ¹àÀº ³ì»ö */
}

/* ¸ÞÀÎ ¹öÆ°(°­Á¶) */
.main-button {
    background-color: #f44336; /* »¡°­ */
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-button:hover {
    background-color: #d32f2f; /* ÁøÇÑ »¡°­ */
}

a.logout-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    align-items: flex-end; /* ·Î±×¾Æ¿ô ¹öÆ° ¾ÆÀÌÄÜ ÇÏ´Ü Á¤·Ä */
    justify-content: center;
}

/* ·Î±×¾Æ¿ô ¾ÆÀÌÄÜ */
.logout-logo {
    display: inline-block;
    width: 20px; /* Å©±â */
    height: 20px;
    background: none !important;
    padding: 0;
    margin: 0;
    border: none !important;
    outline: none !important;
    vertical-align: middle;
    opacity: 0.6; /* ±âº» Åõ¸íµµ */
    transition: opacity 0.3s ease;
}

/* È£¹ö ½Ã ¾ÆÀÌÄÜ °­Á¶ */
a.logout-button:hover .logout-logo {
    opacity: 1;
    filter: sepia(100%) saturate(200%) hue-rotate(100deg) brightness(80%) contrast(120%);
    background-color: transparent !important;
    filter: none !important;
    box-shadow: none !important;
}

/* ¹öÆ° ÀÚü ¹è°æ º¯È­ ¸·±â */
a.logout-button:hover {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* »ç¿ëÀÚ Á¤º¸ ¿µ¿ª */
.user-info {
    display: flex;
    align-items: center;
    gap: 10px; /* ¾ÆÀÌÄÜ/À̸§/·Î±×¾Æ¿ô °£ °£°Ý */
}

/* »ç¿ëÀÚ ¾ÆÀÌÄÜ */
.user-icon {
    width: 24px;
    height: 24px;
    object-fit: cover; /* ºñÀ² À¯Áö */
    border-radius: 50%; /* µ¿±×¶ó¹Ì */
}

/* »ç¿ëÀÚ¸í */
.username {
    font-size: 16px;
    color: #464646;
    font-weight: bold;
}

/* ¼¼¼Ç ŸÀÌ¸Ó */
.session-timer {
    font-size: 16px;
    color: #083287; /* ÆĶõ»ö */
    margin: 0;
    line-height: 1;
    font-weight: bold;
}

/* ºÐ±â ¼±Åà ¼½¼Ç */
.branch-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}

.branch-container {
    display: flex;
    gap: 60px; /* ¹öÆ° °£ °£°Ý */
    justify-content: center;
    flex-wrap: wrap; /* ÁÙ¹Ù²Þ Çã¿ë */
}

/* ============================
   ºÐ±â ¹öÆ° ÄÄÆ÷³ÍÆ® ½ºÅ¸ÀÏ
============================ */
/* ºÐ±â ¹öÆ° */
.branch-button {
    position: relative; /* ¿À¹ö·¹À̸¦ ¹öÆ° ³»ºÎ¿¡ ¹èÄ¡Çϱâ À§ÇÑ ±âÁØ */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    background-color: #fff;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 10px;
    width: 20%;
    height: 20%;
    transition: transform 0.3s, box-shadow 0.3s;
}

.branch-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ¹öÆ° À̹ÌÁö */
.branch-button img.button-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.3s;
}

.branch-button:hover img.button-icon {
    opacity: 0.5;
}

/* ¹öÆ° ¿À¹ö·¹ÀÌ(ÅؽºÆ® ¹è°æ) */
.button-overlay {
    position: absolute;
    bottom: 0px; /* ¹öÆ° ÇÏ´Ü¿¡ ¹ÐÂø */
    width: 100%;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8); /* ¹ÝÅõ¸í ¹è°æ */
    padding: 5px 10px;
    border-radius: 5px;
    display: block; 
}

.button-text {
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

/* ============================
   ¼³¹®/¿É¼Ç ¼½¼Ç
============================ */

.research-section {
    margin-top: 20px; /* »ó´Ü ¿©¹é */
}

.research-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.research-options {
    display: flex;
    gap: 30px; /* ¿É¼Ç °£ °£°Ý */
    flex-wrap: wrap;
}

.research-option {
    display: flex;
    align-items: center;
}

.research-option input[type="checkbox"] {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.research-option label {
    font-size: 1em;
    color: #555;
    cursor: pointer;
}


/* ============================
   ÄÜÅÙÃ÷/·Î±×ÀÎ/°¡ÀÔ °øÅë Ä«µå
============================ */
.content-section,
.login-section,
.join-section,
.signup-section {
    flex: 1;
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.survey-section {
    flex: 1;
    max-width: 850px;
    margin: 0px auto;
    padding: 0px;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.join-section {
    flex: 1;
    max-width: 800px;
    margin: 60px auto;
    padding: 20px;
    border-radius: 10px;
    background-color: #f0f8ff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.login-section,
.join-section,
.signup-section {
    background-color: #ffffff;
    text-align: left;
    max-width: 400px;
}

/* ¼½¼Ç Á¦¸ñ */
.content-section h2,
.login-section h2,
.signup-section h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
    text-align: left;
}

/* ÀÔ·Â Çʵå */
input[type="text"],
input[type="password"],
input[type="email"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
    border-color: #007bff;
    outline: none;
}

/* ¹öÆ° ±âº» */
button,
.start-btn,
.admin-btn,
.btn-primary {
    padding: 10px 10px;
    background-color: #464646;
    color: #ffffff;
    font-size: 14px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.signup-btn,
.login-btn {
    margin-top: 30px; /* ¹öÆ°°ú ´Ù¸¥ ¿ä¼Ò °£ °£°Ý */
    width: 100%; /* °¡·Î Àüü */
    padding: 15px 0;
    background-color: #464646;
    color: #ffffff;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover,
.signup-btn:hover,
.login-btn:hover,
.btn-primary:hover {
    background-color: #4169e1;
}

/* ·Î±×ÀÎ ¹öÆ° */
.login-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #464646;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.login-button:hover {
    background-color: #4169e1;
}

/* º»¹® ¹®´Ü */
.content-section p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* ============================
   À̹ÌÁö ±×¸®µå(3*2 ¿¹½Ã)
============================ */
.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* µ¥½ºÅ©Åé 3¿­ */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative; /* ID ¹èÁö µî Àý´ë ¹èÄ¡ ±âÁØ */
    padding-bottom: 20px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.5); /* Á¡¼± ±¸ºÐ */
}

.image-wrapper {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    padding-top: 66.66%; /* 3:2 ºñÀ² */
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    flex: 1;
    min-height: calc(100vh - 60px - 60px); /* header+footer Á¦¿Ü */
}

.image-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    /* Å׵θ® Ãß°¡ */
    border: 1px solid #cccccc; /* ±âº» Å׵θ® »ö */
    transition: border-color 0.3s ease; /* Å׵θ® Àüȯ */
}

/* À̹ÌÁö ID ¹èÁö */
.id-box {
    position: absolute;
    top: 10px;  /* »ó´Ü ¿©¹é */
    left: 10px; /* ÁÂÃø ¿©¹é */
    background-color: rgba(0, 0, 0, 0.5); /* ¹ÝÅõ¸í ¹è°æ */
    color: white; /* ±ÛÀÚ»ö */
    padding: 5px 10px; /* Æеù */
    border-radius: 8px; /* µÕ±Ù ¸ð¼­¸® */
    font-size: 14px; /* ±ÛÀÚ Å©±â */
    font-weight: bold; /* °­Á¶ */
}

/* À̹ÌÁö È£¹ö ½Ã Å׵θ® °­Á¶ */
.image-item img:hover {
    border-color: #007BFF;
}

/* Å°º¸µå Æ÷Ä¿½º ½Ã °­Á¶(Á¢±Ù¼º) */
.image-item img:focus {
    outline: 2px solid #28a745;
    outline-offset: 4px;
}


/* ============================
   ¸ð´Þ(À̹ÌÁö È®´ë º¸±â)
============================ */
.modal {
    max-width: 100%;
    max-height: 100%;
    display: none; /* ±âº» ¼û±è */
    position: fixed;
    z-index: 1000; /* ÃÖ»ó´Ü */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* ¹ÝÅõ¸í ¹è°æ */
    justify-content: center; /* °¡·Î °¡¿îµ¥ */
    align-items: center; /* ¼¼·Î °¡¿îµ¥ */
}

/* ¸ð´Þ À̹ÌÁö */
.modal-content {
    max-width: 70%;
    max-height: 70%;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    object-fit: contain; /* À̹ÌÁö ¿ÂÀü Ç¥½Ã */
    position: relative;
    top: 50%;            /* °¡¿îµ¥ Á¤·Ä */
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ¸ð´Þ ´Ý±â ¹öÆ° */
.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

/* ´Ý±â ¹öÆ° È£¹ö/Æ÷Ä¿½º */
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* ============================
   ÆòÁ¡(¶óµð¿À ¹öÆ° ½ºÅ¸ÀÏ)
============================ */
.rating-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 400px;
}

.rating-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 10px;

}

.rating-item label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #ffffff;
    color: #464646;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    text-align: center;
    
    /* Å׵θ® Ãß°¡ */
    border: 0.5px solid #cccccc; /* ÀºÀºÇÑ Å׵θ® */
    
    /* Àüȯ È¿°ú (¼±ÅÃ/È£¹ö) */
    transition: border-color 0.3s ease;
}

/* ¶óµð¿À ¹öÆ° ¼û±è */
.rating-item input[type="radio"] {
    display: none;
}

/* ¼±Åà ½Ã ¶óº§ ½ºÅ¸ÀÏ */
.rating-item input[type="radio"]:checked + label {
    background-color: #4A4A4A;
    color: #ffffff;
}

/* È£¹ö È¿°ú */
.rating-item label:hover {
    background-color: #787676;
    color: #ffffff;
}

/* Æ÷Ä¿½º È¿°ú(Á¢±Ù¼º) */
.rating-item input[type="radio"]:focus + label {
    outline: 2px solid #787676;
}

/* ============================
   ¹öÆ° ±×·ì/¸µÅ© ¹öÆ°
============================ */
.button-group {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    gap: 10px;
}

.button-group a,
.button-group form button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 10px 20px;
    background-color: #464646;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-group a:hover,
.button-group form button:hover {
    background-color: #4169e1;
}

/* ============================
   ¿À·ù ÇÏÀ̶óÀÌÆ® ¾Ö´Ï¸ÞÀ̼Ç
============================ */

/* Error Outline Animation */
@keyframes fadeInOut {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
    50% { box-shadow: 0 0 0 5px rgba(255, 0, 0, 0.8); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

/* ¿À·ù °­Á¶: À̹ÌÁö ·¡ÆÛ */
.image-item.error-outline {
    animation: fadeInOut 1.5s forwards;
    border-radius: 5px; /* µÕ±Ù ¸ð¼­¸® */
}

/* ¿À·ù °­Á¶: À̹ÌÁö ÀÚü */
.image-item img.error-outline {
    animation: fadeInOut 1.5s forwards;
    border-radius: 5px; /* µÕ±Ù ¸ð¼­¸® */
}

/* ============================
   µå·ÓÁ¸(¾÷·Îµå) ½ºÅ¸ÀÏ
============================ */
.dropzone {
    border: 2px dashed #007bff; /* Á¡¼± Å׵θ® */
    border-radius: 10px;
    padding: 40px;
    cursor: pointer;
    text-align: center;
    background-color: #f0f8ff;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
}

.dropzone p {
    font-size: 18px;
    color: #666;
}

.dropzone.active {
    background-color: #e0f0ff;
}

/* ±âº» ¾÷·Îµå ÁøÇà¹Ù */
#progress-container {
    width: 100%;
    background-color: #f3f3f3;
    height: 25px;
    margin-top: 20px; 
    margin-bottom: 20px; /* ǪÅÍ¿Í °£°Ý */
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
    display: none; /* ±âº» ¼û±è */
}
#progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #81c784);
    transition: width 0.4s ease;
}
#progress-text {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #333;
    margin-bottom: 20px; /* ǪÅÍ¿Í °£°Ý */
    display: none; /* ±âº» ¼û±è */
}

/* ÆÄÀÏ ¸®½ºÆ® */
.file-list {
    max-height: 150px; /* ½ºÅ©·Ñ ¿µ¿ª ³ôÀÌ */
    overflow-y: auto;   /* ¼¼·Î ½ºÅ©·Ñ */
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
}

.file-item {
    display: flex;
    align-items: center;
    background-color: #f1f3f5;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}

.file-item:hover {
    background-color: #e2e6ea;
}

.file-icon {
    margin-right: 10px;
    font-size: 24px;
    color: #007bff;
}

.file-name {
    flex-grow: 1;
    word-break: break-all;
}

.file-item.invalid {
    color: #dc3545;
    background-color: #f8d7da;
}

/* ============================
   Ç÷¡½Ã ¸Þ½ÃÁö ½ºÅ¸ÀÏ
============================ */
.flashes {
    position: fixed; /* È­¸é¿¡ °íÁ¤ À§Ä¡ */
    top: 120px;      /* »ó´Ü¿¡¼­ 120px ¾Æ·¡ */
    left: 50%;       /* °¡¿îµ¥ Á¤·Ä */
    transform: translateX(-50%); /* Á¤È®ÇÑ °¡¿îµ¥ */
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index: 1001; /* ÃÖ»ó´Ü ·¹À̾î */
}

.flashes li {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    min-width: 300px; /* ÃÖ¼Ò Æø */
    text-align: center;
    opacity: 0; /* Ãʱâ Åõ¸í */
    animation: fadeInUp 1.5s ease-out forwards, fadeOut 1.0s ease-in forwards;
    animation-delay: 0s, 1.0s; /* µîÀå ÈÄ °ð¹Ù·Î »ç¶óÁü ½ÃÀÛ(ÇÊ¿ä½Ã Á¶Àý) */
}

.flashes .success {
    background-color: #d4edda;
    color: #155724;
}

.flashes .info {
    background-color: #F8D7F5;
    color: #721B71;
}

.flashes .warning {
    background-color: #fff3cd;
    color: #856404;
}

.flashes .danger {
    background-color: #f8d7da;
    color: #721c24;
}

/* Ç÷¡½Ã µîÀå/ÅðÀå ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* ¾Æ·¡¿¡¼­ À§·Î */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px); /* À§·Î »ç¶óÁü */
    }
}

/* ============================
   ºñ¹Ð¹øÈ£ º¯°æ Æû
============================ */

/* Àüü ·¡ÆÛ */
.change-password-container {
    width: 100%;
    max-width: 400px; /* ÄÜÅÙÃ÷ ÃÖ´ë Æø */
    margin: 50px auto; /* °¡¿îµ¥ ¹èÄ¡ */
    padding: 20px; /* ³»ºÎ ¿©¹é */
    background-color: #f7f7f7; /* ¹è°æ»ö */
    border: 1px solid #ddd; /* Å׵θ® */
    border-radius: 8px; /* µÕ±Ù ¸ð¼­¸® */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ±×¸²ÀÚ */
}

/* Á¦¸ñ */
.change-password-container h2 {
    text-align: center; /* °¡¿îµ¥ Á¤·Ä */
    font-size: 22px; /* ±ÛÀÚ Å©±â */
    margin-bottom: 20px; /* ÇÏ´Ü ¿©¹é */
    color: #333; /* ±ÛÀÚ»ö */
}

/* ÀÔ·Â Çʵå */
.email-input {
    width: 100%; /* °¡·Î Àüü */
    padding: 10px; /* Æеù */
    margin-bottom: 20px; /* °£°Ý */
    border: 1px solid #ccc; /* Å׵θ® */
    border-radius: 4px; /* µÕ±Ù ¸ð¼­¸® */
    font-size: 16px; /* ±ÛÀÚ Å©±â */
    box-sizing: border-box; /* Æеù Æ÷ÇÔ */
}

/* Á¦Ãâ ¹öÆ° */
.reset-btn {
    width: 100%; /* °¡·Î Àüü */
    padding: 10px; /* Æеù */
    background-color: #464646; /* ¹è°æ */
    color: #fff; /* ±ÛÀÚ»ö */
    border: none; /* Å׵θ® Á¦°Å */
    border-radius: 4px; /* µÕ±Ù ¸ð¼­¸® */
    font-size: 16px; /* ±ÛÀÚ Å©±â */
    cursor: pointer; /* Æ÷ÀÎÅÍ Ä¿¼­ */
    transition: background-color 0.3s ease; /* Àüȯ */
}

/* È£¹ö È¿°ú */
.reset-btn:hover {
    background-color: #4169e1; /* °­Á¶ */
}


/* ============================
   ǪÅÍ
============================ */
footer {
    background-color: #343338;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    box-sizing: border-box;
    margin-top: auto; /* ·¹À̾ƿô ÇÏ´Ü À¯Áö */
}


/* ============================
   ÆäÀÌÁö ³×ºñ°ÔÀ̼Ç(ÀÌÀü/´ÙÀ½) ¹öÆ°
============================ */
.pagination-button {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background-color: #464646;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    opacity: 0.4;
    z-index: 1000;
    padding: 0;
    box-sizing: border-box;
}

.pagination-button:hover {
    background-color: #464646;
    transform: translateY(-50%) scale(1.1);
    opacity: 1;
}

.prev-button {
    left: 20px;
}

.next-button {
    right: 20px;
}

/* ºñÈ°¼ºÈ­µÈ ÆäÀÌÁö ¹öÆ° */
.pagination-button.disabled {
    background-color: rgba(70, 130, 180, 0.2);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.2;
}

/* ÆäÀÌÁö Á¤º¸ ¹èÁö */
.page-info-container {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.page-info {
    font-size: 18px;
    color: #333;
}

/* ³¡À¸·Î À̵¿ ¹öÆ°(°øÅë ¿øÇü ½ºÅ¸ÀÏ ±×´ë·Î »ç¿ë) */
.end-button {
    right: 20px;
}

/* ============================
   ±×·¡ÇÁ/Â÷Æ® ¿µ¿ª
============================ */
.graph-container {
    width: 100%;
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
}

.graph {
    width: 100%;
    height: 400px;
}

.bottom-section canvas {
    width: 100% !important;  /* ¹ÝÀÀÇü ³Êºñ */
    max-width: 800px;
    height: auto !important; /* ¹ÝÀÀÇü ³ôÀÌ */
    margin-bottom: 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ÅÇ(nav) */
.tabs {
    display: flex;
    gap: 10px;
    margin-top: 30px;
    margin-bottom: 20px;
    background-color: #f1f1f1; /* ÅÇ ¹Ù ¹è°æ */
    padding: 10px;
    border-radius: 5px;
}

.tab {
    padding: 10px 20px;
    background-color: #4682b4;
    color: #ffffff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    user-select: none;
    flex: 1; /* µ¿ÀÏÇÑ ³Êºñ ºÐ¹è */
    text-align: center;
}

.tab:hover {
    background-color: #4169e1;
}

.tab.active {
    background-color: #4169e1;
}

.content-section.data-layout  {
    flex: 1;
    display: flex;
    padding: 10px;
    gap: 10px;
    flex-wrap: wrap; /* ÀÛÀº È­¸é¿¡¼­ ÁÙ¹Ù²Þ */
}

/* ÁÂÃø ÆгÎ: Á¦¾î ¿µ¿ª */
.left-section {
    flex: 1 1 40%; /* 񃧯 40% */
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    background-color: #f0f8ff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ¿ìÃø ÆгÎ: Å×À̺í/Ãâ·Â */
.right-section {
    flex: 1 1 60%;
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    background-color: #f0f8ff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ============================
   ÅÇ ³×ºñ°ÔÀ̼Ç(¸ð¾ç/È°¼º »óÅÂ/Àüȯ)
============================ */

/* Tab CSS */
.tabnav {
    font-size: 0; /* inline-block °£°Ý Á¦°Å */
    width: auto; /* °íÁ¤ Æø ÇØÁ¦ */
    border: 1px solid #ddd;
    border-bottom: none; /* ÄÁÅÙÃ÷ ¹Ú½º¿Í À̾îÁöµµ·Ï Çϴܼ± Á¦°Å */
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    padding: 0;
}

.tabnav li {
    height: 46px;
    text-align: center;
    border-right: 1px solid #ddd;
    position: relative;
}

.tabnav li:last-child {
    border-right: none; /* ¸¶Áö¸·Àº ¿ìÃø¼± Á¦°Å */
}

.tabnav li a {
    position: relative;
    display: block;
    background: #f8f8f8;
    color: #000;
    padding: 0 30px;
    line-height: 46px;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s;
}

.tabnav li a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    height: 3px;
    background: transparent; /* ±âº» »ó´Ü ¹Ù ¼û±è */
    transition: background 0.3s;
}

.tabnav li a.active:before {
    background: #7ea21e;
}

.tabnav li a.active {
    border-bottom: 1px solid #fff; /* ÄÁÅÙÃ÷¿Í ¿¬°á */
    background: #fff;
    color: #7ea21e;
}

.tabnav li a:hover,
.tabnav li a.active {
    background: #fff;
    color: #7ea21e;
}

/* ÅÇ ÄÁÅÙÃ÷ ¹Ú½º */
.tabcontent {
    display: none; /* ±âº» ¼û±è */
    padding: 20px;
    height: auto; /* ÀÚµ¿ ³ôÀÌ */
    border: 1px solid #ddd;
    border-top: none;
    max-height: calc(100vh - 160px - 50px - 200px); /* Çì´õ/ǪÅÍ/±âŸ ¿µ¿ª Á¦¿Ü */
    overflow-y: auto; /* ¼¼·Î ½ºÅ©·Ñ */
}

.tabcontent.active {
    display: block; /* È°¼º ÅǸ¸ Ç¥½Ã */
}

/* Å×À̺í ÄÁÅ×À̳Ê(°¡·Î ½ºÅ©·Ñ) */
.table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: center;
}

th {
    background-color: #4682b4;
    color: #ffffff;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}


/* ============================
   ÇÏ´Ü(±×·¡ÇÁ/Â÷Æ®) ¿µ¿ª
============================ */
.bottom-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.bottom-section h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.bottom-section canvas {
    width: 800px; /* µ¥½ºÅ©Åé ±âÁØ Æø */
    height: 400px; /* µ¥½ºÅ©Åé ±âÁØ ³ôÀÌ */
    margin-bottom: 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================
   ÇÏ´Ü(±×·¡ÇÁ/Â÷Æ®) Áߺ¹ Á¤ÀÇ(ÅëÀÏ)
============================ */
.bottom-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.bottom-section h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.bottom-section canvas {
    width: 800px;
    height: 400px;
    margin-bottom: 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* ============================
   ¹ÝÀÀÇü(ÅÂºí¸´ ±âÁØ)
============================ */

/* === ¹ÝÀÀÇü: ÅÂºí¸´ ÀÌÇÏ === */
@media (max-width: 768px) {
    /* Çì´õ Á¦¸ñ/¹öÆ° Å©±â Á¶Á¤ */
    header h1 {
        font-size: 20px;
    }

    /* Çì´õ ³ôÀÌ Ãà¼Ò */
    :root {
        --header-height: 60px;
    }

    /* Çì´õ ³»ºÎ ·¹À̾ƿô */
    .header-container {
        display: flex;
        flex-direction: row; /* ·Î°í/Á¦¸ñ/¹öÆ°À» °¡·Î ¹èÄ¡ */
        justify-content: space-between;
        width: 100%;
    }
    .logo {
        max-width: 45px;
        margin-right: 3px; /* ·Î°í¿Í ¿ä¼Ò °£ °£°Ý */
    }
    .user-info {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    .title {
        text-align: center;
        margin-bottom: 10px;
    }
    .username,
    .session-timer,
    .header-buttons {
        display: flex;
        flex-direction: column; /* ¹öÆ°À» ¼¼·Î·Î Á¤·Ä */
        align-items: flex-start;
        font-size: 12px;
        gap: 10px;
    }
    /* Çì´õ ¹öÆ° */
    .header-buttons a,
    .header-buttons button {
        text-align: right;
        margin-bottom: 5px;
        font-size: 16px;
        padding: 8px 16px;
    }
    /* ¸ÞÀÎ ÄÁÅ×ÀÌ³Ê */
    .main-container {
        margin-top: var(--header-height);
        margin-bottom: 70px;
        margin-top: 10px; /* ÇÊ¿ä ½Ã Ãß°¡ Á¶Á¤ */
    }

    /* ǪÅÍ´Â °íÁ¤ À¯Áö */
    footer {
        position: fixed;
    }
    
    /* ¸ð´Þ À̹ÌÁö Å©±â Á¶Á¤ */
    .modal-content {
        max-width: 100%; 
        max-height: 100%; 
        top: 55%;
        left: 50%;
    }
    
    /* ¸ð´Þ ´Ý±â ¹öÆ° Å©±â */
    .close {
        font-size: 28px;
        top: 5px;
        right: 15px;
    }

    /* µå·ÓÁ¸ Æеù Ãà¼Ò */
    .dropzone {
        padding: 20px;
    }

    .dropzone p {
        font-size: 16px;
    }

    .btn-primary {
        font-size: 16px;
        padding: 12px 24px;
    }
    .research-options {
        flex-direction: column;
        gap: 20px; /* ¸ð¹ÙÀÏ¿¡¼­ °£°Ý 20px */
    }

    .signup-btn {
        width: 100%;
        padding: 15px 0;
    }
    /* À̹ÌÁö ±×¸®µå: 1¿­·Î º¯°æ */
    .image-grid {
        grid-template-columns: 1fr; 
        gap: 20px;
    }

    /* ÆäÀÌÁö ³×ºñ ¹öÆ°(¸ð¹ÙÀÏ¿ë Å©±â) */
    .pagination-button {
        width: 50px;
        height: 50px;
        font-size: 20px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0;
        box-sizing: border-box;
    }

    /* ÆäÀÌÁö Á¤º¸ ¹èÁö */
    .page-info-container {
        bottom: 50px;
        padding: 8px 16px;
    }

    .page-info {
        font-size: 16px;
    }

    /* ÆòÁ¡ ¹öÆ°(¸ð¹ÙÀÏ Å©±â) */
    .rating-buttons label {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 10px;
    }

    /* ÆäÀÌÁö ¹öÆ° À§Ä¡ */
    .prev-button {
        left: 10px;
    }

    .next-button {
        right: 10px;
    }

    /* ¸¶Áö¸· À̹ÌÁö¸¦ Á¦¿ÜÇÑ ¸ðµç À̹ÌÁö¿¡ ÇÏ´Ü Á¡¼± */
    .image-item:not(:last-child) {
        border-bottom: 1px dashed rgba(0, 0, 0, 0.5);
        padding-bottom: 20px;
    }
    /* ¸¶Áö¸· À̹ÌÁö´Â Á¡¼± Á¦°Å */
    .image-item:last-child {
        border-bottom: none;
    }
    .bottom-section h2 {
        font-size: 20px;
    }

    .bottom-section canvas {
        max-width: 100%;
        margin-bottom: 60px;
    }
    .branch-container {
        flex-direction: column;
        gap: 20px;
    }
    .branch-button {
        width: 250px;
        height: 250px;
    }
}

/* ¹ÝÀÀÇü: ÀÛÀº ¸ð¹ÙÀÏ */
@media (max-width: 480px) {
    /* Çì´õ Á¦¸ñ Å©±â */
    header h1 {
        font-size: 16px;
    }

    /* Çì´õ ³ôÀÌ ´õ Ãà¼Ò */
    :root {
        --header-height: 50px;
    }

    /* Çì´õ ¹öÆ° Å©±â Ãà¼Ò */
    .header-buttons a,
    .header-buttons button {
        font-size: 12px;
        padding: 6px 12px;
    }
    .title {
        text-align: center;
        font-size: 10px;
        margin-bottom: 10px;
    }
    /* ¸ÞÀÎ ÄÁÅ×ÀÌ³Ê ¿©¹é */
    .main-container {
        margin-top: var(--header-height);
        margin-bottom: 70px;
    }
    
    /* µå·ÓÁ¸ ¹®±¸ Å©±â */
    .dropzone p {
        font-size: 14px;
    }

    /* ÆäÀÌÁö ¹öÆ°(´õ ÀÛ°Ô) */
    .pagination-button {
        width: 40px;
        height: 40px;
        font-size: 18px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0;
        box-sizing: border-box;
    }

    /* ÆäÀÌÁö Á¤º¸ ¹èÁö */
    .page-info-container {
        bottom: 50px;
        padding: 6px 12px;
    }

    .page-info {
        font-size: 14px;
    }

    /* ÆòÁ¡ ¹öÆ° ´õ ÀÛ°Ô */
    .rating-buttons label {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 8px;
    }

    /* ÆäÀÌÁö ¹öÆ° À§Ä¡ º¸Á¤ */
    .prev-button {
        left: 5px;
    }

    .next-button {
        right: 5px;
    }
    /* ¸¶Áö¸· À̹ÌÁö¸¦ Á¦¿ÜÇÑ ¸ðµç À̹ÌÁö¿¡ ÇÏ´Ü Á¡¼± */
    .image-item:not(:last-child) {
        border-bottom: 1px dashed rgba(0, 0, 0, 0.5);
        padding-bottom: 20px;
    }
    /* ¸¶Áö¸· À̹ÌÁö´Â Á¡¼± Á¦°Å */
    .image-item:last-child {
        border-bottom: none;
    }
    .bottom-section h2 {
        font-size: 18px;
    }

    .bottom-section canvas {
        max-width: 100%;
        margin-bottom: 20px;
    }
    .branch-container {
        margin-top: -20px;
        flex-direction: column;
        gap: 20px;
    }
    .branch-button {
        width: 230px;
        height: 230px;
    }
}

/* ============================
   µå·ÓÁ¸ È°¼ºÈ­ »óÅÂ(°­Á¶)
============================ */
.dropzone.active {
    border-color: #0056b3;
    background-color: #d0e7ff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ============================
   ±×·¡ÇÁ ¼½¼Ç(¹ÝÀÀÇü Áߺ¹ Á¤¸®)
============================ */
.bottom-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bottom-section canvas {
    width: 100% !important;
    max-width: 800px;
    height: auto !important;
    margin-bottom: 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================
   Å×À̺í(°øÅë) ½ºÅ¸ÀÏ
============================ */
.table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: center;
}

th {
    background-color: #4682b4;
    color: #ffffff;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* ============================
   ÄÉÀ̽º/Å°Á¶°¢ Æû ·¹À̾ƿô º¸¿Ï
============================ */
.key-form {
    max-width: 1000px; /* ÇÊ¿ä ½Ã È®Àå(¼±ÅÃ) */
    margin-bottom: 30px;
}

/* ÇÑ ÁÙ(row) ¾È¿¡¼­ ÁÂ/¿ì Á¤·ÄÀ» À§ÇÑ Çà */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
    align-items: center; /* ¼öÁ÷ °¡¿îµ¥ Á¤·Ä */
}

/* ¿­: ¶óº§ + ÀÔ·ÂÀÌ ÇÑ ÁÙ¿¡ ³ª¶õÈ÷ ¹èÄ¡µÇ´Â ÄÁÅ×ÀÌ³Ê */
.form-col {
    flex: 1;
    min-width: 150px;
    display: flex;
    flex-direction: row;   /* label + input °¡·Î ¹èÄ¡ */
    align-items: center;   /* ¼öÁ÷ °¡¿îµ¥ Á¤·Ä */
    gap: 10px;
}

/* ¶óº§: °íÁ¤ Æø & ¿À¸¥ÂÊ Á¤·Ä */
.form-col label {
    width: 100px;
    font-weight: 600;
    margin: 0;
    text-align: right;
    line-height: 1;       /* ÀÔ·Â ¿ä¼Ò¿Í ³ôÀÌ ¸ÂÃã */
    vertical-align: middle;
    display: inline-block;
}

/* ÀÔ·Â/¼¿·ºÆ®: À¯µ¿ Æø & µ¿ÀÏ ³ôÀÌ */
.form-col input,
.form-col select {
    flex: 1;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
}

/* ÅؽºÆ®¿µ¿ª: Æø 100% */
.form-row textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
}

/* Æû Àüü ¹Ú½º(Ä«µåÈ­) */
form {
    background-color: #f9f9f9;       /* ¿¶Àº ¹è°æ */
    border: 1px solid #ddd;          /* Å׵θ® */
    border-radius: 12px;             /* µÕ±Ù ¸ð¼­¸® */
    padding: 20px 20px;              /* ³»ºÎ ¿©¹é */
    margin-bottom: 30px;             /* ÇÏ´Ü ¿©¹é */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* ±×¸²ÀÚ */
}

/* Æû ¾×¼Ç ¹öÆ° ¿µ¿ª */
.form-actions {
    text-align: right;
}

.btn-primary {
    background-color: #007bff;
    color: #fff;
    padding: 8px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 20px 0;
}

.result-area {
    background-color: #f9f9f9;
    padding: 15px;
    border-left: 4px solid #007bff;
    margin-bottom: 20px;
}

.result-text {
    font-size: 1.2em;
    color: #333;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
}

.history-table th,
.history-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
}

.history-table th {
    background-color: #f4f4f4;
    text-align: left;
}

.history-table tr:nth-child(even) {
    background-color: #fafafa;
}

/* ============================
   ·¹À̾ƿô: »çÀ̵å¹Ù + ¸ÞÀÎ
============================ */
.wrapper {
    display: flex;
    min-height: 100vh;
    margin: 0;      /* ¿ÜºÎ ¿©¹é Á¦°Å */
    padding: 0;
}

/* Çì´õ(º¸Á¶) */
.site-header {
    margin: 0;
    padding: 5px 5px;
    background-color: white; /* ¹è°æ */
}

/* »çÀ̵å¹Ù */
.sidebar {
    width: 220px;
    background-color: #2c3e50; /* ÁøÆĶû°è¿­ */
    color: #fff;
    padding: 0 20px 20px 20px;
    box-sizing: border-box;
    flex-shrink: 0;
    min-height: 100%;
}

.sidebar h2 {
    margin-top: 30;
    padding-top: 30px;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar ul li {
    margin-bottom: 10px;
}

.sidebar ul li a {
    color: #fff;

    text-decoration: none;
    display: block;
    padding: 8px 0;
    transition: 0.2s;
}

.sidebar ul li a:hover {
    background-color: #34495e; /* hover ½Ã ÁøÇØÁü */
    border-radius: 4px;
}

.form-col {
    flex: 1;
    min-width: 150px;

    display: flex;
    flex-direction: row;
    align-items: center; /* ¼öÁ÷ °¡¿îµ¥ Á¤·Ä */
    gap: 10px;
}

/* ¶óº§ °íÁ¤ Æø */
.form-col label {
    width: 100px;        /* ¶óº§ °íÁ¤ Æø */
    font-weight: 600;
    margin: 0;           /* °£°Ý Á¦°Å */
    text-align: right;   /* ¿À¸¥ÂÊ Á¤·Ä */
    line-height: 1.5;    /* ÀÔ·Â ³ôÀÌ¿Í ¸ÂÃã */
}

/* ÀÔ·Â °øÅë */
.form-col input,
.form-col select {
    flex: 1;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
}

/* ÅؽºÆ®¿¡¾î¸®¾î´Â Àüü Æø */
.form-row textarea {
    width: 100%;
    min-height: 60px;
}

/* ¸ÞÀÎ ÄÜÅÙÃ÷ */
.main-content {
    flex: 1;
    padding: 0 20px 20px 20px;
    box-sizing: border-box;
}

/* ÁøÇà ´Ü°è Ç¥½Ã ÄÄÆ÷³ÍÆ® */
/* = progress-steps: ÄÁÅ×ÀÌ³Ê ³Êºñ + ³ôÀÌ(step) + Á¤·Ä(°¡¿îµ¥ Á¤·Ä Æ÷ÇÔ) */

/* ÄÁÅ×À̳Ê(°£°Ý°ú Á¤·Ä) */
.progress-steps {
    display: flex;
    align-items: center;                /* Àüü ¼öÁ÷ °¡¿îµ¥ Á¤·Ä */
    width: 100%;
    gap: clamp(6px, 2vw, 26px);         /* step <-> arrow °£°Ý */
    margin: 24px 0 20px 0;
    box-sizing: border-box;
}

/* step ¹Ú½º(¹ÝÀÀÇü ÆùÆ®/³ôÀÌ/ÁÙ¹Ù²Þ Çã¿ë) */
.progress-steps .step {
    flex: 1 1 0;                        /* °¡º¯ Æø ºÐ¹è */
    min-width: 100px;                   /* ÃÖ¼Ò Æø */
    height: 64px;                       /* ³ôÀÌ */
    padding: 6px 6px;                  /* ³»ºÎ ¿©¹é */
    gap: clamp(8px, 2vw, 28px);
    background-color: #e0e0e0;
    border-radius: 6px;
    display: flex;                      
    justify-content: center;            
    align-items: center;                
    text-align: center;
    white-space: normal;                
    word-break: break-word;
    overflow-wrap: break-word;
    font-weight: 600;
    font-size: clamp(12px, 1.6vw, 16px);
    line-height: 1.1;
    box-sizing: border-box;
    overflow: hidden;                   
    flex-wrap: wrap;
}

/* arrow: step »çÀÌ ±¸ºÐ¿ë */
.progress-steps .arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;                
    justify-content: center;            
    height: 64px;                       
    box-sizing: content-box;
    padding: 0 3px;                     
}

/* SVG È­»ìÇ¥ Å©±â */
.progress-steps .arrow svg {
    width: auto;
    height: clamp(16px, 3.5vh, 28px);
    stroke: #333;
    stroke-width: 2;
    fill: none;
    display: block;
}

/* ±âº» Çà/¿­ */
.form-row {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px;
    margin-bottom: 15px;
}

/* ±âº» ¿­ */
.form-col {
    flex: 1;
    min-width: 150px;   
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

/* === ¾×¼Ç ¹öÆ° °¡·Î ¹èÄ¡(Àü¿ë) === */
.action-row {
  display: flex !important;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;              /* ÆøÀÌ Á¼¾ÆÁö¸é ´ÙÀ½ ÁÙ·Î */
  margin: 20px 0 32px;
}

/* Àü¿ª form ±ÔÄ¢ ¹«È¿È­(°¡·Î ¹èÄ¡) */
.action-row > form {
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0;
  flex: 0 0 auto;
}

/* ¾×¼Ç ¹öÆ°: ±âº»(ÆĶû Å׵θ®) */
.action-row .action-btn {
  background: #fff !important;
  color: #2c7be5 !important;
  border: 1px solid #2c7be5 !important;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.action-row .action-btn:hover {
  background: #2c7be5 !important;
  color: #fff !important;
}

/* º¸Á¶ ¹öÆ°(ȸ»ö °è¿­) */
.action-row .action-btn.secondary {
  background: #fff !important;
  color: #6c757d !important;
  border: 1px solid #6c757d !important;
}
.action-row .action-btn.secondary:hover {
  background: #6c757d !important;
  color: #fff !important;
}


/* ============================
   ¹ÝÀÀÇü: Æû/»çÀ̵å¹Ù ÃÖÀûÈ­
============================ */
@media (max-width: 768px) {
    .main-content {
        width: 90%;
        padding: 0 5px;
        box-sizing: border-box;
    }
    .form-container {
        padding-left: 4px;
        padding-right: 4px;
    }

    .form-row {
        flex-direction: column;
        gap: 2px;
    }

    .form-col {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .form-col label {
        width: 100%;
        text-align: left;
        margin-bottom: 2px;
    }

    .form-col input,
    .form-col select,
    .form-col textarea {
        width: 100%;
        box-sizing: border-box;
    }
    .sidebar {
        width: 13%;       /* È­¸é ºñÀ² ±â¹Ý Ãà¼Ò */
        padding: 8px;     
    }

    .sidebar h2 {
        font-size: 1em;  
        margin-top: 15px;
        padding-top: 10px;
    }

    .sidebar ul li a {
        padding: 5px 0; 
    }
    .progress-steps .step {
        margin-top: 8px; /* »ó´Ü ¿©¹é */
        min-width: 55px; 
        font-size: clamp(11px, 2vw, 11px);
        height: 50px;    
        padding: 2px 2px; 
        box-sizing: border-box;
    }

    .progress-steps .arrow {
        height: 30px;
        padding: 0 1px;
        margin: 0;
    }
    form {
        width: 100%; 
        padding: 12px 10px;       
        border-radius: 8px;       
    }
    .form-col input,
    .form-col select {
        width: 100%;          
        flex: none;           
        height: 30px;         
        padding: 0 8px;       
        font-size: 0.7em;    
    }
}

@media (max-width: 480px) {
    .sidebar {
        width: 8%;
        padding: 6px;
    }
}

/* ============================
   ? ¿Ï·á ¹îÁö(ÀÛ°í, ³ì»ö) ? ÃÖ¼Ò Ãß°¡
   - ¿Ï·áµÈ ´Ü°è(.step--done)¿¡¸¸ ÅÛÇø´¿¡¼­ <span class="step-badge">¿Ï·á</span> ·»´õ
============================ */
/* step ¹Ú½º°¡ ¹èÁö¸¦ À߸®Áö ¾Ê°Ô */
.progress-steps .step{
  position: relative;
  overflow: visible;         /* ¹èÁö ¹ÛÀ¸·Î ³ª¿Ã ¼ö ÀÖ°Ô */
  padding-bottom: 36px;       /* ¹èÁö ÀÚ¸® ÃÖ¼Ò È®º¸(ÇÊ¿ä ½Ã Á¶Á¤) */
}

/* ¿À¸¥ÂÊ ¹Ù±ù¿¡ ¼¼·Î ¸®º»Ã³·³ ºÙ´Â ¹èÁö */
.step-badge-vertical{
  position: absolute;
  top: 50%;
  text-orientation: mixed;         /* ÇѱÛ/¿µ¹® ÀÚ¿¬½º·¯¿î ¼¼·Î Ç¥½Ã */
  background: #198754;             /* ³ì»ö(¿Ï·á) */
  color: #fff;
  font-size: 10px;
  line-height: 1;
  padding: 6px 4px;                /* ¼¼·Î/°¡·Î Æеù(°¡·Î´Â ÀÛ°Ô) */
  border-radius: 6px;              /* µÕ±Ù »ç°¢Çü */
  min-width: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  pointer-events: none;            /* Ŭ¸¯ ¹æÇØ X */
  white-space: nowrap;
}

/* È°¼º/´ë±â »óÅÂ¿ë »ö º¯Çü(¿øÇϸé) */
.step--active .step-badge-vertical { background:#0d6efd; }
.step--todo   .step-badge-vertical { background:#6c757d; }
.step-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: none; /* ÄÚ³Ê ¹Ù±ùÀ¸·Î »ì¦ À̵¿ */
  font-size: 10px;              /* ³»ºÎ ÅؽºÆ® Æø Á¦°Å ¡æ ::before¸¸ º¸ÀÌ°Ô */
  line-height: 1;
  padding: 0px;
  border-radius: 999px;
  background: #198754 !important;  /* ³ì»ö °­Á¦ */
  color: #fff !important;          /* ±ÛÀÚ»ö Èò»ö °­Á¦ */
  display: inline-flex;
  align-items: center;
  gap: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  white-space: nowrap;
  pointer-events: none;   /* Ŭ¸¯ °¡·Î¸·Áö ¾Êµµ·Ï */
}
.progress-steps .step .step-badge::before{
  font-size: 10px;           /* °¡µ¶¼º À¯ÁöÇϸ鼭 ª°Ô */
  font-weight: 700;
  letter-spacing: -0.2px;    /* °¡·ÎÆø »ì¦ ´õ ÁÙÀ̱â */
  margin: 0;
}
@media (max-width: 768px){
  .step-badge-vertical{
    right: -2px;
    font-size: 9px;
    padding: 4px 2px;
  }
@media (max-width: 768px) {
  .step-badge {
    top: 2px;
    right: 2px;
    font-size: 8px;
    padding: 2px 4px;
  }
}