/* =========================================================
   대국민장례 AI 장례안내 BETA
   MOBILE FIRST
========================================================= */


:root {

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

  --navy-light: #edf3f7;

  --text: #202a33;
  --sub: #687681;
  --light-text: #8d98a1;

  --white: #ffffff;

  --background: #f5f7f8;

  --line: #dce4e9;
  --line-dark: #cbd6dd;

  --beige: #f7f3eb;

  --warning: #fff3ef;

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

  --page-width: 520px;

}

/* 새 장례식장·예상비용 페이지 연결 */
.hall-entry-link { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin:0 0 15px; padding:16px; background:var(--navy-light); color:var(--navy); border:1px solid var(--line); border-radius:12px; text-decoration:none; }
.hall-entry-link strong { display:block; font-size:13px; }
.hall-entry-link small { display:block; margin-top:5px; font-size:10px; color:var(--sub); line-height:1.6; }
.hall-entry-link:focus-visible { outline:3px solid #5296bd; outline-offset:3px; }
.service-explore-section{margin-top:34px;padding-top:27px;border-top:1px solid var(--line)}
.service-explore-heading{display:grid;gap:4px;margin-bottom:14px}.service-explore-heading strong{color:var(--text);font-size:16px;font-weight:900}.service-explore-heading span{color:var(--sub);font-size:12px;line-height:1.55}
.service-explore-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.service-explore-card{display:flex;min-width:0;min-height:126px;margin:0;padding:15px;flex-direction:column;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;color:var(--navy);text-align:left;text-decoration:none;box-shadow:0 5px 16px rgba(26,50,69,.045)}.service-explore-card strong{font-size:14px;line-height:1.35}.service-explore-card small{margin-top:7px;color:var(--sub);font-size:11px;line-height:1.5}.service-explore-card b{margin-top:auto;padding-top:10px;color:#386657;font-size:11px}.service-explore-card.is-wide{grid-column:1/-1;min-height:100px}.service-explore-card:focus-visible{outline:3px solid #5296bd;outline-offset:2px}
@media(max-width:360px){.service-explore-card{min-height:132px;padding:13px}.service-explore-card strong{font-size:13px}}


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


* {
  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;

  overflow-wrap: break-word;

}


button,
textarea {

  font: inherit;

}


button {

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;

}


.is-hidden {

  display: none !important;

}



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


.app {

  width: 100%;

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

  min-height: 100vh;

  margin: 0 auto;

  background: var(--white);

}



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


.top-header {

  position: fixed;

  top: 0;
  left: 50%;

  transform:
    translateX(-50%);

  z-index: 100;

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

  min-height: 68px;

  display: flex;

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

  padding:
    calc(9px + env(safe-area-inset-top))
    15px
    9px;

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

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

  backdrop-filter:
    blur(12px);

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

}



/* 브랜드 */

.header-home-button {

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 0;

  border: 0;

  background: transparent;

  text-align: left;

  color: var(--text);

}


.header-logo {

  width: 39px;
  height: 39px;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  border-radius: 12px;

  background: var(--navy);

  color: white;

  font-size: 16px;

  font-weight: 900;

}


.header-brand-text {

  display: flex;

  flex-direction: column;

  line-height: 1.25;

}


.header-brand-text strong {

  font-size: 15px;

  font-weight: 900;

}


.header-brand-text small {

  margin-top: 2px;

  color: var(--sub);

  font-size: 10px;

  font-weight: 700;

}



.main-header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}

.main-header-actions a {
  min-height: 39px;
  display: inline-grid;
  place-items: center;
  padding: 0 11px;
  border: 1px solid var(--line-dark);
  border-radius: 11px;
  background: white;
  color: var(--navy);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.main-header-actions a:hover { background: var(--navy-light); }
.main-header-actions a:focus-visible { outline: 3px solid #5296bd; outline-offset: 2px; }
.header-label-short { display: none; }



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


.chat-main {

  min-height: 100vh;

  padding:
    calc(95px + env(safe-area-inset-top))
    17px
    45px;

}



/* =========================================================
   첫 화면
========================================================= */


.intro-section {

  padding-top: 7px;

}


.intro-badge {

  display: inline-flex;

  align-items: center;

  min-height: 31px;

  padding:
    5px
    11px;

  margin-bottom: 15px;

  border-radius: 999px;

  background: var(--navy-light);

  color: var(--navy);

  font-size: 12px;

  font-weight: 900;

}


.intro-title {

  margin: 0;

  color: var(--text);

  font-size: 29px;

  line-height: 1.28;

  letter-spacing: -0.045em;

  font-weight: 900;

}


.intro-description {

  margin:
    11px
    0
    0;

  color: var(--sub);

  font-size: 14px;

  line-height: 1.75;

}



/* =========================================================
   질문 입력창
========================================================= */


.chat-footer {

  margin-top: 23px;

}



/* 첫 화면 안내 */

.first-input-guide {

  margin-bottom: 10px;

}


.first-input-guide strong {

  display: block;

  color: var(--navy);

  font-size: 15px;

  font-weight: 900;

}


.first-input-guide span {

  display: block;

  margin-top: 2px;

  color: var(--sub);

  font-size: 12px;

}



/* 입력 폼 */

.chat-input-form {

  display: flex;

  align-items: stretch;

  gap: 8px;

  padding: 7px;

  border:
    1.5px solid #b8c8d3;

  border-radius: 18px;

  background: white;

  box-shadow: var(--shadow);

}


.input-area {

  flex: 1;

  min-width: 0;

}



/* 첫 화면 예시 */

.input-example {

  padding:
    10px
    9px
    4px;

  color: #75828d;

  font-size: 12px;

  line-height: 1.6;

}



/* 텍스트 입력 */

.chat-input {

  width: 100%;

  min-height: 58px;

  max-height: 140px;

  display: block;

  resize: none;

  padding:
    7px
    9px
    10px;

  border: 0;

  outline: none;

  background: transparent;

  color: var(--text);

  font-size: 14px;

  line-height: 1.6;

}


.chat-input::placeholder {

  color: #a1aab2;

}



/* 전송 */

.send-button {

  width: 86px;

  flex-shrink: 0;

  align-self: stretch;

  min-height: 92px;

  padding: 0 10px;

  border: 0;

  border-radius: 13px;

  background: var(--navy);

  color: white;

  font-size: 13px;

  font-weight: 900;

}


.send-button:disabled {

  background: #a7b5c0;

  opacity: 1;

  cursor: default;

}


.send-label-chat {

  display: none;

}



/* 안내 */

.chat-notice {

  margin:
    10px
    4px
    0;

  color: var(--light-text);

  text-align: center;

  font-size: 10px;

  line-height: 1.55;

}



/* =========================================================
   빠른 시작
========================================================= */


.quick-question-area {

  margin-top: 28px;

}


.quick-section-title {

  margin-bottom: 11px;

}


.quick-section-title strong {

  display: block;

  color: var(--text);

  font-size: 14px;

  font-weight: 900;

}


.quick-section-title span {

  display: block;

  margin-top: 2px;

  color: var(--sub);

  font-size: 12px;

}


.quick-question-list {

  display: grid;

  grid-template-columns: 1fr;

  gap: 9px;

}


.quick-question-button {

  width: 100%;

  min-height: 72px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding:
    13px
    14px;

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

  border-radius: 16px;

  background: white;

  text-align: left;

  transition:
    border-color .15s ease,
    background .15s ease,
    transform .1s ease;

}


.quick-question-button:active {

  transform:
    scale(.99);

  background: #fafcfd;

}


.quick-question-text {

  display: flex;

  flex-direction: column;

}


.quick-question-text strong {

  color: var(--navy);

  font-size: 15px;

  font-weight: 900;

}


.quick-question-text small {

  margin-top: 3px;

  color: var(--sub);

  font-size: 11px;

}


.quick-arrow {

  flex-shrink: 0;

  color: #9ba7b0;

  font-size: 24px;

  font-weight: 300;

}



/* =========================================================
   첫 화면 추가 안내
========================================================= */


.first-screen-info {

  margin-top: 25px;

  padding:
    14px
    15px;

  border-radius: 14px;

  background: #f7f9fa;

}


.info-line {

  display: flex;

  align-items: flex-start;

  gap: 8px;

  color: #75818b;

  font-size: 11px;

  line-height: 1.55;

}


.info-line + .info-line {

  margin-top: 7px;

}


.info-check {

  width: 17px;
  height: 17px;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  margin-top: 1px;

  border-radius: 50%;

  background: var(--navy-light);

  color: var(--navy);

  font-size: 9px;

  font-weight: 900;

}



/* =========================================================
   상담 시작 후 첫 화면 요소 숨김
========================================================= */


/*
  app.js가 상담 시작 후
  introSection에 is-hidden을 붙입니다.

  이를 이용해서
  JS를 수정하지 않고 화면을 전환합니다.
*/


.app:has(#introSection.is-hidden)
.quick-question-area {

  display: none;

}


.app:has(#introSection.is-hidden)
.first-screen-info {

  display: none;

}


.app:has(#introSection.is-hidden)
.first-input-guide {

  display: none;

}


.app:has(#introSection.is-hidden)
.input-example {

  display: none;

}



/* =========================================================
   상담 시작 후 입력창을 하단 고정
========================================================= */


.app:has(#introSection.is-hidden)
.chat-footer {

  position: fixed;

  left: 50%;
  bottom: 0;

  transform:
    translateX(-50%);

  z-index: 120;

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

  margin: 0;

  padding:
    7px
    11px
    calc(10px + env(safe-area-inset-bottom));

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

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

  backdrop-filter:
    blur(12px);

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

}


.app:has(#introSection.is-hidden)
.chat-input-form {

  align-items: flex-end;

  padding: 6px;

  border-width: 1px;

  border-radius: 16px;

}


.app:has(#introSection.is-hidden)
.chat-input {

  min-height: 43px;

  padding:
    10px
    8px;

}


.app:has(#introSection.is-hidden)
.send-button {

  width: 59px;
  height: 43px;

  min-height: 43px;

  align-self: flex-end;

  border-radius: 11px;

}


.app:has(#introSection.is-hidden)
.send-label-start {

  display: none;

}


.app:has(#introSection.is-hidden)
.send-label-chat {

  display: inline;

}


.app:has(#introSection.is-hidden)
.chat-notice {

  margin:
    0
    3px
    7px;

  order: -1;

  font-size: 9.5px;

}


.app:has(#introSection.is-hidden)
.chat-footer {

  display: flex;

  flex-direction: column;

}


.app:has(#introSection.is-hidden)
.chat-main {

  padding-bottom:
    calc(155px + env(safe-area-inset-bottom));

}



/* =========================================================
   채팅
========================================================= */


.chat-section {

  margin-top: 5px;

}


.chat-section:has(#chatLog:empty) {

  display: none;

}


.chat-message-list {

  display: flex;

  flex-direction: column;

  gap: 18px;

}



/* 메시지 */

.message-row {

  display: flex;

  align-items: flex-start;

  width: 100%;

}


.bot-message {

  justify-content: flex-start;

  gap: 9px;

}


.user-message {

  justify-content: flex-end;

}


.message-content {

  max-width: 84%;

}



/* AI 프로필 */

.bot-profile {

  width: 34px;
  height: 34px;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  margin-top: 20px;

  border-radius: 11px;

  background: var(--navy);

  color: white;

  font-size: 14px;

  font-weight: 900;

}


.message-name {

  margin:
    0
    0
    5px
    2px;

  color: var(--sub);

  font-size: 11px;

  font-weight: 800;

}



/* 말풍선 */

.message-bubble {

  padding:
    14px
    15px;

  border-radius: 17px;

  white-space: pre-wrap;

  color: var(--text);

  font-size: 14px;

  line-height: 1.75;

}


.bot-bubble {

  border-bottom-left-radius: 5px;

  background: var(--navy-light);

}


.user-message
.message-content {

  display: flex;

  justify-content: flex-end;

}


.user-bubble {

  border-bottom-right-radius: 5px;

  background: var(--navy);

  color: white;

}


.unknown-message {

  background: var(--warning);

}



/* =========================================================
   추가 질문
========================================================= */


.follow-question-list {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 8px;

}

.follow-question-heading {
  flex-basis: 100%;
  margin: 5px 0 2px;
  color: var(--navy);
  font-size: 12px;
}

.action-button-heading {
  flex-basis: 100%;
  margin: 11px 0 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--navy);
  font-size: 12px;
}

.action-button-introduction,
.service-action-note,
.service-action-disclaimer {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.action-button-introduction { margin: 0 0 4px; }
.service-action-note { margin: -2px 2px 3px; }
.service-action-disclaimer {
  margin-top: 5px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f4f7f9;
}


.follow-question-button {

  min-height: 36px;

  padding:
    7px
    11px;

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

  border-radius: 999px;

  background: white;

  color: var(--navy);

  font-size: 12px;

  font-weight: 800;

}

.service-action-button {
  display: flex;
  flex: 1 1 210px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 11px 13px;
  text-align: left;
  border-color: var(--navy);
  background: var(--navy);
  color: white;
  border-radius: 10px;
}

.service-action-button.is-primary { flex-basis: 100%; padding: 13px 14px; }
.service-action-button strong { font-size: 13px; }
.service-action-button span { font-size: 11px; font-weight: 500; line-height: 1.45; opacity: .9; }
.service-action-button b { align-self: flex-end; font-size: 11px; }
.service-action-button.information-action-button { border-color: #9bb4c5; background: #f5f9fb; color: var(--navy); }
.service-action-chip { min-height: 34px; padding: 6px 10px; font-size: 11px; }
.answer-detail-button { border-color: transparent; padding-inline: 4px; min-height: 30px; text-decoration: underline; }

.chat-service-shortcuts {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 14px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfa;
  overflow-x: auto;
}

.facility-chat-content{display:grid;gap:9px}.facility-chat-lead,.facility-chat-note{margin:0;color:var(--muted);font-size:12px;line-height:1.55}.ai-facility-card{display:grid;gap:4px;padding:13px;border:1px solid var(--line);border-radius:13px;background:#fff}.ai-facility-card>b{color:var(--navy);font-size:11px}.ai-facility-card>span{color:#326354;font-size:11px;font-weight:800}.ai-facility-card>strong{color:var(--navy);font-size:15px}.ai-facility-card>p{margin:0;color:#45585f;font-size:12px;line-height:1.5}.ai-facility-card>div{display:flex;gap:7px;margin-top:5px}.ai-facility-card a{display:grid;min-height:36px;padding:5px 12px;place-items:center;border:1px solid var(--line-dark);border-radius:9px;color:var(--navy);font-size:11px;font-weight:800;text-decoration:none}.ai-facility-arrow{text-align:center;color:#54756c;font-size:20px}.ai-facility-route-info{display:flex;justify-content:center;gap:8px;align-items:baseline;color:var(--navy)}.ai-facility-route-info span{color:var(--muted);font-size:12px}.ai-facility-choices{display:grid;gap:7px}.ai-facility-choices button{display:grid;gap:3px;padding:11px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--navy);text-align:left}.ai-facility-choices span,.ai-facility-choices small{color:var(--muted);font-size:11px;line-height:1.4}
.chat-service-shortcuts.is-hidden { display: none; }
.chat-service-shortcuts > span { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-weight: 800; }
.chat-service-shortcuts button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 430px) {
  .bot-bubble { line-height: 1.65; }
  .follow-question-list { gap: 6px; }
  .service-action-button.is-primary { padding: 12px; }
  .chat-service-shortcuts { margin-inline: 2px; }
}



/* =========================================================
   상담 정리 버튼
========================================================= */


.summary-section {

  margin-top: 28px;

}


.summary-button {

  width: 100%;

  min-height: 48px;

  padding:
    11px
    14px;

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

  border-radius: 15px;

  background: white;

  color: var(--navy);

  font-size: 13px;

  font-weight: 900;

}



/* =========================================================
   상담 결과
========================================================= */


.consultation-summary-card {

  margin-top: 25px;

  padding: 18px;

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

  border-radius: 20px;

  background: var(--beige);

}


.summary-card-header {

  margin-bottom: 14px;

}


.summary-card-label {

  display: block;

  margin-bottom: 4px;

  color: var(--navy);

  font-size: 11px;

  font-weight: 900;

}


.summary-card-header h2 {

  margin: 0;

  color: var(--text);

  font-size: 19px;

  line-height: 1.45;

}


.summary-result {

  padding: 15px;

  border-radius: 14px;

  background: white;

  white-space: pre-wrap;

  color: var(--text);

  font-size: 13px;

  line-height: 1.75;

}


.summary-guide {

  margin:
    13px
    2px;

  color: var(--sub);

  font-size: 11px;

  line-height: 1.65;

}


.summary-copy-button {

  width: 100%;

  min-height: 48px;

  border: 0;

  border-radius: 13px;

  background: var(--navy);

  color: white;

  font-size: 13px;

  font-weight: 900;

}



/* =========================================================
   상담 클로징
========================================================= */


.closing-divider {

  display: flex;

  align-items: center;

  gap: 9px;

  margin:
    22px
    0
    12px;

  color: var(--sub);

  font-size: 10px;

  font-weight: 800;

}


.closing-divider::before,
.closing-divider::after {

  content: "";

  flex: 1;

  height: 1px;

  background: #ddd8cf;

}


.closing-action-list {

  display: grid;

  grid-template-columns: 1fr;

  gap: 8px;

}


.closing-button {

  width: 100%;

  min-height: 64px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding:
    11px
    14px;

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

  border-radius: 14px;

  background: white;

  text-align: left;

}


.closing-button-main {

  color: var(--navy);

  font-size: 14px;

  font-weight: 900;

}


.closing-button-sub {

  margin-top: 2px;

  color: var(--sub);

  font-size: 10px;

}


.emergency-button {

  border-color: var(--navy);

  background: var(--navy);

}


.emergency-button
.closing-button-main,

.emergency-button
.closing-button-sub {

  color: white;

}


.emergency-button
.closing-button-sub {

  opacity: .8;

}


.finish-without-service-button {

  width: 100%;

  min-height: 44px;

  margin-top: 8px;

  border: 0;

  background: transparent;

  color: var(--sub);

  font-size: 11px;

  font-weight: 800;

}



/* =========================================================
   알림
========================================================= */


.toast-message {

  position: fixed;

  left: 50%;

  bottom:
    calc(
      145px +
      env(safe-area-inset-bottom)
    );

  transform:
    translateX(-50%);

  z-index: 999;

  max-width:
    calc(100% - 40px);

  padding:
    10px
    14px;

  border-radius: 999px;

  background: #26333e;

  color: white;

  text-align: center;

  font-size: 11px;

  box-shadow: var(--shadow);

}



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


@media (min-width: 521px) {

  .app {

    box-shadow:
      0 0 34px
      rgba(30, 50, 65, .07);

  }

}



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


@media (max-width: 360px) {

  .chat-main {

    padding-left: 13px;

    padding-right: 13px;

  }


  .intro-title {

    font-size: 26px;

  }


  .header-brand-text small {

    display: none;

  }

  .top-header { padding-left: 11px; padding-right: 11px; }
  .header-home-button { gap: 7px; }
  .header-logo { width: 36px; height: 36px; border-radius: 10px; }
  .header-brand-text strong { font-size: 14px; }
  .main-header-actions { gap: 5px; }
  .main-header-actions a { min-height: 37px; padding: 0 8px; font-size: 10px; }
  .header-label-wide { display: none; }
  .header-label-short { display: inline; }


  .message-content {

    max-width: 87%;

  }


  .send-button {

    width: 78px;

  }

}

@media (min-width: 361px) and (max-width: 430px) {
  .main-header-actions a { padding-inline: 9px; font-size: 10px; }
  .header-label-wide { display: none; }
  .header-label-short { display: inline; }
}


/* =========================================================
   장례식장 찾기 · 예상비용 CTA
========================================================= */


.funeralhall-cta-row {

  width: 100%;

  display: flex;

  justify-content: flex-start;

  padding-left: 43px;

}


.funeralhall-cta-card {

  width: min(
    100%,
    405px
  );

  padding:
    15px;

  border:
    1px solid #d5e0e7;

  border-radius: 17px;

  background: #ffffff;

  box-shadow:
    0 7px 22px
    rgba(26, 50, 69, .06);

}


.funeralhall-cta-label {

  display: block;

  margin-bottom: 5px;

  color: var(--sub);

  font-size: 10px;

  font-weight: 800;

}


.funeralhall-cta-title {

  display: block;

  color: var(--navy);

  font-size: 15px;

  font-weight: 900;

}


.funeralhall-cta-description {

  margin:
    5px
    0
    12px;

  color: var(--sub);

  font-size: 11px;

  line-height: 1.6;

}


.funeralhall-cta-button {

  width: 100%;

  min-height: 45px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding:
    0
    13px;

  border: 0;

  border-radius: 12px;

  background: var(--navy);

  color: white;

  text-align: left;

  font-size: 12px;

  font-weight: 900;

}


.funeralhall-cta-button:active {

  transform:
    scale(.99);

}


.funeralhall-cta-arrow {

  flex-shrink: 0;

  font-size: 22px;

  line-height: 1;

  font-weight: 300;

}


@media (max-width: 360px) {

  .funeralhall-cta-row {

    padding-left: 38px;

  }


  .funeralhall-cta-card {

    padding: 13px;

  }

}

.transport-flow-dialog{width:min(600px,calc(100% - 24px));max-height:calc(100dvh - 24px);border:0;border-radius:24px;padding:0;background:#fbfaf6;color:#173b3a;box-shadow:0 22px 70px rgba(20,44,42,.2);overflow:auto}
.transport-flow-dialog::backdrop{background:rgba(16,35,34,.52)}
.transport-flow-shell{position:relative;min-height:min(680px,calc(100dvh - 24px));padding:26px 28px 24px;display:flex;flex-direction:column;gap:18px;color:#213b39}
.transport-flow-brand{padding-right:48px;display:grid;gap:2px;color:#3d6a63}.transport-flow-brand strong{font-size:1rem;font-weight:900;letter-spacing:-.02em}.transport-flow-brand small{color:#74827e;font-size:.78rem;font-weight:650}
.transport-flow-close{position:absolute;z-index:2;right:16px;top:13px;width:44px;height:44px;border:0;border-radius:50%;background:#f0f2ed;color:#334d49;font-size:28px;line-height:1;cursor:pointer}
.transport-flow-close:hover{background:#e6ebe5}
.transport-flow-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0;padding:0;list-style:none}
.transport-flow-progress li{position:relative;display:grid;justify-items:center;gap:6px;color:#939b96;font-size:.69rem;font-weight:750;text-align:center}
.transport-flow-progress li:not(:last-child)::after{content:"";position:absolute;top:12px;left:calc(50% + 15px);right:calc(-50% + 15px);height:2px;background:#e1e5df}
.transport-flow-progress li.is-complete::after{background:#7d9c92}
.transport-flow-progress span{position:relative;z-index:1;width:26px;height:26px;display:grid;place-items:center;border:2px solid #d9ded8;border-radius:50%;background:#fbfaf6;font-size:.72rem}
.transport-flow-progress .is-current{color:#173f3c}.transport-flow-progress .is-current span{border-color:#1e514c;background:#1e514c;color:#fff}.transport-flow-progress .is-complete{color:#54766f}.transport-flow-progress .is-complete span{border-color:#7d9c92;background:#edf3ef;color:#315f58}
.transport-flow-heading{display:grid;gap:7px;padding-top:2px}.transport-flow-heading h2{margin:0;color:#173b3a;font-size:clamp(1.45rem,5vw,1.85rem);line-height:1.3;letter-spacing:-.035em}.transport-flow-heading p{margin:0;color:#657671;font-size:.98rem;line-height:1.55}
.transport-flow-content{display:grid;gap:14px}.transport-flow-content>.primary-button,.transport-next-button,.transport-submit-button{width:100%;min-height:56px;border-radius:14px;background:#1d514c;color:#fff;font-size:1rem;font-weight:850;box-shadow:none}.transport-flow-content>.primary-button:hover,.transport-next-button:hover,.transport-submit-button:hover{background:#174640}.transport-flow-content>.primary-button:disabled,.transport-submit-button:disabled{background:#aeb9b4;cursor:wait}
.transport-intro-card,.transport-search-card,.transport-form-card,.transport-review-card{padding:18px;border:1px solid #dce4df;border-radius:17px;background:#fff;box-shadow:0 5px 18px rgba(25,57,52,.045)}
.transport-search-card[hidden]{display:none!important}
.transport-intro-card strong{display:block;margin-bottom:10px;font-size:1.05rem}.transport-intro-card ol{display:grid;gap:8px;margin:0;padding-left:22px;color:#526762;line-height:1.45}
.transport-search-card{display:grid;gap:11px}.transport-search-card>label,.transport-form-card label{font-size:.94rem;font-weight:800;color:#294d48}.transport-search-card.is-destination{border-color:#b8cbc3;background:#fff}.transport-flow-search{display:grid;grid-template-columns:1fr;gap:10px}.transport-search-input{position:relative;display:block}.transport-search-input>b{position:absolute;z-index:1;left:16px;top:50%;transform:translateY(-50%);color:#4d7069;font-size:1.2rem}.transport-flow-search .form-input,.transport-form-card .form-input{width:100%;height:58px;padding:0 15px 0 46px;border:1px solid #c5d3cd;border-radius:14px;background:#fdfefd;color:#203b38;font-size:16px}.transport-flow-search .form-input:focus,.transport-form-card .form-input:focus,.transport-form-card .form-textarea:focus{outline:3px solid rgba(62,112,101,.15);border-color:#41776d}.transport-search-button{width:100%;min-height:56px;border:0;border-radius:14px;background:#1d514c;color:#fff;font-size:1rem;font-weight:850}.transport-search-button:hover{background:#174640}.transport-search-button:disabled{background:#96aaa3;cursor:wait}
.transport-location-button,.transport-secondary-button{width:100%;min-height:56px;border:1px solid #9db3aa;border-radius:14px;background:#f4f7f3;color:#244e48;text-decoration:none;cursor:pointer}.transport-location-button{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:7px;align-items:center;padding:11px 15px;text-align:left}.transport-location-button>span{grid-row:1/3;font-size:1.5rem}.transport-location-button strong{font-size:.98rem}.transport-location-button small{color:#6c7c77;font-size:.8rem}.transport-secondary-button{display:grid;place-items:center;padding:0 15px;font-weight:800}.transport-secondary-button:hover,.transport-location-button:hover{border-color:#547e74;background:#edf3ef}.transport-location-button:disabled{opacity:.65}
.transport-flow-results{display:grid;gap:9px}.transport-flow-help,.transport-flow-caption{margin:0;color:#6c7975;font-size:.84rem;line-height:1.5}.transport-place-option{width:100%;min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid #d8e0dc;border-radius:14px;background:#fff;color:#24433f;text-align:left;cursor:pointer}.transport-place-option:hover,.transport-place-option:focus{border-color:#4f7b72;background:#f5f8f5;outline:none}.transport-place-copy{min-width:0;display:grid;gap:5px}.transport-place-copy strong{font-size:.98rem;overflow-wrap:anywhere}.transport-place-copy small{color:#71807b;font-size:.84rem;line-height:1.45;overflow-wrap:anywhere}.transport-place-option>b{flex:0 0 auto;color:#275e56;font-size:.82rem}
.transport-selected-card{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:17px;border:1px solid #8ead9f;border-radius:17px;background:#f1f7f2}.transport-selected-card>div{min-width:0;display:grid;gap:5px}.transport-selected-card span{color:#52726a;font-size:.78rem;font-weight:800}.transport-selected-card strong{font-size:1.05rem;overflow-wrap:anywhere}.transport-selected-card p{margin:0;color:#5f716c;font-size:.88rem;line-height:1.45;overflow-wrap:anywhere}.transport-selected-card small{color:#2f7165;font-weight:800}.transport-selected-card button{flex:0 0 auto;min-width:54px;height:40px;border:1px solid #9ab4aa;border-radius:10px;background:#fff;color:#315f57;font-weight:800;cursor:pointer}
.transport-origin-complete{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:13px 14px;border:1px solid #d4e0da;border-radius:14px;background:#f3f7f4}.transport-origin-complete>div{min-width:0;display:grid;gap:3px}.transport-origin-complete span{color:#4c756c;font-size:.73rem;font-weight:850}.transport-origin-complete strong{font-size:.92rem;overflow-wrap:anywhere}.transport-origin-complete p{margin:0;color:#71807b;font-size:.76rem;line-height:1.35;overflow-wrap:anywhere}.transport-origin-complete button,.transport-route-point button{flex:0 0 auto;height:36px;padding:0 11px;border:1px solid #afc1ba;border-radius:9px;background:#fff;color:#315f57;font-weight:800;cursor:pointer}
.transport-undecided-card{display:grid;gap:12px;padding:16px;border:1px dashed #b8c7c0;border-radius:16px;background:#f6f7f4}.transport-undecided-card>div{display:grid;gap:4px}.transport-undecided-card strong{color:#314d48;font-size:.94rem}.transport-undecided-card small{color:#75817d;line-height:1.4}.transport-undecided-card button{min-height:48px;border:1px solid #9eb2aa;border-radius:12px;background:#fff;color:#315d55;font-weight:850;cursor:pointer}
.transport-same-place{display:grid;gap:7px;padding:16px;border:1px solid #d4b56f;border-radius:15px;background:#fff8e9}.transport-same-place strong{color:#6d5427}.transport-same-place p{margin:0;color:#766847;font-size:.88rem}.transport-same-place button{min-height:48px;border:1px solid #b89143;border-radius:12px;background:#fff;color:#6d5427;font-weight:850;cursor:pointer}
.transport-route-card{padding:17px;border:1px solid #d6e1dc;border-radius:18px;background:#fff;box-shadow:0 5px 18px rgba(25,57,52,.05)}.transport-route-point{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:11px;align-items:start}.transport-route-point>i{width:13px;height:13px;margin-top:5px;border:3px solid #fff;border-radius:50%;background:#2f756a;box-shadow:0 0 0 2px #2f756a}.transport-route-point.is-destination>i{background:#173f3c;box-shadow:0 0 0 2px #173f3c}.transport-route-point>div{min-width:0;display:grid;gap:3px}.transport-route-point span{color:#5c756f;font-size:.74rem;font-weight:900}.transport-route-point strong{font-size:1rem;overflow-wrap:anywhere}.transport-route-point p{margin:0;color:#72817d;font-size:.8rem;line-height:1.4;overflow-wrap:anywhere}.transport-route-line{position:relative;min-height:48px;margin-left:6px;border-left:2px solid #aac0b8}.transport-route-line span{position:absolute;left:14px;top:50%;transform:translateY(-50%);padding:4px 9px;border-radius:999px;background:#edf3ef;color:#4b6b65;font-size:.73rem;font-weight:800}
.transport-flow-loading{padding:16px;border-radius:13px;background:#f0f4f1;color:#45615b;text-align:center;font-weight:750}.transport-loading-card{padding:38px 18px}.transport-fare-card{display:grid;justify-items:center;gap:7px;padding:22px;border:1px solid #dbcba9;border-radius:18px;background:#fff9eb;text-align:center}.transport-fare-card span{color:#755d2c;font-weight:800}.transport-fare-card strong{color:#153f3a;font-size:clamp(1.7rem,7vw,2.25rem);letter-spacing:-.04em}.transport-fare-card small{color:#7b704f}
.transport-flow-summary{margin:0;display:grid;border:1px solid #dce4df;border-radius:15px;overflow:hidden;background:#fff}.transport-flow-summary div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;padding:14px 15px;border-bottom:1px solid #e9eeea}.transport-flow-summary div:last-child{border-bottom:0}.transport-flow-summary dt{color:#64736f;font-size:.86rem;font-weight:750}.transport-flow-summary dd{min-width:0;margin:0;color:#203e3a;font-weight:800;overflow-wrap:anywhere}.transport-flow-summary small{display:block;margin-top:4px;color:#76837f;font-size:.8rem;font-weight:500;line-height:1.45}.transport-flow-summary .is-price dd{color:#9a6727;font-size:1.08rem}
.transport-flow-notice{margin:0;padding:13px 14px;border-radius:12px;background:#f8f2e6;color:#765f35;font-size:.86rem;line-height:1.5}.transport-form-card{display:grid;gap:9px}.transport-form-card label:not(:first-child){margin-top:7px}.transport-form-card label b,.transport-form-card label span{margin-left:5px;color:#8a6b31;font-size:.75rem}.transport-form-card .form-textarea{min-height:112px;padding:14px;border:1px solid #cbd7d1;border-radius:13px;background:#fff;font-size:16px;resize:vertical}
.transport-review-card{display:grid;gap:12px;padding:0;overflow:hidden}.transport-review-card h3{margin:0;padding:16px 17px 0;font-size:1.05rem}.transport-review-card .transport-flow-summary{border:0;border-radius:0}.transport-consent{display:flex;gap:11px;align-items:flex-start;padding:14px;border:1px solid #d7dfda;border-radius:13px;background:#fff;cursor:pointer}.transport-consent input{width:22px;height:22px;margin:1px 0 0;accent-color:#1d514c}.transport-consent span{display:grid;gap:4px}.transport-consent strong{font-size:.9rem}.transport-consent small{color:#6a7773;font-size:.79rem;line-height:1.45}.transport-flow-error{margin:0;color:#a33b32;min-height:1em;font-size:.88rem;line-height:1.5}.transport-flow-error:empty{display:none}.transport-flow-link{align-self:flex-start;min-height:44px;padding:0 4px;border:0;background:transparent;color:#61736e;font-size:.9rem;font-weight:750;cursor:pointer}.transport-success-card{display:grid;justify-items:center;gap:8px;padding:28px 18px;border:1px solid #a9c1b5;border-radius:18px;background:#f2f8f3;text-align:center}.transport-success-card>span{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:#2d6a60;color:#fff;font-size:1.6rem}.transport-success-card>strong{font-size:1.2rem}.transport-success-card p{margin:0;color:#526b65}.transport-success-card b{color:#204d46}
.transport-driver-contact{display:grid;gap:6px;padding:18px;border:1px solid #9fb9d0;border-radius:16px;background:#f3f8fc;text-align:center}.transport-driver-contact span{color:#526b7e;font-size:.84rem}.transport-driver-contact strong{color:#102d4d;font-size:1.25rem}.transport-driver-contact a{display:grid;place-items:center;min-height:48px;margin-top:5px;border-radius:12px;background:#173252;color:#fff;font-weight:800;text-decoration:none}
@media(max-width:600px){.transport-flow-dialog{width:100%;max-width:none;max-height:100dvh;margin:0 0 0 auto;border-radius:22px 22px 0 0}.transport-flow-shell{min-height:100dvh;padding:18px 16px calc(18px + env(safe-area-inset-bottom));gap:13px}.transport-flow-heading{gap:5px}.transport-flow-heading h2{font-size:1.42rem}.transport-flow-heading p{font-size:.91rem}.transport-flow-progress li{font-size:.68rem}.transport-flow-summary div{grid-template-columns:92px minmax(0,1fr)}.transport-flow-link{margin-top:auto}.transport-origin-complete{padding:11px 12px}.transport-search-card{padding:15px}.transport-route-card{padding:15px}}
@media(max-width:360px){.transport-flow-shell{padding-left:14px;padding-right:14px}.transport-flow-progress b{font-size:.6rem}.transport-flow-progress li:not(:last-child)::after{left:calc(50% + 13px);right:calc(-50% + 13px)}.transport-flow-progress span{width:24px;height:24px}.transport-flow-heading p{font-size:.91rem}.transport-place-option{align-items:flex-start;flex-direction:column}.transport-place-option>b{align-self:flex-end}.transport-flow-summary div{grid-template-columns:1fr;gap:4px}.transport-selected-card{flex-direction:column}.transport-selected-card button{align-self:flex-end}}
/* AI 상담 장례식장 실제 시설 카드 */
.ai-funeralhall-card{display:grid;gap:7px;padding:14px;border:1px solid #d5e1dc;border-radius:14px;background:#fff}.ai-funeralhall-card>b{color:#2f6655;font-size:11px}.ai-funeralhall-card>strong{color:var(--navy);font-size:16px}.ai-funeralhall-card>p{margin:0;color:#45585f;font-size:12px;line-height:1.55}.ai-funeralhall-card>small{color:var(--muted);font-size:10px;line-height:1.55}.ai-funeralhall-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:5px}.ai-funeralhall-actions a{display:grid;min-height:42px;padding:7px 9px;place-items:center;border:1px solid #c8d6d1;border-radius:10px;color:var(--navy);font-size:11px;font-weight:850;text-align:center;text-decoration:none}.ai-funeralhall-actions a.is-support{border-color:#315f55;background:#315f55;color:#fff}@media(max-width:380px){.ai-funeralhall-actions{grid-template-columns:1fr}}
/* Keep transport action labels centered across mobile and desktop. */
.transport-next-button,.transport-submit-button,.transport-search-button,.transport-secondary-button{text-align:center}