body {margin: 0;padding: 0;background-color: #fff;font-family: 'Noto Sans KR', sans-serif;color: #333;}
  .container {max-width: 560px;width: 100%;height: auto; min-height: 100vh;
margin: 0 auto;padding: 30px 20px;box-sizing: border-box;background-color: #fff; position: relative;}
  .header_title {font-size: 2rem;font-weight: bold;text-align: center;margin: 24px 0;color: #333;}
  /* .header-title span {
    font-size: 2rem;
  } */

  .d_location {font-size: 1.4rem;font-weight: 700;text-align: center;margin-bottom: 24px;}

/* 공지 */
    .notice-bar {display: flex;align-items: center;height: 50px;background-color: #fff3cd;border: 1px solid #ffeeba;border-radius: 6px;padding: 0 12px;margin-bottom: 12px;overflow: hidden;}
   .notice-title {
  font-weight: bold;
  color: #856404;
  white-space: nowrap;
  flex-shrink: 0;
  width: 50px;
  text-align: center;
  background: #fff;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #dfce9c;
}

.notice-scroll-wrapper {
  overflow: hidden;
  flex: 1;
  position: relative;
}

.notice-text {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
  color: #856404;
  font-size: 0.95rem;
}

.notice-text #spanid1 {margin-left:150px;}
.notice-text #spanid2 {margin-left:150px;}
.notice-text #spanid3 {margin-left:150px;}
.notice-text #spanid4 {margin-left:150px;}

    @keyframes marquee {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
    }



  /* 버튼 */
  .main_button, .btn-direct-register, .sub_button, .sub_button2, .btn-close {display: block;text-decoration: none;}
  .main_button {background-color: #FE5454;  /*d32f2f*/ color: #fff; font-size: 1.5rem; font-weight: bold; padding: 120px 20px 20px; border-radius: 12px; width: 100%; margin-bottom: 24px; text-align: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); box-sizing: border-box; position: relative;}
  .main_button::before {position: absolute; display: block; content: ""; width: 80px;height: 80px;background: url(../images/icon_01.png) no-repeat center; left: 50%; transform: translateX(-50%); top: 30px;}

  .btn-direct-register { background-color: #FE5454;color: #fff;font-size: 1.5rem;font-weight: bold;padding: 14px 20px;min-width: 100%;border-radius: 12px;width: 100%;margin-bottom: 24px;text-align: center;box-sizing: border-box;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);position: relative; transition: all .3s;}
  .btn-direct-register:active { transform: scale(0.97); }

  .btn-close {background-color: #FE5454;color: #fff;font-size: 1.3rem;font-weight: bold;padding: 14px 20px;border-radius: 12px;width: 50%;margin: 30px auto;text-align: center;box-sizing: border-box;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);position: relative; transition: all .3s;}

  .sub_button_group {display: flex;justify-content: space-between;gap: 8px;margin-bottom: 32px;}
  .sub_button {background-color: #017AF1;color: #fff;font-size: 1.1rem;font-weight: bold;border: 1px solid #EAEFF2;border-radius: 8px;width: 50%;min-height: 150px; /* 고정 높이 지정 */text-align: center;padding: 20px 12px; /* 좌우 패딩만 */box-sizing: border-box;word-break: keep-all;position: relative;display: block;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.062);}
  .sub_button.report{background-color: #515355;}
  .sub_button.report span {font-size: 0.8rem; bottom: 25px; font-weight: 800;}
  
  /* 추가 - 버튼3개리스트 */
  .sub_button_group2 {display: flex;justify-content: space-between;gap: 8px;margin-bottom: 32px;}
  .sub_button2 {background-color: #017AF1;color: #fff;font-size: 1.1rem;font-weight: bold;border: 1px solid #EAEFF2;border-radius: 8px;width: 33.3%;min-height: 150px; /* 고정 높이 지정 */text-align: center;padding: 20px 12px; /* 좌우 패딩만 */box-sizing: border-box;word-break: keep-all;position: relative;display: block;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.062);}
  .sub_button2.report{background-color: #f1a401;}
  .sub_button2.info_btn{background-color: #515355;}
  .sub_button2.report span {font-size: 0.8rem; bottom: 25px; font-weight: 800;}

  /* 하단문구 */
  .warning {text-align: center;font-size: 0.8rem;color: #999;margin-bottom: 10px;}
  .phone_num {text-align: center; font-size: 0.8rem; font-weight: 700; margin-bottom: 10px;}


/* 테이블 */
    .table_title {font-weight: bold;margin: 16px 0 8px;font-size: 1rem;color: #444;text-align: center;}
    table {width: 100%;border-collapse: collapse;background: #fff;margin-bottom: 24px;}
    th {padding: 12px 8px;text-align: center;border-top: 1px solid #EAEFF2;font-size: 0.8rem;background-color: #F7F9FB;}
    td {padding: 12px 8px;text-align: center;border-top: 1px solid #EAEFF2;border-bottom: 1px solid #EAEFF2;font-size: 0.8rem;}
    tbody tr:hover {background-color: #f1f1f1;cursor: pointer;}
    /* 상태값에 따라 색상 포인트 */
    td.status {font-weight: bold;}
    /* td.status::before  {
      content: '● ';
      margin-right: 4px;
    } */
    .status_received::before { color: green; }
    .status_processing::before { color: orange; }
    td.status .status_text {padding: 2px 5px; border-radius: 15px;}
    td.status .status_text.text_received {background: #E9FAE9; color: #208f16;}
    td.status .status_text.text_processing {background: #FEF3D9; color: #d17b11;}

    .question {font-size: 1rem;text-align: center;margin: 16px 0 8px;font-weight: 500;}
    .button_group {display: flex;justify-content: space-between;gap: 12px;}
    .decision_button {flex: 1;background-color: #ffffff;color: #333;padding: 14px;text-align: center;border: 1px solid #ccc;border-radius: 8px;text-decoration: none;font-weight: bold;}

    /* 고장유형 선택 */
    .mode_wrap {background-color: #fff; margin-bottom: 30px;}
    .mode_wrap .mode_title {text-align: center; font-size: 1.4rem; font-weight: 700; color: #333536; padding: 5px 0; border-radius: 5px; margin: 0 auto 15px; position: relative; width: 190px;}
    .mode_wrap .mode_title::before {position: absolute; display: block; content: "!"; color: #fff; width: 20px; height: 20px; border-radius: 50%; background-color: #f3b329; text-align: center; font-size: 0.8rem; left: 0; top: 51%; transform: translateY(-50%);}
    .mode_wrap ul.mode_box {display: flex; flex-wrap: wrap; justify-content: space-between; position: relative;}
    .mode_wrap ul.mode_box li {width: 48%; height: 120px; background: #36A0FF; margin-bottom: 15px; border-radius: 5px; position: relative;}
    .mode_wrap ul.mode_box li:last-child {margin-bottom: 0px;}
    .mode_wrap ul.mode_box li a {display: block; width: 100%; height: 100%;}
    .mode_wrap ul.mode_box li img {position: absolute; top: 15px; left: 20px; width: 55px;}
    .mode_wrap ul.mode_box li span {position: absolute; font-size: 1.4rem; font-weight: bold; color: #13385e; right: 20px; bottom: 20px;}

    /* 고장유형2 선택 */
    .mode_wrap2 {background-color: #fff; margin-bottom: 30px;}
    .mode_wrap2 .mode_title {text-align: center; font-size: 1.4rem; font-weight: 700; color: #333536; padding: 5px 0; border-radius: 5px; margin: 0 auto 15px; position: relative; width: 190px;}
    .mode_wrap2 .mode_title::before {position: absolute; display: block; content: "!"; color: #fff; width: 20px; height: 20px; border-radius: 50%; background-color: #f3b329; text-align: center; font-size: 0.8rem; left: 0; top: 51%; transform: translateY(-50%);}
    .mode_wrap2 ul.mode_box {display: flex; flex-wrap: wrap; justify-content: space-between; position: relative;}
    .mode_wrap2 ul.mode_box li {width: 60%; height: 70px; background: #cbdceb; margin: 0 auto 15px; border-radius: 10px; position: relative;overflow: hidden;}
    .mode_wrap2 ul.mode_box li:last-child {margin-bottom: 0px;}
    .mode_wrap2 ul.mode_box li a {display: block; width: 100%; height: 100%;}
    .mode_wrap2 ul.mode_box li img {position: absolute; top: 15px; left: 20px; width: 40px;}
    .mode_wrap2 ul.mode_box li span {position: absolute; font-size: 1.4rem; font-weight: bold; color: #13385e; right: 20px; bottom: 20px;}

   /* 고장유형2 다중선택 */
    .mode_wrap2 ul.mode_box li a.select-item.selected {background-color: #1976d2;color: #fff;}
    .mode_wrap2 ul.mode_box li a.select-item.selected span {color: #fff;}


     /* QR 인식 */
    .qr_wrap {background-color: #fff;margin-bottom: 40px;}
    .qr_box {width: 100%; height: 250px; background-color: #e0e0e0;display: flex;justify-content: center;align-items: center;color: #666;margin-bottom: 12px;}
    .upload-info {font-size: 0.9rem;color: #333;margin-bottom: 6px;}
    .upload-summary {font-size: 0.85rem;color: #666;margin-bottom: 12px;}
    textarea {width: calc(100% - 20px); height: 70px; padding:10px 10px;font-size: 0.95rem;border: 1px solid #ccc;border-radius: 6px;resize: none;}

    .btn-delete {padding: 5px; display: inline-block;background-color:#444749; color:#fff;}

    /* 접수완료안내 */
    .info_wrap {text-align: center; font-size: 1.1rem; font-weight: 600;}
    .info_wrap img {width: 80px; margin: 80px 0 50px}

    /* 처리결과 회신 */
    .person_wrap {margin-bottom: 30px;}
    .person_wrap h3 {font-size: 1.1rem; margin-bottom: 10px;color: #292727; font-weight: 500; text-align: center; background-color: #cbdceb; border-radius: 5px;}
    .person_wrap .select_box { border: 1px solid #cbdceb; border-radius: 15px; padding: 20px;}
    .person_wrap p {font-size: 0.95rem;margin-bottom: 12px;color: #444;}
    .radio-option {margin-bottom: 8px;font-size: 0.95rem;color: #333;}

    /* 휴대폰 본인인증 */
    .section-question {font-size: 1rem;}
    .phone-inputs {display: flex;gap: 8px;margin: 20px 0;}
    .phone-inputs input {flex: 1;padding: 8px;font-size: 0.95rem;border: 1px solid #ccc;border-radius: 4px;text-align: center;width: 100%;}
    .cert-button {display: block;width: 100%;padding: 10px;font-size: 1rem;background-color: #1976d2;color: white;border: none;border-radius: 6px;cursor: pointer;}
  
  /* 신고 새창 페이지 */
  .reportpage_wrap {background: #fff;padding: 0 16px 16px 16px;border-radius: 6px;font-size: 0.95rem;color: #333;line-height: 1.5;}
  .report-section {margin-bottom: 16px;}
  .report-section h3 {font-size: 1.05rem;margin: 0 0 8px;color: #222;background: #dce5f3;}
  .report-section ul {padding: 0;margin: 0;list-style: none;}
  .report-section ul li {margin-bottom: 6px;}
  .report-section a {color: #017af1;text-decoration: underline;}
  .reportpage_wrap table {width: 100%;border-collapse: collapse;margin-top: 12px;}
  .reportpage_wrap th {background: #f0f0f0;border: 1px solid #ccc;padding: 8px;font-weight: bold;font-size: 0.9rem;}
  .reportpage_wrap td {border: 1px solid #ccc;padding: 8px;font-size: 0.9rem;text-align: center;}
  .reportpage_wrap tbody tr:nth-child(even) {background: #fafafa;}


    .footer {position: absolute; bottom: 0; width: 90%;}
        /* 페이지이동버튼 */
    .footer .page_move {margin-bottom: 20px; display: flex; justify-content: space-between;}
    .footer .page_move a {width: 100%; padding: 15px 0;  background-color: #13385e; display: block; color: #fff; text-align: center; font-size: 1.1rem;}
    .footer .page_move.page_pn a {width: 49%; padding: 15px 0; background-color: #13385e; display: block; color: #fff; text-align: center; font-size: 1.1rem;}
    .footer .page_move.page_pn a:first-child {background-color: #444749;}

/* 로딩페이지 */
    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,0.95);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      /* display: none; */
    }
    .loading-text {
      font-size: 1.2em;
      color: #333;
      margin-bottom: 20px;
    }
    .spinner {
      width: 50px;
      height: 50px;
      border: 6px solid #ccc;
      border-top: 6px solid #007BFF;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }

    @media (max-width: 768px) {

    }
    @media (max-width: 480px) {
        .header_title {font-size: 1.4rem;font-weight: bold;text-align: center;margin-bottom: 10px;color: #333;}
        .main_button {font-size: 1.2rem;padding: 95px 20px 20px; margin-bottom: 24px;}
        .main_button::before {width: 60px;height: 60px; top: 25px; background-size: 60px;}
        .sub_button {font-size: 0.9rem;min-height: 120px; /* 고정 높이 지정 */}
        .sub_button2 {font-size: 0.9rem;min-height: 120px; /* 고정 높이 지정 */padding: 20px 5px;}
        .d_location {font-size: 1rem;margin-bottom: 10px;}

          /* 고장유형 선택 */
        .mode_wrap ul.mode_box li img {position: absolute; top: 15px; left: 20px; width: 50px;}
        .mode_wrap ul.mode_box li span {font-size: 1rem; right: 15px; bottom: 10px;}

            /* 접수완료안내 */
        .info_wrap {font-size: 0.9rem;}
        .info_wrap img {margin: 50px 0 50px}

        /* 버튼 */
          .btn-close {font-size: 1.2rem; padding: 8px 20px; width: 40%;}
    }
        @media (max-width: 370px) {
           .sub_button2 {font-size: 0.8rem;}
          .sub_button2 span {font-size: 0.7rem;}
        }