/* Tailwind preflight */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

/* 루트 웹 레이아웃의 기본값(body.antialiased font-[500], Pretendard) */
body { margin: 0; font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* 페이지 스타일 */
.sepoIns {
  --insInk: #14243a;
  --insText: #33465c;
  --insMuted: #6d8296;
  --insKey: #2563f0;
  --insKeyDeep: #1747c4;
  --insSky: #e8f2ff;
  color: var(--insText);
  background: #fff;
  overflow: clip;
}

.sepoIns * { box-sizing: border-box; }
.sepoIns p { margin: 0; }

/* 아이콘은 흰 배경 위에 그려져 있다. 배경을 파일에서 잘라내면 전구 윗면처럼
   그림 안의 밝은 부분까지 함께 지워지므로, 화면에서 곱해 없앤다. */
.sepoIns img { mix-blend-mode: multiply; }

.sepoIns .sepoInsTitle {
  margin: 0;
  color: var(--insInk);
  font-size: clamp(28px, 3vw, 43px);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  word-break: keep-all;
}

.sepoIns .sepoInsEyebrow {
  margin: 0 0 12px;
  color: var(--insKey);
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 700;
  text-align: center;
}

.sepoIns .sepoInsLead {
  margin: 18px 0 0;
  color: var(--insMuted);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  text-align: center;
  word-break: keep-all;
}

.sepoIns .sepoInsSection { padding: clamp(72px, 8vw, 118px) 0; }

/* ── 히어로 ─────────────────────────────────── */

.sepoIns .sepoInsHero {
  position: relative;
  min-height: clamp(640px, 78vh, 860px);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: clamp(38px, 4.4vw, 64px) 0 clamp(42px, 4.8vw, 70px);
  background:
    radial-gradient(circle at 82% 20%, rgba(37, 99, 240, .16) 0 11%, transparent 12%),
    radial-gradient(circle at 47% 78%, rgba(0, 207, 212, .16) 0 8%, transparent 9%),
    linear-gradient(129deg, #d6f2ff -4%, #fbf5ff 46%, #d8cdff 104%);
}

.sepoIns .sepoInsHero::before,
.sepoIns .sepoInsHero::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.sepoIns .sepoInsHero::before {
  width: clamp(260px, 28vw, 470px);
  height: clamp(260px, 28vw, 470px);
  left: -8vw;
  bottom: -12vw;
  background: radial-gradient(circle, rgba(37, 99, 240, .18), rgba(37, 99, 240, 0) 68%);
}

.sepoIns .sepoInsHero::after {
  width: clamp(220px, 22vw, 380px);
  height: clamp(220px, 22vw, 380px);
  right: 4vw;
  top: 12%;
  background: radial-gradient(circle, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 66%);
}

/* 여기에 position 을 주면 그림의 절대 배치 기준이 이 안쪽 상자가 되어
   화면 끝까지 뻗지 못한다. 기준은 섹션이어야 하므로 z-index 는 글과
   버튼에 각각 준다. */
.sepoIns .sepoInsHeroInner {
  display: grid;
  grid-template-columns: minmax(360px, 620px) 1fr;
  align-items: center;
  gap: clamp(18px, 2.6vw, 44px);
}

.sepoIns .sepoInsHeroCopy {
  grid-column: 1;
  position: relative;
  z-index: 2;
}

.sepoIns .sepoInsKicker {
  margin: 0 0 18px;
  color: var(--insKey);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 700;
  letter-spacing: .04em;
}

.sepoIns .sepoInsHeroTitle {
  margin: 0;
  color: #080b12;
  font-size: clamp(32px, 3.3vw, 52px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: 0;
  word-break: keep-all;
}

.sepoIns .sepoInsHeroLine {
  display: block;
  white-space: nowrap;
}

/* 배경 판을 없애고 그 그라데이션을 글자에 그대로 입힌다. 색을 살리면서
   글 크기는 나머지 제목과 같아지도록 font-size 를 되돌린다. */
.sepoIns .sepoInsHeroTile {
  display: inline;
  background: linear-gradient(135deg, #6a6ff7 0%, #ee43d8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 600;
}

.sepoIns .sepoInsHeroTile.isBlue {
  background: linear-gradient(135deg, var(--insKey) 0%, #08c9d7 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.sepoIns .sepoInsHeroLead {
  margin: clamp(22px, 2.4vw, 34px) 0 0;
  color: #0a0a0a;
  font-size: clamp(18px, 1.7vw, 25px);
  font-weight: 500;
  line-height: 1.4;
  word-break: keep-all;
}

.sepoIns .sepoInsHeroButton {
  grid-column: 1;
  justify-self: start;
  position: relative;
  z-index: 2;
  min-height: clamp(54px, 4vw, 66px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(36px, 4.2vw, 58px);
  border-radius: 999px;
  padding: 0 clamp(36px, 4vw, 70px);
  background: linear-gradient(135deg, var(--insKey) 0%, #06b6d4 100%);
  color: #fff;
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 800;
  box-shadow: 0 22px 42px rgba(37, 99, 240, .28);
  transition: transform .18s ease, box-shadow .18s ease;
}

.sepoIns .sepoInsHeroButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 48px rgba(37, 99, 240, .34);
}

.sepoIns .sepoInsHeroVisual {
  position: absolute;
  z-index: 0;
  inset: 0;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.sepoIns .sepoInsHeroPhoto {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: contain;
  filter: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .2) 15%, rgba(0, 0, 0, .88) 30%, #000 44%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .2) 15%, rgba(0, 0, 0, .88) 30%, #000 44%, #000 100%);
}

/* ── 고민 카드 ──────────────────────────────── */

.sepoIns .sepoInsConcernSection { background: linear-gradient(180deg, #dbeafe, #f2fbff 62%, #fff); }

/* 기존의 세로 카드 배치를 유지하며 가운데 자리를 순환의 기준으로 삼는다. */
.sepoIns .sepoInsConcernList {
  --concernCard: 142px;
  --concernStep: calc(var(--concernCard) - 14px);
  width: min(620px, 100%);
  height: calc(var(--concernCard) + 4 * var(--concernStep));
  position: relative;
  margin: clamp(34px, 4vw, 54px) auto 0;
  padding: 0;
  list-style: none;
}

/* 화면 가운데 놓인 세 번째 카드가 가장 크고 또렷하게 보인다. */
.sepoIns .sepoInsConcern {
  height: var(--concernCard);
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: calc(100% - var(--distance, 0) * 6%);
  padding: 20px clamp(18px, 2.2vw, 30px);
  border-radius: 22px;
  background: #fff;
  opacity: calc(1 - var(--distance, 0) * .1);
  transform: translate(-50%, -50%) translateY(calc(var(--slot, 0) * var(--concernStep) - 2 * var(--concernStep)));
  box-shadow: 0 12px 26px rgba(29, 78, 152, .1);
  transition: transform .58s cubic-bezier(.25, .8, .25, 1), width .58s cubic-bezier(.25, .8, .25, 1), opacity .58s ease;
}

.sepoIns .sepoInsConcern p {
  color: var(--insInk);
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 700;
  line-height: 1.55;
  word-break: keep-all;
}

.sepoIns .sepoInsConcern b { color: var(--insKey); font-weight: 700; }

.sepoIns .sepoInsConcern img {
  width: clamp(62px, 7vw, 88px);
  height: clamp(62px, 7vw, 88px);
  flex: 0 0 auto;
  object-fit: contain;
}

/* ── 전환 배너 ──────────────────────────────── */

.sepoIns .sepoInsAnswerSection { background: #fff; }

.sepoIns .sepoInsAnswer { text-align: center; }

.sepoIns .sepoInsAnswerLead {
  margin: 0 0 14px;
  color: var(--insMuted);
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 600;
}

.sepoIns .sepoInsAnswerText {
  margin: 24px 0 0;
  color: var(--insText);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.7;
  word-break: keep-all;
}

.sepoIns .sepoInsBrandMark {
  display: inline-block;
  margin-top: clamp(30px, 3.4vw, 44px);
  color: var(--insKeyDeep);
  font-size: clamp(28px, 3.3vw, 46px);
  font-weight: 800;
  letter-spacing: -.01em;
}


/* ── 활동 방식 3장 ──────────────────────────── */

.sepoIns .sepoInsWaySection { background: var(--insSky); }

.sepoIns .sepoInsWayList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* stretch 라야 글 양이 달라도 세 장의 아랫변이 맞는다. */
  align-items: stretch;
  gap: clamp(14px, 1.6vw, 22px);
  margin: clamp(38px, 4.4vw, 60px) 0 0;
  padding: 0;
  list-style: none;
}

.sepoIns .sepoInsWay {
  min-height: clamp(320px, 27vw, 400px);
  padding: clamp(34px, 3.6vw, 48px) clamp(22px, 2.4vw, 32px) clamp(38px, 4vw, 52px);
  border-radius: 26px;
  background: #fff;
  text-align: center;
  box-shadow: 0 14px 30px rgba(29, 78, 152, .1);
}

/* 아이콘은 색 방울 위에 얹는다. 그림 파일이 불투명해서 방울을 img 자체의
   배경으로 주면 그림이 방울을 덮어 가운데가 흰 사각형으로 남는다. 방울을
   따로 두고 그 위에 그림을 multiply 로 겹쳐야 흰 여백이 방울 색으로 물든다.
   Tailwind 프리플라이트가 img 를 블록으로 만들어 text-align 이 듣지 않으니
   가운데로 놓으려면 좌우 여백을 auto 로 준다. */
.sepoIns .sepoInsWayIcon {
  width: clamp(104px, 10.4vw, 136px);
  height: clamp(104px, 10.4vw, 136px);
  display: grid;
  place-items: center;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--insSky);
}

.sepoIns .sepoInsWayIcon img {
  width: 76%;
  height: 76%;
  object-fit: contain;
}

/* 지원 섹션 제목과 같은 크기로 맞춘다. */
.sepoIns .sepoInsWay h3 {
  margin: 22px 0 0;
  color: var(--insInk);
  font-size: clamp(23px, 2.4vw, 34px);
  font-weight: 800;
  line-height: 1.35;
  word-break: keep-all;
}

.sepoIns .sepoInsWay p {
  margin-top: 14px;
  color: var(--insMuted);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.7;
  word-break: keep-all;
}

/* ── 보험 점검 3장 ──────────────────────────── */

.sepoIns .sepoInsCheckSection { background: linear-gradient(180deg, #fff, #eff8ff); }

.sepoIns .sepoInsCheckList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin: clamp(38px, 4.4vw, 58px) 0 0;
  padding: 0;
  list-style: none;
}

.sepoIns .sepoInsCheck {
  position: relative;
  padding: clamp(26px, 2.8vw, 36px);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(29, 78, 152, .09);
}

.sepoIns .sepoInsCheck b {
  color: var(--insKey);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}

.sepoIns .sepoInsCheck img {
  width: clamp(66px, 7vw, 88px);
  height: clamp(66px, 7vw, 88px);
  display: block;
  margin: 18px 0 0;
  object-fit: contain;
}

.sepoIns .sepoInsCheck h3 {
  margin: 20px 0 0;
  color: var(--insInk);
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 800;
  word-break: keep-all;
}

.sepoIns .sepoInsCheck p {
  margin-top: 11px;
  color: var(--insMuted);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  word-break: keep-all;
}

/* ── 지원 내용 (좌우 교차) ───────────────────── */

.sepoIns .sepoInsSupportSection { background: #fff; }

.sepoIns .sepoInsSupportList {
  display: grid;
  gap: clamp(30px, 4vw, 56px);
  margin-top: clamp(42px, 5vw, 70px);
}

.sepoIns .sepoInsSupport {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
}

.sepoIns .sepoInsSupport:nth-child(even) .sepoInsSupportText { order: 2; }

.sepoIns .sepoInsSupport h3 {
  margin: 0 0 16px;
  color: var(--insInk);
  font-size: clamp(23px, 2.4vw, 34px);
  font-weight: 800;
  line-height: 1.35;
  white-space: pre-line;
  word-break: keep-all;
}

.sepoIns .sepoInsSupport p {
  color: var(--insMuted);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.75;
  word-break: keep-all;
}

.sepoIns .sepoInsSupportArt {
  min-height: clamp(190px, 22vw, 290px);
  display: grid;
  place-items: center;
  border-radius: 26px;
  background: var(--insSky);
}

.sepoIns .sepoInsSupportArt img {
  width: clamp(108px, 12vw, 156px);
  height: clamp(108px, 12vw, 156px);
  object-fit: contain;
}

/* ── 리워드 계산기 ──────────────────────────── */

.sepoIns .sepoInsIncomeSection { background: var(--insSky); }

.sepoIns .sepoInsCalc {
  width: min(720px, 100%);
  margin: clamp(34px, 4vw, 50px) auto 0;
  padding: clamp(28px, 3vw, 42px);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(29, 78, 152, .12);
}

.sepoIns .sepoInsCalcHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.sepoIns .sepoInsCalcHead span { color: var(--insMuted); font-size: 16px; }

.sepoIns .sepoInsCalcHead strong {
  color: var(--insInk);
  font-size: clamp(25px, 2.4vw, 34px);
  font-weight: 800;
}

.sepoIns .sepoInsCalc input {
  width: 100%;
  margin: 28px 0 10px;
  accent-color: var(--insKey);
  cursor: pointer;
}

.sepoIns .sepoInsCalcScale {
  display: flex;
  justify-content: space-between;
  color: #9aabbb;
  font-size: 13px;
}

.sepoIns .sepoInsCalcResult {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid #e3edf5;
  text-align: center;
}

.sepoIns .sepoInsCalcResult > span { color: var(--insMuted); font-size: 16px; }

.sepoIns .sepoInsCalcResult strong {
  display: block;
  margin-top: 12px;
  color: var(--insKeyDeep);
  font-size: clamp(44px, 5.4vw, 66px);
  font-weight: 800;
  line-height: 1;
}

.sepoIns .sepoInsCalcResult i,
.sepoIns .sepoInsCalcResult small {
  color: var(--insMuted);
  font-size: clamp(15px, 1.4vw, 19px);
  font-style: normal;
  font-weight: 600;
}

.sepoIns .sepoInsCalcResult em {
  display: block;
  margin-top: 18px;
  color: #9aabbb;
  font-size: 13px;
  font-style: normal;
}

/* ── 시작 절차 ──────────────────────────────── */

.sepoIns .sepoInsStepSection { background: linear-gradient(180deg, #fff, #eaf4ff); }

.sepoIns .sepoInsStepCard {
  margin-top: clamp(34px, 4vw, 52px);
  padding: clamp(30px, 3.6vw, 54px) clamp(20px, 2.6vw, 40px);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(29, 78, 152, .12);
}

.sepoIns .sepoInsStepList {
  /* 아이콘 크기와 배지 크기를 한 곳에서 정한다. 잇는 선의 높이를 이 값으로
     계산해야 화면 폭이 바뀌어도 배지 한가운데를 지나간다. */
  --stepIcon: clamp(74px, 8vw, 104px);
  --stepBadge: 34px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 단계 배지를 잇는 가로선. 배지 높이 한가운데에 맞춘다. */
/* 칸이 5개라 각 칸 폭은 20%, 첫·마지막 배지의 중심은 좌우 10% 지점이다.
   선을 딱 그만큼만 그려야 배지에서 끊기지 않고 이어진다. */
.sepoIns .sepoInsStepList::before {
  content: '';
  height: 2px;
  position: absolute;
  top: calc(var(--stepIcon) + 14px + var(--stepBadge) / 2 - 1px);
  right: 10%;
  left: 10%;
  background: #cfe3ff;
}

.sepoIns .sepoInsStepList li {
  position: relative;
  padding: 0 10px;
  text-align: center;
}

.sepoIns .sepoInsStepList img {
  width: var(--stepIcon);
  height: var(--stepIcon);
  margin-inline: auto;
  object-fit: contain;
}

.sepoIns .sepoInsStepList span {
  width: var(--stepBadge);
  height: var(--stepBadge);
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  margin-top: 14px;
  border-radius: 50%;
  background: #5b9bf8;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 0 0 6px #fff;
}

/* 번호 배지는 원형. 단계가 갈수록 진해진다. */
.sepoIns .sepoInsStepList li:nth-child(2) span { background: #4f8cf7; }
.sepoIns .sepoInsStepList li:nth-child(3) span { background: #3f7cf3; }
.sepoIns .sepoInsStepList li:nth-child(4) span { background: #2f6bee; }
.sepoIns .sepoInsStepList li:nth-child(5) span { background: var(--insKeyDeep); }

.sepoIns .sepoInsStepList em {
  display: block;
  margin-top: 7px;
  color: var(--insMuted);
  font-size: clamp(12px, 1vw, 14px);
  font-style: normal;
  line-height: 1.5;
  word-break: keep-all;
}

.sepoIns .sepoInsStepList strong {
  display: block;
  margin-top: 12px;
  color: var(--insInk);
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 800;
  word-break: keep-all;
}

.sepoIns .sepoInsNote {
  margin-top: 12px;
  color: #93a5b6;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  word-break: keep-all;
}

.sepoIns .sepoInsStepCard + .sepoInsNote { margin-top: 26px; }

/* ── 코드 발급 뒤의 상담 흐름 ─────────────────── */

/* 시작 단계 섹션에 딸린 덩어리였다가 독립 섹션이 됐다. 제목은 다른 섹션과
   같은 .sepoInsTitle 을 쓰고, 흐름 목록만 카드로 감싼다. */
.sepoIns .sepoInsWorkflowSection { background: linear-gradient(180deg, #eaf4ff, #f6fbff); }

.sepoIns .sepoInsWorkflow {
  margin-top: clamp(34px, 4vw, 52px);
  padding: clamp(28px, 3.2vw, 44px) clamp(20px, 2.6vw, 40px);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(29, 78, 152, .12);
}

.sepoIns .sepoInsWorkflowList {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sepoIns .sepoInsWorkflowList li {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: 16px;
  border-radius: 16px;
  padding: 16px clamp(16px, 1.8vw, 24px);
  background: #fff;
  box-shadow: 0 6px 16px rgba(29, 78, 152, .07);
}

.sepoIns .sepoInsWorkflowList b {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--insSky);
  color: var(--insKeyDeep);
  font-size: 13px;
  font-weight: 800;
}

.sepoIns .sepoInsWorkflowList strong {
  color: var(--insInk);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 700;
  word-break: keep-all;
}

.sepoIns .sepoInsWorkflowList em {
  grid-column: 2;
  margin-top: 5px;
  color: var(--insMuted);
  font-size: clamp(13px, 1.05vw, 15px);
  font-style: normal;
  word-break: keep-all;
}

.sepoIns .sepoInsWorkflowPunch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-top: clamp(22px, 2.6vw, 32px);
}

.sepoIns .sepoInsWorkflowPunch span {
  color: var(--insText);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 600;
  word-break: keep-all;
}

.sepoIns .sepoInsWorkflowPunch b { color: var(--insKeyDeep); font-weight: 800; }

@media (max-width: 900px) {
  .sepoIns .sepoInsWorkflowList li { grid-template-columns: 1fr; gap: 8px; }
  .sepoIns .sepoInsWorkflowList b { justify-self: start; }
  .sepoIns .sepoInsWorkflowList em { grid-column: 1; }
}

/* ── FAQ ────────────────────────────────────── */

.sepoIns .sepoInsFaqSection { background: #fff; }

.sepoIns .sepoInsFaqList {
  width: min(860px, 100%);
  display: grid;
  gap: 12px;
  margin: clamp(34px, 4vw, 50px) auto 0;
}

.sepoIns .sepoInsFaqList article {
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px #dfe9f4;
  transition: box-shadow .18s ease, background .18s ease;
}

.sepoIns .sepoInsFaqList article.isOpen {
  background: #f3f8ff;
  box-shadow: 0 0 0 1px #bcd8ff;
}

.sepoIns .sepoInsFaqList button {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 30px 1fr 22px;
  align-items: center;
  gap: 12px;
  border: 0;
  padding: 14px clamp(16px, 1.8vw, 26px);
  background: transparent;
  color: var(--insInk);
  text-align: left;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 700;
  cursor: pointer;
}

.sepoIns .sepoInsFaqList button b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--insKey);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.sepoIns .sepoInsFaqList button svg { color: #7d93a8; transition: transform .2s ease; }
.sepoIns .sepoInsFaqList article.isOpen button svg { color: var(--insKey); transform: rotate(180deg); }

.sepoIns .sepoInsFaqAnswer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .24s ease;
}

.sepoIns .sepoInsFaqList article.isOpen .sepoInsFaqAnswer { grid-template-rows: 1fr; }

.sepoIns .sepoInsFaqAnswer > p {
  min-height: 0;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: start;
  gap: 12px;
  overflow: hidden;
  padding: 0 clamp(16px, 1.8vw, 26px);
  color: var(--insText);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.75;
  transition: padding .24s ease;
  word-break: keep-all;
}

.sepoIns .sepoInsFaqList article.isOpen .sepoInsFaqAnswer > p { padding-bottom: 22px; }

.sepoIns .sepoInsFaqAnswer b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d4e5ff;
  color: var(--insKeyDeep);
  font-size: 14px;
  font-weight: 800;
}

/* ── 마무리 CTA ─────────────────────────────── */

.sepoIns .sepoInsCtaSection { padding: 0 0 clamp(72px, 8vw, 118px); background: #fff; }

.sepoIns .sepoInsCta {
  min-height: 330px;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: clamp(46px, 5vw, 70px) clamp(24px, 3vw, 48px);
  border-radius: 30px;
  background: linear-gradient(122deg, #1f57d6, #3f81f7 58%, #78c2fb);
  text-align: center;
  box-shadow: 0 24px 46px rgba(31, 87, 214, .26);
}

.sepoIns .sepoInsCta::before,
.sepoIns .sepoInsCta::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
}

.sepoIns .sepoInsCta::before { width: 360px; height: 360px; top: -230px; left: -90px; }
.sepoIns .sepoInsCta::after { width: 300px; height: 300px; right: -130px; bottom: -150px; box-shadow: 0 0 0 44px rgba(255, 255, 255, .07); }

.sepoIns .sepoInsCta > * { position: relative; z-index: 1; }

.sepoIns .sepoInsCta p {
  color: rgba(255, 255, 255, .84);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
}

.sepoIns .sepoInsCta h2 {
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(29px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.35;
  word-break: keep-all;
}

.sepoIns .sepoInsCta > span {
  margin-top: 14px;
  color: rgba(255, 255, 255, .88);
  font-size: clamp(15px, 1.25vw, 18px);
  word-break: keep-all;
}

.sepoIns .sepoInsCta a {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  border-radius: 999px;
  padding: 0 28px;
  background: #fff;
  color: var(--insKeyDeep);
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 700;
}

/* ── 반응형 ─────────────────────────────────── */

@media (max-width: 1180px) {
  .sepoIns .sepoInsHeroInner {
    grid-template-columns: minmax(340px, 560px) 1fr;
    gap: clamp(22px, 3vw, 44px);
  }
  .sepoIns .sepoInsHeroPhoto {
    right: -4vw;
    width: auto;
    height: 100%;
  }
}

@media (max-width: 900px) {
  .sepoIns .sepoInsConcernList { --concernCard: 126px; }
  .sepoIns .sepoInsHero {
    min-height: auto;
    padding: 52px 0 60px;
  }
  /* 좁은 화면에서는 배경으로 깔면 그림도 글도 죽는다. 흐름 안으로 되돌려
     글 → 그림 → 버튼 순으로 쌓고 그림은 통째로 보여준다. */
  .sepoIns .sepoInsHeroInner {
    display: flex;
    flex-direction: column;
    /* 넓은 화면용 center 가 남아 있으면 항목이 폭만큼 늘지 않아,
       화면을 꽉 채우려던 그림이 제 내용 크기로 줄어든다. */
    align-items: stretch;
    gap: clamp(18px, 5vw, 26px);
  }
  /* 그림 자체의 배경이 섹션 배경과 미묘하게 달라 좌우 끝에 경계가 보인다.
     화면 폭을 꽉 채워 세로선을 없애고, 남는 위아래는 마스크로 녹인다. */
  .sepoIns .sepoInsHeroVisual {
    position: static;
    width: auto;
    /* .sepoInner 가 좌우로 물고 있는 여백만큼 되밀면 화면 폭에 딱 맞는다. */
    margin-inline: calc(var(--sepoGutter) * -1);
    min-height: 0;
    overflow: visible;
    transform: none;
  }
  /* 원본은 가로로 넓어 왼쪽 3분의 1이 빈 배경이다. 인물 쪽으로 붙여 잘라
     좁은 화면에서도 인물이 큼직하게 보이게 한다. */
  .sepoIns .sepoInsHeroPhoto {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 100% center;
    transform: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
  .sepoIns .sepoInsHeroButton { margin-top: 0; }
  .sepoIns .sepoInsWayList,
  .sepoIns .sepoInsCheckList { grid-template-columns: 1fr; max-width: 520px; margin-right: auto; margin-left: auto; }
  /* 한 줄로 쌓이면 높이를 맞출 이유가 없다. 붙잡아 두면 아래가 텅 빈다. */
  .sepoIns .sepoInsWay { min-height: 0; }
  .sepoIns .sepoInsSupport { grid-template-columns: 1fr; gap: 20px; }
  .sepoIns .sepoInsSupport:nth-child(even) .sepoInsSupportText { order: 0; }
  .sepoIns .sepoInsSupportArt { min-height: 200px; }
  .sepoIns .sepoInsStepList { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
  .sepoIns .sepoInsStepList::before { display: none; }
  .sepoIns .sepoInsStepList span { box-shadow: none; }
}

@media (max-width: 560px) {
  .sepoIns .sepoInsHero { padding: 42px 0 52px; }
  .sepoIns .sepoInsHeroTitle { font-size: clamp(28px, 8.6vw, 40px); }
  .sepoIns .sepoInsHeroLine { white-space: normal; }
  .sepoIns .sepoInsHeroButton {
    width: 100%;
    min-height: 58px;
    font-size: 18px;
  }
  .sepoIns .sepoInsConcernList { --concernCard: 122px; }
  .sepoIns .sepoInsConcern {
    gap: 12px;
    padding: 18px;
    opacity: calc(1 - var(--distance, 0) * .13);
  }
  .sepoIns .sepoInsConcern img { width: 58px; height: 58px; }
  .sepoIns .sepoInsStepList { grid-template-columns: 1fr; gap: 26px 0; }
  .sepoIns .sepoInsFaqList button { grid-template-columns: 28px 1fr 20px; gap: 10px; }
  .sepoIns .sepoInsFaqAnswer > p { grid-template-columns: 28px 1fr; gap: 10px; }
}

/* ── 섹션 등장 애니메이션 ──────────────────────────────────
   .isAnim 은 자바스크립트가 살아 있을 때만 붙는다. 그래야 스크립트가
   막혀도 본문이 숨은 채로 남지 않는다. 히어로는 첫 화면이라 스크롤을
   기다리지 않고 keyframes 로 바로 올라오게 한다. */

.sepoIns.isAnim [data-reveal] {
  opacity: 0;
  transition: opacity .62s cubic-bezier(.22, .68, .3, 1) var(--revealDelay, 0ms),
              transform .62s cubic-bezier(.22, .68, .3, 1) var(--revealDelay, 0ms);
  will-change: opacity, transform;
}

.sepoIns.isAnim [data-reveal='up'] { transform: translateY(30px); }
.sepoIns.isAnim [data-reveal='left'] { transform: translateX(-38px); }
.sepoIns.isAnim [data-reveal='right'] { transform: translateX(38px); }
.sepoIns.isAnim [data-reveal='zoom'] { transform: scale(.94); }

.sepoIns.isAnim [data-reveal].isRevealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* 단계 배지를 잇는 선은 카드가 열린 뒤 왼쪽에서 자라난다 */
.sepoIns .sepoInsStepList::before { transform-origin: left center; }

.sepoIns.isAnim .sepoInsStepCard[data-reveal] .sepoInsStepList::before {
  transform: scaleX(0);
  transition: transform .8s ease .45s;
}

.sepoIns.isAnim .sepoInsStepCard[data-reveal].isRevealed .sepoInsStepList::before { transform: scaleX(1); }

/* 히어로 — 로드와 동시에 순서대로 */
@keyframes sepoInsRise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes sepoInsPop {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: none; }
}

.sepoIns .sepoInsKicker,
.sepoIns .sepoInsHeroTitle,
.sepoIns .sepoInsHeroLead,
.sepoIns .sepoInsHeroButton,
.sepoIns .sepoInsHeroVisual {
  animation: sepoInsRise .72s cubic-bezier(.22, .68, .3, 1) backwards;
}

.sepoIns .sepoInsKicker { animation-delay: .05s; }
.sepoIns .sepoInsHeroTitle { animation-delay: .16s; }
.sepoIns .sepoInsHeroLead { animation-delay: .3s; }
.sepoIns .sepoInsHeroButton { animation-delay: .44s; }
.sepoIns .sepoInsHeroVisual { animation-delay: .22s; }

/* 400px 아래에서는 고민 카드 글이 한 줄 더 늘어나 카드 높이가 모자란다. */
@media (max-width: 400px) {
  .sepoIns .sepoInsConcernList { --concernCard: 146px; }
}

@media (prefers-reduced-motion: reduce) {
  .sepoIns *, .sepoIns *::before, .sepoIns *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .sepoIns [data-reveal] { opacity: 1 !important; transform: none !important; }
  .sepoIns .sepoInsStepList::before { transform: scaleX(1) !important; }
}

/* Friendy: 원본 보험 파트너스의 공통 헤더와 동일한 3단 구조 */
.sepoPage,
.sepoPage * { box-sizing: border-box; }
.sepoPage {
  --inner: 1280px;
  --sepoGutter: 24px;
  --sepoInnerW: min(var(--inner), calc(100vw - var(--sepoGutter) - var(--sepoGutter)));
  --line: #e7e7e7;
  --keyColor: #1e9bff;
  min-height: 100vh;
  overflow-x: clip;
  background: #fff;
  color: #242424;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  font-synthesis: none;
}
.sepoPage a { color: inherit; text-decoration: none; }
.sepoPage button { font: inherit; }
.sepoPage :focus-visible { outline: 3px solid #2563f0; outline-offset: 3px; }
.sepoInner { width: var(--sepoInnerW); margin: 0 auto; }
.sepoMainHeader { height: 76px; }
.sepoMainHeader .sepoInner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.sepoLogo { font-size: 30px; font-weight: 700; line-height: 1; }
.friendyHeaderDownload { font-size: 14px; font-weight: 600; }
.friendyHeaderDownload span { margin-left: 4px; }
.sepoNavWrap { height: 52px; border-bottom: 1px solid var(--line); }
.sepoNavWrap .sepoInner { height: 100%; display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; }
.sepoPrimaryNav { display: flex; align-items: center; gap: 24px; padding: 0; margin: 0; list-style: none; font-size: 16px; white-space: nowrap; }
.sepoPrimaryNav li { height: 52px; display: flex; align-items: center; }
.sepoPrimaryNav li.isActive { color: var(--keyColor); font-weight: 700; }
.sepoPrimaryNav li:not(.isActive) a:hover { color: var(--keyColor); }

/* 원본 히어로의 이미지 크기와 CTA 폭을 유지한다. */
.sepoIns .sepoInsHeroButton { min-width: 340px; }
.sepoIns .sepoInsHeroPhoto { aspect-ratio: 1692 / 930; }
.sepoIns .sepoInsWay h3 { font-weight: 800; }
.sepoIns .sepoInsCheck h3 { font-weight: 800; }
.sepoIns .sepoInsSupport h3 { font-weight: 800; }

/* 마지막 다운로드 영역은 카드가 아닌 화면 전체 너비로 펼친다. */
.sepoIns .sepoInsCtaSection { padding: 0; }
.sepoIns .sepoInsCta { width: 100%; min-height: 620px; border-radius: 0; box-shadow: none; }

.friendyChevron { width: 10px; height: 10px; justify-self: center; border-right: 2px solid #7d93a8; border-bottom: 2px solid #7d93a8; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.sepoIns .sepoInsFaqList article.isOpen .friendyChevron { border-color: #2563f0; transform: rotate(225deg) translateY(-2px); }
.friendyDownloadLinks { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sepoIns .sepoInsCta .friendyDownloadLinks > * { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; border-radius: 999px; padding: 0 28px; background: #fff; color: #1747c4; font-size: clamp(16px, 1.3vw, 18px); font-weight: 700; }
.sepoIns .sepoInsCta .friendyDownloadLinks > .isUnavailable { background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .55); color: #fff; cursor: default; }
.friendyFooter { padding: 48px 0 55px; border-top: 1px solid #e7e7e7; }
.friendyFooter strong { display: block; color: #242424; font-size: 27px; font-weight: 700; }
.friendyFooter nav { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; font-size: 13px; font-weight: 500; }
.friendyFooter p { margin: 30px 0 0; color: #868686; font-size: 12px; }

@media (max-width: 900px) {
  .sepoIns .sepoInsHeroPhoto { aspect-ratio: 1692 / 930; }
}
@media (max-width: 560px) {
  .sepoPage { --sepoGutter: 16px; }
  .sepoMainHeader { height: 67px; }
  .sepoLogo { font-size: 27px; }
  .sepoNavWrap { height: 48px; }
  .sepoPrimaryNav { gap: 20px; font-size: 14px; }
  .sepoPrimaryNav li { height: 48px; }
  .sepoIns .sepoInsHeroButton { min-width: 0; }
  .sepoIns .sepoInsCta { min-height: 580px; padding-right: 20px; padding-left: 20px; }
  .friendyDownloadLinks { width: 100%; flex-direction: column; }
  .sepoIns .sepoInsCta .friendyDownloadLinks > * { width: 100%; }
}

/* 원본 일러스트의 휴대폰 유리 안에 실제 앱 캡처를 얹는다. */
.friendyHeroViewport { position: absolute; inset: 0; overflow: hidden; }
.friendyHeroCanvas { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 1692 / 930; }
.sepoIns .friendyHeroCanvas .sepoInsHeroPhoto { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; aspect-ratio: 1692 / 930; }
.friendyHeroScreen { position: absolute; z-index: 2; top: 28.9%; left: 49.15%; width: 6.6%; height: 25.4%; overflow: hidden; border-radius: 12px; background: #fff; transform: rotate(-.8deg); }
.sepoIns .friendyHeroScreen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; mix-blend-mode: normal; }

/* 실제 앱 화면을 담은 목업이 부드럽게 움직이는 지원 영역. */
.sepoIns .friendySupportScene { position: relative; min-height: 450px; overflow: hidden; isolation: isolate; background: linear-gradient(145deg, #edf6ff 0%, #e5f0ff 100%); }
.sepoIns .friendySupportScene::before { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(75, 142, 245, .24) 0%, rgba(75, 142, 245, 0) 72%); animation: friendyHaloPulse 4.8s ease-in-out infinite; }
.sepoIns .friendySupportScene::after { content: ''; position: absolute; width: 310px; height: 310px; border: 1px solid rgba(68, 130, 227, .17); border-radius: 50%; }
.friendySupportPhone { position: relative; z-index: 2; width: 188px; aspect-ratio: 1206 / 2622; overflow: hidden; border: 7px solid #1d2332; border-radius: 31px; background: #fff; box-shadow: 0 25px 48px rgba(29, 78, 152, .2); animation: friendyPhoneFloat 3.6s ease-in-out infinite; }
.sepoIns .friendySupportPhone video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; background: #fff; }
.friendySupportLabel { position: absolute; z-index: 3; right: 9%; bottom: 19%; padding: 11px 17px; border: 1px solid #d9e7fb; border-radius: 999px; background: #fff; color: #2563d9; font-size: 15px; font-weight: 800; box-shadow: 0 10px 24px rgba(29, 78, 152, .13); animation: friendyLabelFloat 3.6s ease-in-out infinite; }
.sepoInsSupport:nth-child(even) .friendySupportLabel { right: auto; left: 9%; }
@keyframes friendyPhoneFloat { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-7px); } }
@keyframes friendyHaloPulse { 0%, 100% { transform: scale(.9); opacity: .75; } 50% { transform: scale(1.13); opacity: 1; } }
@keyframes friendyLabelFloat { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(6px); } }

@media (max-width: 900px) {
  .sepoIns .friendyHeroViewport { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .sepoIns .friendyHeroCanvas { height: 100%; }
  .sepoIns .friendyHeroCanvas .sepoInsHeroPhoto { position: absolute; width: 100%; height: 100%; aspect-ratio: 1692 / 930; object-fit: fill; }
}
@media (max-width: 560px) {
  .sepoIns .friendySupportScene { min-height: 390px; }
  .friendySupportPhone { width: 162px; }
  .friendySupportLabel { right: 5%; bottom: 17%; padding: 9px 12px; font-size: 12px; }
  .sepoInsSupport:nth-child(even) .friendySupportLabel { left: 5%; }
}

@media (prefers-reduced-motion: reduce) {
  .sepoIns .friendySupportScene::before,
  .friendySupportPhone,
  .friendySupportLabel { animation: none; }
}