/* =========================================
   ±âº» ·¹À̾ƿô
========================================= */
/* ŸÀÚ ¿¬½À È­¸é ·¡ÇÎ */
.sa-wrap-main{
  width: 962px;
  margin: 0 auto;
  padding: 10px 0px;
  background: #309AAD; /* Àüü ¹è°æ»ö */
  border: 2px solid #0B4D5B;
}

.sa-wrap{
  width: 95%;
  margin: 14px auto 30px;
  font-family: Arial, "Malgun Gothic", sans-serif;
  font-size: 14px;
  color: #222;
}

.sa-card{
  border: 1px solid #d8d8d8;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.sa-card-head{
  padding: 12px 14px;
  background: #f6f7f9;
  border-bottom: 1px solid #e5e7eb;
}

.sa-card-title{
  font-weight: 800;
  font-size: 15px;
}

.sa-badge{
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ffe6e6;
  color: #d40000;
  font-weight: 700;
  font-size: 12px;
}

.sa-grid{
  padding: 12px 14px;
}

/* ÇÑ ÁÙ(row) */
.sa-row{
  display: grid;
  grid-template-columns: 260px 1fr;
  border-top: 1px solid #f0f1f3;
  padding: 10px 0;
}
.sa-row:first-child{ border-top: 0; }

/* ? ¿ÞÂÊ Á¦¸ñ: »ì¦ ¿©¹é + »óÇÏ °¡¿îµ¥ Á¤·Ä */
.sa-label{
  display: flex;
  align-items: center;      /* »óÇÏ °¡¿îµ¥ */
  padding-left: 14px;       /* ¿ÞÂÊ ¿©¹é */
  font-weight: 700;
  color: #333;
}

.sa-field{
  padding-right: 10px;
}

/* ÀԷ·ù */
.sa-input, .sa-select{
  border: 1px solid #cfd5dd;
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
  box-sizing: border-box;
}

.sa-input:focus, .sa-select:focus{
  border-color: #7aa7ff;
}

.sa-input-sm{ width: 90px; }
.sa-input-md{ width: 160px; }
.sa-input-lg{ width: 320px; max-width: 100%; }
.sa-select{ width: 240px; max-width: 100%; }

.sa-highlight{
  background: #99ff66;
}

.sa-help{
  margin-left: 8px;
  color: #666;
  font-size: 12px;
  line-height: 1.4;
  display: inline-block;
}
.sa-note{
  background: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  padding: 10px 12px;
  color: #444;
  font-size: 12px;
  line-height: 1.5;
}

.sa-check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
  user-select: none;
}

.sa-strong{ font-weight: 900; }
.sa-red{ color: #d40000; }

/* =========================================
   ÇÏ´Ü ¹öÆ° ¿µ¿ª(div)
========================================= */
.sa-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.sa-btn{
  border: 1px solid #cfd5dd;
  background: #fff;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 800;
}
.sa-btn:hover{ background: #f7f7f7; }

.sa-btn-primary{
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.sa-btn-primary:hover{ background: #1f56d3; }

.sa-btn-danger{
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.sa-btn-danger:hover{ background: #c81f1f; }

/* =========================================
   ? ½Ã»óµî¼ö 1~5: "¹øÈ£ÀԷ½Ä" 5ÁÙ ¹èÄ¡
   (üũ/ÀÔ·ÂÀ» °¡·Î 3ĭó·³ ºÙ¿©¹ö¸®Áö ¾Ê°í
    1ÁÙ¿¡ ¹øÈ£+üũ+ÀÔ·Â ÇüÅ·Î, ÃÑ 5ÁÙ)
========================================= */
.sa-award-wrap{
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px;
  background: #fcfcfd;
}

.sa-award-row{
  display: grid;
  grid-template-columns: 40px 90px 1fr;
  gap: 10px;
  padding: 8px 6px;
  border-top: 1px solid #f0f1f3;
  align-items: center;
}
.sa-award-row:first-child{ border-top: 0; }

.sa-award-no{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.sa-award-mid{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.sa-award-input .sa-help{
  display: block;
  margin: 6px 0 0 0;
}

/* ¹ÝÀÀÇü(Æø Á¼À» ¶§) */
@media (max-width: 900px){
  .sa-row{
    grid-template-columns: 1fr;
  }
  .sa-label{
    padding-left: 0;
    margin-bottom: 6px;
  }
  .sa-actions{
    justify-content: stretch;
  }
  .sa-btn{
    flex: 1;
  }
  .sa-award-row{
    grid-template-columns: 40px 90px 1fr;
  }
}