/* 실버맵 소개 사이트 공통 스타일
   레이아웃: 이편한자막 웹(흰 바탕 · 붙는 상단 메뉴 · 알약 버튼 · 둥근 카드 · 지그재그 기능 소개)
   스타일: 실버맵 포트폴리오(Pretendard · 강조 #006FF8 · 윗선 있는 칸 · 파란 번호 · 어두운 사진 장 · 손글씨 제목)
   고령자 기준: 본문 19px 이상, 누르는 곳 48px 이상, 주요 버튼 56px, 색에만 기대지 않기, 움직임 줄이기 존중 */

:root {
  --bg: #ffffff;
  --bg-2: #f3f5f8;
  --bg-3: #e9ecf1;
  --ink: #16181d;
  --body: #3d4250;       /* 포트폴리오 #595e6c보다 한 단계 짙게 — 어르신 눈 기준 대비 7:1 이상 */
  --sub: #555b69;
  --line: #e2e5ea;
  --line-2: #cfd4dc;
  --blue: #006ff8;
  --blue-ink: #0057c2;   /* 흰 바탕 위 파란 글자 — 대비 6:1 이상 */
  --blue-soft: #e5f0ff;
  --sheet: #1f1f1f;
  --bar: #131313;
  --navy: #284473;
  --maxw: 1180px;
  --gut: clamp(20px, 4.5vw, 40px);
  --nav-h: 76px;
  --r: 28px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 2px rgba(22, 24, 29, .05), 0 14px 36px -14px rgba(22, 24, 29, .18);
  --scale: 1;
  color-scheme: light;
}
html[data-size="lg"] { --scale: 1.15; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: calc(19px * var(--scale)); line-height: 1.75; letter-spacing: -0.01em;
  word-break: keep-all; overflow-wrap: anywhere;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: calc(20px * var(--scale)); } }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption, blockquote { text-wrap: pretty; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 200; padding: 14px 20px; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ───────── 글자 ───────── */
.hand { font-family: "Nanum Pen Script", cursive; font-weight: 400; letter-spacing: 0; }
.display { font-size: calc(clamp(38px, 5.6vw, 66px) * var(--scale)); font-weight: 780; line-height: 1.22; letter-spacing: -0.04em; }
.h2 { font-size: calc(clamp(30px, 3.8vw, 46px) * var(--scale)); font-weight: 760; line-height: 1.3; letter-spacing: -0.035em; }
.h3 { font-size: calc(clamp(23px, 2.4vw, 28px) * var(--scale)); font-weight: 720; line-height: 1.4; letter-spacing: -0.03em; }
.lead { font-size: 1.05em; color: var(--body); line-height: 1.8; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .85em; font-weight: 700; color: var(--blue-ink); letter-spacing: -0.005em; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.muted { color: var(--sub); }
.src { font-size: calc(15px * var(--scale)); color: var(--sub); line-height: 1.6; margin-top: 20px; }
em.b { font-style: normal; color: var(--blue); }

/* ───────── 버튼 (알약) ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 28px; border-radius: 999px;
  font-weight: 700; font-size: 1em; text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--ease), background .2s, box-shadow .2s;
}
.btn:active { transform: scale(.98); }
.btn-solid { background: var(--blue); color: #fff; box-shadow: 0 10px 24px -10px rgba(0, 111, 248, .7); }
.btn-solid:hover { background: #005fd6; }
.btn-line { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-2); }
.btn-line:hover { background: var(--bg-2); }
.btn-dark { background: #fff; color: var(--ink); }

/* ───────── 상단 메뉴 ───────── */
.top { position: sticky; top: 0; z-index: 50; background: transparent; transition: background .25s, box-shadow .25s; }
.top.scrolled { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 1px 0 var(--line-2); }
.top-bar { max-width: var(--maxw); margin: 0 auto; height: var(--nav-h); display: flex; align-items: center; gap: 20px; padding: 0 var(--gut); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 25px; letter-spacing: -0.04em; text-decoration: none; flex-shrink: 0; }
.logo svg { width: 32px; height: 29px; }
.logo .m { color: var(--blue); }
.top-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.size-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--bg-2); font-size: 16px; font-weight: 700; white-space: nowrap; }
.size-btn:hover { background: var(--bg-3); }
.size-btn b { font-size: 21px; line-height: 1; }
.size-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.btn-sm { min-height: 48px; padding: 0 22px; font-size: 17px; box-shadow: none; }
@media (max-width: 560px) { .size-btn span { display: none; } .top-right .btn-sm { display: none; } .logo { font-size: 22px; } }

/* ───────── 영역 ───────── */
.sec { padding: clamp(88px, 11vw, 140px) 0; }
.sec-tight { padding: clamp(64px, 8vw, 100px) 0; }
.sec-gray { background: #f6f8fb; }
.sec-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head .h2 { margin-top: 14px; }
.sec-head .lead { margin-top: 18px; }

/* ───────── 첫 화면 ─────────
   글은 가운데, 그 아래 앱 화면 세 장을 가로로 나란히. 좁은 화면(760px 미만)에서는 한 장씩 자동으로 넘어가는 캐러셀 */
.hero { position: relative; padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 104px); overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 42%; width: min(1400px, 140vw); height: 900px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 111, 248, .13), rgba(0, 111, 248, 0)); }
.hero-tx { max-width: 880px; margin: 0 auto; text-align: center; }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-ink); font-weight: 700; font-size: .85em; }
.hero h1 { margin-top: 24px; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero-sub { margin: 24px auto 0; font-size: 1.05em; color: var(--body); max-width: 700px; }
.hero-checks { list-style: none; margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; color: var(--ink); font-weight: 600; font-size: .95em; }
.hero-checks li { display: inline-flex; align-items: center; gap: 10px; }
.hero-checks li::before { content: ""; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.hero-cta { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.shots { max-width: 1040px; margin: clamp(48px, 6vw, 72px) auto 0; padding: 0 var(--gut); }
.shots-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.shot { display: flex; flex-direction: column; align-items: center; }
.shot-frame { width: 100%; max-width: 280px; aspect-ratio: 460 / 1000; border-radius: 40px; overflow: hidden; background: #000; border: 8px solid #141414; box-shadow: 0 0 0 1.5px #3a3a3c, 0 30px 60px -24px rgba(22, 24, 29, .45); }
.shot-frame img { width: 100%; height: 100%; object-fit: cover; }
.shot figcaption { margin-top: 20px; text-align: center; color: var(--body); font-size: .9em; line-height: 1.5; }
.shot figcaption b { display: block; color: var(--ink); font-size: 1.1em; margin-bottom: 2px; }
.shots-ctrl { display: none; }
@media (max-width: 759px) {
  .shots { padding: 0; overflow: hidden; }
  .shots-track { display: flex; gap: 0; transition: transform .6s var(--ease); }
  .shot { flex: 0 0 100%; padding: 0 var(--gut); }
  .shot-frame { max-width: min(300px, 76vw); border-radius: 44px; }
  .shots-ctrl { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 22px; }
  .dots { display: flex; gap: 4px; }
  .dots button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
  .dots button::before { content: ""; width: 12px; height: 12px; border-radius: 6px; background: var(--line-2); transition: width .3s var(--ease), background .3s; }
  .dots button[aria-current="true"]::before { width: 30px; background: var(--blue); }
  .play { min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--bg-2); font-size: 16px; font-weight: 700; }
}

/* ───────── 목차 막대 (스크롤해도 화면 위에 떠 있음) ───────── */
.jump { position: sticky; top: calc(var(--nav-h) + 10px); z-index: 40; display: flex; justify-content: center; padding: 0 var(--gut); margin-bottom: calc(-1 * (64px + 20px)); pointer-events: none; }
.jump ul { pointer-events: auto; list-style: none; display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 0 0 1px rgba(22, 24, 29, .08), 0 10px 30px -10px rgba(22, 24, 29, .25); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.jump ul::-webkit-scrollbar { display: none; }
.jump a { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border-radius: 999px; font-size: 17px; font-weight: 600; color: var(--body); text-decoration: none; white-space: nowrap; transition: background .25s, color .25s; }
.jump a:hover { background: var(--bg-2); color: var(--ink); }
.jump a[aria-current="true"] { background: #212226; color: #fff; }
@media (max-width: 760px) { .jump { padding: 0 12px; } .jump a { padding: 0 16px; font-size: 16px; min-height: 48px; } }
html { scroll-padding-top: calc(var(--nav-h) + 90px); }

/* ───────── 어두운 사진 장 (포트폴리오 '들어가며'·'마무리') ───────── */
.dark { position: relative; background: #000; color: #fff; overflow: hidden; }
.dark > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.dark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.68) 55%, rgba(0,0,0,.2) 100%); }
.dark .wrap { position: relative; z-index: 1; }
.dark .eyebrow { color: #8fc0ff; }
.dark .hand-title { font-size: calc(clamp(52px, 7.4vw, 96px) * var(--scale)); line-height: 1.12; margin-top: 12px; }
.dark .intro { max-width: 640px; margin-top: 32px; color: rgba(255,255,255,.9); line-height: 1.9; }
.dark .intro p + p { margin-top: 18px; }
.dark .intro b { color: #fff; }
.dark .credit { margin-top: 40px; font-size: calc(14px * var(--scale)); color: rgba(255,255,255,.72); max-width: 720px; }

/* ───────── 윗선 칸 · 막대 (포트폴리오 공통 조각) ───────── */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.col { border-top: 2px solid var(--ink); padding-top: 22px; }
.col .n { font-size: .8em; font-weight: 700; color: var(--blue-ink); }
.col h3 { margin-top: 6px; }
.col .p { margin-top: 10px; color: var(--body); }
.stat { font-size: calc(clamp(44px, 5vw, 58px) * var(--scale)); font-weight: 780; letter-spacing: -0.04em; line-height: 1.1; margin-top: 16px; }
.stat small { font-size: .45em; font-weight: 700; margin-left: 2px; }
.bars { display: grid; grid-template-columns: auto 1fr auto; gap: 12px 14px; align-items: center; margin-top: 22px; font-size: .9em; }
.bars span:nth-child(3n+1) { color: var(--body); }
.bars span:nth-child(3n) { font-weight: 750; font-variant-numeric: tabular-nums; text-align: right; }
.bar { height: 14px; border-radius: 7px; background: var(--bg-3); position: relative; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 7px; background: #9aa3b2; transform-origin: left; }
.bar.hi i { background: var(--blue); }
.bars .hi-t { color: var(--ink) !important; font-weight: 750; }
.note { margin-top: clamp(32px, 4vw, 48px); padding: 22px 26px; border-radius: 16px; background: var(--bg-2); color: var(--body); }
.sec-gray .note { background: #fff; }

/* ───────── 원인: 두 판 ───────── */
.gap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; }
.gap-card { background: #fff; border-radius: var(--r); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow); }
.gap-card .tag { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: .8em; font-weight: 700; background: var(--bg-2); color: var(--body); }
.gap-card.want .tag { background: var(--blue-soft); color: var(--blue-ink); }
.gap-card h3 { margin-top: 14px; }
.gap-card .who { margin-top: 8px; font-size: .88em; color: var(--sub); }
.gap-card .who b { color: var(--ink); }
.gap-arrow { display: grid; place-items: center; font-size: 36px; color: var(--sub); }
@media (max-width: 900px) { .gap { grid-template-columns: 1fr; } .gap-arrow { transform: rotate(90deg); height: 40px; } }
.punch { margin-top: clamp(36px, 4vw, 52px); font-size: calc(clamp(24px, 2.8vw, 32px) * var(--scale)); font-weight: 750; letter-spacing: -0.03em; line-height: 1.45; }
.punch span { box-shadow: inset 0 -.38em 0 rgba(0, 111, 248, .2); }

/* ───────── 발견: 역·사진, 인용 ───────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.ph { border-radius: var(--r); overflow: hidden; background: var(--bg-3); }
.ph img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.ph-cap { margin-top: 12px; font-size: calc(14px * var(--scale)); color: var(--sub); }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.mini { border-radius: 16px; background: var(--bg-2); padding: 18px 20px; }
.mini b { display: block; font-size: .95em; }
.mini span { display: block; margin-top: 4px; font-size: .85em; color: var(--body); line-height: 1.6; }

.story { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: clamp(72px, 9vw, 110px); }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }
.timeline { list-style: none; margin-top: 28px; border-left: 2px solid var(--line-2); padding-left: 26px; }
.timeline li { position: relative; padding-bottom: 26px; }
.timeline li::before { content: ""; position: absolute; left: -34px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--blue); }
.timeline time { font-weight: 750; color: var(--blue-ink); font-size: .9em; }
.timeline b { display: block; margin-top: 2px; }
.timeline p { color: var(--body); font-size: .92em; }
.quote { margin-top: 12px; padding: 26px 28px; border-radius: var(--r); background: var(--ink); color: #fff; }
.quote blockquote { font-size: calc(clamp(34px, 3.6vw, 44px) * var(--scale)); line-height: 1.3; }
.quote cite { display: block; margin-top: 10px; font-style: normal; color: rgba(255,255,255,.75); font-size: .88em; }
.quote p { margin-top: 16px; color: rgba(255,255,255,.9); font-size: .95em; }

/* ───────── 해결: 세 카드 (이편한자막 places) ───────── */
.places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) { .places { grid-template-columns: 1fr; max-width: 560px; } }
.place { display: flex; flex-direction: column; border-radius: 24px; background: #fff; box-shadow: var(--shadow); overflow: hidden; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; }
.place:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 26px 56px -22px rgba(22,24,29,.3); }
.place-shot { height: 300px; background: linear-gradient(165deg, #dfe9f7, #eef1f5); display: flex; justify-content: center; align-items: flex-start; padding-top: 34px; overflow: hidden; }
.place-shot img { width: 210px; border-radius: 28px 28px 0 0; box-shadow: 0 0 0 6px #121212; }
.place-tx { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.place .q { font-size: .85em; font-weight: 700; color: var(--sub); }
.place h3 { margin-top: 4px; }
.place p { margin-top: 10px; color: var(--body); flex: 1; }
.more { margin-top: 18px; font-weight: 700; color: var(--blue-ink); }

/* ───────── 기능: 지그재그 (이편한자막 zz) ───────── */
.zz { display: flex; flex-direction: column; gap: clamp(96px, 12vw, 150px); }
.zz-row { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.zz-row.flip .zz-tx { order: 2; }
@media (max-width: 900px) { .zz-row { grid-template-columns: 1fr; } .zz-row.flip .zz-tx { order: 0; } }
.zz-tx h3 { margin-top: 12px; font-size: calc(clamp(28px, 3vw, 38px) * var(--scale)); font-weight: 760; line-height: 1.32; letter-spacing: -0.035em; }
.zz-tx > p { margin-top: 18px; color: var(--body); }
.feat { list-style: none; margin-top: 28px; display: grid; gap: 4px; }
.feat li { padding: 16px 0; border-top: 1px solid var(--line); }
.feat b { display: block; }
.feat span { display: block; margin-top: 4px; color: var(--body); font-size: .92em; }
.zz-vis { border-radius: 28px; background: linear-gradient(165deg, #e2ecfa, #f1f3f6); padding: clamp(28px, 4vw, 48px) clamp(16px, 3vw, 36px); display: flex; justify-content: center; gap: clamp(12px, 2vw, 22px); }
.zz-vis figure { flex: 1; max-width: 230px; }
.zz-vis .frame { border-radius: 26px; overflow: hidden; background: #000; box-shadow: 0 0 0 5px #121212, 0 24px 44px -20px rgba(0,0,0,.45); }
.zz-vis figcaption { margin-top: 16px; text-align: center; font-size: calc(15px * var(--scale)); color: var(--body); line-height: 1.5; }
.zz-vis figcaption b { display: block; color: var(--ink); font-size: calc(17px * var(--scale)); }
.cat-bars { margin-top: 28px; padding: 22px 24px; border-radius: 18px; background: var(--bg-2); }
.cat-bars > b { display: block; }
.cat-bars .bars { margin-top: 14px; }

/* ───────── 선순환 ───────── */
.loop { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: s; }
@media (max-width: 960px) { .loop { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .loop { grid-template-columns: 1fr; } }
.loop li { background: #fff; border-radius: 20px; padding: 24px 22px; box-shadow: var(--shadow); position: relative; }
.loop .n { font-size: .8em; font-weight: 750; color: var(--blue-ink); }
.loop b { display: block; margin-top: 6px; font-size: 1.15em; }
.loop p { margin-top: 6px; color: var(--body); font-size: .9em; line-height: 1.6; }
.loop li.last { background: var(--blue); color: #fff; box-shadow: none; }
.loop li.last .n, .loop li.last p { color: rgba(255,255,255,.92); }
.changes { margin-top: clamp(56px, 7vw, 80px); }

/* ───────── 만든 과정 ───────── */
.figma { border-radius: 22px; overflow: hidden; background: #2c2c2c; padding: clamp(12px, 2vw, 24px); }
.figma img { width: 100%; border-radius: 10px; }
.figma-cap { margin-top: 12px; color: var(--sub); font-size: calc(15px * var(--scale)); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 36px); margin-top: clamp(40px, 5vw, 56px); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
.steps .col .stat { margin-top: 10px; }

/* ───────── 자주 묻는 질문 (이편한자막 faq) ───────── */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; gap: 12px; } }
.faq-list details { border-bottom: 1px solid var(--line-2); }
.faq-list details:first-child { border-top: 1px solid var(--line-2); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 76px; padding: 18px 4px; font-weight: 700; font-size: 1.05em; }
.faq-list summary::-webkit-details-marker { display: none; }
/* + 표시는 글자 대신 두 막대로 그린다 — 글꼴 기준선 때문에 원 안에서 아래로 처지지 않게 */
.faq-list summary::after {
  content: ""; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 16px 2.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2.5px 16px no-repeat,
    var(--bg-2);
  transition: transform .25s var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 4px 24px; color: var(--body); }

/* ───────── 마무리 ───────── */
.end { padding: clamp(110px, 14vw, 180px) 0 clamp(80px, 10vw, 120px); }
.end .hand-title { font-size: calc(clamp(56px, 8vw, 110px) * var(--scale)); line-height: 1.1; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 12px 28px; margin-top: 48px; max-width: 620px; font-size: .95em; }
.facts dt { color: rgba(255,255,255,.7); }
.facts dd { color: #fff; font-weight: 600; }

.foot { background: var(--bar); color: rgba(255,255,255,.78); padding: 48px 0 56px; font-size: calc(16px * var(--scale)); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: flex-start; }
.foot .logo { color: #fff; font-size: 22px; }
.foot p { margin-top: 10px; line-height: 1.7; }
.foot a { color: #fff; text-underline-offset: 3px; }
.to-top { min-height: 52px; padding: 0 22px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-weight: 700; display: inline-flex; align-items: center; text-decoration: none; }
.to-top:hover { background: rgba(255,255,255,.18); }

/* ───────── 나타나기 (움직임 줄이기 설정이면 끔) ───────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--lag, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .place, .btn, .top { transition: none; }
}
@media print { .top, .foot .to-top { display: none; } .reveal { opacity: 1; transform: none; } }

/* ═════════════ 이용 방법 페이지 (/guide/) ═════════════
   참고: 홍보 영상의 연출 — 파란 바탕 위 글자 모션, 밝은 회색 바탕에 사선 파란 면, 앱 화면 옆 말풍선 */
.guide-page { background: #fff; }
.g-hero { position: relative; overflow: hidden; background: linear-gradient(160deg, #0a7bff 0%, #006ff8 45%, #0050c8 100%); color: #fff; padding: clamp(72px, 10vw, 128px) 0 clamp(96px, 12vw, 150px); text-align: center; isolation: isolate; }
.g-kicker { display: inline-block; padding: 8px 18px; border-radius: 999px; background: rgba(255,255,255,.16); font-weight: 700; font-size: .85em; }
.g-title { margin-top: 26px; font-weight: 780; letter-spacing: -0.04em; line-height: 1.25; }
.g-title .line { display: block; font-size: calc(clamp(26px, 3.4vw, 40px) * var(--scale)); font-weight: 600; color: rgba(255,255,255,.88); }
.g-title .big { font-size: calc(clamp(58px, 10vw, 128px) * var(--scale)); font-weight: 820; color: #fff; line-height: 1.1; margin: 10px 0 6px; }
.g-title .big i { font-style: normal; opacity: .55; margin: 0 .08em; }
.g-sub { margin: 28px auto 0; max-width: 620px; color: rgba(255,255,255,.92); font-size: 1.02em; }
.g-steps-mini { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
.g-steps-mini a { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 10px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px -12px rgba(0,0,0,.35); transition: transform .2s var(--ease); }
.g-steps-mini a:hover { transform: translateY(-2px); }
.g-steps-mini span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 17px; }
.g-shape { position: absolute; z-index: -1; background: rgba(255,255,255,.08); transform: rotate(-24deg); border-radius: 40px; }
.g-shape.s1 { width: 520px; height: 520px; right: -180px; top: -220px; }
.g-shape.s2 { width: 380px; height: 380px; left: -160px; bottom: -200px; background: rgba(0,0,0,.08); }
/* 글자가 차례로 올라오는 모션 */
.k-in { animation: kIn .9s var(--ease) both; animation-delay: calc(var(--d, 0) * 140ms + 100ms); }
.g-title .big b { display: inline-block; animation: kPop .7s var(--ease) both; }
.g-title .big b:nth-of-type(1) { animation-delay: .45s; } .g-title .big b:nth-of-type(2) { animation-delay: .6s; }
.g-title .big b:nth-of-type(3) { animation-delay: .75s; } .g-title .big b:nth-of-type(4) { animation-delay: .9s; }
@keyframes kIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes kPop { from { opacity: 0; transform: translateY(40%) scale(.9); } to { opacity: 1; transform: none; } }

.guide-page .jump { margin-bottom: calc(-1 * (64px + 20px)); }

/* 단계 */
.g-step { position: relative; padding: clamp(110px, 12vw, 160px) 0 clamp(72px, 9vw, 120px); overflow: hidden; }
.g-step.alt { background: #f3f5f8; }
.g-step.alt::before { content: ""; position: absolute; right: -12%; top: -30%; width: 52%; height: 160%; background: linear-gradient(180deg, rgba(0,111,248,.09), rgba(0,111,248,.02)); transform: rotate(18deg); pointer-events: none; }
.g-step:not(.alt)::before { content: ""; position: absolute; left: -14%; top: -30%; width: 46%; height: 160%; background: linear-gradient(180deg, rgba(0,111,248,.07), rgba(0,111,248,0)); transform: rotate(-18deg); pointer-events: none; }
.g-row { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.g-row.flip .g-phone { order: 2; }
@media (max-width: 900px) { .g-row { grid-template-columns: 1fr; } .g-row.flip .g-phone { order: 0; } }

.g-phone { position: relative; justify-self: center; width: min(320px, 78vw); }
.g-frame { position: relative; aspect-ratio: 600 / 1304; border-radius: 46px; overflow: hidden; background: #000; border: 9px solid #141414; box-shadow: 0 0 0 1.5px #3a3a3c, 0 40px 80px -30px rgba(0, 40, 100, .45); }
.g-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 누르는 곳: 파란 동그라미가 퍼졌다 사라진다 */
.tap { position: absolute; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; pointer-events: none; opacity: 0; background: rgba(0, 111, 248, .35); box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(0, 111, 248, .9); }
.tap.go { animation: tapGo .9s var(--ease) forwards; }
@keyframes tapGo { 0% { opacity: 0; transform: scale(1.6); } 20% { opacity: 1; transform: scale(.9); } 55% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
/* 말풍선 */
.bubble { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); width: max-content; max-width: min(360px, 88vw); padding: 14px 22px; border-radius: 20px; background: #fff; color: var(--ink); font-weight: 700; font-size: calc(18px * var(--scale)); line-height: 1.45; text-align: center; box-shadow: 0 0 0 1px rgba(22,24,29,.06), 0 18px 40px -14px rgba(22,24,29,.35); opacity: 0; }
.bubble::before { content: ""; position: absolute; left: 50%; top: -8px; width: 16px; height: 16px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.bubble.show { animation: bubIn .5s var(--ease) forwards; }
@keyframes bubIn { from { opacity: 0; transform: translate(-50%, 10px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
.g-play { position: absolute; top: 14px; right: -12px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); }
@media (max-width: 900px) { .g-play { right: -6px; } .g-phone { margin-bottom: 40px; } }

.g-tx .g-no { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 800; font-size: .8em; letter-spacing: .04em; }
.g-tx .h2 { margin-top: 16px; }
.g-tx .lead { margin-top: 18px; }
.how { list-style: none; counter-reset: h; margin-top: 30px; display: grid; gap: 12px; }
.how li { counter-increment: h; position: relative; padding: 20px 22px 20px 78px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(22,24,29,.06), 0 10px 26px -18px rgba(22,24,29,.3); }
.g-step:not(.alt) .how li { background: #f6f8fb; box-shadow: none; }
.how li::before { content: counter(h); position: absolute; left: 20px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-ink); font-weight: 800; }
.how b { display: block; font-size: 1.02em; }
.how span { display: block; margin-top: 2px; color: var(--body); font-size: .9em; }
.tip { margin-top: 18px; padding: 16px 20px; border-radius: 16px; background: #fff8e1; color: #5b4a00; font-size: .92em; }
.tip b { margin-right: 6px; }

.g-end { background: var(--ink); color: #fff; text-align: center; padding: clamp(96px, 12vw, 150px) 0; }
.g-end .g-kicker { background: rgba(255,255,255,.12); }
.g-end-title { margin-top: 22px; font-size: calc(clamp(34px, 5vw, 60px) * var(--scale)); font-weight: 780; letter-spacing: -0.04em; line-height: 1.25; }
.g-end-title span { color: #4c9dff; }
.g-end .hero-cta { margin-top: 40px; }
.btn-ghost { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.g-note { margin-top: 36px; color: rgba(255,255,255,.65); font-size: calc(15px * var(--scale)); }

/* 소개 페이지의 이용 방법 띠 */
.guide-band { background: linear-gradient(160deg, #0a7bff, #0050c8); color: #fff; border-radius: 32px; padding: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center; overflow: hidden; position: relative; }
.guide-band h2 { font-size: calc(clamp(28px, 3.4vw, 42px) * var(--scale)); font-weight: 780; letter-spacing: -0.035em; line-height: 1.3; }
.guide-band p { margin-top: 14px; color: rgba(255,255,255,.9); }
.guide-band .btn { margin-top: 28px; }
.guide-band video { width: min(220px, 60vw); justify-self: center; border-radius: 34px; border: 7px solid #141414; box-shadow: 0 30px 60px -24px rgba(0,0,0,.5); }
@media (max-width: 760px) { .guide-band { grid-template-columns: 1fr; text-align: center; } }

@media (prefers-reduced-motion: reduce) {
  .k-in, .g-title .big b, .bubble.show, .tap.go { animation: none; opacity: 1; }
  .tap { display: none; }
}