@charset 'utf-8';

  /* °øÅë ÆĶõ»ö */
  :root { 
     --main-blue: #1a93d1; 
     --sub-blue: #f9708c;
	 --button-radius: 6px;
  
  }
  
  html, body {
   height: 100%;
   margin: 0;
  }

  #wrap {
   display: flex;
   flex-direction: column;
   height: 100%;
   /* wrap paddingÀ¸·Î safe-area È®º¸ */
   box-sizing: border-box;
  }

  #container {
   flex: 1;
   overflow: auto;
   background: #eee;
   padding: 16px 0;
   padding-bottom: 32px;  
   background: #f2f4f8;
   box-sizing: border-box;
  }

  #container.pay-bottom {
    padding-bottom: 64px;
  }

  #container.bill-bottom {
    padding-bottom: 80px;
  }

  #container.notice-bottom {
    padding-bottom: 80px;
  }
 
 /* header */
  #header { position: relative;z-index:30;top:0;left:0;width: 100%;height:48px;background: #fff; }
  #header .logo_left {position:absolute;width:90px;left:20px;top:13px auto 0;}
  #header .logo_center {position:absolute;width:120px;top:13px;left:50%;transform: translateX(-50%);}
  #header .tit{display:block;font-size:16px;font-weight:normal;line-height:48px;text-align:center}

  /* Çì´õ fixed Àü¿ë */
  #header.is-fixed{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
	height:48px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    z-index: 100;
  }
  
  #header [class^="btn_"]{
   position:absolute;
   top:0;
   width:50px;
   height:50px;
   background-repeat:no-repeat;
   background-position:50% 50%;
   background-size:20px;
  }

  #header .btn_back{
    left:10px;
    background-image:url(../ace-img/icon/ico_back.png);
  }

  #header .btn_setting{
    left:10px;
    background-image:url(../ace-img/icon/ico_set_off.png);
  }

  #header .btn_close{
    right:10px;
    background-image:url(../ace-img/icon/ico_close.png);
  }

  #header .btn_menu{
    right:10px;
    background-image:url(../ace-img/icon/ico_menu.png);
  }

  #header .btn_alarm{
    right:10px;
    background-image:url(../ace-img/icon/ico_alarm.png);
  }

  #header .btn_home{
    right:50px;
    background-image:url(../ace-img/icon/ico_house1_off.png);
  }

  .alarm_num{position:absolute;top:7px;right:7px;width:16px;height:16px;color:#fff;font-size:9px;font-family:'Arial';line-height:16px;letter-spacing:0;text-align:center;border-radius:50%;background:#ea002c}

  
  
  /* Footer */
  .footer {
   padding: 16px 24px;
   font-size: 14px;
   height:auto;
   color: #555;
   border-top: 1px solid #eee;
   background: #fafafa;
    /* safe-area ȣȯ: ÃֽŠenv() + ±¸Çü constant() + ±âº» 0 */
   line-height: 1.5;
  }

  .footer-info p {
   margin: 4px 0;
  }

  .footer a {
   color: #555;
   margin: 0 4px;
   text-decoration: none;
  }

  .footer a:hover { color: #1e73be; }


  /* step-header */
 .step-header-wrapper {
  width: 100%;
 }

 .step-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* »ó´Ü Á¤·Ä */
    max-width: 100%;
    margin: 40px auto 0 auto;
    padding: 0 20px;
    gap: 20px;
  }

 .step-text {
   font-size: 20px;
   line-height:28px;
   color: #333;
   flex: 1; /* °ø°£ Â÷Áö */
   word-break: break-word; /* ÁÙ¹Ù²Þ Çã¿ë */
  }

  /* ´Ü°è ¿ø */
 .step-dots {
   display: flex;
   gap: 8px;
   flex-shrink: 0; /* ÁÙ¾îµéÁö ¾ÊÀ½ */
  }

 .step-dots span {
   display: block;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background-color: #ccc;
  }

  .step-dots span.active {
   background-color: var(--main-blue);;
  }

  /* ¸ð¹ÙÀÏ ´ëÀÀ */
  @media (max-width: 480px) {
   .step-header {
    padding: 0 16px;
   }
   .step-text {
    font-size: 15px;
   }
  .step-dots span {
    width: 10px;
    height: 10px;
  }
}

.vertical-spacing10 { position: relative; height: 10px; /* ¼½¼Ç °£ °£°Ý */ }
.vertical-spacing16 { position: relative; height: 16px; /* ¼½¼Ç °£ °£°Ý */ }
.vertical-spacing20 { position: relative; height: 20px; /* ¼½¼Ç °£ °£°Ý */ }
.vertical-spacing30 { position: relative; height: 30px; /* ¼½¼Ç °£ °£°Ý */ }
.vertical-spacing40 { position: relative; height: 40px; /* ¼½¼Ç °£ °£°Ý */ }
.vertical-spacing48 { position: relative; height: 40px; /* ¼½¼Ç °£ °£°Ý */ }
.vertical-spacing50 { position: relative; height: 50px; /* ¼½¼Ç °£ °£°Ý */ }
.vertical-spacing60 { position: relative; height: 60px; /* ¼½¼Ç °£ °£°Ý */ }
.vertical-spacing70 { position: relative; height: 70px; /* ¼½¼Ç °£ °£°Ý */ }