/* =========================================================
   대국민장례 긴급접수
   MOBILE FIRST
========================================================= */


:root {

  --navy: #183852;
  --navy-dark: #102a40;
  --navy-light: #edf3f7;

  --text: #202a33;
  --sub: #687681;
  --light: #909aa3;

  --white: #ffffff;
  --background: #f5f7f8;

  --line: #dce4e9;
  --line-dark: #c8d4dc;

  --beige: #f7f3eb;

  --red-soft: #fff3ef;

  --shadow:
    0 8px 28px rgba(26, 50, 69, 0.07);

  --page-width: 520px;

}


/* =========================================================
   기본
========================================================= */


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}


body {

  margin: 0;

  background: var(--background);

  color: var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    "Segoe UI",
    sans-serif;

  word-break: keep-all;

}


button,
input,
textarea {

  font: inherit;

}


button {

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;

}


/* =========================================================
   전체
========================================================= */


.emergency-app {

  width: 100%;

  max-width: var(--page-width);

  min-height: 100vh;

  margin: 0 auto;

  background: white;

}


/* =========================================================
   상단
========================================================= */


.top-header {

  position: sticky;

  top: 0;

  z-index: 100;

  min-height: 66px;

  display: grid;

  grid-template-columns:
    44px
    1fr
    60px;

  align-items: center;

  gap: 8px;

  padding:
    calc(8px + env(safe-area-inset-top))
    14px
    8px;

  border-bottom:
    1px solid var(--line);

  background:
    rgba(255,255,255,.97);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}


.back-button {

  width: 40px;
  height: 40px;

  border:
    1px solid var(--line);

  border-radius: 12px;

  background: white;

  color: var(--navy);

  font-size: 25px;

  line-height: 1;

  font-weight: 500;

}


.header-title {

  min-width: 0;

}


.header-title strong {

  display: block;

  color: var(--text);

  font-size: 15px;

  font-weight: 900;

}


.header-title small {

  display: block;

  margin-top: 1px;

  color: var(--sub);

  font-size: 10px;

  font-weight: 700;

}


.home-button {

  min-height: 39px;

  border:
    1px solid var(--line-dark);

  border-radius: 11px;

  background: white;

  color: var(--navy);

  font-size: 12px;

  font-weight: 900;

}


/* =========================================================
   메인
========================================================= */


.emergency-main {

  padding:
    28px
    17px
    calc(55px + env(safe-area-inset-bottom));

}


/* =========================================================
   첫 안내
========================================================= */


.intro-section {

  margin-bottom: 30px;

}


.intro-badge {

  display: inline-flex;

  min-height: 31px;

  align-items: center;

  padding:
    5px
    11px;

  border-radius: 999px;

  background: var(--navy-light);

  color: var(--navy);

  font-size: 11px;

  font-weight: 900;

}


.intro-section h1 {

  margin:
    14px
    0
    9px;

  color: var(--text);

  font-size: 28px;

  line-height: 1.32;

  letter-spacing: -0.045em;

  font-weight: 900;

}


.intro-section > p {

  margin: 0;

  color: var(--sub);

  font-size: 14px;

  line-height: 1.7;

}


.intro-notice {

  margin-top: 18px;

  padding:
    14px
    15px;

  border-radius: 14px;

  background: var(--beige);

  color: #58636c;

  font-size: 11px;

  line-height: 1.65;

}


/* =========================================================
   폼 구역
========================================================= */


.form-section {

  padding:
    24px
    0;

  border-top:
    1px solid var(--line);

}


.section-heading {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  margin-bottom: 17px;

}


.step-number {

  width: 27px;
  height: 27px;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  border-radius: 9px;

  background: var(--navy);

  color: white;

  font-size: 12px;

  font-weight: 900;

}


.section-heading strong {

  display: block;

  color: var(--text);

  font-size: 15px;

  font-weight: 900;

}


.section-heading small {

  display: block;

  margin-top: 2px;

  color: var(--sub);

  font-size: 11px;

  line-height: 1.45;

}


/* =========================================================
   상황 선택
========================================================= */


.situation-grid {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 8px;

}


.select-card {

  position: relative;

  min-height: 83px;

  display: flex;

  align-items: center;

  padding:
    13px;

  border:
    1px solid var(--line);

  border-radius: 15px;

  background: white;

  cursor: pointer;

}


.select-card.full-card {

  grid-column:
    1 / -1;

  min-height: 67px;

}


.select-card input {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}


.select-card span {

  display: flex;

  flex-direction: column;

}


.select-card strong {

  color: var(--navy);

  font-size: 13px;

  font-weight: 900;

}


.select-card small {

  margin-top: 3px;

  color: var(--sub);

  font-size: 10px;

  line-height: 1.45;

}


.select-card:has(input:checked) {

  border-color: var(--navy);

  background: var(--navy-light);

  box-shadow:
    inset 0 0 0 1px var(--navy);

}


/* =========================================================
   입력
========================================================= */


.input-group {

  margin-bottom: 17px;

}


.input-group:last-child {

  margin-bottom: 0;

}


.input-group label {

  display: block;

  margin-bottom: 7px;

  color: var(--text);

  font-size: 12px;

  font-weight: 900;

}


.input-group label em {

  margin-left: 4px;

  color: var(--light);

  font-size: 10px;

  font-style: normal;

  font-weight: 700;

}


.input-group input,
.input-group textarea {

  width: 100%;

  border:
    1px solid var(--line-dark);

  border-radius: 13px;

  outline: none;

  background: white;

  color: var(--text);

  font-size: 14px;

}


.input-group input {

  height: 50px;

  padding:
    0
    13px;

}


.input-group textarea {

  min-height: 115px;

  padding: 12px 13px;

  resize: vertical;

  line-height: 1.65;

}


.input-group input:focus,
.input-group textarea:focus {

  border-color: var(--navy);

  box-shadow:
    0 0 0 3px
    rgba(24,56,82,.08);

}


.input-group input::placeholder,
.input-group textarea::placeholder {

  color: #a1aab2;

}


.input-help {

  display: block;

  margin:
    6px
    2px
    0;

  color: var(--light);

  font-size: 10px;

  line-height: 1.5;

}


/* =========================================================
   장례식장 여부
========================================================= */


.hall-choice {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 8px;

}


.choice-button {

  position: relative;

  min-height: 50px;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    1px solid var(--line);

  border-radius: 13px;

  background: white;

  color: var(--navy);

  cursor: pointer;

}


.choice-button input {

  position: absolute;

  opacity: 0;

}


.choice-button span {

  font-size: 12px;

  font-weight: 900;

}


.choice-button:has(input:checked) {

  border-color: var(--navy);

  background: var(--navy);

  color: white;

}


.hall-name-area {

  margin-top: 15px;

}


/* =========================================================
   글자수
========================================================= */


.character-count {

  margin-top: 5px;

  color: var(--light);

  text-align: right;

  font-size: 10px;

}


/* =========================================================
   동의
========================================================= */


.agreement-section {

  padding:
    20px
    0;

  border-top:
    1px solid var(--line);

}


.agreement-row {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  cursor: pointer;

}


.agreement-row input {

  width: 19px;
  height: 19px;

  flex-shrink: 0;

  margin-top: 2px;

  accent-color: var(--navy);

}


.agreement-row span {

  flex: 1;

}


.agreement-row strong {

  display: block;

  color: var(--text);

  font-size: 12px;

  font-weight: 900;

}


.agreement-row small {

  display: block;

  margin-top: 4px;

  color: var(--sub);

  font-size: 10px;

  line-height: 1.55;

}


/* =========================================================
   최종 안내
========================================================= */


.final-notice {

  padding:
    14px
    15px;

  border:
    1px solid var(--line);

  border-radius: 14px;

  background: #f8fafb;

}


.final-notice strong {

  color: var(--navy);

  font-size: 11px;

  font-weight: 900;

}


.final-notice p {

  margin:
    5px
    0
    0;

  color: var(--sub);

  font-size: 10px;

  line-height: 1.6;

}


/* =========================================================
   접수 버튼
========================================================= */


.submit-button {

  width: 100%;

  min-height: 54px;

  margin-top: 19px;

  border: 0;

  border-radius: 15px;

  background: var(--navy);

  color: white;

  font-size: 14px;

  font-weight: 900;

}


.submit-button:disabled {

  background: #a8b6c0;

  color: #f1f4f6;

  cursor: default;

}


.submit-help {

  margin:
    7px
    0
    0;

  color: var(--light);

  text-align: center;

  font-size: 9px;

}


/* =========================================================
   완료 팝업
========================================================= */


.success-overlay {

  position: fixed;

  inset: 0;

  z-index: 1000;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 20px;

  background:
    rgba(20,30,40,.55);

}


.success-overlay[hidden] {

  display: none;

}


.success-card {

  width:
    min(100%, 390px);

  padding:
    29px
    21px;

  border-radius: 22px;

  background: white;

  text-align: center;

  box-shadow:
    0 20px 60px
    rgba(0,0,0,.16);

}


.success-check {

  width: 55px;
  height: 55px;

  display: grid;

  place-items: center;

  margin:
    0
    auto
    11px;

  border-radius: 50%;

  background: var(--navy-light);

  color: var(--navy);

  font-size: 24px;

  font-weight: 900;

}


.success-label {

  color: var(--navy);

  font-size: 10px;

  font-weight: 900;

}


.success-card h2 {

  margin:
    5px
    0
    8px;

  font-size: 20px;

}


.success-card > p {

  margin: 0;

  color: var(--sub);

  font-size: 12px;

  line-height: 1.7;

}


.success-summary {

  margin-top: 18px;

  padding:
    13px
    14px;

  border-radius: 13px;

  background: #f6f8fa;

  text-align: left;

}


.success-summary div {

  display: flex;

  justify-content: space-between;

  gap: 20px;

}


.success-summary div + div {

  margin-top: 8px;

}


.success-summary span {

  color: var(--sub);

  font-size: 10px;

}


.success-summary strong {

  color: var(--text);

  font-size: 11px;

}


.success-main-button {

  width: 100%;

  min-height: 48px;

  margin-top: 19px;

  border: 0;

  border-radius: 13px;

  background: var(--navy);

  color: white;

  font-size: 13px;

  font-weight: 900;

}


/* =========================================================
   PC
========================================================= */


@media (min-width: 521px) {

  .emergency-app {

    box-shadow:
      0 0 35px
      rgba(25,50,70,.06);

  }

}


/* =========================================================
   작은 모바일
========================================================= */


@media (max-width: 360px) {

  .emergency-main {

    padding-left: 13px;

    padding-right: 13px;

  }


  .intro-section h1 {

    font-size: 26px;

  }


  .situation-grid {

    grid-template-columns: 1fr;

  }


  .select-card.full-card {

    grid-column: auto;

  }

}