@charset "UTF-8";

[data-anim] {
  opacity: 0;
  animation: ns-srvy-show 0s 700ms forwards;
}

@keyframes ns-srvy-show {
  to { opacity: 1; }
}

body.is-loading-step { overflow: hidden; }

/* ===== 설문 레이아웃 ===== */
.srvy {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(var(--header-height) + clamp(24px, 5vw, 80px));
  padding-bottom: clamp(48px, 10vw, 160px);
  z-index: 1;
}

/* 노트북처럼 가로는 넓은데 세로만 짧은 화면 — 위아래 padding을 줄여 한 화면에 다 보이게 한다.
   min-width 조건이 없으면 세로가 짧은 모바일(휴대폰)에도 걸려서 폭 기준(900px)으로 모바일과 구분한다. */
@media (max-height: 900px) and (min-width: 901px) {
  .srvy {
    padding-top: calc(var(--header-height) + clamp(12px, 2vw, 32px));
    padding-bottom: clamp(24px, 4vw, 64px);
  }

  .option-list {
    margin-top: 40px;
  }

  .srvy__desc {
    font-size: clamp(14px, 1.5vw, 16px);
  }
}

.srvy__step {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    clamp(24.6px, 5.13vw, 82px)
    minmax(0, clamp(280px, 42vw, 650px));
  align-items: center;
}

.srvy__step[hidden] { display: none; }

.srvy__body {
  position: relative;
  grid-area: 1 / 1 / 2 / 2;
  min-width: 0;
  z-index: 2;
}

.srvy__step--overlap .srvy__title {
  position: relative;
  width: 1380px;
  z-index: 2;
  word-wrap:anywhere;
  word-break: keep-all;
}

.srvy__visual {
  grid-area: 1 / 3 / 2 / 4;
  aspect-ratio: 650 / 430;
  overflow: hidden;
  z-index: 1;
  max-width: 650px;
}

.srvy__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.srvy__visual-inline,
.srvy__visual-inline svg,
.ns-lottie,
.ns-lottie canvas,
.ns-lottie svg {
  display: block;
  width: 100%;
  height: 100%;
}

.srvy__visual-inline svg * { vector-effect: non-scaling-stroke; }

.srvy__visual img[hidden] { display: none; }

.srvy__visual-inline .ns-dash {
  animation: ns-srvy-dash 9s linear infinite;
  animation-delay: calc(var(--i, 0) * -1.6s);
}

.srvy__visual-inline .ns-cube {
  animation: ns-srvy-cube 5s ease-in-out infinite;
}

.srvy__visual-inline .ns-stripe {
  animation: ns-srvy-stripe 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.45s);
}

@keyframes ns-srvy-dash {
  to { stroke-dashoffset: -96; }
}

@keyframes ns-srvy-cube {
  0%, 100% { opacity: 0.55; transform: translateY(-5px); }
  50%      { opacity: 1;    transform: translateY(5px); }
}

@keyframes ns-srvy-stripe {
  0%, 100% { opacity: 0.55; transform: translateY(3px); }
  50%      { opacity: 1;    transform: translateY(-3px); }
}

.srvy__visual-inline .ns-draw {
  stroke-dasharray: var(--len, 260px);
  animation: ns-srvy-draw 9s ease-in-out infinite;
}

.srvy__visual-inline .ns-draw-stroke {
  stroke-dasharray: var(--len, 260px);
  animation: ns-srvy-draw-stroke 9s linear infinite;
}

@keyframes ns-srvy-draw-stroke {
  0%       { stroke-dashoffset: 0; stroke-opacity: 1; animation-timing-function: ease-in; }
  50%      { stroke-dashoffset: var(--len, 260px); stroke-opacity: 0; animation-timing-function: ease-out; }
  100%     { stroke-dashoffset: 0; stroke-opacity: 1; }
}

@keyframes ns-srvy-draw {
  0%       { stroke-dashoffset: 0; opacity: 1; animation-timing-function: ease-in; }
  50%      { stroke-dashoffset: calc(var(--len, 260px) * 0.5); opacity: 0.55; animation-timing-function: ease-out; }
  100%     { stroke-dashoffset: 0; opacity: 1; }
}

.srvy__visual-inline .ns-mark {
  animation: ns-srvy-mark 4.5s ease-in-out infinite;
}

@keyframes ns-srvy-mark {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.srvy__visual-inline .ns-arc {
  stroke-dasharray: var(--len, 260px);
  stroke-dashoffset: var(--len, 260px);
  animation: ns-srvy-arc 8s ease-in-out infinite both;
}

.srvy__visual-inline .ns-arc--late {
  animation-delay: 0.7s;
}

.srvy__visual-inline .ns-fill {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  animation: ns-srvy-fill 8s cubic-bezier(0, 0, 0.4, 1) infinite both;
}

@keyframes ns-srvy-arc {
  0%        { stroke-dashoffset: var(--len, 260px); }
  30%, 85%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: var(--len, 260px); }
}

@keyframes ns-srvy-fill {
  0%, 37.5% { clip-path: inset(0 0 100% 0); opacity: 0; }
  45%, 85%  { clip-path: inset(0 0 0 0);    opacity: 1; }
  100%      { clip-path: inset(0 0 100% 0); opacity: 0; }
}

.srvy__visual-inline .ns-sweep {
  clip-path: inset(0 100% 0 0);
  animation: ns-srvy-sweep 3.2s cubic-bezier(0, 0, 0.3, 1) infinite both;
  animation-delay: calc(var(--i, 0) * 0.22s);
}

@keyframes ns-srvy-sweep {
  0%       { clip-path: inset(0 100% 0 0); }
  45%, 80% { clip-path: inset(0 0 0 0); }
  100%     { clip-path: inset(0 0 0 100%); }
}

/* ===== 파일별 예외: visual_01 (방패) — 열쇠구멍은 위아래로 움직이지 않는다 ===== */
.srvy__visual-inline[data-file="visual_01"] .ns-cube,
.hero__visual-inline[data-file="visual_01"] .ns-cube { animation: none; opacity: 1; transform: none; }

.srvy__visual-inline .ns-blink,
.hero__visual-inline .ns-blink {
  animation: ns-srvy-blink 1.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.3s);
}

@keyframes ns-srvy-blink {
  0%, 55%, 100% { opacity: 0.25; }
  20%, 35%      { opacity: 1; }
}

/* ===== 파일별 예외: visual_06 (차트) — 바닥 파란 그물선은 움직이지 않는다 ===== */
.srvy__visual-inline[data-file="visual_06"] .ns-cube { animation: none; opacity: 1; transform: none; }

.srvy__visual-inline .ns-dash--faint {
  stroke-width: 1.4px;
}

/* ===== 파일별 예외: visual_05 (자물쇠) =====
   회색 판은 정지시키고, 그 안에 깔린 선들만 물결처럼 흐르게 한다. */
.srvy__visual-inline[data-file="visual_05"] .ns-veil { animation: none; transform: none; }

.srvy__visual-inline .ns-wave {
  animation: ns-srvy-wave 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.35s);
}

@keyframes ns-srvy-wave {
  0%, 100% { opacity: 0.35; transform: translateY(1.5px); }
  50%      { opacity: 1;    transform: translateY(-1.5px); }
}

/* ===== 파일별 예외: visual_03 (구글·MS 큐브) =====
   ① 파란 선·마크는 페이드/부유 없이 정지.
   ② 파란 바는 위아래로 움직이지 않고 왼쪽부터 하나씩 나타난다. */
.srvy__visual-inline[data-file="visual_03"] .ns-cube,
.srvy__visual-inline[data-file="visual_03"] .ns-mark { animation: none; opacity: 1; transform: none; }

.srvy__visual-inline[data-file="visual_03"] .ns-plate { animation: none; transform: none; }

/* ===== 파일별 예외: visual_03·visual_04 — 파란 조각은 왼쪽부터 하나씩 나타난다 ===== */
.srvy__visual-inline[data-file="visual_03"] .ns-stripe,
.srvy__visual-inline[data-file="visual_04"] .ns-stripe {
  animation-name: ns-srvy-bar-in;
  animation-duration: 3.4s;
  animation-timing-function: ease-out;
  animation-delay: calc(var(--i, 0) * 0.16s);
  animation-fill-mode: both;
  transform: none;
}

@keyframes ns-srvy-bar-in {
  0%, 6%   { opacity: 0; }
  18%, 82% { opacity: 1; }
  100%     { opacity: 0; }
}

.srvy__visual-inline .ns-group-cube {
  animation: ns-srvy-cube-glow 5s ease-in-out infinite;
}

@keyframes ns-srvy-cube-glow {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

.srvy__visual-inline .ns-veil {
  animation: ns-srvy-veil 6s ease-in-out infinite;
}

@keyframes ns-srvy-veil {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px); }
}

.srvy__visual-inline .ns-plate {
  animation: ns-srvy-plate 5s ease-in-out infinite;
}

@keyframes ns-srvy-plate {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--d, 0) * -14px)); }
}

@media (prefers-reduced-motion: reduce) {
  .srvy__visual-inline .ns-dash,
  .srvy__visual-inline .ns-cube,
  .srvy__visual-inline .ns-stripe,
  .srvy__visual-inline .ns-draw,
  .srvy__visual-inline .ns-draw-stroke,
  .srvy__visual-inline .ns-mark,
  .srvy__visual-inline .ns-arc,
  .srvy__visual-inline .ns-fill { animation: none; }

  .srvy__visual-inline .ns-fill { clip-path: none; opacity: 1; }

  .srvy__visual-inline .ns-arc { stroke-dasharray: none; stroke-dashoffset: 0; }

  .srvy__visual-inline .ns-draw,
  .srvy__visual-inline .ns-draw-stroke { stroke-dasharray: none; stroke-opacity: 1; }
}

@media (max-width: 900px) {
  .srvy {
    min-height: auto;
    padding-top: calc(var(--header-height) + 40px);
    padding-bottom: 60px;
  }

  .srvy__step {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
  }

  .srvy__body {
    grid-area: auto;
    max-width: none;
  }

  .srvy__step--overlap .srvy__title {
    width: auto;
    max-width:75%;
  }

  .srvy__desc {
    max-width:75%;
  }

  .srvy__step { position: relative; }

  .srvy__visual {
    position: absolute;
    top: 20px;
    right:-55px;
    z-index: 0;
    grid-area: auto;
    order: 0;
    width: 260px;
    margin: 0;
    aspect-ratio: 260 / 172;
    background: none;
    pointer-events: none;
  }

  .srvy__label,
  .srvy__title,
  .srvy__desc,
  .srvy__note,
  .option-list,
  .form,
  .srvy__nav {
    position: relative;
    z-index: 1;
  }

  /* .srvy__nav과 z-index가 같으면 DOM 순서상 뒤에 오는 nav가 .form 전체(열린
     choices 드롭다운 포함) 위로 그려진다 — .form을 한 단계 높여 드롭다운이
     항상 하단 버튼 위에 보이게 한다. */
  .form { z-index: 2; }

  .srvy__visual > img,
  .srvy__visual > .srvy__visual-inline { opacity: 0.8; }

  .srvy__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      to top right,
      rgba(0, 0, 0, 1)    0%,
      rgba(0, 0, 0, 0.85) 22%,
      rgba(0, 0, 0, 0.35) 45%,
      rgba(0, 0, 0, 0)    65%
    );
  }
}

/* ===== 모바일 (시안 157:4656 m_basic info, 375) =====
   히어로(main.css)와 같은 규약 — 비주얼을 흐름에서 빼 우상단 배경으로 겹치고,
   텍스트를 그 위에 얹는다. 이미지는 화면 밖으로 흘려 시안의 재단을 재현. */
@media (max-width: 620px) {
  .srvy {
    padding-top: calc(var(--header-height) + 30px);
    padding-bottom: 60px;
  }

  .srvy__step { position: relative; }

  .srvy__label,
  .srvy__title,
  .srvy__desc,
  .srvy__note,
  .srvy__nav {
    position: relative;
    z-index: 1;
  }

  .srvy__title {
    margin-top: 8px;
    line-height: 1.4;
  }

  .srvy__desc {
    margin-top: 20px;
  }

  .tab-group__btn,
  .form__select,
  .choices__inner { min-height: 48px; }

  .tab-group__btn,
  .form__label,
  .form__select { font-size: 16px; }
}

/* ===== 설문 공통 텍스트 ===== */
.srvy__label {
  display: block;
  color: var(--point-color);
  font-size: clamp(16px, 2vw, 20px);
  font-style: normal;
  font-weight: 700;
}

.srvy__label-no { font-family: var(--font-mono); }

.srvy__title {
  margin-top: clamp(10px, 1.21vw, 22px);
  max-width: 850px;
  font-size: clamp(22px, 2.4vw, 46px);
  line-height: 1.3;
  letter-spacing: -0.5px;
  white-space: pre-line;
}

.srvy__desc {
  margin-top: clamp(8px, 1.1vw, 20px);
  color: #89919F;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.63;
}

.srvy__desc.white { color: #fff; }

.srvy__note {
  margin-top: clamp(9px, 1.452vw, 21px);
  color: var(--txt-sub);
  font-size: clamp(14px, 0.83vw, 15px);
  line-height: 1.6;
}

@media (max-width: 620px) {
  .srvy__title {
    max-width: none;
    text-wrap: balance;
    word-wrap: anywhere;
    word-break: keep-all;
    white-space: normal;
    line-height:1.45;
  }

  .srvy__desc { margin-top: 10px; }
  #stepInfo .srvy__desc { margin-top: 20px; }
  
  .srvy__note { margin-top: 15px; }
}

/* ===== 하단 내비게이션 ===== */
.srvy__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: clamp(24px, 2.625vw, 35px);
  max-width: 648px;
}

.srvy__nav--question { justify-content: space-between; }

.srvy__btns {
  display: flex;
  gap: 20px;
}

.btn-ghost {
  background: var(--bg-btn);
  color: var(--txt-color);
  padding: 16px 23px 16px 22px;
}

/* 브라우저 기본 alert 대신 화면 안쪽 하단에 뜨는 안내 토스트(2026-09-16) */
.srvy-toast {
  position: fixed;
  left: 50%;
  bottom: clamp(24px, 6vw, 64px);
  z-index: 999;
  max-width: calc(100% - 40px);
  padding: 14px 24px;
  border-radius: 8px;
  border: 1px solid var(--point-color);
  background: #21262F;
  color: var(--txt-color);
  font-size: 15px;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.srvy-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (max-width: 620px) {
  .srvy-toast {
    white-space: normal;
    font-size: 14px;
  }
}

/* 필수 항목이 모두 선택되면 point color 로 강조(2026-09-16) */
.btn-ghost.on {
  background: var(--point-color);
  color: #FFFFFF;
}

.btn__arrow {
  width: 17px;
  height: 14px;
  background: url(../img/content/prcbtn_arrow.svg) no-repeat center center /contain;
}
.btn__arrow.next {
  transform: rotate(180deg);
}

.btn:disabled {
  color: rgba(255, 255, 255, 0.5);
}

.btn:disabled .btn__arrow { opacity: 0.4; }

@media (hover: hover) {
  .btn-ghost:not(:disabled):hover,
  .btn-ghost:not(:disabled):focus-visible { background: #33383F; }

  .btn-ghost.on:not(:disabled):hover,
  .btn-ghost.on:not(:disabled):focus-visible { background: var(--point-color-light); }
}
@media (max-width: 900px) {
  .srvy__nav {
    max-width: none;
  }
}
@media (max-width: 620px) {
  .srvy__nav {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
    gap: 26px;
  }

  .srvy__note:not([hidden]) ~ .srvy__nav {
    margin-top: 24px;
  }

  .srvy__btns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .srvy__btns > .btn {
    min-height: 48px;
    padding: 10px 20px;
  }

  .progress__bar { flex: 1; }
}

/* ===== 기본정보 폼 ===== */
.form {
  max-width: 648px;
  margin-top: 57px;
}

.form__row {
  position: relative;
  margin-top: 32px;
}

.form__row:first-child { margin-top: 0; }

.form__row:has(.choices.is-open) { z-index: 30; }

.form__row.is-select-open { z-index: 30; }

.choices:has(#selBizType) .choices__list--dropdown .choices__list { max-height: none; }

.form__row--half {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.25vw, 30px) clamp(8px, 1.3vw, 12px);
}

.form__label {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(16px, 1vw, 18px);
}

.form__req { color: var(--point-color); }

/* ===== 산업분야 탭 ===== */
.tab-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
}

.tab-group__btn {
  height: 51px;
  border-radius: 6px;
  background: var(--bg-btn);
  color: var(--txt-color);
  font-family: inherit;
  font-size: clamp(16px, 1vw, 18px);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.tab-group__btn.on {
  border-color: var(--point-color);
  background: var(--point-color);
}

@media (hover: hover) {
  .tab-group__btn:not(.on):hover,
  .tab-group__btn:not(.on):focus-visible { background-color:#33383F;}
}

@media screen and (max-width:900px){
  .form {
    max-width:none;
  }
}

@media screen and (max-width:620px){
  .form__row { margin-top: 24px; }

  .form__row--half {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .form {
    position: relative;
    z-index: 2;
    margin-top: 60px;
  }
}

/* ===== 문항 선택지 ===== */
.option-list {
  max-width: 645px;
  margin-top: 50px;
}

.option-list__item { margin-top: 20px; }
.option-list__item:first-child { margin-top: 0; }

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 54px;
  padding: 12px 12px 12px 20px;
  border-radius: 6px;
  background: #16181E;
  color: var(--txt-color);
  font-family: inherit;
  font-size: clamp(16px, 0.94vw, 18px);
  text-align: left;
  word-wrap: anywhere;
  word-break: keep-all;
  cursor: pointer;
  transition: background .3 ease, border-color .3 ease;
}

.option__text { line-height:1.4; }

.option.on {
  border-color: var(--point-color);
  background: var(--point-color);
}

.option__check {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #16181E;
}

.option__check::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 6px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: translate(-50%, -70%) rotate(-45deg);
}

@media (hover: hover) {
  .option:not(.on):hover,
  .option:not(.on):focus-visible {background:#292D38;}

  .option.on:hover,
  .option.on:focus-visible {background: var(--point-color-light);}
}

@media (max-width: 900px) {
  .option-list {
    max-width:none;
  }
}

@media (max-width: 620px) {
  .option-list {
    position: relative;
    z-index: 1;
    margin-top: 58px;
  }

  .option-list__item { margin-top: 10px; }

  .option {
    min-height: 56px;
    padding: 12px 12px 12px 16px;
    gap: 12px;
    font-size: 16px;
  }

  .option__check { width: 32px; height: 32px; }
}
/* ===== 진행률 ===== */
.progress {
  display: flex;
  align-items: center;
  gap: 14px;
}

.progress__bar {
  position: relative;
  width: clamp(90px, 6.6vw, 126px);
  height: 5px;
  background: #222529;
  overflow: hidden;
}

.progress__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--point-color);
  transition: width 300ms ease;
}

.progress__count,
.progress__count * {
  color: var(--txt-sub);
  font-size: 16px;
}
.progress__count .current {
  font-weight:700;
  color:var(--point-color);
}

  @media screen and (max-width:620px) {
    .progress__count,
    .progress__count * {
      font-size: 14px;
    }
  }

/* ===== 로딩 · 완료 (중앙 정렬 화면) ===== */

.srvy__step--center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

body:has(.srvy__step--center:not([hidden])) {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body:has(.srvy__step--center:not([hidden])) main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

body:has(.srvy__step--center:not([hidden])) .srvy {
  flex: 1;
  min-height: 0;
}

body {
  position: relative;

  overflow-x: clip;
}

.srvy__edge {
  position: absolute;
  width: clamp(110px, 18.75vw, 360px);
  aspect-ratio: 360 / 310;
  background: url(../img/content/edge_bg.png) no-repeat 0 0 / 100% 100%;
  pointer-events: none;
  opacity: 0;
  display: none;
  z-index: 0;
}

.srvy__edge--tl { top: 0; left: 0; }
.srvy__edge--tr { top: 0; right: 0; transform: scaleX(-1); }
.srvy__edge--br { bottom: 0; right: 0; transform: scale(-1, -1); }
.srvy__edge--bl { bottom: 0; left: 0; transform: scaleY(-1); }

@media (max-width: 620px) {
  .srvy__edge--tl,
  .srvy__edge--tr { top: var(--header-height); }

  body:has(.srvy__step--center:not([hidden])) .srvy__edge--tl,
  body:has(.srvy__step--center:not([hidden])) .srvy__edge--tr { top: 0; }
}

main:has(.srvy__step--center:not([hidden])) .srvy__edge,
body.is-edge-on .srvy__edge { display: block; }

.srvy__inner {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  overflow-y: visible;
  max-width: 1460px;
}

.result-msg__title {
  font-size: clamp(30px, 3vw, 50px);
  letter-spacing: -1px;
}

.result-msg__desc {
  margin-top: clamp(6.2px, 0.68vw, 13px);
  color: #fff;
  font-size: clamp(16px, 1.2vw, 20px);
}

.result-msg__desc span {
  display: inline-block;
}

.result-msg__cta { margin-top: clamp(16px, 2.6vw, 50px); }

.result-msg__visual {
  width: min(100%, 650px);
  margin-top: clamp(18px, 2.6vw, 50px);
  aspect-ratio: 650 / 430;
  overflow: hidden;
}

.result-msg__visual--loading {
  width: clamp(200px, 16.6vw, 320px);
  aspect-ratio: 1 / 1;
}

.result-msg__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== 로딩·완료 모바일 ===== */
@media (max-width: 620px) {
  body:has(.srvy__step--center:not([hidden])) .srvy {
    align-items: stretch;
    padding-bottom: 0;
  }

  .srvy__step--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
  }

  .result-msg__title {
    font-size: 26px;
    line-height: 1.4;
    letter-spacing: -0.5px;
  }

  .result-msg__desc {
    margin-top: 25px;
    font-size: 16px;
    line-height: 1.63;
  }

  .result-msg__visual {
    flex: 0 0 auto;
    width: 260px;
    max-width: 62vw;
    aspect-ratio: 260 / 172;
    margin: auto;
  }

  .result-msg__visual--loading {
    flex: 0 0 auto;
    width: min(230px, 62vw);
    aspect-ratio: 1 / 1;
    margin: 0;
  }

  #stepLoading::before,
  #stepLoading::after {
    content: "";
    width: 100%;
    flex: 1 0 0;
  }

  #stepLoading::before { order: 1; }
  #stepLoading .result-msg__visual--loading { order: 2; }
  #stepLoading::after { order: 3; flex-grow: 3; }

  .result-msg__cta {
    display: flex;
    flex: 0 0 auto;
    order: 2;
    width: 100%;
    max-width: 343px;
    min-height: 48px;
    margin-top: 0;
    margin-bottom: 40px;
    padding: 11px 20px;
    font-size: 16px;
  }

  .result-msg__title,
  .result-msg__desc { order: 0; flex: 0 0 auto; }

  .result-msg__visual,
  .result-msg__visual--loading { order: 1; }
}