:root {
   --a-base-font-family: 'Nanum Gothic', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

   --blue-50: #EBF3FF;
   --blue-100: #D6E6FF;
   --blue-200: #C7DFFF;
   --blue-350: #66A3FF; 
   --blue-400: #4B92FF;
   --blue-500: #428BFF;
   --blue-600: #2D7FFF;
   
   --green-50: #EBFAEE;
   --green-100: #D7F4DC;
   --green-200: #C2F2C9;
   --green-350: #2BA530;
   --green-400: #0B9410;
   --green-500: #008A05;
   --green-600: #007304;

   --yellow-50: #FFF3D6;
   --yellow-100: #FFE7AD;
   --yellow-200: #FFDB85;
   --yellow-350: #D19000;
   --yellow-400: #BC7E00;
   --yellow-500: #B37800;
   --yellow-600: #8A5D00;

   --yellow-light-50: #FFF1DB;
   --yellow-light-100: #FFE4BC;
   --yellow-light-200: #FFD896;
   --yellow-light-350: #FFB833;
   --yellow-light-400: #F7A500;
   --yellow-light-500: #F5A300;
   --yellow-light-600: #CC8800;

   --gray-50: #F7F7F7;
   --gray-100: #EBEBEB;
   --gray-200: #D6D6D6;
   --gray-350: #A1A1A1;
   --gray-400: #8F8F8F;
   --gray-500: #858585;
   --gray-600: #666666;

   --black-50: #F2F2F2;
   --black-100: #E6E6E6;
   --black-200: #CCCCCC;
   --black-350: #595959;
   --black-400: #404040;
   --black-500: #333333;
   --black-600: #000000;

   --redwood-50: #FCE9E7;
   --redwood-100: #F8D3CF;
   --redwood-200: #F4BDB7;
   --redwood-350: #E15F4E;
   --redwood-400: #CD4B39;
   --redwood-500: #C74634;
   --redwood-600: #A93B2C;

   --ct-html5-50: #FCE9E6;
   --ct-html5-500: #E4512B;
   --ct-bootstrap-50: #F2EBF7;
   --ct-bootstrap-500: #7A4DB1;
}

.t-Header-branding {
    background-color: whitesmoke;
    color: #83cd50;
}

.ct-badge-blue {
  background-color: var(--blue-50);
  color: var(--blue-500);
}

.ct-badge-blue-light {
  background-color: var(--blue-50);
  color: var(--blue-350);
}

.ct-badge-green {
  background-color: var(--green-50);
  color: var(--green-500);
}

.ct-badge-green-light {
  background-color: var(--green-50);
  color: #83cd50;
}

.ct-badge-yellow {
  background-color: var(--yellow-50);
  color: var(--yellow-500);
}

.ct-badge-yellow-light {
  background-color: var(--yellow-light-50);
  color: var(--yellow-light-500);
}

.ct-badge-gray {
  background-color: var(--gray-50);
  color: var(--gray-600);
}

.ct-badge-redwood {
  background-color: var(--redwood-50);
  color: var(--redwood-500);
}

.ct-badge-bootstrap {
  background-color: var(--ct-bootstrap-50);
  color: var(--ct-bootstrap-500);
}

/* Fix Body Size */
body {
  max-width: 768px;
  margin: 0 auto;
  background-color: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* No Container Padding */
.t-Body-contentInner .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden;
}

.t-Body-contentInner {
  padding: 0 !important;
  margin: 0 !important;
}

/* GNB */
#SID_GNB {
    height: 48px;
    background: white;
    padding: 28px 10px;
    display: flex;
    align-items: center;
}

#SID_GNB .header-container {
    display: grid;
    grid-template-columns: minmax(40px, auto) 1fr minmax(40px, auto);
    align-items: center;
    width: 100%;
}

#SID_GNB .t-Button {
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

#SID_GNB .t-Button:first-child {
    justify-self: start;
}

#SID_GNB .t-Button:last-child {
    justify-self: end;
}

#SID_GNB .fa {
    font-size: 20px;
    color: #374151;
}

#SID_GNB .header-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: center;
    margin: 0;
    grid-column: 2;
}

/* Info Box */
.ct-info-container {
    border-radius: 8px;
    padding: 16px 20px 8px 20px; /* top 16px, right 20px, bottom 8px, left 20px */
}


.ct-info-header {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.ct-info-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-info-icon::before {
    content: "!";
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.ct-info-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    line-height: 20px;
}

.ct-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 1px;
}

.ct-info-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    line-height: 1.5;
    font-size: 14px;
}

.ct-info-list li::before {
    content: "•";
    position: absolute;
    left: 2px;
}

#SID_INFO_NORMAL {
    background: var(--black-50);
}

#SID_INFO_NORMAL .ct-info-icon {
    background: var(--black-350);
}

#SID_INFO_NORMAL .ct-info-title {
    color: var(--black-600);
}

#SID_INFO_NORMAL .ct-info-list li,
#SID_INFO_NORMAL .ct-info-list li::before {
    color: var(--black-350);
}

#SID_INFO_WARNING {
    background: var(--blue-50);
}

#SID_INFO_WARNING .ct-info-icon {
    background: var(--blue-350);
}

#SID_INFO_WARNING .ct-info-title {
    color: var(--blue-600);
}

#SID_INFO_WARNING .ct-info-list li,
#SID_INFO_WARNING .ct-info-list li::before {
    color: var(--blue-400);
}

#SID_INFO_DANGER {
    background: var(--redwood-50);
}

#SID_INFO_DANGER .ct-info-icon {
    background: var(--redwood-350);
}

#SID_INFO_DANGER .ct-info-title {
    color: var(--redwood-600);
}

#SID_INFO_DANGER .ct-info-list li,
#SID_INFO_DANGER .ct-info-list li::before {
    color: var(--redwood-400);
}

/* Select Box */
.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:checked + label,
.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc label:hover,
.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:focus + label {
    background-color: transparent;
    outline: 2px solid var(--ut-palette-primary);
    outline-offset: -2px;
    color: var(--ut-palette-primary);
}