/* ───────────────────────────────────────────────────────────────
   빈방있음 소개 페이지
   자주 쓰는 값은 전부 변수로. 색은 design.md — 연두는 칠하는 색, 글자는 먹색.
   폰 기준으로 짜고, 1024px 부터 PC 배치.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* 색 */
  --ink: #0b0b0b;
  --white: #ffffff;
  --grey: #f4f4f4;        /* 연한 바탕 */
  --mint: #eefbf3;        /* 연한 연두 바탕 */
  --line: #e3e3e3;        /* 가는 선 */
  --mute: #5a5a5a;        /* 흐린 글자 — 읽히게 진하게 */
  --lime: #1ed760;        /* 포인트 — 칠하는 데만 */

  /* 폭·여백 */
  --wrap: 48rem;          /* 폰에서 글 폭 */
  --pad-x: 3.2rem;        /* 좌우 여백 */
  --pad-y: 11.2rem;       /* 흰 바탕 장의 위아래 */
  --pad-y-panel: 9.6rem;  /* 둥근 판 장의 위아래 */
  --gap-section: 5.6rem;  /* 제목 묶음과 내용 사이 */
  --gutter: 1.6rem;       /* 둥근 판 바깥 여백 */

  /* 모서리 */
  --r-panel: 3.2rem;
  --r-card: 2.4rem;
  --r-btn: 1.4rem;
  --r-shot: 1.1rem;
  --r-pill: 99rem;

  /* 글자 */
  --fs-h1: 4.4rem;
  --fs-h2: 4rem;
  --fs-h3: 2.2rem;
  --fs-lead: 2rem;
  --fs-body: 1.75rem;
  --fs-small: 1.65rem;
  --fs-caption: 1.4rem;
  --ls-tight: -0.05em;

  /* 그림자 */
  --ring: 0 0 0 1px var(--line);
  --shadow-shot: 0 0 0 1px var(--line), 0 1.6rem 3.2rem -1.6rem rgba(11, 11, 11, 0.25);

  --header-h: 7.2rem;
}

/* ── 바탕 ── */
html { font-size: clamp(7px, calc(100vw / 54), 14px); -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; }
svg { flex: none; }

/* ── 공통 틀 ── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: var(--pad-y) var(--pad-x); display: flex; flex-direction: column; gap: var(--gap-section); }
.panel { border-radius: var(--r-panel); }
.panel.mint { background: var(--mint); }
.panel.grey { background: var(--grey); }
.panel.lime { background: var(--lime); }
.gutter { padding: 0 var(--gutter); }
.head { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
.center { text-align: center; }

h1 { font-size: var(--fs-h1); line-height: 1.18; font-weight: 800; letter-spacing: -0.055em; }
h2 { font-size: var(--fs-h2); line-height: 1.25; font-weight: 800; letter-spacing: var(--ls-tight); }
/* 폰에서만 끊는 자리 — PC 는 한 줄로 들어간다 */
br.mo { display: inline; }
.lead { font-size: var(--fs-lead); line-height: 1.6; font-weight: 500; }
.lead strong { font-weight: 750; }
.sub { font-size: 1.8rem; line-height: 1.7; color: var(--mute); }
/*
  **줄바꿈은 PC 에서만.** 폰은 폭이 좁아 억지로 끊으면 한 줄이 두 글자로
  남는다. 좁은 화면에서는 브라우저가 알아서 끊게 둔다.
*/
.s1 ul br, .feat-list br, .bubble-a br, .notes br { display: none; }
/* '지켜볼 테마와 회차를…' 두 문장은 각각 한 줄 (주인 결정) */
.s2 .head .sub { font-size: 1.32rem; line-height: 1.75; white-space: nowrap; }
.caption { font-size: var(--fs-body); color: var(--mute); }

/* 스토어 단추 — 먹색 */
.btn-store { display: flex; align-items: center; justify-content: center; gap: 1rem; height: 5.6rem; padding: 0 2.8rem; border-radius: var(--r-btn); background: var(--ink); color: var(--white); font-size: 1.7rem; font-weight: 700; white-space: nowrap; }
.btn-store svg { width: 1.9rem; height: 1.9rem; }
/* **올려 두면 연두로 채운다** (주인 요청, 2026-10-04). 아이콘은 currentColor 라
   글자색만 먹색으로 바꾸면 함께 따라온다. 손가락으로 쓰는 화면에서는 누른 뒤
   연두가 그대로 남아 켜진 것처럼 보이므로 hover 가 있는 기기에서만 건다. */
.btn-store { transition: background-color .15s, color .15s; }
@media (hover: hover) {
  .btn-store:hover { background: var(--lime); color: var(--ink); }
  /* 연두 판 위에서는 연두로 채워도 보이지 않는다 — 흰색으로 (주인 요청) */
  .panel.lime .btn-store:hover { background: var(--white); color: var(--ink); }
}
.btn-store svg.apple { width: 2rem; height: 2rem; margin-top: -0.2rem; }
.btn-store.sm { height: 4.4rem; padding: 0 1.4rem; border-radius: 1.1rem; font-size: 1.4rem; gap: 0.6rem; }
.btn-store.sm svg { width: 1.5rem; height: 1.5rem; }
.btn-store.sm svg.apple { width: 1.6rem; height: 1.6rem; margin-top: -0.15rem; }
.btns { display: flex; gap: 1rem; justify-content: center; }

/* 연두 동그라미 번호 */
.num { display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: var(--r-pill); background: var(--lime); color: var(--ink); font-size: var(--fs-caption); font-weight: 800; line-height: 1; }

/* ── 0 위 띠 ── */
.top { position: sticky; top: 0; z-index: 50; background: var(--white); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }
.top .wrap { flex-direction: row; align-items: center; justify-content: space-between; height: var(--header-h); padding-top: 0; padding-bottom: 0; gap: 0; }
.top .logo { display: inline-flex; align-items: center; line-height: 0; }
.top .logo img { height: 3.4rem; width: auto; }
.top .btns { gap: 0.6rem; }

/* ── 1 첫 화면 — 바탕을 화면 끝까지 ── */
.s1 { display: flex; min-height: calc(100svh - var(--header-h)); padding: 0; }
.s1 .panel { flex: 1; min-width: 0; display: flex; overflow: hidden; border-radius: 0; max-width: none; }
.s1 .wrap { flex: 1; padding: 4rem var(--pad-x) 0; gap: 0; justify-content: center; align-items: center; text-align: center; }
/* 두 물음은 **각각 한 줄**이어야 한다 — 글자를 줄여서라도 (주인 결정) */
/* 두 물음은 **각각 한 줄**이어야 한다 — 글자를 줄여서라도 (주인 결정, 2026-10-04) */
.s1 ul { margin-top: 2.8rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 1.28rem; line-height: 1.7; font-weight: 500; white-space: nowrap; }
.s1 .btns { margin-top: 4rem; }
.s1 .wall { align-self: stretch; margin-top: 4rem; height: 46rem; }
/* 2장 — 폰 한 대가 연두 동그라미 위에 선다 */
.s2 .stage { position: relative; width: 100%; display: flex; justify-content: center; }
.s2 .phone { width: 20rem; }
.s2 .stage .disc { position: absolute; left: 50%; top: 50%; width: 46rem; height: 46rem; margin: -23rem 0 0 -23rem; border-radius: var(--r-pill); background: var(--lime); }
.phone { position: relative; width: 24rem; aspect-ratio: 9 / 18; border-radius: 2.4rem; border: 0.7rem solid var(--ink); background: var(--white); overflow: hidden; }
.phone img, .phone video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ── 2 그래서 — 흐르는 화면 벽 ── */
.s2 { background: var(--white); overflow: hidden; }
.wall { position: relative; height: 76rem; margin: 0 calc(var(--pad-x) * -1); overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
.wall-grid { position: absolute; left: -10%; top: -30%; width: 120%; height: 160%; display: grid; grid-template-columns: repeat(2, 17rem); justify-content: center; gap: 1.6rem; transform: rotate(-6deg); }
.roll { display: flex; flex-direction: column; animation: roll-down 48s linear infinite; will-change: transform; }
.roll-b { animation-name: roll-up; animation-duration: 56s; animation-delay: -20s; }
.roll > div { padding-bottom: 1.6rem; }
.roll img { width: 100%; aspect-ratio: 9 / 19; object-fit: cover; object-position: top; border-radius: 1rem; background: var(--white); box-shadow: var(--shadow-shot); }
@keyframes roll-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes roll-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* ── 3 사용법 — 바탕을 화면 끝까지 ── */
.s3 { padding: 0; }
.s3 .panel { border-radius: 0; max-width: none; }
.s3 .wrap { padding-top: var(--pad-y-panel); padding-bottom: var(--pad-y-panel); }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.steps li { position: relative; aspect-ratio: 9 / 19; border-radius: var(--r-shot); background: var(--white); overflow: hidden; box-shadow: var(--ring); }
.steps img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/*
  화면 아래에 그 화면이 하는 일을 적는다. 그림 위에 글자를 얹으므로
  **밑에서 올라오는 먹색 그늘**을 깔아야 읽힌다 — 화면마다 밝기가 달라
  그늘 없이는 어떤 장에서는 글자가 사라진다.
*/
.steps .cap {
  position: absolute; left: 0; right: 0; top: 0; padding: 1.4rem 1.4rem 4rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem;
  font-size: 1.6rem; font-weight: 750; letter-spacing: -0.03em; line-height: 1.35; color: var(--white);
  background: linear-gradient(rgba(11, 11, 11, 0.86) 52%, transparent);
}
.steps .cap .num { position: static; font-style: normal; }
/*
  **사진 → 문구 → 다음 사진** 차례로 (주인 요청, 2026-10-04).
  JS 가 `.seq` 를 붙일 때만 숨긴다 — JS 가 못 뜨면 그냥 다 보인다.
  둘째부터는 왼쪽에서 밀려 들어온다.
*/
.steps.seq > li { opacity: 0; transform: translateY(2rem); transition: opacity .45s ease-out, transform .45s cubic-bezier(.2,.8,.2,1); }
.steps.seq > li:not(:first-child) { transform: translateX(-3.2rem); }
.steps.seq > li.on { opacity: 1; transform: none; }
.steps.seq .cap { opacity: 0; transform: translateY(-1rem); transition: opacity .32s ease-out, transform .32s ease-out; }
.steps.seq > li.cap-on .cap { opacity: 1; transform: none; }
.steps .cap.lime { color: var(--lime); }

/* ── 4 특징 ── */
.s4 { background: var(--white); }
.feat-list { display: flex; flex-direction: column; }
.feat-list li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 1.6rem; padding: 3.2rem 0; border-top: 1px solid var(--line); }
.feat-list li:last-child { border-bottom: 1px solid var(--line); }
.check { display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; margin-top: 0.2rem; border-radius: var(--r-pill); background: var(--lime); }
/*
  **동그라미가 커지며 연두로 차고, 그 뒤 체크가 그어진다** (주인 요청, 2026-10-04).
  선 길이(24)는 획을 넉넉히 덮는 값 — 짧으면 끝이 잘린다.
  `.seq` 가 붙을 때만 감춘다 — JS 가 못 뜨면 평소 모습 그대로다.
*/
.check svg { width: 1.6rem; height: 1.6rem; }
/* 줄이 먼저 떠오르고, 그다음 동그라미가 차고 체크가 그어진다 */
.feat-list.seq > li { opacity: 0; transform: translateY(2rem); transition: opacity .5s ease-out, transform .5s cubic-bezier(.2,.8,.2,1); }
.feat-list.seq > li.on { opacity: 1; transform: none; }
.feat-list.seq .check { background: var(--white); box-shadow: inset 0 0 0 0.2rem var(--lime); transform: scale(0.5);
  transition: background .4s ease-out, transform .5s cubic-bezier(.2,1.5,.4,1); }
/* 음수로 두면 **짧은 쪽에서 긴 쪽으로** 그어진다 — 사람이 체크를 긋는 방향이다 */
.feat-list.seq .feat-li .check path { stroke-dasharray: 24; stroke-dashoffset: -24; }
.feat-list.seq .feat-li.drawn .check { background: var(--lime); transform: scale(1); }
.feat-list.seq .feat-li.drawn .check path { stroke-dashoffset: 0;
  transition: stroke-dashoffset .45s cubic-bezier(.3,.9,.3,1) .25s; }
.feat-list .txt { display: flex; flex-direction: column; gap: 0.6rem; }
.feat-list h3 { font-size: var(--fs-h3); line-height: 1.4; font-weight: 750; letter-spacing: -0.04em; }
.feat-list p { font-size: var(--fs-small); line-height: 1.5; color: var(--mute); }

/* ── 5 주요기능 — 슬라이더 ── */
.s5 { background: var(--white); }
.s5 .wrap { gap: 7.2rem; }
/*
  폰에서는 **화면 끝까지** 쓴다 (주인 요청, 2026-10-04). 글 여백 안에 두었더니
  양옆이 좁아 앞뒤 장이 거의 안 보였다. 바깥 여백을 지우고 한 장을 좁혀
  앞뒤가 함께 보이게 한다.
*/
.s5 .slider { display: flex; flex-direction: column; gap: 2.4rem;
  /* 글 여백을 벗어나 **화면 끝까지**. 음수 여백만으로는 폭이 안 늘어 폭을 직접 준다 */
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.feat-swiper { width: 100%; overflow: hidden; }
.feat-swiper .swiper-slide { height: auto; }
.fcard { height: 100%; border-radius: var(--r-card); background: var(--grey); overflow: hidden; display: flex; flex-direction: column; transition: opacity .35s, transform .35s; opacity: .4; transform: scale(.94); }
.swiper-slide-active .fcard { opacity: 1; transform: none; }
.fcard-text { padding: 3.2rem 2.8rem 0; display: flex; flex-direction: column; gap: 1.2rem; }
.bubble-q { align-self: flex-start; max-width: 88%; padding: 1.3rem 1.9rem; border-radius: 2rem 2rem 2rem 0.4rem; background: var(--ink); color: var(--white); font-size: var(--fs-small); line-height: 1.5; font-weight: 600; }
.bubble-a { align-self: flex-end; max-width: 94%; padding: 1.8rem 2.2rem; border-radius: 2rem 2rem 0.4rem 2rem; background: var(--lime); color: var(--ink); display: flex; flex-direction: column; gap: 0.6rem; }
.bubble-a h3 { font-size: 2.1rem; line-height: 1.4; font-weight: 800; letter-spacing: -0.04em; }
.bubble-a p { font-size: 1.6rem; line-height: 1.65; font-weight: 500; }
.fcard-shot { margin-top: auto; padding: 2.8rem 2.8rem 0; }
.fcard-shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; border-radius: var(--r-shot) var(--r-shot) 0 0; background: var(--white); box-shadow: var(--ring); }
/*
  **화살표는 가운데 카드의 양 끝에 걸친다.** 카드 폭은 한 화면에 보이는
  장 수(폰 1.2 · PC 1.6)로 정해지므로, 가운데에서 그 절반만큼 떨어진
  자리가 곧 카드의 모서리다 — 폰 50%∓41.67% · PC 50%∓31.25%.
*/
.slider .stage { position: relative; }
.feat-prev, .feat-next {
  position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 4.8rem; height: 4.8rem; padding: 0; border: 0; border-radius: var(--r-pill);
  background: var(--ink); color: var(--white); cursor: pointer;
  box-shadow: 0 0.4rem 1.6rem rgba(11, 11, 11, 0.22);
}
.feat-prev { left: 17.7%; }
.feat-next { left: 82.3%; }
.feat-prev svg, .feat-next svg { width: 2rem; height: 2rem; }
.feat-prev.swiper-button-disabled, .feat-next.swiper-button-disabled { opacity: 0.25; cursor: default; }
.feat-pagination { display: flex; justify-content: center; gap: 0.4rem; width: auto; }
.slider > .feat-pagination { margin-top: 0.4rem; }
.feat-pagination .swiper-pagination-bullet { width: 0.8rem; height: 0.8rem; margin: 0 !important; background: var(--ink); opacity: 0.18; }
.feat-pagination .swiper-pagination-bullet-active { opacity: 1; width: 2.4rem; border-radius: var(--r-pill); }

/* ── 6 통계 — 숫자가 차오른다 ── */
.s6 { background: var(--white); }
/*
  막대 대신 **숫자만** 둔다 (주인 결정, 2026-10-04). 열 개를 견주는 자리가
  아니라 "이만큼 난다" 를 보여주는 자리라, 길이보다 숫자가 할 말이 많다.
  화면에 들어오면 0에서 한 번 차오르고 그 뒤로는 움직이지 않는다.
*/
.counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; width: 100%; max-width: 92rem; margin: 0 auto; }
.counts li {
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 2.4rem 1.2rem 2rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
/*
  **자리마다 0~9 띠가 위로 올라가 멈춘다** (주인 요청, 2026-10-04).

  숫자를 글자로 갈아 끼우면 획이 튀어 어수선하다. 자리를 창으로 두고
  그 안에서 띠를 밀어 올리면 **숫자판이 돌아가는 것처럼** 보인다.
  왼쪽 자리가 먼저 서고 오른쪽이 나중에 서야 '세는 중' 으로 읽힌다.
*/
.counts .n {
  display: inline-flex; align-items: flex-end;
  font-size: 3.6rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1;
  color: var(--lime); font-variant-numeric: tabular-nums;
}
.counts .n::after { content: '건'; margin-left: 0.2rem; font-size: 1.5rem; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.counts .n .d { display: block; height: 1em; overflow: hidden; }
.counts .n .d > span { display: block; transform: translateY(0); will-change: transform; }
.counts .n .d em { display: block; height: 1em; font-style: normal; }
.counts .t { font-size: 1.4rem; line-height: 1.35; font-weight: 600; color: var(--mute); word-break: keep-all; }

/* ── 7 유의사항 ── */
.s7 .wrap { padding-top: var(--pad-y-panel); padding-bottom: var(--pad-y-panel); gap: 4.8rem; }
.notes { width: 100%; max-width: 72rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.2rem; }
.notes li { display: flex; align-items: center; gap: 1.4rem; padding: 2.4rem 2.8rem; border-radius: 2rem; background: var(--white); font-size: var(--fs-small); line-height: 1.5; }
.notes li.strong { font-weight: 700; }
.notes .num { flex: none; background: var(--grey); }   /* 글이 길어져도 동그라미가 찌그러지지 않게 */

/* ── 8 다운로드 ── */
/*
  **위아래 여백으로 굴릴 거리를 번다** (주인 결정, 2026-10-04).
  화면에 붙들어 두는 방법(sticky)도 해봤지만 가운데 멈춰 선 것이 고장처럼 읽혔다.
*/
.s8 { padding-top: var(--gutter); }
.s8 .wrap { padding-top: 18rem; padding-bottom: 18rem; align-items: center; gap: 3.6rem; text-align: center; }
.s8 .say { font-size: 3.2rem; line-height: 1.6; font-weight: 800; letter-spacing: var(--ls-tight); }
/* 굴리는 만큼 작아져 제자리에 앉는다 (주인 요청) */
.s8 .tag { display: inline-block; padding: 0 1.2rem 0.2rem; border-radius: 1rem; background: var(--ink); color: var(--white); transform: rotate(-2deg); transform-origin: center; }
.s8 .thanks { font-size: 1.8rem; font-weight: 700; }

/* ── 9 바닥 ── */
footer { background: var(--white); }
footer .wrap { padding: 5.6rem var(--pad-x) 7.2rem; gap: 2rem; font-size: var(--fs-caption); line-height: 1.75; }
footer nav { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; }
footer nav a { font-weight: 700; }
footer .copy { color: var(--mute); }

@media (prefers-reduced-motion: reduce) { .roll { animation: none; } }

/* ═══════════════════════════ PC (1024px~) ═══════════════════════════ */
@media (min-width: 1024px) {
  html { font-size: 9.5px; }
  .wrap { max-width: 1028px; }
  .panel { max-width: 1160px; margin-left: auto; margin-right: auto; }
  .s1 .panel, .s3 .panel { max-width: none; }

  /* 장 여백 */
  .s2 .wrap, .s4 .wrap, .s6 .wrap { padding-top: 7rem; padding-bottom: 7rem; }
  .s3 .wrap, .s5 .wrap, .s7 .wrap { padding-top: 6.4rem; padding-bottom: 6.4rem; }
  .s8 .wrap { padding-top: 16rem; padding-bottom: 16rem; }
  .s5 .wrap { gap: 4rem; padding-top: 5.6rem; padding-bottom: 5.6rem; }

  /* 1 첫 화면 — 글 왼쪽, 폰 오른쪽 */
  .s1 .wrap { display: grid; grid-template-columns: auto auto; grid-template-rows: 1fr auto auto auto 1fr; justify-content: center; column-gap: 9.6rem; align-items: center; text-align: left; padding-top: 4rem; padding-bottom: 4rem; }
  .s1 .wrap > h1 { grid-column: 1; grid-row: 2; margin-top: 0; }
  .s1 .wrap > ul { grid-column: 1; grid-row: 3; }
  .s1 .wrap > .btns { grid-column: 1; grid-row: 4; justify-content: flex-start; }
  /*
    **벽은 첫 화면 끝까지 닿는다.** 가운데에 상자로 띄워 두면 위아래가 비고
    그 자리에서 잘려 '잘린 그림' 으로 읽힌다. 위아래 여백만큼 당겨
    섹션이 잘라 주게 둔다 — 흐림도 필요 없다.
  */
  .s1 .wrap > .wall { grid-column: 2; grid-row: 1 / span 5; align-self: stretch; width: 50rem; height: auto;
    margin: -4rem 0; -webkit-mask-image: none; mask-image: none; }
  .s1 .wall-grid { grid-template-columns: repeat(2, 20rem); }
  .s1 .wrap { max-width: 1120px; column-gap: 7.2rem; }
  .s1 ul { font-size: 1.5rem; }
  .s2 .head .sub { font-size: 1.5rem; }
  .notes li { font-size: 1.5rem; }
  .s1 h1 { font-size: 4.8rem; }
  .s5 .slider { width: auto; margin-left: 0; margin-right: 0; }
  br.mo { display: none; }
  .s2 .phone { width: 24rem; }
  .s1 ul br, .feat-list br, .bubble-a br, .notes br { display: inline; }

  /* 글과 그림을 양옆에 */
  .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8rem; align-items: center; }
  .split .head { text-align: left; align-items: flex-start; }
  .swap .head { order: 2; }

  /* 2 화면 벽 */
  .s2 .stage { overflow: visible; }

  /* 3 사용법 — 가운데 제목, 넷 나란히 */
  .s3 .split { display: flex; }
  .s3 .split .head { text-align: center; align-items: center; order: 0; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 84rem; width: 100%; margin: 0 auto; }

  /* 4 특징 — 두 줄 */
  .feat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6.4rem; row-gap: 0; }
  .feat-list li:nth-last-child(2) { border-bottom: 1px solid var(--line); }

  /* 5 기능 카드 — 글 왼쪽, 그림 오른쪽 */
  .fcard { display: grid; grid-template-columns: minmax(0, 1fr) 30rem; align-items: stretch; min-height: 44rem; }
  .fcard-text { justify-content: center; padding: 3.2rem 0 3.2rem 3.6rem; }
  .fcard-shot { display: flex; align-items: flex-end; padding: 3.2rem 3.2rem 0; }
  .fcard-shot img { aspect-ratio: 9 / 12; }
  /* 6 통계 — 다섯 칸 두 줄 */
  .counts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .counts .n { font-size: 4rem; }

  /* PC 는 한 화면에 1.6장 — 카드 모서리가 더 안쪽이다 */
  .feat-prev { left: 18.75%; }
  .feat-next { left: 81.25%; }
}