/* 택스민 검색광고 랜딩 v5 — 2026-11-04 · lbox 구성을 택스민에 맞게
   ① 첫 화면: 큰 제목 + 버튼 2개 + 큰 사진 틀(Higgsfield 카페 영상) 위에 휴대폰 시연(카톡 상담·기장료 계산·매달 보고, 자동 넘김)
   ② 큰 그림 카드 2×2(Higgsfield 3D 장면) ③ 계산기 큰 판 ④ 안심 판(파란 빛 사진 배경) ⑤ 카톡·전화 판 ⑥ 업종 흐름띠 ⑦ 질문 ⑧ 마무리 숫자 카드
   색: 바탕 #F7F8FA · 글자·주 버튼 남색 검정 #0B1530 · 강조 파랑 #2554F0(taxmin.kr). 큰 진한 면은 안심 판 하나만.
   움직임: 영상 · 시연 장면 · 스크롤 등장 · 흐름띠 · 숫자 세기(되풀이 둥둥 움직임 없음, 움직임 줄이기 설정이면 모두 멈춤) */
:root {
  --bg: #F7F8FA;
  --paper: #FFFFFF;
  --ink: #0B1530;
  --ink-2: #2F3A4C;
  --sub: #4E5968;
  --mute: #5F6B7A;
  --line: #E4E7EC;
  --b: #2554F0;
  --b-d: #1C43D1;
  --b-t: #EEF3FF;
  --b-2: #DCE6FF;
  --b-l: #9DB8FF;
  --err: #D92D33;
  --r: 28px;
  --shadow: 0 1px 2px rgba(11, 21, 48, .05), 0 16px 40px -18px rgba(11, 21, 48, .22);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --f: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f); font-size: 17px; line-height: 1.65; letter-spacing: -.015em; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 800px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; }
.skip:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--b); outline-offset: 3px; border-radius: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── 로고: taxmin.kr 심볼(남색 m + 파란 체크) + 글자 '택스민'(민만 파랑) */
.logo { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; color: var(--ink); }
.logo .sym { width: 36px; height: 22px; flex: none; }
.logo b { font-size: 21px; font-weight: 800; letter-spacing: -.055em; line-height: 1; }
.logo b i { font-style: normal; color: var(--b); }

/* ── 머리줄: 맨 위에선 투명, 내리면 떠 있는 흰 캡슐(lbox) */
.hd { position: sticky; top: 0; z-index: 40; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 0; pointer-events: none; }
.hd .bar { pointer-events: auto; max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 8px 0 14px; border-radius: 18px; background: transparent; transition: background-color .3s, box-shadow .3s, backdrop-filter .3s; }
.hd.on .bar { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 1px 0 rgba(11, 21, 48, .04), 0 10px 30px -12px rgba(11, 21, 48, .2); }
.hd nav { display: flex; align-items: center; gap: 2px; }
.hd .lk { display: none; font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 10px 12px; border-radius: 10px; }
.hd .lk:hover { background: rgba(11, 21, 48, .05); }

/* ── 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 12px; border: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; cursor: pointer; transition: background-color .15s, box-shadow .15s, transform .12s; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #1B2A52; }
.btn-line { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px #D3D8E0; }
.btn-line:hover { box-shadow: inset 0 0 0 1px #A9B2BF; }
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 0 15px; border-radius: 12px; font-size: 15px; gap: 7px; }
.kk { width: 24px; height: 24px; border-radius: 50%; background: #FEE500; color: #191919; display: grid; place-items: center; flex: none; }
.kk svg { width: 14px; height: 14px; }
.btn-sm .kk { width: 20px; height: 20px; }
.btn-sm .kk svg { width: 12px; height: 12px; }

/* ── 글자 */
.big { font-size: 29px; line-height: 1.34; font-weight: 740; letter-spacing: -.045em; margin: 0; text-wrap: balance; }
.lede { font-size: 17px; line-height: 1.62; color: var(--sub); margin: 14px auto 0; max-width: 34em; text-wrap: pretty; }
h3 { font-size: 21px; line-height: 1.38; font-weight: 700; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.fine { font-size: 13px; line-height: 1.6; color: var(--sub); }
.sec { padding-block: 72px; }
.sec-h { text-align: center; margin-bottom: 36px; }

/* ── 첫 화면 */
.hero { padding-top: 36px; text-align: center; }
.hbadge { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; margin: 0 0 14px; padding: 4px 14px 4px 5px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--b-2), 0 6px 18px -10px rgba(37, 84, 240, .45); font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.hbadge img { width: 28px; height: 28px; }
.hbadge em { font-style: normal; color: var(--b); }
.hero h1 { font-size: 36px; line-height: 1.24; font-weight: 780; letter-spacing: -.05em; margin: 0; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--b); }
.hero h1 .vat { display: inline-block; vertical-align: middle; margin: -8px 0 0 8px; padding: 3px 9px; border-radius: 8px; background: var(--b-t); color: var(--b-d); font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1.4; }
.hero .lede { margin-top: 14px; }
.cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 440px; margin: 24px auto 0; }
.cta .btn { padding: 0 12px; font-size: 16px; }
.cond { margin: 14px auto 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.cond span { display: block; }
.ch-note { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--mute); }
.ch-note a { font-weight: 700; color: var(--ink-2); text-underline-offset: 3px; text-decoration-color: #B9C0CB; }

/* 맨 위 알림띠(네이버 웍스식) */
.topbar { background: #EDF0F5; text-align: center; padding: 9px 16px; padding-top: calc(9px + env(safe-area-inset-top, 0px)); }
.topbar p { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }

/* 첫 화면 시연 틀: Higgsfield 사진(곧바로) → 같은 장면 영상(받아지면 겹쳐 재생) 위에 휴대폰. 휴대폰 아랫부분은 틀 밖으로 잘림 */
.show { margin: 36px auto 0; max-width: 1120px; padding: 0 max(12px, env(safe-area-inset-left, 0px)); }
.show-frame { position: relative; height: 540px; border-radius: var(--r); overflow: hidden; background: #DCE3EE; isolation: isolate; }
.show-pic img, .show-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 88% 0; }
.show-pic img { z-index: -3; }
.show-bg { z-index: -2; opacity: 0; transition: opacity .8s; }
.show-bg.on { opacity: 1; }
.show-frame[data-hero="cafe"] .show-pic img, .show-frame[data-hero="cafe"] .show-bg { object-position: 72% 40%; }
.show-frame::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 21, 48, 0) 30%, rgba(11, 21, 48, .22)); }
.device { position: absolute; left: 50%; top: 132px; width: 252px; transform: translateX(-50%); border-radius: 40px 40px 0 0; padding: 10px 10px 0; background: var(--ink); box-shadow: 0 40px 80px -24px rgba(11, 21, 48, .6), 0 0 0 1px rgba(255, 255, 255, .12) inset; }
.screen { position: relative; height: 520px; border-radius: 31px 31px 0 0; overflow: hidden; background: #F2F4F8; }
.float { display: none; }
.mini { background: #fff; border-radius: 18px; padding: 15px 18px; box-shadow: var(--shadow); text-align: left; }
.mini span { display: block; font-size: 12px; color: var(--sub); }
.mini b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.045em; line-height: 1.3; margin-top: 2px; }
.mini small { display: block; font-size: 12px; color: var(--sub); }
.scr-top { display: flex; align-items: center; gap: 9px; padding: 15px 14px 10px; background: #fff; border-bottom: 1px solid var(--line); text-align: left; }
.avatar { width: 34px; height: 34px; border-radius: 12px; background: var(--b-t); display: grid; place-items: center; flex: none; }
.avatar svg { width: 24px; height: 15px; }
.scr-top b { display: block; font-size: 15px; letter-spacing: -.03em; line-height: 1.3; }
.scr-top span { display: block; font-size: 12px; color: var(--sub); line-height: 1.4; }
.screen .scene { position: absolute; left: 0; right: 0; top: 60px; bottom: 0; padding: 14px 12px; display: grid; align-content: start; gap: 9px; text-align: left; opacity: 0; visibility: hidden; transform: translateX(100%); transition: transform .55s var(--ease), opacity .45s, visibility 0s .55s; }
.screen .scene.on { opacity: 1; visibility: visible; transform: none; transition: transform .55s var(--ease), opacity .45s; }
.screen .scene.out { transform: translateX(-100%); }
.screen.back .scene { transform: translateX(-100%); }
.screen.back .scene.on { transform: none; }
.screen.back .scene.out { transform: translateX(100%); }
.show-frame { touch-action: pan-y; }
.screen .scene .day { justify-self: center; font-size: 12px; color: var(--mute); margin: 0; }
.bub { max-width: 88%; margin: 0; padding: 9px 12px; border-radius: 17px; font-size: 14px; line-height: 1.5; letter-spacing: -.03em; }
.bub.me { justify-self: end; background: var(--b); color: #fff; border-bottom-right-radius: 6px; }
.bub.us { justify-self: start; background: #fff; color: var(--ink); border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(11, 21, 48, .06); }
.typing { justify-self: start; display: none; gap: 4px; background: #fff; padding: 12px 13px; border-radius: 17px; border-bottom-left-radius: 6px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #AEB6C2; }
/* 장면 2: 계산 */
.sc-t { margin: 0 0 2px; font-size: 15px; font-weight: 800; letter-spacing: -.03em; }
.sc-q { background: #fff; border-radius: 14px; padding: 10px 11px; }
.sc-q > span { display: block; font-size: 12px; color: var(--sub); margin-bottom: 6px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sc-chips i { font-style: normal; font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 9px; background: var(--bg); color: var(--ink-2); transition: background-color .25s, color .25s, box-shadow .25s; }
.sc-chips i.pick { background: var(--b-t); color: var(--b-d); box-shadow: inset 0 0 0 1.5px var(--b); }
.sc-res { background: var(--paper); border-radius: 14px; padding: 12px 13px; box-shadow: inset 0 0 0 2px var(--b); }
.sc-res span { display: block; font-size: 12px; font-weight: 600; color: var(--b-d); }
.sc-res b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.05em; line-height: 1.25; }
.sc-res small { font-size: 12px; color: var(--sub); }
/* 장면 3: 보고·알림 */
.noti { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 15px; padding: 10px 11px; box-shadow: 0 1px 3px rgba(11, 21, 48, .07); text-align: left; }
.noti .ic { width: 32px; height: 32px; border-radius: 10px; background: var(--b-t); color: var(--b); display: grid; place-items: center; flex: none; }
.noti .ic svg { width: 17px; height: 17px; }
.noti b { display: block; font-size: 13px; letter-spacing: -.03em; line-height: 1.35; }
.noti span { display: block; font-size: 12px; line-height: 1.45; color: var(--sub); }
.screen .noti { align-items: flex-start; }
.screen .noti .ic, .screen .noti .dday { align-self: center; }
.noti .dday { flex: none; white-space: nowrap; margin-left: auto; font-size: 12px; font-weight: 800; color: #fff; background: var(--ink); padding: 3px 8px; border-radius: 8px; }
.report { background: #fff; border-radius: 15px; padding: 13px 14px; box-shadow: 0 1px 3px rgba(11, 21, 48, .07); text-align: left; }
.report .t { display: flex; justify-content: space-between; font-size: 12px; color: var(--sub); }
.report .v { font-size: 24px; font-weight: 800; letter-spacing: -.045em; margin: 2px 0 0; line-height: 1.3; }
.report .d { font-size: 12px; font-weight: 700; color: var(--b); margin: 0 0 10px; }
.bars { display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 7px; height: 60px; }
.bars i { display: block; border-radius: 5px; background: var(--b-2); transform-origin: bottom; }
.bars i:last-child { background: var(--b); }
.bars i.h1 { height: 52%; } .bars i.h2 { height: 64%; } .bars i.h3 { height: 58%; }
.bars i.h4 { height: 72%; } .bars i.h5 { height: 69%; } .bars i.h6 { height: 88%; }

/* 시연 움직임: 자바스크립트가 .play 를 붙일 때만(장면이 켜질 때마다 처음부터) */
.play .scene .bub, .play .scene .sc-q, .play .scene .sc-res, .play .scene .noti, .play .scene .report { opacity: 0; transform: translateY(10px); }
.play .scene.on .bub.in, .play .scene.on .sc-q, .play .scene.on .sc-res, .play .scene.on .noti, .play .scene.on .report { animation: rise .45s var(--ease) forwards; }
.play .scene.on .sc-q:nth-of-type(2) { animation-delay: .1s; }
.play .scene.on .sc-q:nth-of-type(3) { animation-delay: .2s; }
.play .scene.on .sc-res { animation-delay: 2.6s; }
.play .scene.on .noti:first-child { animation-delay: .1s; }
.play .scene.on .report { animation-delay: .5s; }
.play .scene.on .noti:last-child { animation-delay: 2.4s; }
.play .scene.on .sc-chips i.pick { animation: pick .4s var(--ease) both; }
.play .scene.on .sc-q:nth-of-type(1) i.pick { animation-delay: .9s; }
.play .scene.on .sc-q:nth-of-type(2) i.pick { animation-delay: 1.5s; }
.play .scene.on .sc-q:nth-of-type(3) i.pick { animation-delay: 2.1s; }
.play .scene.on .bars i { animation: grow .7s var(--ease) both; }
.play .scene.on .bars i:nth-child(2) { animation-delay: .9s; } .play .scene.on .bars i:nth-child(3) { animation-delay: 1s; }
.play .scene.on .bars i:nth-child(4) { animation-delay: 1.1s; } .play .scene.on .bars i:nth-child(5) { animation-delay: 1.2s; }
.play .scene.on .bars i:nth-child(6) { animation-delay: 1.3s; }
.play .scene.on .bars i:nth-child(1) { animation-delay: .8s; }
.play .typing.on { display: inline-flex; }
.play .typing.on i { animation: dot 1s infinite ease-in-out; }
.play .typing.on i:nth-child(2) { animation-delay: .15s; }
.play .typing.on i:nth-child(3) { animation-delay: .3s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes pick { from { background: var(--bg); color: var(--ink-2); box-shadow: inset 0 0 0 0 var(--b); } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes dot { 0%, 80%, 100% { opacity: .35; } 40% { opacity: 1; } }

/* 시연 아래 설명(lbox: 아이콘 + 파란 강조 문장 + 화살표) */
.show-cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 16px; align-items: center; max-width: 1120px; margin: 16px auto 0; padding: 0 max(20px, env(safe-area-inset-left, 0px)); text-align: left; }
.tabs { grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { position: relative; flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--sub); font-size: 15px; font-weight: 700; cursor: pointer; overflow: hidden; }
.tabs button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line) inset; }
.tabs button i { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--b); transform: scaleX(0); transform-origin: left; }
.tabs button[aria-pressed="true"] i { transform: scaleX(var(--p, 0)); }
.cap { margin: 0; font-size: 17px; line-height: 1.55; font-weight: 600; color: var(--ink); text-wrap: balance; }
.js-rv .cap:not([hidden]) { animation: cap-in .5s var(--ease); }
@keyframes cap-in { from { opacity: 0; transform: translateX(14px); } }
.cap b { color: var(--b); background: linear-gradient(transparent 60%, rgba(37, 84, 240, .12) 0); }
.arrows { display: flex; gap: 8px; }
.arrows button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--paper); box-shadow: 0 0 0 1px var(--line) inset, 0 4px 12px -6px rgba(11, 21, 48, .2); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.arrows svg { width: 18px; height: 18px; }
.ex-label { max-width: 1120px; margin: 10px auto 0; padding: 0 20px; font-size: 12px; color: var(--mute); text-align: left; }

/* ── 큰 그림 카드 2×2(lbox) */
.feats { display: grid; gap: 40px 24px; }
.feat { min-width: 0; }
.feat-pic { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: #E3EAF6; }
.feat-pic img, .feat-pic video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.feat:hover .feat-pic img { transform: scale(1.04); }
.feat h3 { margin-top: 20px; }
.feat p { margin: 8px 0 0; font-size: 17px; color: var(--sub); }

/* ── 기장료 계산 구획: 글 + 예시 화면(보일 때 한 번 칩이 눌리며 결과가 올라옴) — 계산은 팝업에서 */
.calc-cta { display: grid; gap: 28px; align-items: center; background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); padding: 32px 22px; }
.cc-txt .big { text-align: left; }
.cc-txt .lede { margin: 12px 0 0; text-align: left; }
.cc-price { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.cc-price li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--bg); }
.cc-price li:first-child { box-shadow: inset 0 0 0 2px var(--b); background: var(--paper); }
.cc-price span { font-size: 15px; color: var(--sub); font-weight: 600; }
.cc-price b { font-size: 24px; font-weight: 800; letter-spacing: -.04em; }
.cc-price li:first-child b { color: var(--b); }
.cc-txt .fine { margin: 10px 0 0; }
.cc-txt .btn { margin-top: 20px; width: 100%; }
.cc-mock { position: relative; border-radius: 24px; background: linear-gradient(160deg, #EEF3FF, #E1E9FA); padding: 18px; }
.cc-mock .scene { display: grid; gap: 9px; text-align: left; }
.cc-mock .sc-q, .cc-mock .sc-res { box-shadow: 0 1px 3px rgba(11, 21, 48, .06); }

/* ── 기장료 계산 팝업: 휴대폰은 아래에서 올라오는 판, PC 는 가운데 창 */
dialog.sheet.calcdlg { width: 100%; max-width: 560px; max-height: calc(100dvh - 16px); margin: auto auto 0; border-radius: 26px 26px 0 0; overflow: auto; overscroll-behavior: contain; }
dialog.sheet.calcdlg[open] { animation: sheet-up .38s var(--ease); }
@keyframes sheet-up { from { transform: translateY(48px); opacity: 0; } }
.cd-in { display: grid; gap: 14px; padding: 18px 18px 0; text-align: left; }
.cd-in .top h2 { font-size: 21px; }
.cd-sub { margin: -8px 0 0; font-size: 15px; color: var(--sub); }
.cd-l { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; font-weight: 800; }
.cd-l b { width: 22px; height: 22px; border-radius: 7px; background: var(--ink); color: #fff; font-size: 12px; display: grid; place-items: center; flex: none; }
.cd-l small { font-size: 13px; font-weight: 500; color: var(--sub); }
.cd-opts { display: grid; gap: 8px; }
.cd-opts.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd-opts.five button:last-child { grid-column: 1 / -1; }
.cd-opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cd-opts button { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 10px; border: 0; border-radius: 14px; background: var(--bg); font-size: 15px; font-weight: 700; letter-spacing: -.03em; text-align: left; cursor: pointer; transition: background-color .15s, box-shadow .15s, transform .12s, opacity .2s; }
.cd-opts.three button { justify-content: center; text-align: center; padding: 8px 4px; font-size: 15px; }
.cd-opts button img { width: 34px; height: 34px; flex: none; }
.cd-opts button:active { transform: scale(.97); }
.cd-opts button[aria-pressed="true"] { background: var(--b-t); color: var(--b-d); box-shadow: inset 0 0 0 2px var(--b); }
.cd-opts button:disabled { opacity: .4; cursor: default; }
.cd-res { border-radius: 18px; padding: 16px; background: var(--bg); transition: background-color .25s, box-shadow .25s; }
.cd-res.done { background: var(--paper); box-shadow: inset 0 0 0 2px var(--b); }
.cd-res .lbl { margin: 0; font-size: 13px; font-weight: 700; color: var(--b-d); }
.cd-res .price { margin: 2px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -.05em; line-height: 1.2; }
.cd-res .price small { font-size: 14px; font-weight: 600; color: var(--sub); margin-left: 6px; letter-spacing: -.01em; }
.cd-res .incl { margin: 2px 0 0; font-size: 14px; color: var(--sub); }
.cd-res .why { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.cd-res.pop .price { animation: pop .45s var(--ease); }
@keyframes pop { from { transform: translateY(6px); opacity: .3; } }
.cd-acts { position: sticky; bottom: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; margin: 0 -18px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 -1px 0 var(--line); }
.cd-acts .btn { min-height: 52px; padding: 0 10px; font-size: 16px; }
.cd-note { margin: -6px 0 0; padding-bottom: 6px; }

/* ── 안심 판(lbox 보안 판: 파란 빛 사진 + 유리 방패 + 흰 카드) */
.tpanel { position: relative; border-radius: var(--r); overflow: hidden; color: #fff; isolation: isolate; background: radial-gradient(120% 90% at 15% 0%, #8496BC 0%, rgba(132, 150, 188, 0) 55%), linear-gradient(165deg, #5B6E95 0%, #32446D 50%, #1B2A4E 100%); }
.tp-bg { display: none; }
.tpanel::after { content: none; }
.tp-in { padding: 56px 18px 20px; text-align: center; }
.tp-in .shield { width: 88px; height: 88px; margin: 0 auto 14px; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .35)); }
.tp-in .big { color: #fff; }
.tp-lede { margin: 12px auto 0; max-width: 30em; font-size: 17px; color: #fff; }
.tcards { display: grid; gap: 10px; margin-top: 32px; text-align: left; }
.tcard { background: rgba(255, 255, 255, .97); color: var(--ink); border-radius: 20px; padding: 20px 18px; }
.tcard .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--b-t); color: var(--b); display: grid; place-items: center; margin-bottom: 12px; }
.tcard .ic svg { width: 20px; height: 20px; }
.tcard h3 { font-size: 18px; color: var(--b-d); }
.tcard p { margin: 6px 0 0; color: var(--sub); font-size: 15px; line-height: 1.6; }

/* ── 카톡·전화 판(lbox 모바일 판) */
.talk { display: grid; gap: 14px; }
.talk-kk { border-radius: var(--r); padding: 32px 22px; background: linear-gradient(160deg, #EAF1FF 0%, #DCE7FF 55%, #CFDDFF 100%); text-align: left; }
.talk-kk .ic3d { width: 72px; height: 72px; margin-bottom: 10px; }
.talk-kk h3 { font-size: 24px; }
.talk-kk p { margin: 8px 0 0; color: var(--ink-2); }
.talk-kk .btn { margin-top: 20px; }
.talk-kk .fine { margin-top: 10px; }
.talk-kk .tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; font-size: 19px; font-weight: 800; letter-spacing: -.03em; text-decoration: none; color: var(--ink); }
.talk-kk .tel svg { width: 20px; height: 20px; color: var(--b); }
.talk-kk { display: flex; flex-direction: column; align-items: flex-start; }
.talk-ui { align-self: stretch; display: grid; gap: 8px; margin-top: 28px; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, .55); }
.talk-ui .ex { justify-self: center; font-size: 12px; color: var(--mute); }
.rsv { background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); text-align: left; }
.rsv-sum { display: flex; align-items: center; gap: 14px; padding: 22px 20px; cursor: pointer; list-style: none; }
.rsv-sum::-webkit-details-marker { display: none; }
.rsv-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--b-t); color: var(--b); display: grid; place-items: center; flex: none; }
.rsv-ic svg { width: 22px; height: 22px; }
.rsv-sum b { display: block; font-size: 19px; letter-spacing: -.03em; }
.rsv-sum small { display: block; font-size: 14px; color: var(--sub); }
.rsv-ar { margin-left: auto; width: 11px; height: 11px; flex: none; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg); margin-top: -6px; transition: transform .25s; }
.rsv[open] .rsv-ar { transform: rotate(-135deg); margin-top: 4px; }
.consult { padding: 4px 20px 24px; display: grid; gap: 16px; text-align: left; }
.consult > h3 { font-size: 22px; }
.consult > p { margin: -8px 0 0; color: var(--sub); font-size: 15px; }
.fld { display: grid; gap: 6px; }
.fld label, .fld .lb { font-size: 15px; font-weight: 700; }
.fld label small, .fld .lb small { font-weight: 500; color: var(--sub); }
.fld input { width: 100%; min-height: 52px; border: 0; border-radius: 12px; padding: 13px 15px; font: inherit; font-size: 17px; background: var(--bg); color: var(--ink); }
.fld input::placeholder { color: #5F6B7A; }
.fld input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--b); background: #fff; }
.fld.bad input { box-shadow: inset 0 0 0 2px var(--err); }
.times { display: flex; flex-wrap: wrap; gap: 8px; }
.times label { position: relative; }
.times input { position: absolute; opacity: 0; inset: 0; }
.times span { display: inline-flex; min-height: 44px; align-items: center; padding: 0 15px; border-radius: 999px; background: var(--bg); font-size: 15px; font-weight: 600; cursor: pointer; }
.times input:checked + span { background: var(--b-t); color: var(--b-d); box-shadow: inset 0 0 0 2px var(--b); }
.times input:focus-visible + span { outline: 3px solid var(--b); outline-offset: 2px; }
.agree { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; background: var(--bg); border-radius: 12px; padding: 13px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.agree input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--b); }
.agree b { color: var(--ink); }
.agree a { color: var(--b); }
.msg { min-height: 1.2em; margin: 0; font-size: 15px; color: var(--err); }
.consult.done { text-align: center; justify-items: center; }
.consult.done .ok { width: 60px; height: 60px; border-radius: 20px; background: var(--b-t); color: var(--b); display: grid; place-items: center; }
.consult.done .ok svg { width: 32px; height: 32px; }
.consult.done h2 { font-size: 24px; letter-spacing: -.04em; margin: 0; }
.consult.done p { margin: 0; color: var(--sub); }
.consult.done:focus { outline: none; }

/* ── 업종 흐름띠(lbox 고객사 띠): 두 줄이 반대로 천천히 흐름 */
.marq { display: grid; gap: 12px; overflow: hidden; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mtrack { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0 20px; }
.js-mq .mtrack { flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding: 0 12px 0 0; }
.mchip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 12px; border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 1px var(--line) inset; font-size: 17px; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }
.mchip img { width: 40px; height: 40px; }
.js-mq .mrow .mtrack { animation: mq 46s linear infinite; }
.js-mq .mrow.rev .mtrack { animation-direction: reverse; animation-duration: 52s; }
@keyframes mq { to { transform: translateX(-50%); } }
.marq-note { margin: 18px 0 0; text-align: center; }
.ind-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.ind-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; }
.ind-links img { width: 30px; height: 30px; }

/* ── 자주 묻는 질문 */
.faq { display: grid; text-align: left; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 21px 4px; font-weight: 700; font-size: 17px; letter-spacing: -.03em; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg); margin-top: -5px; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 5px; }
.faq .a { padding: 0 4px 22px; color: var(--sub); font-size: 17px; }
.faq .a p { margin: 0; }

/* ── 마무리(lbox: 제목 + 버튼 + 숫자 카드) */
.closing { padding-block: 72px 88px; text-align: center; }
.closing .cta { margin-top: 26px; }
.stats { display: grid; margin: 40px auto 0; max-width: 1000px; background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); padding: 6px 22px; text-align: left; }
.stat { padding: 20px 0; }
.stat + .stat { border-top: 1px solid var(--line); }
.stat > span { display: block; font-size: 15px; color: var(--sub); }
.stat b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.05em; line-height: 1.3; margin-top: 4px; }
.stat b em { font-style: normal; color: var(--b); }
.stat b sup { font-size: 15px; color: var(--sub); }
.stat small { display: block; margin-top: 2px; font-size: 13px; color: var(--sub); }
.stats-note { margin: 14px auto 0; text-align: center; }

/* ── 바닥글 */
.ft { padding-block: 32px 128px; font-size: 13px; color: var(--sub); line-height: 1.75; border-top: 1px solid var(--line); }
.ft .logo { margin-bottom: 8px; }
.ft .logo b { font-size: 18px; }
.ft p { margin: 0; }
.ft a { color: var(--ink-2); }
.ft .biz { display: flex; flex-direction: column; }
.policy-h { font-size: 32px; }
.policy h2 { font-size: 19px; font-weight: 800; letter-spacing: -.03em; margin: 32px 0 8px; }
.policy p { margin: 0 0 10px; color: var(--ink-2); font-size: 17px; }

/* ── 아래 고정 버튼(휴대폰): 떠 있는 흰 캡슐 · 전화 1/3 + 카톡 2/3 */
.dock { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 50; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-radius: 20px; box-shadow: 0 1px 0 rgba(11, 21, 48, .04), 0 12px 32px -10px rgba(11, 21, 48, .3); padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; transition: transform .3s var(--ease), opacity .3s, visibility 0s linear .3s; }
.dock .btn { min-height: 50px; padding: 0 10px; font-size: 16px; }
.dock.hide { transform: translateY(140%); opacity: 0; visibility: hidden; }
.dock:not(.hide) { transition-delay: 0s; }

/* ── PC 카톡 안내 창 */
dialog.sheet { border: 0; padding: 0; width: calc(100% - 32px); max-width: 440px; margin: auto; border-radius: 26px; background: var(--paper); color: var(--ink); }
dialog.sheet::backdrop { background: rgba(11, 21, 48, .55); }
.sheet .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sheet .top h2 { font-size: 21px; font-weight: 800; letter-spacing: -.04em; margin: 0; }
.sheet .x { width: 44px; height: 44px; border: 0; background: var(--bg); border-radius: 12px; cursor: pointer; display: grid; place-items: center; flex: none; }
.sheet .x svg { width: 20px; height: 20px; }
.pcbox { padding: 24px 22px; display: grid; gap: 12px; }
.pcbox p { margin: 0; color: var(--ink-2); }
.pcbox .pc-tel { font-size: 30px; font-weight: 800; letter-spacing: -.04em; color: var(--ink); margin-top: 6px; }
.pcbox .acts { display: grid; gap: 8px; margin-top: 8px; }

/* PC 오른쪽 아래 떠 있는 카톡 버튼(네이버 웍스식) — 휴대폰은 아래 고정 버튼이 대신함 */
.fab { display: none; }

/* 알림 띠 */
.toast { position: fixed; left: 20px; right: 20px; margin: 0 auto; width: fit-content; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); transform: translateY(16px); opacity: 0; pointer-events: none; z-index: 60; background: var(--ink); color: #fff; font-size: 15px; line-height: 1.5; padding: 13px 18px; border-radius: 14px; max-width: calc(100% - 40px); transition: opacity .2s, transform .2s; }
.toast.on { opacity: 1; transform: none; }
.toast { text-wrap: balance; }
.cd-acts .toast { position: absolute; top: auto; bottom: calc(100% + 10px); left: 18px; right: 18px; }

/* 스크롤 등장: 글은 올라오고, 그림은 살짝 커졌다 제자리(한 번만) */
.js-rv .rv { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-rv .rv.in { opacity: 1; transform: none; }
.js-rv .feat.rv .feat-pic img, .js-rv .tpanel.rv .tp-bg { transform: scale(1.08); transition: transform 1.4s var(--ease); }
.js-rv .feat.rv.in .feat-pic img, .js-rv .tpanel.rv.in .tp-bg { transform: none; }
.js-rv .feats .feat.rv:nth-child(2) { transition-delay: .08s; }
.js-rv .feats .feat.rv:nth-child(4) { transition-delay: .08s; }

/* ── 넓은 화면 */
@media (min-width: 720px) {
  dialog.sheet.calcdlg { margin: auto; border-radius: 26px; max-height: calc(100dvh - 48px); }
  .cd-in { padding: 24px 26px 0; }
  .cd-acts { margin: 0 -26px; padding: 14px 26px 16px; }
  .cd-opts.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cd-opts.five button { flex-direction: column; justify-content: center; text-align: center; gap: 4px; min-height: 92px; font-size: 14px; }
  .cd-opts.five button:last-child { grid-column: auto; }
  .cond span { display: inline; }
  .cond span + span::before { content: " · "; }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; }
  .tcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 12px; }
  .stat { padding: 26px 24px; }
  .stat + .stat { border-top: 0; border-left: 1px solid var(--line); }
  .ft .biz { flex-direction: row; flex-wrap: wrap; column-gap: 16px; }
  .ft .biz span { white-space: nowrap; }
}
@media (min-width: 960px) {
  .hd { padding-left: 20px; padding-right: 20px; }
  .hd .lk { display: inline-flex; }
  .hero { padding-top: 56px; }
  .hero h1 { font-size: 54px; letter-spacing: -.05em; }
  .hero h1 br { display: none; }
  .hero h1 .vat { font-size: 19px; padding: 4px 11px; margin: -12px 0 0 12px; border-radius: 10px; }
  .hero .lede { font-size: 20px; }
  .cta { display: flex; justify-content: center; max-width: none; margin-top: 32px; }
  .cta .btn { min-width: 200px; padding: 0 26px; font-size: 17px; }
  .cond { font-size: 15px; }
  .show { margin-top: 40px; padding: 0 20px; }
  .show-frame { height: 580px; }
  .show-pic img, .show-bg { object-position: 50% 50%; }
  .show-frame[data-hero="cafe"] .show-pic img, .show-frame[data-hero="cafe"] .show-bg { object-position: 50% 50%; }
  .device { top: 64px; width: 330px; }
  .screen { height: 600px; }
  .float { display: none; gap: 16px; position: absolute; right: calc(50% + 165px + 60px); top: 104px; width: 262px; z-index: 1; }
  .float .mini, .float .noti { position: relative; box-shadow: 0 2px 4px rgba(11, 21, 48, .06), 0 18px 40px -16px rgba(11, 21, 48, .35); }
  .float .mini::after, .float .noti::after { content: ""; position: absolute; left: 100%; top: 50%; width: 52px; border-top: 2px dashed rgba(255, 255, 255, .9); }
  .float .mini::before, .float .noti::before { content: ""; position: absolute; left: calc(100% + 48px); top: calc(50% - 4px); width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(37, 84, 240, .35); }
  .float .noti { padding: 12px 13px; }
  .float .noti b { font-size: 14px; }
  .f3d { position: absolute; right: -34px; top: -46px; width: 76px; height: 76px; filter: drop-shadow(0 12px 18px rgba(11, 21, 48, .25)); }
  .fab { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 24px; bottom: 24px; z-index: 45; height: 56px; padding: 0 20px 0 16px; border-radius: 999px; background: #FEE500; color: #191919; font-size: 16px; font-weight: 800; text-decoration: none; box-shadow: 0 12px 28px -10px rgba(11, 21, 48, .45); transition: transform .2s; }
  .fab:hover { transform: translateY(-2px); }
  .fab svg { width: 22px; height: 22px; }
  .bub { font-size: 15px; }
  .show-cap { grid-template-columns: auto minmax(0, 1fr) auto; margin-top: 22px; padding: 0 24px; }
  .tabs { grid-column: auto; }
  .cap { font-size: 19px; }
  .sec { padding-block: 104px; }
  .sec-h { margin-bottom: 56px; }
  .big { font-size: 42px; letter-spacing: -.05em; }
  .lede { font-size: 19px; }
  h3 { font-size: 24px; }
  .calc-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding: 56px; }
  .cc-txt .btn { width: auto; min-width: 240px; }
  .cc-mock { padding: 28px; }
  .hbadge { font-size: 17px; min-height: 42px; padding-right: 18px; }
  .hbadge img { width: 32px; height: 32px; }
  .tp-in { padding: 88px 56px 56px; }
  .tp-in .shield { width: 104px; height: 104px; }
  .tcards { margin-top: 48px; }
  .talk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
  .talk-kk { padding: 44px 44px 40px; }
  .talk-ui { margin-top: auto; }
  .talk-kk .tel { margin-bottom: 28px; }
  .talk-kk h3 { font-size: 30px; }
  .talk-kk .btn { align-self: flex-start; min-width: 240px; }
  .rsv-sum { padding: 30px 34px; }
  .consult { padding: 4px 34px 32px; }
  .talk { align-items: start; }
  .closing { padding-block: 128px; }
  .stat b { font-size: 40px; }
  .dock { display: none; }
  .ft { padding-bottom: 48px; }
  .toast { bottom: 32px; }
}
@media (min-width: 1100px) {
  .float { display: grid; }
}

/* ── 모션 1차(11/4): 모두 '보일 때·처음 열 때 한 번'. 되풀이 둥둥 움직임 없음 */
/* 첫 화면 글자 차례 등장 */
.js-rv .hero-txt > * { animation: rise-in .8s var(--ease) both; }
.js-rv .hero-txt > :nth-child(2) { animation-delay: .08s; }
.js-rv .hero-txt > :nth-child(3) { animation-delay: .16s; }
.js-rv .hero-txt > :nth-child(4) { animation-delay: .24s; }
.js-rv .hero-txt > :nth-child(5) { animation-delay: .3s; }
.js-rv .hero-txt > :nth-child(6) { animation-delay: .36s; }
.js-rv .hero-txt > :nth-child(n+7) { animation-delay: .4s; }
.js-rv .show { animation: rise-in 1s var(--ease) .3s both; }
@keyframes rise-in { from { transform: translateY(18px); } }
/* 카드 사진 위 알림 조각 */
.feat-pic { position: relative; }
.feat-ui { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 16px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 30px -12px rgba(11, 21, 48, .35); text-align: left; }
.feat-ui .fu-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--b-t); color: var(--b); display: grid; place-items: center; flex: none; }
.feat-ui .fu-ic svg { width: 18px; height: 18px; }
.feat-ui b { display: block; font-size: 14px; letter-spacing: -.03em; line-height: 1.35; }
.feat-ui small { display: block; font-size: 12px; color: var(--sub); }
.feat-ui .fu-tag { margin-left: auto; flex: none; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: var(--ink); padding: 3px 8px; border-radius: 8px; }
.js-rv .feat .feat-ui { opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .6s var(--ease) .55s, transform .7s var(--ease) .55s; }
.js-rv .feat.in .feat-ui { opacity: 1; transform: none; }
/* 안심 카드·숫자 카드 차례 등장 */
.js-rv .tpanel .tcard { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.js-rv .tpanel.in .tcard { opacity: 1; transform: none; }
.js-rv .tpanel.in .tcard:nth-child(2) { transition-delay: .12s; }
.js-rv .tpanel.in .tcard:nth-child(3) { transition-delay: .24s; }
@media (min-width: 960px) {
  .feat-ui { left: 20px; right: auto; bottom: 20px; min-width: 300px; padding: 13px 15px; }
  .feat-ui b { font-size: 15px; }
}

/* ── 6차(11/4 저녁): lbox·네이버 웍스 비교 반영 */
.wrap { max-width: 1200px; }
/* 첫 화면 2단(PC) — 휴대폰은 글 → 장면 판 */
.hero-grid { max-width: 1200px; margin: 0 auto; }
.hero-txt { padding: 0 max(20px, env(safe-area-inset-left, 0px)); }
.tabs button em { font-style: normal; font-weight: 800; color: var(--mute); margin-right: 6px; font-size: 13px; }
.tabs button[aria-pressed="true"] em { color: var(--b); }
.arrows [data-pause] .i-play { display: none; }
.arrows [data-pause][aria-pressed="true"] .i-play { display: block; }
.arrows [data-pause][aria-pressed="true"] .i-pause { display: none; }
/* 믿음 띠: 첫 화면 바로 아래 */
.strip { padding: 36px 0 8px; }
.strip-t { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; margin: 0 0 16px; text-align: center; }
.strip-t b { font-size: 19px; font-weight: 740; letter-spacing: -.03em; }
.strip-t b em { font-style: normal; color: var(--b); font-size: 24px; }
.strip-t sup { font-size: 13px; color: var(--sub); }
.strip-t span { font-size: 15px; color: var(--sub); }
.strip .marq-note { margin: 12px 0 0; }
/* 하는 일: 옅은 하늘색 띠 · 카드 안에 글(왼쪽 위) + 그림(아래) */
.band-sky { background: linear-gradient(180deg, #EEF4FF 0%, #F4F7FE 100%); }
.feats { grid-template-columns: minmax(0, 1fr); }
.feat { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 2px rgba(11, 21, 48, .04); }
.feat h3 { order: 1; margin: 0; padding: 26px 24px 0; }
.feat p { order: 2; margin: 8px 0 0; padding: 0 24px; }
.feat .feat-pic { order: 3; margin-top: 20px; border-radius: 0; }
/* 질문: 왼쪽 제목·카톡 / 오른쪽 목록 */
.faq-side { margin-bottom: 24px; }
.faq-side .lede { margin: 12px 0 0; }
.faq-side .btn { margin-top: 20px; }
/* 마무리: 파란 띠 */
.band-blue { background: radial-gradient(90% 120% at 85% 0%, #4C74FF 0%, rgba(76, 116, 255, 0) 60%), linear-gradient(160deg, #2554F0 0%, #1C43D1 100%); color: #fff; }
.band-blue .big { color: #fff; }
.band-blue .stats { color: var(--ink); box-shadow: 0 24px 60px -30px rgba(5, 20, 80, .6); }
.band-blue .stats-note { color: #DCE6FF; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #EEF1F6; }
.btn-outline-w { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.btn-outline-w:hover { background: rgba(255, 255, 255, .1); }
@media (min-width: 720px) {
  .feats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
  .feat { grid-column: span 2; }
  .feat-big { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
  .feat-big h3 { align-self: end; padding: 40px 40px 0; font-size: 30px; }
  .feat-big p { align-self: start; padding: 0 40px; font-size: 18px; }
  .feat-big .feat-pic { grid-column: 2; grid-row: 1 / span 2; margin: 0; height: 100%; aspect-ratio: auto; min-height: 340px; }
  .feat-big h3, .feat-big p { grid-column: 1; }
  .feat-rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .feat-rev .feat-pic { grid-column: 1; }
  .feat-rev h3, .feat-rev p { grid-column: 2; }
  .faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
  .faq-side { position: sticky; top: 96px; text-align: left; }
}
@media (min-width: 1024px) {
  .hero { padding-top: 48px; text-align: left; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 40px; align-items: center; padding: 0 24px; }
  .hero-txt { padding: 0; }
  .hero-txt .cta { justify-content: flex-start; }
  .hero-txt .lede { margin-left: 0; }
  .hero-txt .cond, .hero-txt .ch-note { text-align: left; }
  .hero h1 { font-size: 50px; }
  .hero h1 br { display: inline; }
  .show { margin: 0; padding: 0; max-width: none; }
  .show-frame { height: 560px; }
  .show-pic img, .show-bg { object-position: 86% 30%; }
  .device { left: 8%; transform: none; top: 56px; width: 290px; }
  .screen { height: 560px; }
  .show-cap { padding: 0; grid-template-columns: minmax(0, 1fr) auto; }
  .show-cap .tabs { grid-column: 1 / -1; }
  .ex-label { padding: 0; }
}

/* ── 6.1차(11/4 밤): 심사 1회째 수리 */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 시연 틀 치수: --fh 틀 높이 · --dt 휴대폰 위치. 휴대폰 아래 끝 = 틀 아래 끝(내용이 틀 밖으로 잘리지 않게) */
.show-frame { --fh: 600px; --dt: 112px; height: var(--fh); }
.device { top: var(--dt); }
.screen { height: calc(var(--fh) - var(--dt) - 10px); }
/* 상담 시간 밖 안내(early.js 가 tm-off 를 붙임) */
.hours-note { display: none; margin: 6px 0 0; font-size: 13px; line-height: 1.6; font-weight: 600; color: var(--b-d); }
.tm-off .hours-note { display: block; }
.cd-in .hours-note { margin: -6px 0 0; }
/* 전화 링크: 줄 높이는 그대로, 누르는 곳만 44px */
.ch-note .ch-tel { display: inline-block; padding: 12px 6px; margin: -12px -6px; }
.hero-proof { display: none; }
/* AI 표기: 영상과 같은 화면에(규정) */
/* 시연 휴대폰을 누르면 카톡·계산(장면 1·2) */
.show-frame[data-cur="0"] .device, .show-frame[data-cur="1"] .device { cursor: pointer; }
/* 장면 1(카톡): 말풍선 아래 입력줄로 끝맺음 */
.screen .scene[data-scene="0"] { display: flex; flex-direction: column; align-items: flex-start; }
.screen .scene[data-scene="0"] .day { align-self: center; }
.screen .scene[data-scene="0"] .bub.me { align-self: flex-end; }
.scr-in { align-self: stretch; margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(11, 21, 48, .06); font-size: 13px; line-height: 1.4; color: var(--mute); }
.scr-in .kk { width: 26px; height: 26px; }
/* 아직 안 나온 말풍선은 자리도 차지하지 않게(입력 중 표시가 끼어도 입력줄이 밀려 내려가지 않게) */
.play .scene .bub:not(.in) { display: none; }
/* 탭(01·02·03): 휴대폰(719px 이하)은 칸을 셋으로 나눠 좁은 화면에서도 잘리지 않게 · 초점 테두리는 안쪽에 */
.tabs button:focus-visible { outline-offset: -3px; }
@media (max-width: 719px) {
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  .tabs button { min-width: 0; padding: 0 6px; font-size: 14px; white-space: nowrap; letter-spacing: -.03em; }
  .tabs button em { margin-right: 4px; }
  .tabs button i { left: 10px; right: 10px; }
}
/* 계산 구획: 가격 옆 부가세 · 예시 화면을 눌러도 계산 팝업 */
.cc-price b small { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--sub); letter-spacing: -.01em; }
.cc-mock { cursor: pointer; }
.cc-hit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 24px; background: transparent; cursor: pointer; }
/* 큰 글 위 작은 머리말(lbox식) */
.big .eb { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: -.02em; color: var(--b); }
.tpanel .big .eb { color: #C9D6FF; }
/* 안심 판 사무소 정보 */
.tp-biz { margin: 10px auto 0; max-width: 40em; font-size: 13px; line-height: 1.6; color: #fff; opacity: .92; text-wrap: balance; }
.ex-label, .stat small, .marq-note, .stats-note { text-wrap: balance; }
/* 믿음 띠: 누적 고객을 큰 제목으로 */
.strip { padding: 44px 0 8px; }
.strip-t { display: block; text-align: center; margin: 0 auto 20px; }   /* .wrap 가운데 맞춤을 덮어쓰지 않게 */
.strip-t .big em { font-style: normal; color: var(--b); }
.strip-t .big sup { font-size: 15px; color: var(--sub); font-weight: 600; }
.strip-t p { margin: 8px 0 0; font-size: 15px; color: var(--sub); }
.band-sky { background: linear-gradient(180deg, #E8F0FF 0%, #F4F7FE 100%); }
/* 하는 일 카드: 그림을 카드 바닥에 맞춰 세 장의 그림·알림 높이를 같게 */
.feat:not(.feat-big) .feat-pic { margin-top: auto; }
.feat:not(.feat-big) p { padding-bottom: 20px; }
.feats-note { margin: 16px 0 0; text-align: center; }
/* 마무리 파란 띠: 초점 테두리를 흰색으로(파란 바탕과 구분) */
.band-blue :focus-visible { outline-color: #fff; }
/* PC 카톡 안내 창: QR · 복사 안내 */
.kk-qrbox { display: grid; justify-items: center; gap: 6px; padding: 14px; border-radius: 18px; background: var(--bg); text-align: center; }
.kk-qrbox .kk-qr { width: 148px; height: 148px; margin: 4px auto 0; border-radius: 8px; background: #fff; }
.pcbox .kk-qrbox p { font-size: 15px; font-weight: 700; color: var(--ink); }
.pcbox .pc-copied { padding: 10px 12px; border-radius: 12px; background: var(--b-t); color: var(--b-d); font-size: 15px; font-weight: 600; }
/* PC 떠 있는 카톡 버튼: 첫 화면 카톡 버튼이 보이는 동안 숨김 */
.fab { transition: transform .2s, opacity .2s, visibility 0s linear .2s; }
.fab.hide { opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; }
.fab:not(.hide) { transition-delay: 0s; }

/* 휴대폰(719px 이하): 첫 화면을 조금 줄이고, 시연 휴대폰 안 글을 촘촘히(내용이 틀 안에 다 들어오게) */
@media (max-width: 719px) {
  .hero { padding-top: 24px; }
  .hbadge { margin-bottom: 12px; }
  .cta { margin-top: 20px; }
  .cond { margin-top: 12px; }
  .cond span { display: inline; }
  .cond span:first-child { display: block; }
  .cond span + span + span::before { content: " · "; }
  .ch-note .sep { display: none; }
  .ch-note .ch-tel { display: table; margin: -12px auto; }
  .show { margin-top: 20px; }
  .show-frame { --fh: 500px; --dt: 88px; }
  .device { width: 248px; }
  .screen .scene { padding: 12px 10px; gap: 7px; }
  .screen .scene[data-scene="0"] { gap: 6px; }
  .screen .scene[data-scene="0"] .bub { padding: 8px 11px; }
  .screen .sc-t { display: none; }
  .screen .sc-q { padding: 8px 10px; }
  .screen .sc-q > span { margin-bottom: 4px; }
  .screen .sc-chips { gap: 4px; }
  .screen .sc-chips i { font-size: 11.5px; padding: 4px 7px; }
  .screen .sc-res { padding: 9px 12px; }
  .screen .sc-res b { font-size: 23px; }
  .screen .report { padding: 11px 12px; }
  .screen .noti { gap: 8px; padding: 10px; }
  .screen .noti .ic { width: 28px; height: 28px; }
  .screen .bars { height: 46px; }
  .bub { font-size: 13.5px; }
}
/* 태블릿(720~959px): 넓은 틀이라 휴대폰을 PC 크기로 · 작은 카드도 한 줄 가득(글 왼쪽·그림 오른쪽) */
@media (min-width: 720px) and (max-width: 959px) {
  .show-frame { --fh: 600px; --dt: 104px; }
  .device { width: 290px; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .feat:not(.feat-big) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
  .feat:not(.feat-big) h3 { grid-column: 1; align-self: end; padding: 32px 32px 0; }
  .feat:not(.feat-big) p { grid-column: 1; align-self: start; padding: 0 32px 8px; }
  .feat:not(.feat-big) .feat-pic { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}
@media (min-width: 720px) {
  .cond span { white-space: nowrap; }
}
@media (min-width: 960px) {
  .show-frame { --fh: 580px; --dt: 64px; }
  .cd-opts.five button { padding: 8px 4px; font-size: 13.5px; letter-spacing: -.04em; }
}
/* PC(1024px 이상): 틀 높이를 화면 높이에 맞춰(노트북에서도 01·02·03 이 첫 화면에) · 글을 틀 가운데에 · 믿음 숫자 한 줄 */
@media (min-width: 1024px) {
  .hero { --fh: clamp(520px, calc(100vh - 200px), 560px); }
  .hero-grid { align-items: start; }
  .hero-txt { padding-top: max(0px, calc((var(--fh) - 520px) / 2)); }
  .show-frame { --fh: inherit; --dt: 56px; }
  .hero-proof { display: block; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
  .hero-proof b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--b); }
  .hero-proof sup { font-size: 12px; color: var(--sub); }
  .hero-proof small { display: block; margin-top: 2px; font-size: 12px; color: var(--sub); }
  .show-cap .cap { min-height: 3.1em; }
}
@media (min-width: 1024px) {
  .cond span:first-child { display: block; }
  .cond span:nth-child(2)::before { content: none; }
}
@media (min-width: 1024px) and (max-height: 819px) {
  .screen .sc-t { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js-rv .rv, .play .bub, .play .sc-q, .play .sc-res, .play .noti, .play .report, .js-rv .feat .feat-ui, .js-rv .tpanel .tcard { opacity: 1 !important; transform: none !important; }
}

/* 7차(대표님 1순위): 무슨 서비스인지 바로 · 카톡·전화 연락 쉽게 */
.hincl { margin: 16px auto 0; max-width: 440px; }
.hincl-t { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--b-d); }
.hincl ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hincl li { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 650; line-height: 1.3; color: var(--ink); text-align: left; }
.hincl li svg { flex: none; width: 16px; height: 16px; color: var(--b); }
.hero .cta { grid-template-columns: 1fr 1fr; }
.hero .cta .btn-primary { grid-column: 1 / -1; }
.btn-tel .t-d { display: none; }
.btn-tel.off .t-m { display: inline; }
.play .scene.on .noti.d1 { animation-delay: .2s; }
.play .scene.on .noti.d2 { animation-delay: 1.1s; }
.play .scene.on .noti.d3 { animation-delay: 2s; }
.incl-box { display: grid; gap: 10px; margin: 28px 0 20px; padding: 20px; border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow); text-align: left; }
.ib-t { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--b-d); }
.ib-in ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.ib-in li { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.ib-in li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--b); }
.ib-x { padding: 14px 16px; border-radius: 16px; background: var(--bg); }
.ib-x .ib-t { margin-bottom: 4px; color: var(--ink-2); }
.ib-x p:last-child { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sub); }
.cc-pick { border-radius: 24px; background: linear-gradient(160deg, #EEF3FF, #E1E9FA); padding: 18px; text-align: left; }
.cc-pick-t { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--b-d); }
.cc-inds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-inds button { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 12px; border: 0; border-radius: 16px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; text-align: left; cursor: pointer; box-shadow: 0 1px 3px rgba(11, 21, 48, .07); transition: transform .12s var(--ease), box-shadow .2s var(--ease); }
.cc-inds button img { flex: none; width: 34px; height: 34px; }
.cc-inds button:hover { box-shadow: 0 0 0 2px var(--b-l), 0 6px 16px -8px rgba(37, 84, 240, .45); }
.cc-inds button:active { transform: scale(.97); }
.cc-inds button:last-child { grid-column: 1 / -1; }
.cc-pick .fine { margin: 12px 0 0; }
.steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.steps li { position: relative; background: rgba(255, 255, 255, .97); color: var(--ink); border-radius: 20px; padding: 18px 18px 18px 62px; }
.st-n { position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--b); color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 800; }
.steps h3 { margin: 3px 0 0; font-size: 18px; color: var(--b-d); }
.steps p { margin: 6px 0 0; color: var(--sub); font-size: 15px; line-height: 1.6; }
.tp-notes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.tp-notes li { font-size: 14px; line-height: 1.6; color: #fff; opacity: .95; }
.tp-notes b { margin-right: 6px; }
.js-rv .tpanel .steps li { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.js-rv .tpanel.in .steps li { opacity: 1; transform: none; }
.js-rv .tpanel.in .steps li:nth-child(2) { transition-delay: .15s; }
.js-rv .tpanel.in .steps li:nth-child(3) { transition-delay: .3s; }
.nudge { margin: 8px 0 0; font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--b-d); }
.closing { background: linear-gradient(180deg, #FFFFFF 0%, #EEF2F8 100%); }
.closing .nudge { margin-top: 12px; }
@media (min-width: 720px) {
  .ib-in ul { grid-template-columns: 1fr 1fr; }
  .incl-box { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; gap: 18px; padding: 28px; }
  .cc-inds { grid-template-columns: 1fr 1fr 1fr; }
  .cc-inds button:last-child { grid-column: auto; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }
  .tp-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (min-width: 960px) {
  .incl-box { margin-bottom: 28px; }
  .cc-pick { padding: 24px; }
  .cc-inds { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cc-inds button { min-height: 76px; padding: 10px 16px; font-size: 17px; }
  .cc-inds button img { width: 48px; height: 48px; }
  .cc-inds button:last-child { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .hero .cta { display: flex; flex-wrap: wrap; }
  .btn-tel .t-m { display: none; }
  .btn-tel .t-d { display: inline; }
  .btn-tel.off .t-d { display: none; }
  .hero .cta .btn-tel { order: 3; flex-basis: 100%; justify-content: flex-start; min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--ink-2); font-size: 15px; }
  .hero .cta .btn-tel:hover { color: var(--b-d); }
}
@media (min-width: 1024px) {
  .hincl { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js-rv .tpanel .steps li { opacity: 1 !important; transform: none !important; }
}
/* 상단 오른쪽: [기장료 계산][카톡 상담] 나란히(대표님 11/4) */
.hd .hd-calc { margin-right: 6px; }
.hd .hd-calc svg { width: 17px; height: 17px; }
@media (max-width: 379px) {
  .hd .bar { padding-right: 6px; padding-left: 10px; }
  .hd .btn-sm { padding: 0 11px; font-size: 14px; }
  .hd .hd-calc svg { display: none; }
  .hd .hd-calc { margin-right: 4px; }
}

/* ── 7차: 꾸밈 상자 걷어 내기(대표님 11/4 "네모박스 좀 빼") — 여백·가는 줄·글자로 나눔. 버튼·팝업·예약 칸·시연 휴대폰·안심 판만 상자 */
/* 첫 화면 '기장료에 포함': 체크 + 글자 */
.hincl ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.hincl li { padding: 2px 0; border-radius: 0; background: none; box-shadow: none; font-size: 15px; }
/* 하는 일: 흰 카드 없이 그림 → 제목 → 설명 */
.feats .feat { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.feats .feat .feat-pic { order: 0; margin: 0; border-radius: var(--r); }
.feats .feat h3 { order: 1; margin: 18px 0 0; padding: 0; }
.feats .feat p { order: 2; margin: 8px 0 0; padding: 0; }
/* 포함/별도: 상자 없이 가는 줄 */
.incl-box { padding: 0; border-radius: 0; background: none; box-shadow: none; margin: 32px 0 40px; }
.ib-x { padding: 16px 0 0; border-radius: 0; background: none; border-top: 1px solid #D5DEEE; }
/* 기장료 계산 판: 큰 흰 상자·가격 상자·업종 판 없이 */
.calc-cta { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.cc-price { border-top: 1px solid var(--line); }
.cc-price li, .cc-price li:first-child { padding: 14px 2px; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid var(--line); }
.cc-pick { padding: 0; border-radius: 0; background: none; }
.cc-inds button { border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px #D3D8E0; }
.cc-inds button:hover { box-shadow: inset 0 0 0 1.5px var(--b); }
/* 시작 3단계: 진한 판 위에 번호 + 글자 */
.steps li { padding: 0 0 0 46px; border-radius: 0; background: none; color: #fff; }
.steps .st-n { left: 0; top: 0; background: #fff; color: var(--b-d); }
.steps h3 { margin-top: 2px; color: #fff; }
.steps p { color: rgba(255, 255, 255, .86); }
/* 카톡 판·예시 대화: 상자 없이 */
.talk-kk { padding: 0; border-radius: 0; background: none; }
.talk-ui { padding: 0; border-radius: 0; background: none; }
.rsv { box-shadow: inset 0 0 0 1px var(--line); }
/* 업종 흐름띠: 아이콘 + 글자 */
.mchip { padding: 8px 18px 8px 0; background: none; box-shadow: none; }
/* 마무리 숫자: 상자 없이 줄로 */
.stats { padding: 0; border-radius: 0; background: none; box-shadow: none; }
@media (min-width: 720px) {
  .ib-x { padding: 0 0 0 24px; border-top: 0; border-left: 1px solid #D5DEEE; }
  .steps { gap: 32px; }
  .feats .feat:not(.feat-big) { column-gap: 32px; }
}
@media (min-width: 960px) {
  .feats .feat-big { column-gap: 56px; }
  .feats .feat-big .feat-pic { border-radius: var(--r); }
  .stats .stat:first-child { padding-left: 0; }
}
@media (min-width: 1024px) {
  .hincl ul { justify-content: flex-start; }
}

/* ── 7차: 정렬 하나로(대표님 11/4 밤 "텍스트 정렬이 개판") — 모든 글은 왼쪽 맞춤, 같은 왼쪽 선(휴대폰 20px · PC 콘텐츠 왼쪽) */
.hero, .sec-h, .strip-t, .tp-in, .closing, .marq-note, .stats-note, .ch-note, .cond { text-align: left; }
.lede, .hero .lede, .sec-h .lede { margin-left: 0; margin-right: 0; }
.cta, .hero .cta, .closing .cta { margin-left: 0; margin-right: 0; justify-content: flex-start; }
.cond, .hincl, .stats, .stats-note { margin-left: 0; margin-right: 0; }
.hincl ul { justify-content: flex-start; }
.tp-in .shield { margin: 0 0 14px; }
.ch-note .ch-tel { margin-left: 0; margin-right: 0; }
.hd { padding-left: 8px; padding-right: 8px; }
.hd .bar { padding-left: 12px; padding-right: 6px; }
@media (min-width: 960px) {
  .cta, .hero .cta, .closing .cta { justify-content: flex-start; }
  .hd { padding-left: 20px; padding-right: 20px; }
  .hd .bar { max-width: 1200px; padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 1024px) {
  .hero-grid { padding: 0 20px; }
}

/* ── 7차: 기장료 계산 자세히 — 정하는 기준 세 가지 · 결과에 기준/포함/별도/달라지면 */
.cc-how { list-style: none; margin: 20px 0 0; padding: 0; counter-reset: how; display: grid; gap: 14px; }
.cc-how li { counter-increment: how; position: relative; padding-left: 34px; font-size: 15px; line-height: 1.6; color: var(--sub); }
.cc-how li::before { content: counter(how); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; line-height: 24px; text-align: center; }
.cc-how b { display: block; font-size: 16px; color: var(--ink); }
.cc-how + .cc-price { margin-top: 24px; }
.cc-price { gap: 0; }
.cd-dl { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid #D7DEEA; display: grid; gap: 6px; text-align: left; }
.cd-dl div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 1.55; }
.cd-dl dt { font-weight: 800; color: var(--b-d); }
.cd-dl dd { margin: 0; color: var(--ink-2); }

/* ── 7차: 모션 업그레이드(되풀이 없음 — 보일 때 한 번) */
@keyframes ck-draw { to { stroke-dashoffset: 0; } }
@keyframes pop-in { 0% { opacity: 0; transform: translateY(14px) scale(.94); } 70% { opacity: 1; transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: none; } }
/* 제목: 아래에서 밀려 올라오며 드러남 */
/* 지켜보는 대상(.rv) 자신에는 걸지 않음 — 가려지면 브라우저가 안 보인다고 판단해 끝내 등장하지 않음 */
.js-rv .rv .big { clip-path: inset(0 0 100% 0); transform: translateY(22px); transition: clip-path .9s var(--ease), transform .9s var(--ease); }
.js-rv .rv.in .big { clip-path: inset(0 0 0 0); transform: none; }
/* 체크 표시가 차례로 그려짐(첫 화면 포함 · 서비스 포함 목록) */
.js-rv .hincl li svg path[d^="M5 12.5"] { stroke-dasharray: 21; stroke-dashoffset: 21; animation: ck-draw .45s var(--ease) forwards; }
.js-rv .hincl li:nth-child(1) svg path { animation-delay: .55s; }
.js-rv .hincl li:nth-child(2) svg path { animation-delay: .68s; }
.js-rv .hincl li:nth-child(3) svg path { animation-delay: .81s; }
.js-rv .hincl li:nth-child(4) svg path { animation-delay: .94s; }
.js-rv .incl-box.rv li { opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.js-rv .incl-box.rv.in li { opacity: 1; transform: none; }
.js-rv .incl-box.rv li svg path[d^="M5 12.5"] { stroke-dasharray: 21; stroke-dashoffset: 21; transition: stroke-dashoffset .45s var(--ease); }
.js-rv .incl-box.rv.in li svg path[d^="M5 12.5"] { stroke-dashoffset: 0; }
.js-rv .incl-box.rv.in li:nth-child(2), .js-rv .incl-box.rv.in li:nth-child(2) svg path { transition-delay: .08s; }
.js-rv .incl-box.rv.in li:nth-child(3), .js-rv .incl-box.rv.in li:nth-child(3) svg path { transition-delay: .16s; }
.js-rv .incl-box.rv.in li:nth-child(4), .js-rv .incl-box.rv.in li:nth-child(4) svg path { transition-delay: .24s; }
.js-rv .incl-box.rv.in li:nth-child(5), .js-rv .incl-box.rv.in li:nth-child(5) svg path { transition-delay: .32s; }
.js-rv .incl-box.rv.in li:nth-child(6), .js-rv .incl-box.rv.in li:nth-child(6) svg path { transition-delay: .40s; }
/* 기장료 계산 판: 기준·가격 줄이 차례로, 업종 버튼이 차례로 튀어나옴 */
.js-rv .calc-cta.rv .cc-how li, .js-rv .calc-cta.rv .cc-price li { opacity: 0; transform: translateX(-12px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.js-rv .calc-cta.rv.in .cc-how li, .js-rv .calc-cta.rv.in .cc-price li { opacity: 1; transform: none; }
.js-rv .calc-cta.rv.in .cc-how li:nth-child(2) { transition-delay: .1s; }
.js-rv .calc-cta.rv.in .cc-how li:nth-child(3) { transition-delay: .2s; }
.js-rv .calc-cta.rv.in .cc-price li:nth-child(1) { transition-delay: .3s; }
.js-rv .calc-cta.rv.in .cc-price li:nth-child(2) { transition-delay: .4s; }
.js-rv .calc-cta.rv .cc-inds button { opacity: 0; transform: translateY(12px) scale(.94); }
.js-rv .calc-cta.rv.in .cc-inds button { animation: pop-in .6s var(--ease) forwards; }
.js-rv .calc-cta.rv.in .cc-inds button:nth-child(2) { animation-delay: .08s; }
.js-rv .calc-cta.rv.in .cc-inds button:nth-child(3) { animation-delay: .16s; }
.js-rv .calc-cta.rv.in .cc-inds button:nth-child(4) { animation-delay: .24s; }
.js-rv .calc-cta.rv.in .cc-inds button:nth-child(5) { animation-delay: .32s; }
/* 시작 3단계: 번호가 차례로 켜지고 다음 단계로 이어지는 선이 그어짐 */
.steps li .st-n { z-index: 1; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 36px; bottom: -22px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .4); transform-origin: top; }
.js-rv .tpanel .steps .st-n { opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease), transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.js-rv .tpanel.in .steps .st-n { opacity: 1; transform: none; }
.js-rv .tpanel .steps li:not(:last-child)::after { transform: scaleY(0); transition: transform .7s var(--ease); }
.js-rv .tpanel.in .steps li:not(:last-child)::after { transform: none; }
.js-rv .tpanel.in .steps li:nth-child(1)::after { transition-delay: .35s; }
.js-rv .tpanel.in .steps li:nth-child(2) .st-n { transition-delay: .55s; }
.js-rv .tpanel.in .steps li:nth-child(2)::after { transition-delay: .8s; }
.js-rv .tpanel.in .steps li:nth-child(3) .st-n { transition-delay: 1s; }
/* 시연 알림: 탄력 있게 들어오고 체크가 그려짐 */
.play .scene.on .noti { animation-name: pop-in; animation-duration: .6s; }
.play .scene.on .noti .ic svg path[d^="M5 12.5"] { stroke-dasharray: 21; stroke-dashoffset: 21; animation: ck-draw .45s var(--ease) .35s forwards; }
.play .scene.on .noti.d2 .ic svg path { animation-delay: 1.45s; }
.play .scene.on .noti.d3 .ic svg path { animation-delay: 2.35s; }
.steps { gap: 28px; }
@media (min-width: 720px) {
  .steps li:not(:last-child)::after { left: 40px; right: -22px; top: 14px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .js-rv .tpanel .steps li:not(:last-child)::after { transform: scaleX(0); }
  .steps { gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-rv .rv .big { clip-path: none !important; transform: none !important; }
  .js-rv .hincl li svg path[d^="M5 12.5"], .js-rv .incl-box.rv li svg path[d^="M5 12.5"], .play .scene .noti .ic svg path[d^="M5 12.5"] { stroke-dashoffset: 0 !important; animation: none !important; }
  .js-rv .incl-box.rv li, .js-rv .calc-cta.rv .cc-how li, .js-rv .calc-cta.rv .cc-price li, .js-rv .calc-cta.rv .cc-inds button, .js-rv .tpanel .steps .st-n { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js-rv .tpanel .steps li::after { transform: none !important; }
}

/* ── 7차: 덜어 내기(대표님 "한 화면에 너무 많아") — 첫 화면 버튼 2개 · 조건 한 줄 */
.hero .cta { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.hero .cta .btn-primary { grid-column: auto; }
/* 조건 줄: 세 조각을 이어 쓰고, 줄이 넘어가도 '·' 로 시작하지 않게 점은 앞 조각 끝에(옛 휴대폰 규칙 덮어씀) */
.cond span, .cond span:first-child { display: inline; white-space: nowrap; }
.cond span::before, .cond span + span::before, .cond span + span + span::before, .cond span:nth-child(2)::before { content: none; }
.cond span:not(:last-child)::after { content: " ·"; margin-right: 4px; }
.hincl { margin-top: 18px; }
@media (min-width: 960px) {
  .hero .cta .btn-tel { order: 0; flex-basis: auto; justify-content: center; min-height: 52px; padding: 0 22px; background: var(--paper); box-shadow: inset 0 0 0 1px #D3D8E0; color: var(--ink); font-size: 17px; }
  .hero .cta .btn-tel:hover { color: var(--ink); box-shadow: inset 0 0 0 1px #A9B2BF; }
}

/* ── 7차: 서비스 소개 = 같은 크기 칸 4개 + 넓은 칸 1개(대표님 샘플) — 짧은 제목 + 한 줄 설명 */
.svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
.svc-pic { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #E3EAF6; }
.svc-pic img, .svc-pic video { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-receipt img, .svc-receipt video { object-position: 62% 50%; }
.svc-i h3, .svc-plus h3 { margin: 14px 0 0; font-size: 18px; line-height: 1.35; letter-spacing: -.03em; }
.svc-i p, .svc-plus p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--sub); }
.svc-plus { display: grid; grid-template-columns: calc((100% - 12px) / 2) minmax(0, 1fr); gap: 0 14px; align-items: center; margin-top: 28px; }
.svc-plus h3 { margin-top: 0; }
.js-rv .svc-i.rv .svc-pic img, .js-rv .svc-plus.rv .svc-pic img { transform: scale(1.08); transition: transform 1.4s var(--ease); }
.js-rv .svc-i.rv.in .svc-pic img, .js-rv .svc-plus.rv.in .svc-pic img { transform: none; }
.js-rv .svc .svc-i.rv:nth-child(2) { transition-delay: .08s; }
.js-rv .svc .svc-i.rv:nth-child(3) { transition-delay: .16s; }
.js-rv .svc .svc-i.rv:nth-child(4) { transition-delay: .24s; }
@media (min-width: 960px) {
  .svc { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .svc-pic { border-radius: 24px; }
  .svc-i h3, .svc-plus h3 { margin-top: 18px; font-size: 20px; }
  .svc-i p, .svc-plus p { font-size: 16px; }
  .svc-plus { grid-template-columns: calc((100% - 72px) / 4) minmax(0, 1fr); gap: 0 24px; margin-top: 40px; }
  .svc-plus h3 { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js-rv .svc-i.rv .svc-pic img, .js-rv .svc-plus.rv .svc-pic img { transform: none !important; }
}

/* ── 8차(11/4 밤): 글 배치·간격 = 네이버 웍스·삼쩜삼 공통 규칙
   대표님 "왼쪽 맞춤이 아니라 네이버웍스나 삼쩜삼 등과 동일한 텍스트 간격을 유지해" → 위 7차 '정렬 하나로(모두 왼쪽)'를 이 덩어리가 덮어씀
   고르는 법: 두 곳이 같으면 그 값, 다르면 더 많은 구획에서 쓰인 값(같으면 네이버 웍스). 간격은 모두 상자 기준(앞 요소 아래 끝 → 다음 요소 위 끝)
   정렬: 휴대폰 = 첫 화면·구획 머리·카톡 판·마무리 가운데 / PC = 한 칸 구획 머리·마무리 가운데,
         두 칸으로 나뉜 글 칸(1024px 이상 첫 화면 글 · 960px 이상 기장료 계산·카톡 판 · 720px 이상 질문 옆 제목)은 왼쪽(네이버 웍스 PC 첫 화면·한 플랫폼·보안 꼴)
         카드·목록·단계·가격 줄·질문 목록·예약 폼 안 글은 늘 왼쪽(두 곳 모두)
   글자: 굵기 700·400 두 단계 · 자간 -0.5px 고정(네이버 웍스) · 글자 색·문구·꾸밈 상자 없음·상단 버튼은 그대로 */

/* 1. 콘텐츠 폭·구획 여백 — 휴대폰 좌우 16(네이버 웍스 358 폭) · 구획 위아래 60(네이버 웍스 60·삼쩜삼 약 61~68) / PC 100(삼쩜삼 약 100~125·네이버 웍스 아래 100~118) · PC 콘텐츠 1285(네이버 웍스) */
.sec { padding-block: 60px; }
@media (max-width: 959px) {
  .wrap, .hero-txt, .show-cap, .ex-label { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .hd .bar { padding-left: 8px; }   /* 로고도 같은 16 선에 */
}
@media (min-width: 960px) {
  .sec { padding-block: 100px; }
}
@media (min-width: 1024px) {
  .wrap:not(.narrow), .hero-grid, .hd .bar { max-width: 1325px; }   /* 콘텐츠 1285 + 좌우 20 */
}

/* 2. 글자 역할(모든 구획 공통) — 구획 제목 26/700/36 · PC 48/700/64 / 머리말 16/700/28, 제목에 바로 붙임(간격 0) / 구획 설명 16/400/28 · PC 18/400/28, 폭 512 이하 */
.big:not(.policy-h) { font-size: 26px; line-height: 36px; font-weight: 700; letter-spacing: -.5px; }
.big .eb { margin-bottom: 0; font-size: 16px; line-height: 28px; font-weight: 700; letter-spacing: -.5px; }
.lede { font-size: 16px; line-height: 28px; letter-spacing: -.5px; text-wrap: balance; }
@media (min-width: 960px) {
  .big:not(.policy-h) { font-size: 48px; line-height: 64px; }
  .lede { font-size: 18px; line-height: 28px; max-width: 512px; }
}

/* 3. 구획 머리(한 칸): 가운데 · 제목→설명 16/30 · 머리→첫 내용 30/50 */
.sec-h { text-align: center; margin: 0 auto 30px; }
.sec-h .lede { margin: 16px auto 0; }
@media (min-width: 960px) {
  .sec-h { margin-bottom: 50px; }
  .sec-h .lede { margin-top: 30px; }
}

/* 4. 첫 화면 — 휴대폰·태블릿 가운데 / 1024px 이상은 글 칸 왼쪽(시연 판과 세로 가운데)
   머리줄→첫 글 40 · 배지→제목 10 · 제목 32/700/42 · 제목→설명 10 · 설명(기장료 포함 2열) 16/400/24 · →버튼 44 · 버튼 사이 10 · →조건 10 · →시연 68 · 아래 44
   PC: 제목 56/700/70 · 배지→제목 14 · 제목→설명 14 · 설명 18/400/28 · →버튼 30 · →조건 20 · 아래 28 */
.hero { text-align: center; padding-bottom: 44px; }
@media (max-width: 959px) { .hero { padding-top: 40px; } }
.hbadge { margin: 0 0 10px; font-size: 16px; font-weight: 700; letter-spacing: -.5px; }
.hero h1 { font-size: 32px; line-height: 42px; font-weight: 700; letter-spacing: -.5px; }
.hero .hincl, .hero .lede { margin: 10px auto 0; }
.hero .lede { line-height: 24px; }
.hincl ul { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 6px 24px; }
.hincl li { padding: 0; font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: -.5px; }
.cta, .hero .cta, .closing .cta { margin-left: auto; margin-right: auto; justify-content: center; gap: 10px; }
.hero .cta { margin-top: 44px; }
.hero .cond { margin: 10px auto 0; text-align: center; font-size: 14px; line-height: 20px; letter-spacing: -.5px; text-wrap: balance; }
.hero .hours-note { margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -.5px; }
@media (max-width: 1023px) { .show { margin-top: 68px; } }
@media (min-width: 960px) {
  .hero { padding-bottom: 28px; }
  .hbadge { margin-bottom: 14px; }
  .hero h1 { font-size: 56px; line-height: 70px; }
  .hero .hincl, .hero .lede { margin-top: 14px; }
  .hero .lede { line-height: 28px; }
  .hincl li { font-size: 18px; line-height: 28px; }
  .cta, .hero .cta, .closing .cta { justify-content: center; }
  .hero .cta { margin-top: 30px; }
  .hero .cond { margin-top: 20px; font-size: 16px; line-height: 28px; }
  .hero .hours-note { font-size: 16px; line-height: 28px; }
}
@media (min-width: 1024px) {
  .hero { text-align: left; }
  .hero-txt { padding-top: max(0px, calc((var(--fh) - 440px) / 2)); }   /* 글 덩어리(약 400~460)를 시연 틀 높이 가운데에 */
  .hero .hincl, .hero .lede, .hero .cond { margin-left: 0; margin-right: 0; }
  .hincl ul { justify-content: start; }
  .hero .cta { margin-left: 0; margin-right: 0; justify-content: flex-start; }
  .hero .cond { text-align: left; }
}

/* 5. 누적 고객 띠: 가운데 · 위아래 60 / PC 위 160(첫 화면 다음 구획 = 네이버 웍스 '제품' 160)·아래 100 · 제목→흐름띠 30/50 · 흐름띠→각주 8 */
.strip { padding: 60px 0; }
.strip-t { text-align: center; margin: 0 auto 30px; }
.strip .marq-note { margin: 8px 0 0; text-align: center; }
@media (min-width: 960px) {
  .strip { padding: 160px 0 100px; }
  .strip-t { margin-bottom: 50px; }
}

/* 6. 작은 글(각주·안내) 14/400/20 · PC 16/400/28 */
.strip .marq-note, .cc-txt .fine, .talk-kk .fine { font-size: 14px; line-height: 20px; letter-spacing: -.5px; text-wrap: balance; }
@media (min-width: 960px) {
  .strip .marq-note, .cc-txt .fine, .talk-kk .fine { font-size: 16px; line-height: 28px; }
}

/* 7. 서비스 소개 카드(카드 안 글은 왼쪽) — 그림→제목 14/24 · 제목 18/700/28 · PC 20/700/30 · 제목→설명 8 · 설명 16/400/28 · PC 16/400/26 · 카드 사이 16(세로 32) / PC 30 */
.svc { gap: 32px 16px; }
.svc-i h3, .svc-plus h3, .feat h3 { font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: -.5px; }
.svc-i h3 { margin-top: 14px; }
.svc-i p, .svc-plus p, .feat p { margin-top: 8px; font-size: 16px; line-height: 28px; letter-spacing: -.5px; }
.svc-plus { grid-template-columns: calc((100% - 16px) / 2) minmax(0, 1fr); gap: 0 16px; margin-top: 32px; }
@media (min-width: 960px) {
  .svc { gap: 30px; }
  .svc-i h3 { margin-top: 24px; }
  .svc-i h3, .svc-plus h3, .feat h3 { font-size: 20px; line-height: 30px; }
  .svc-i p, .svc-plus p, .feat p { line-height: 26px; }
  .svc-plus { grid-template-columns: calc((100% - 90px) / 4) minmax(0, 1fr); gap: 0 30px; margin-top: 30px; }
}

/* 8. 기장료 계산 — 959px 이하 머리·각주·'업종을 눌러 보세요' 가운데 / 960px 이상 두 칸이라 글 칸 왼쪽 · 가격 줄은 늘 양끝 */
.cc-price { margin-top: 30px; text-align: left; }
.cc-price span { font-size: 16px; line-height: 28px; font-weight: 400; letter-spacing: -.5px; }
.cc-price b { font-size: 24px; line-height: 34px; font-weight: 700; letter-spacing: -.5px; text-align: right; }
.cc-price b small { font-size: 14px; font-weight: 400; letter-spacing: -.5px; }
.cc-txt .fine { margin: 8px 0 0; }
.cc-pick-t { margin: 0 0 8px; font-size: 16px; line-height: 28px; font-weight: 700; letter-spacing: -.5px; }
@media (max-width: 959px) {
  .calc-cta { row-gap: 44px; }
  .cc-txt .big, .cc-txt .lede, .cc-txt .fine, .cc-pick-t { text-align: center; }
  .cc-txt .lede { margin: 16px auto 0; }
}
@media (min-width: 960px) {
  .cc-txt .lede { margin: 30px 0 0; }
  .cc-price { margin-top: 50px; }
  .cc-price span { font-size: 18px; }
}

/* 9. 시작 3단계(진한 판) — 머리 가운데 · 단계 글은 왼쪽 · 판 안 위아래 60/100 · 방패→머리말 14/20 · 머리→단계 30/50 · 단계 제목 18/700/28(PC 20/700/30) →설명 8 · 설명 16/400/28(PC 26) */
.tp-in { text-align: center; padding: 60px 24px; }
.tp-in .shield { margin: 0 auto 14px; }
.steps { margin-top: 30px; }
.steps h3 { margin-top: 1px; font-size: 18px; line-height: 28px; letter-spacing: -.5px; }
.steps p { margin-top: 8px; font-size: 16px; line-height: 28px; letter-spacing: -.5px; }
@media (min-width: 720px) {
  /* 가로 세 칸: 번호·잇는 선 줄 아래로 글(지금은 잇는 선이 단계 제목 한가운데를 그어 지나감 — 삼쩜삼 가로 연혁처럼 점·선 아래 글) · 번호→제목 14 */
  .steps li { padding: 44px 0 0; }
  .steps h3 { margin-top: 0; }
}
@media (min-width: 960px) {
  .tp-in { padding: 100px 56px; }
  .tp-in .shield { margin-bottom: 20px; }
  .steps { margin-top: 50px; }
  .steps h3 { margin-top: 0; font-size: 20px; line-height: 30px; }
  .steps p { line-height: 26px; }
}

/* 10. 기장 상담 — 머리 가운데 · 카톡 판은 959px 이하 가운데(제목·설명·버튼 한 줄기) / 960px 이상 두 칸이라 왼쪽
   아이콘→제목 14/20 · 판 제목 24/700/34(PC 32/700/42) · 설명 16/400/28(PC 26) · 설명→버튼 44/30 · 버튼→각주 10/20 · 판 사이 16/30 */
.talk { gap: 16px; }
.talk-kk .ic3d { margin-bottom: 14px; }
.talk-kk h3 { font-size: 24px; line-height: 34px; letter-spacing: -.5px; }
.talk-kk p { font-size: 16px; line-height: 28px; letter-spacing: -.5px; }
.talk-kk .nudge { font-weight: 400; }
.talk-kk .btn { margin-top: 44px; }
.talk-kk .fine { margin-top: 10px; }
.talk-kk .tel { font-weight: 700; letter-spacing: -.5px; }
@media (max-width: 959px) {
  .talk-kk { align-items: center; text-align: center; }
}
@media (min-width: 960px) {
  .talk { gap: 30px; }
  .talk-kk .ic3d { margin-bottom: 20px; }
  .talk-kk h3 { font-size: 32px; line-height: 42px; }
  .talk-kk p { line-height: 26px; }
  .talk-kk .btn { margin-top: 30px; }
  .talk-kk .fine { margin-top: 20px; }
}

/* 11. 자주 묻는 질문 — 옆 제목 719px 이하 가운데 / 720px 이상 두 칸이라 왼쪽 · 질문 목록은 늘 왼쪽
   질문 18/700/28(PC 20/700/30) · 줄 위아래 20 · 열면 질문→답 8 · 답 16/400/28(PC 26) */
.faq-side { margin-bottom: 30px; }
.faq-side .lede { margin: 16px auto 0; }
.faq-side .btn { margin-top: 44px; }
.faq summary { padding: 20px 4px; font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: -.5px; }
.faq details[open] summary { padding-bottom: 8px; }
.faq .a { padding: 0 4px 20px; font-size: 16px; line-height: 28px; letter-spacing: -.5px; }
@media (max-width: 719px) {
  .faq-side { text-align: center; }
}
@media (min-width: 720px) {
  .faq-side .lede { margin-left: 0; margin-right: 0; }
}
@media (min-width: 960px) {
  .faq-side .lede, .faq-side .btn { margin-top: 30px; }
  .faq summary { font-size: 20px; line-height: 30px; }
  .faq .a { line-height: 26px; }
}

/* 12. 마무리 — 가운데(네이버 웍스 '시작하기' 띠) · 위아래 100/140 · 제목 26/700/38 · PC 44/700/62 · 제목→버튼 48/40 · 버튼 사이 10/12 */
.closing { text-align: center; padding-block: 100px; }
.closing .big { line-height: 38px; }
.closing .cta { margin-top: 48px; }
@media (min-width: 960px) {
  .closing { padding-block: 140px; }
  .closing .big { font-size: 44px; line-height: 62px; }
  .closing .cta { margin-top: 40px; gap: 12px; }
}

/* 13. 지금 index.html 에 없는 옛 이름(.incl-box·.cc-how·.stats) — 다시 쓰이면 같은 규칙 */
.incl-box li, .ib-in li, .cc-how li { font-size: 16px; line-height: 28px; font-weight: 400; letter-spacing: -.5px; }
.cc-how b { font-weight: 700; }
.stats, .stats-note { margin-left: auto; margin-right: auto; }
.stats-note { text-align: center; }
.stat b { font-weight: 700; letter-spacing: -.5px; }

/* 8차 첫 화면 문구: '저렴하지만 확실하게,' 한 줄 + 하는 일 한 줄(네이버 웍스 '짧지만 확실하게,' 꼴) */
.hero .lede-a { display: block; }

/* ── 8차: 네이버 웍스 버튼 규격(첫 화면 '자세히 보기·도입 문의 하기' 실측) — 160×50 · 모서리 8 · 글 16 · 버튼 사이 10
   주 버튼 = 진한 남색 채움 · 보조 버튼 = 테두리 1px · 휴대폰은 가운데, 1024px 이상 첫 화면은 제목과 같은 왼쪽 선 */
.btn { min-height: 50px; border-radius: 8px; font-size: 16px; padding: 0 20px; }
.btn-line { box-shadow: inset 0 0 0 1px var(--ink); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--ink); background: #F2F4F7; }
.btn-sm { min-height: 42px; border-radius: 8px; font-size: 15px; padding: 0 14px; }
.hero .cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: none; }
.hero .cta .btn { min-width: 160px; min-height: 50px; padding: 0 16px; font-size: 16px; }
.hero .cta .btn-primary { grid-column: auto; }
.closing .cta .btn, .faq-side .btn, .talk-kk .btn { min-width: 160px; }
@media (min-width: 960px) {
  .hero .cta .btn-tel { min-height: 50px; padding: 0 20px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); font-size: 16px; }
}
@media (min-width: 1024px) {
  .hero .cta { justify-content: flex-start; }
}

/* ── 8차 첫 화면 = 네이버 웍스 첫 화면 규격(실측 390·1440) ─────────────────────────────
   머리줄 흰색 62(PC 65) · 공지 띠 14/700(PC 16/700/28) + 파란 글 링크 · 제목 y≈154, 32/700/42(PC 56/700/70)
   설명 진한 글자 16/400/24(PC 18/400/28) · 버튼 160×50 · '01 ━━ 02 03' 12/700(PC 14/700) · 바탕 흰색
   사진·영상 대신 제품 화면 그림(휴대폰 + 점선 + '이번 달 한 일' 카드 + 옅은 원) — 사람 사진 없음, AI 표기 필요 없음 */
body { background: #fff; }
.hd { padding: 0; background: #fff; }
.hd .bar { max-width: none; height: 62px; border-radius: 0; padding: 0 16px; background: #fff; box-shadow: none; }
.hd.on .bar { background: #fff; box-shadow: 0 1px 0 #E5E8EB; -webkit-backdrop-filter: none; backdrop-filter: none; }
.notice { background: #F2F4F6; text-align: center; }
.notice p { margin: 0; padding: 16px; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: -.5px; color: #202124; }
.notice a { margin-left: 10px; font-weight: 400; color: var(--b); text-decoration: none; }
.notice a:hover { text-decoration: underline; }
.hero .lede { color: var(--ink); }
.hero .lede-a { display: block; }
/* 그림 무대 */
.show-frame.ill { position: relative; height: 420px; margin: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.ill-bg { position: absolute; left: 50%; top: 50%; width: 400px; height: 400px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #E8EFFF 0%, rgba(232, 239, 255, .6) 45%, rgba(232, 239, 255, 0) 70%); }
.show-frame.ill .device { position: absolute; left: 4%; right: auto; top: 0; width: 210px; transform: none; }
.show-frame.ill .screen { height: 420px; }
.ill-line { position: absolute; left: calc(4% + 196px); top: 64px; width: calc(92% - 196px - 150px); height: 60px; color: #8FA5D6; overflow: visible; }
.ill-panel { position: absolute; right: 0; top: 28px; width: 160px; padding: 12px 12px 10px; border-radius: 14px; background: #fff; box-shadow: 0 2px 6px rgba(11, 21, 48, .06), 0 18px 40px -18px rgba(11, 21, 48, .35); text-align: left; }
.ip-t { margin: 0 0 6px; font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: -.5px; color: #202124; }
.ip-t small { margin-left: 4px; font-size: 10px; font-weight: 400; color: var(--mute); }
.ill-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ill-panel li { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 18px; letter-spacing: -.5px; color: var(--ink-2); }
.ill-panel li svg { flex: none; width: 13px; height: 13px; color: var(--b); }
/* 진행 표시: 숫자만, 지금 장면 뒤에 진행 줄(네이버 웍스 '01 ━━ 02 03') */
.show-cap { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 16px 0 0; padding: 0; max-width: none; }
.show-cap .tabs, .tabs { display: flex; align-items: center; gap: 0; overflow: visible; grid-template-columns: none; }
.tabs button, .tabs button[aria-pressed="true"] { min-width: 0; min-height: 44px; padding: 0 6px; border-radius: 0; background: none; box-shadow: none; color: #95999C; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.tabs button[aria-pressed="true"] { color: #202124; }
.tabs button em, .tabs button[aria-pressed="true"] em { margin: 0; font-size: 12px; font-weight: 700; color: inherit; }
.tabs button i, .tabs button[aria-pressed="true"] i { position: relative; left: auto; right: auto; bottom: auto; display: none; height: 2px; border-radius: 2px; transform: none; vertical-align: middle; }
.tabs button[aria-pressed="true"] i { display: inline-block; width: 80px; margin-left: 12px; background: #DDE1E6; }
.tabs button[aria-pressed="true"] i::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: #202124; transform: scaleX(var(--p, 0)); transform-origin: left; }
.show-cap .arrows button { width: 44px; height: 44px; background: none; box-shadow: none; color: #202124; }
.show-cap .arrows svg { width: 14px; height: 14px; }
/* 움직임: 카드 줄이 차례로·체크 그리기·점선 그리기(한 번) */
.js-rv .ill-panel { animation: fade-up .7s var(--ease) .5s both; }
.js-rv .ill-panel li { animation: fade-up .5s var(--ease) both; }
.js-rv .ill-panel li:nth-child(1) { animation-delay: .8s; } .js-rv .ill-panel li:nth-child(2) { animation-delay: .95s; }
.js-rv .ill-panel li:nth-child(3) { animation-delay: 1.1s; } .js-rv .ill-panel li:nth-child(4) { animation-delay: 1.25s; }
.js-rv .ill-panel li svg path[d^="M5 12.5"] { stroke-dasharray: 21; stroke-dashoffset: 21; animation: ck-draw .4s var(--ease) forwards; }
.js-rv .ill-panel li:nth-child(1) svg path[d^="M5 12.5"] { animation-delay: .95s; } .js-rv .ill-panel li:nth-child(2) svg path[d^="M5 12.5"] { animation-delay: 1.1s; }
.js-rv .ill-panel li:nth-child(3) svg path[d^="M5 12.5"] { animation-delay: 1.25s; } .js-rv .ill-panel li:nth-child(4) svg path[d^="M5 12.5"] { animation-delay: 1.4s; }
.js-rv .ill-line path { stroke-dashoffset: 0; animation: line-in 1s var(--ease) .3s both; }
@keyframes line-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 380px) {
  .show-frame.ill .device { width: 196px; }
  .ill-panel { width: 148px; }
}
@media (min-width: 960px) {
  .hd .bar { height: 65px; padding: 0 70px; }
  .hd nav { flex: 1; justify-content: flex-start; margin-left: 48px; }
  .hd .lk { font-size: 16px; font-weight: 400; color: #202124; }
  .hd .hd-calc { margin-left: auto; }
  .notice p { padding: 11px 16px; font-size: 16px; line-height: 28px; }
  .show-frame.ill { height: 540px; }
  .ill-bg { width: 560px; height: 560px; }
  .show-frame.ill .device { left: 10%; width: 270px; top: 10px; }
  .show-frame.ill .screen { height: 520px; }
  .ill-line { left: calc(10% + 252px); top: 96px; width: calc(84% - 252px - 220px); height: 70px; }
  .ill-panel { right: 2%; top: 56px; width: 220px; padding: 16px 16px 14px; border-radius: 16px; }
  .ip-t { font-size: 14px; line-height: 20px; margin-bottom: 8px; }
  .ill-panel li { font-size: 14px; line-height: 22px; gap: 7px; }
  .ill-panel li svg { width: 15px; height: 15px; }
  .tabs button, .tabs button[aria-pressed="true"], .tabs button em, .tabs button[aria-pressed="true"] em { font-size: 14px; }
}
@media (min-width: 1024px) {
  .hero { min-height: 735px; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
  .hero-grid { width: 100%; align-items: center; }
  .hero-txt { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js-rv .ill-panel, .js-rv .ill-panel li { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js-rv .ill-panel li svg path[d^="M5 12.5"] { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ── 8차 구성 = 네이버 웍스: 흰 → 회색 → 흰 → 회색 → 흰 → 진한 마무리 띠(대표님 "구성도 참고해, 난잡해") */
.band-gray, .band-sky { background: #F5F6F8; }
/* 시작 3단계: 진한 판 대신 옅은 구획(진한 면은 마무리 띠 하나) */
.tpanel { background: none; color: var(--ink); border-radius: 0; overflow: visible; isolation: auto; }
.tp-in, .tp-in .big { color: var(--ink); }
.steps li { color: var(--ink); }
.steps h3 { color: var(--ink); }
.steps p { color: var(--sub); }
.steps .st-n { background: var(--ink); color: #fff; }
.steps li:not(:last-child)::after { background: #CDD5E1; }
.tp-in { padding: 0; }
@media (min-width: 960px) { .tp-in { padding: 0; } }
/* 마무리 띠: 진한 남색 + 흰 버튼(네이버 웍스 '시작하기' 띠) */
.closing { background: var(--ink); color: #fff; }
.closing .big { color: #fff; }
.closing .lede { margin: 16px auto 0; color: rgba(255, 255, 255, .82); }
.closing .fine { margin: 14px 0 0; text-align: center; color: rgba(255, 255, 255, .6); }
.closing .btn-white { background: #fff; color: var(--ink); box-shadow: none; }
.closing .btn-white:hover { background: #EEF1F6; }
.closing .btn-outline-w { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85); }
.closing :focus-visible { outline-color: #fff; }
@media (min-width: 960px) { .closing .lede { margin-top: 24px; } .closing .fine { margin-top: 20px; } }
/* 누적 고객 흐름띠: 그림 없이 회색 글자(네이버 웍스 고객사 띠) */
.mchip img { display: none; }
.mchip { padding: 6px 26px 6px 0; font-size: 17px; font-weight: 700; color: #8B95A1; }
/* 전화 상담 예약 = 팝업(계산 팝업과 같은 서랍) */
dialog.sheet.rsvdlg { width: 100%; max-width: 520px; max-height: calc(100dvh - 16px); margin: auto auto 0; border-radius: 20px 20px 0 0; overflow: auto; overscroll-behavior: contain; }
.rsvdlg .consult { margin-top: 14px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
@media (min-width: 720px) { dialog.sheet.rsvdlg { margin: auto; border-radius: 20px; max-height: calc(100dvh - 48px); } }

/* ── 8차 첫 화면 규격 마무리(실측 대조): 휴대폰 진행 표시 y≈712(그림 260) · PC 진행 표시 y≈718(그림 500) · PC 설명 18px */
@media (max-width: 1023px) { .show { margin-top: 12px; } }
.show-frame.ill { height: 262px; }
.ill-bg { width: 280px; height: 280px; }
.show-frame.ill .device { left: 8%; top: 0; transform: scale(.62); transform-origin: top left; }
.ill-line { left: calc(8% + 128px); top: 40px; width: calc(92% - 128px - 156px); height: 46px; }
.ill-panel { top: 22px; width: 156px; }
@media (min-width: 960px) {
  .hero .lede { font-size: 18px; line-height: 28px; }
  .show-frame.ill { height: 500px; }
  .ill-bg { width: 520px; height: 520px; }
  .show-frame.ill .device { left: 10%; top: 0; transform: scale(.94); }
  .ill-line { left: calc(10% + 244px); top: 96px; width: calc(88% - 244px - 220px); height: 70px; }
  .ill-panel { top: 56px; width: 220px; }
}
/* 그림 무대 바로잡기: 투명→보임 등장(옛 rise-in 은 움직임만 있어 끝까지 투명했음) · 옛 사진 틀의 어두운 겹 그림 끔 · 3단계 머리말 색 */
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.show-frame.ill::after { display: none; }
.tpanel .big .eb { color: var(--b); }

/* ── 8차: 누적 고객 = 네이버 웍스 첫 화면 맨 아래 고객사 로고 띠처럼(작은 글 + 회색 업종 글자 한 줄) · 다음 구획 위 여백은 웍스 '제품' 구획처럼 */
.strip { padding: 20px 0 8px; }
.strip-t { margin: 0 auto 10px; }
.strip-t .big { font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: -.5px; color: var(--ink); }
.strip-t .big em { font-size: inherit; }
.strip-t .big sup { font-size: 11px; }
.marq .mrow.rev { display: none; }
.mchip { font-size: 16px; }
.strip .marq-note { margin-top: 6px; font-size: 12px; line-height: 18px; color: var(--mute); }
#why { padding-top: 60px; }
@media (min-width: 960px) {
  .strip { padding: 8px 0 12px; }
  .strip-t { margin-bottom: 12px; }
  .strip-t .big { font-size: 16px; line-height: 24px; }
  .strip .marq-note { font-size: 13px; line-height: 20px; }
  #why { padding-top: 160px; }
}

/* ── 9차 = 네이버 웍스 홈 구성(대표님 "naver.worksmobile.com 이랑 구성이 거의 일치하게") ─────────────────────────
   실측(390·1440): 구획 제목 26/36 · PC 48/64 · 휴대폰 구획 위 60 · PC 160 · 콘텐츠 358 / 1285
   제목 줄: '제품을 만나보세요'·시작 띠만 가운데, 나머지는 왼쪽(휴대폰 '보안'만 가운데) */

/* ① 첫 화면 그림: 480×380 캔버스(--k 로 키움) · 휴대폰 + 점선 + 쌓인 EP 카드 + 사장님 둘(말풍선 없이 글만, 웍스 꼴) */
.show-frame.ill { --k: .746; height: calc(360px * var(--k)); overflow: hidden; }
.ill-cv { position: absolute; left: 50%; top: 0; width: 480px; height: 360px; transform: translateX(-50%) scale(var(--k)); transform-origin: top center; }
.ill-path { position: absolute; inset: 0; width: 480px; height: 360px; overflow: visible; }
.show-frame.ill .ill-cv .device { position: absolute; left: 150px; top: 74px; width: 270px; transform: scale(.5); transform-origin: top left; }
.show-frame.ill .ill-cv .screen { height: 560px; }
.ep-stack { position: absolute; left: 306px; top: 54px; width: 170px; }
.ep { position: relative; display: flex; align-items: center; gap: 6px; margin: 0 auto; padding: 0 8px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px #3C4043, 0 6px 16px -10px rgba(11, 21, 48, .5); overflow: hidden; }
.ep b { font-size: 10px; line-height: 1.2; font-weight: 700; letter-spacing: -.4px; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-ic { flex: none; display: grid; place-items: center; color: var(--b); }
.ep-ic svg { width: 14px; height: 14px; }
.ep.e1 { z-index: 4; width: 170px; height: 36px; }
.ep.e1 .ep-ic svg { width: 18px; height: 18px; }
.ep.e1 b { font-size: 11px; font-weight: 800; }
.ep.e2 { z-index: 3; width: 158px; height: 26px; margin-top: -1px; }
.ep.e3 { z-index: 2; width: 146px; height: 24px; margin-top: -1px; opacity: .62; }
.ep.e4 { z-index: 1; width: 134px; height: 22px; margin-top: -1px; opacity: .36; }
.chr { position: absolute; bottom: 0; }
.chr img { display: block; width: 100%; height: auto; }
.chr-l { left: 40px; width: 86px; }
.chr-r { left: 298px; width: 80px; }
.say { position: absolute; margin: 0; font-size: 17px; line-height: 1.3; font-weight: 800; letter-spacing: -.6px; color: #202124; text-align: center; white-space: nowrap; }
.chr-l .say { left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) rotate(-4deg); }
.chr-r .say { left: calc(100% + 4px); bottom: 52px; font-size: 15px; text-align: left; transform: rotate(3deg); }
.js-rv .ep-stack .ep { animation: fade-up .6s var(--ease) both; }
.js-rv .ep-stack .e1 { animation-delay: .7s; } .js-rv .ep-stack .e2 { animation-delay: .82s; } .js-rv .ep-stack .e3 { animation-delay: .94s; } .js-rv .ep-stack .e4 { animation-delay: 1.06s; }
.js-rv .chr { animation: fade-up .7s var(--ease) both; } .js-rv .chr-l { animation-delay: .35s; } .js-rv .chr-r { animation-delay: .55s; }
.js-rv .chr .say { animation: fade-up .5s var(--ease) both; } .js-rv .chr-l .say { animation-delay: 1.1s; } .js-rv .chr-r .say { animation-delay: 1.4s; }
.js-rv .ill-path path { animation: line-in 1s var(--ease) .5s both; }
.js-rv .chr-l .say { animation-name: say-l; } .js-rv .chr-r .say { animation-name: say-r; }
@keyframes say-l { from { opacity: 0; transform: translateX(-50%) translateY(8px) rotate(-4deg); } to { opacity: 1; transform: translateX(-50%) rotate(-4deg); } }
@keyframes say-r { from { opacity: 0; transform: translateY(8px) rotate(3deg); } to { opacity: 1; transform: rotate(3deg); } }
@media (min-width: 960px) { .show-frame.ill { --k: 1.25; } }
@media (max-width: 1023px) { .show-cap { margin-top: 0; } }
@media (min-width: 1024px) { .hero { min-height: 697px; } }

/* 구획 여백(웍스): 휴대폰 위 60 · PC 위 160 · 색 바탕 구획은 위아래 */
#why, #trust, #calc, #faq, #help { padding: 60px 0 0; }
#help { padding-bottom: 60px; }
#flow, #inds { padding: 60px 0; }
@media (min-width: 960px) {
  #why { padding: 160px 0 120px; }
  #flow { padding: 58px 0; }
  #trust { padding: 120px 0 40px; }
  #inds { margin-top: 120px; padding: 160px 0 120px; }
  #calc { padding: 160px 0 100px; }
  #faq { padding: 0; }
  #help { padding: 160px 0 200px; }
}

/* ② 서비스: 가운데 제목('제품을 만나보세요') + 카드 묶음(웍스 3칸 · 큰 카드 1 + 오른쪽 위아래 + 아래 둘) */
.svc-title { text-align: center; margin: 0 0 30px; }
.bento { display: grid; gap: 16px; }
.bt { position: relative; overflow: hidden; min-height: 340px; border-radius: 16px; background: linear-gradient(180deg, #F2F6FD 0%, #C8D7EF 100%); isolation: isolate; }
.bt-t { position: relative; z-index: 1; padding: 24px 24px 0; }
.bt h3 { margin: 0; font-size: 24px; line-height: 34px; font-weight: 700; letter-spacing: -.5px; color: #202124; }
.bt p { margin: 8px 0 0; font-size: 16px; line-height: 26px; letter-spacing: -.5px; color: #4E5968; }
.bt-pic { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; z-index: 0; }
.bt-pic img, .bt-pic video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%); mask-image: linear-gradient(180deg, transparent 0, #000 34%); }
.bt-a { background: linear-gradient(180deg, #F2F6FD 0%, #C1D2EC 100%); }
.bt-b { min-height: 300px; }
@media (min-width: 960px) {
  .svc-title { margin-bottom: 50px; }
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 280px 190px 440px; gap: 30px; grid-template-areas: "a a b" "a a c" "d d c"; }
  .bt { min-height: 0; }
  .bt-a { grid-area: a; background: linear-gradient(90deg, #F2F6FD 0%, #C1D2EC 100%); } .bt-b { grid-area: b; background: linear-gradient(90deg, #F4F7FE 0%, #CBD8EE 100%); }
  .bt-c { grid-area: c; } .bt-d { grid-area: d; background: linear-gradient(90deg, #F2F6FD 0%, #C9D8EF 100%); }
  .bt-t { padding: 40px 40px 0; }
  .bt h3 { font-size: 34px; line-height: 46px; }
  .bt p { margin-top: 12px; }
  .bt-a .bt-pic, .bt-d .bt-pic { left: 36%; top: 0; height: 100%; }
  .bt-a .bt-pic img, .bt-a .bt-pic video, .bt-d .bt-pic img, .bt-d .bt-pic video { object-position: center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
  .bt-b .bt-pic { left: 44%; top: 0; height: 100%; }
  .bt-b .bt-pic img, .bt-b .bt-pic video { object-position: 40% center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 50%); mask-image: linear-gradient(90deg, transparent 0, #000 50%); }
  .bt-c .bt-pic { height: 60%; }
}

/* ③ 하나로 이어져요: 옅은 하늘색(웍스 #E5F4FF) · 휴대폰 글 위·그림 아래(글 왼쪽) / PC 그림 왼쪽·글 오른쪽 */
.flow-sec { background: #E5F4FF; }
.flow { display: grid; gap: 30px; }
.flow-txt { text-align: left; }
.flow-txt .lede { margin: 16px 0 0; }
.flow-dia { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 0 auto; }
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; }
.flow-core .sym { width: 54px; height: auto; }
.flow-core b { font-size: 14px; font-weight: 800; letter-spacing: -.4px; color: #202124; }
.fn { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 3px; width: 82px; text-align: center; }
.fn img { width: 34px; height: 34px; object-fit: contain; }
.fn b { font-size: 11px; line-height: 1.25; font-weight: 700; letter-spacing: -.4px; color: #33383E; }
.fn0 { left: 50%; top: 21.2%; } .fn1 { left: 74.9%; top: 35.6%; } .fn2 { left: 74.9%; top: 64.4%; }
.fn3 { left: 50%; top: 78.8%; } .fn4 { left: 25.1%; top: 64.4%; } .fn5 { left: 25.1%; top: 35.6%; }
.fn-plus { position: absolute; left: 82.4%; top: 82.4%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; }
.fp-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #DCE6FF, 0 8px 18px -8px rgba(37, 84, 240, .45); }
.fp-ic img { width: 34px; height: 34px; object-fit: contain; }
.fn-plus b { font-size: 12px; line-height: 1.2; font-weight: 800; letter-spacing: -.4px; color: var(--b); white-space: nowrap; }
.js-rv .flow-dia.rv .fn-plus { opacity: 0; }
.js-rv .flow-dia.rv.in .fn-plus { animation: plus-in .6s var(--ease) 1.1s both; }
@keyframes plus-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%); } }
.js-rv .flow-dia.rv .flow-svg { transform: rotate(-24deg) scale(.94); transition: transform 1.4s var(--ease); }
.js-rv .flow-dia.rv.in .flow-svg { transform: none; }
.js-rv .flow-dia.rv .fn, .js-rv .flow-dia.rv .flow-core { opacity: 0; }
.js-rv .flow-dia.rv.in .fn { animation: fn-in .55s var(--ease) both; }
.js-rv .flow-dia.rv.in .flow-core { animation: core-in .55s var(--ease) .2s both; }
@keyframes fn-in { from { opacity: 0; transform: translate(-50%, -30%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes core-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%); } }
.js-rv .flow-dia.rv.in .fn0 { animation-delay: .35s; } .js-rv .flow-dia.rv.in .fn1 { animation-delay: .45s; } .js-rv .flow-dia.rv.in .fn2 { animation-delay: .55s; }
.js-rv .flow-dia.rv.in .fn3 { animation-delay: .65s; } .js-rv .flow-dia.rv.in .fn4 { animation-delay: .75s; } .js-rv .flow-dia.rv.in .fn5 { animation-delay: .85s; }
@media (min-width: 960px) {
  .flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 60px; }
  .flow-dia { order: -1; width: min(100%, 550px); }
  .flow-txt .lede { margin-top: 30px; }
  .fn { width: 110px; } .fn img { width: 48px; height: 48px; } .fn b { font-size: 14px; }
  .fp-ic { width: 76px; height: 76px; } .fp-ic img { width: 50px; height: 50px; } .fn-plus b { font-size: 16px; }
  .flow-core .sym { width: 74px; } .flow-core b { font-size: 17px; }
}

/* ④ 시작 3단계: 웍스 '보안' 꼴 — 휴대폰 제목 가운데 + 카드 목록 / PC 제목 왼쪽 + 오른쪽 계단 카드(아래로 내려가며 3단계) */
.trust { display: grid; gap: 30px; }
.trust-txt { text-align: center; }
.trust-txt .lede { margin: 16px auto 0; }
.stair { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stair li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px 18px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #3C4043; text-align: left; }
.stair img { grid-row: 1 / span 3; width: 48px; height: 48px; object-fit: contain; }
.st-no { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: -.3px; color: var(--b); }
.stair h3 { margin: 2px 0 0; font-size: 18px; line-height: 26px; font-weight: 700; letter-spacing: -.5px; color: #202124; }
.stair p { margin: 2px 0 0; font-size: 14px; line-height: 22px; letter-spacing: -.5px; color: #5F6B7A; }
@media (min-width: 960px) {
  .trust { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 60px; }
  .trust-txt { text-align: left; }
  .trust-txt .lede { margin: 30px 0 0; }
  .stair { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .stair li { display: block; padding: 26px 22px 28px; }
  .stair li.st2 { margin-top: 64px; } .stair li.st3 { margin-top: 128px; }
  .stair img { display: block; width: 64px; height: 64px; margin: 16px 0 18px; }
  .stair h3 { font-size: 20px; line-height: 30px; }
  .stair p { margin-top: 6px; font-size: 16px; line-height: 26px; }
}

/* ⑤ 업종 사진: 진한 바탕(대표님이 보낸 웍스 장면) · 카드 300×480 / PC 446×620 · 모서리 8 · 사이 16/30 */
.inds-sec { background: #17171A; color: #fff; }
.inds-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.inds-h .big { color: #fff; text-align: left; }
.inds-nav { display: flex; gap: 12px; }
.inds-nav.top { display: none; }
.inds-nav button { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; display: grid; place-items: center; cursor: pointer; }
.inds-nav button svg { width: 18px; height: 18px; }
.inds-nav button:disabled { color: #6B7078; box-shadow: inset 0 0 0 1.5px #4A4E55; cursor: default; }
.inds-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 max(16px, env(safe-area-inset-left, 0px)); scroll-padding-left: 16px; }
.inds-track::-webkit-scrollbar { display: none; }
.ind-card { position: relative; flex: none; width: 300px; height: 480px; border-radius: 8px; overflow: hidden; scroll-snap-align: start; background: #2A2C31; }
.ind-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ind-card::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .66)); }
.ind-t { position: absolute; left: 24px; right: 16px; bottom: 28px; z-index: 1; }
.ind-t small { display: block; font-size: 16px; line-height: 28px; font-weight: 700; color: #fff; }
.ind-t b { display: block; margin-top: 4px; font-size: 20px; line-height: 30px; font-weight: 700; letter-spacing: -.5px; color: #fff; }
.inds-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.inds-note { margin: 0; font-size: 13px; line-height: 20px; color: #8B9098; }
.inds-sec :focus-visible { outline-color: #fff; }
@media (min-width: 960px) {
  .inds-h { margin-bottom: 50px; }
  .inds-nav.top { display: flex; }
  .inds-nav.bot { display: none; }
  .inds-nav button { width: 60px; height: 60px; }
  .inds-nav button svg { width: 22px; height: 22px; }
  .inds-track { gap: 30px; padding-left: max(20px, calc((100% - 1285px) / 2)); padding-right: max(20px, calc((100% - 1285px) / 2)); scroll-padding-left: max(20px, calc((100% - 1285px) / 2)); }
  .ind-card { width: 446px; height: 620px; }
  .ind-t { left: 40px; bottom: 44px; }
  .ind-t b { font-size: 28px; line-height: 40px; }
  .inds-foot { margin-top: 20px; }
  .inds-note { font-size: 14px; }
}

/* ⑥ 기장료: 웍스 '인정받고 있습니다' 큰 숫자 줄 꼴 — 왼쪽 세로줄 + 큰 숫자 + 업종 + 매출 구간 · 누르면 계산 팝업(그 업종 골라 둠) */
.calc-head { margin-bottom: 30px; }
.calc-head .lede { margin: 16px 0 0; }
.pstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
.pst { display: flex; flex-direction: column; align-items: flex-start; margin: 0; padding: 0 0 0 20px; min-height: 0; border: 0; border-left: 1px solid #202124; border-radius: 0; background: none; color: #202124; font: inherit; text-align: left; cursor: pointer; }
.pst:last-child { grid-column: 1 / -1; }
.pst-n { font-size: 38px; line-height: 44px; font-weight: 700; letter-spacing: -1px; transition: color .2s; }
.pst-n small { margin-left: 2px; font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.pst b { margin-top: 14px; font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: -.5px; }
.pst-s { margin-top: 4px; font-size: 13px; line-height: 18px; letter-spacing: -.5px; color: rgba(32, 33, 36, .55); }
.pst:hover .pst-n, .pst:focus-visible .pst-n { color: var(--b); }
.calc-fine { margin: 30px 0 0; font-size: 13px; line-height: 20px; letter-spacing: -.5px; color: rgba(32, 33, 36, .55); }
@media (min-width: 960px) {
  .calc-head { margin-bottom: 50px; }
  .calc-head .lede { margin-top: 30px; }
  .pstats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; }
  .pst { padding-left: 21px; }
  .pst:last-child { grid-column: auto; }
  .pst-n { font-size: 64px; line-height: 80px; letter-spacing: -2px; }
  .pst-n small { font-size: 32px; }
  .pst b { margin-top: 20px; font-size: 20px; line-height: 30px; }
  .pst-s { margin-top: 2px; font-size: 16px; line-height: 28px; }
  .calc-fine { margin-top: 40px; font-size: 16px; line-height: 28px; }
}

/* ⑦ 자주 묻는 질문: 웍스 '알립니다' 꼴 — 제목 왼쪽 + 아래 목록 한 칸 */
.faq-sec .big { text-align: left; margin-bottom: 30px; }
@media (min-width: 960px) { .faq-sec .big { margin-bottom: 50px; } }

/* ⑧ 더 궁금한 점이 있으신가요?: 웍스 카드(바탕 #F1F3F9 · 모서리 8 · 휴대폰 2×2 173×120 / PC 4칸 298×206) */
.help-sec .big { text-align: left; }
.help-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 30px; }
.help-c { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 120px; padding: 12px 4px; border-radius: 8px; background: #F1F3F9; color: #202124; text-decoration: none; transition: background .2s var(--ease), transform .2s var(--ease); }
.help-c img { width: 40px; height: 40px; object-fit: contain; }
.help-c b { font-size: 16px; line-height: 28px; font-weight: 700; letter-spacing: -.5px; }
.help-c:hover { background: #E8EBF3; transform: translateY(-2px); }
@media (min-width: 960px) {
  .help-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 31px; margin-top: 50px; }
  .help-c { min-height: 206px; gap: 12px; }
  .help-c img { width: 64px; height: 64px; }
  .help-c b { font-size: 20px; line-height: 40px; }
}

/* ⑨ 시작 띠: 웍스 파란 띠 + 흰 버튼 · 휴대폰은 버튼 세로 */
.closing { position: relative; overflow: hidden; isolation: isolate; background: #0A84FF linear-gradient(100deg, #1C8EFF 0%, #0A7DFF 55%, #2B98FF 100%); color: #fff; }
.closing::before, .closing::after { content: ""; position: absolute; z-index: -1; pointer-events: none; background: rgba(255, 255, 255, .08); }
.closing::before { left: -14%; top: -70%; width: 52%; height: 240%; border-radius: 48px; transform: rotate(32deg); }
.closing::after { right: -18%; bottom: -120%; width: 60%; height: 240%; border-radius: 50%; }
.closing .big { color: #fff; }
.closing .cta { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.closing .cta .btn { width: 178px; min-width: 0; padding: 0 12px; font-weight: 700; }
.closing .btn-white { background: #fff; color: #0A7DFF; box-shadow: none; }
.closing .btn-white:hover { background: #EEF5FF; }
.closing .btn-outline-w { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.closing .btn-outline-w:hover { background: rgba(255, 255, 255, .1); }
.closing .fine { margin: 20px 0 0; font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, .78); }
@media (min-width: 960px) {
  .closing .cta { flex-direction: row; justify-content: center; gap: 14px; }
  .closing .big br { display: none; }
  .closing .cta .btn { width: auto; min-width: 178px; font-size: 18px; }
  .closing .fine { font-size: 14px; }
}

/* ⑩ 바닥글: 웍스 짙은 남색 */
.ft { background: #202936; color: rgba(255, 255, 255, .62); border-top: 0; padding-top: 48px; }
.ft .logo b, .ft .logo b i { color: #fff; }
.ft a { color: #fff; }
@media (min-width: 960px) { .ft { padding-top: 70px; padding-bottom: 70px; } }

@media (prefers-reduced-motion: reduce) {
  .js-rv .ep-stack .ep, .js-rv .chr, .js-rv .chr .say, .js-rv .flow-dia.rv .fn, .js-rv .flow-dia.rv .flow-core, .js-rv .flow-dia.rv .fn-plus { opacity: 1 !important; animation: none !important; }
  .js-rv .chr-l .say { transform: translateX(-50%) rotate(-4deg) !important; }
  .js-rv .flow-dia.rv .flow-svg { transform: none !important; }
  .js-rv .flow-dia.rv .flow-core { transform: translate(-50%, -50%) !important; }
}
/* 기장료 큰 숫자: 960~1279 폭(5칸이 좁음)에서 '10만원~'이 줄바꿈되지 않게 */
.pst-n { white-space: nowrap; }
@media (min-width: 960px) and (max-width: 1279px) {
  .pst-n { font-size: 48px; line-height: 64px; letter-spacing: -1.5px; }
  .pst-n small { font-size: 26px; }
}

/* ── 10차 = 대표님 11/4 밤 지적(그림 바로 보이게·각색·누적 고객 크게·예약 폼·STEP·긴 안내 정리·기장 문의 단추) ───────── */
/* 첫 화면: 휴대폰에서 그림이 첫 화면 안에(시간 안내 줄 뺌 · 그림 위 빈칸 줄임) */
.show-frame.ill { height: calc(352px * var(--k)); }
.ill-cv { top: calc(-8px * var(--k)); }
@media (max-width: 1023px) { .show { margin-top: 2px; } }
/* 오른쪽 알림 카드(택스민이 한 일): 파란 체크가 차례로 그려짐 */
.ep small { margin-left: auto; flex: none; font-size: 8px; font-weight: 600; color: #9AA0A6; }
.ep b { flex: 1; min-width: 0; }
.js-rv .ep-ic svg path { stroke-dasharray: 16; stroke-dashoffset: 16; animation: ck-draw .35s var(--ease) forwards; }
.js-rv .ep.e1 .ep-ic svg path { animation-delay: .95s; } .js-rv .ep.e2 .ep-ic svg path { animation-delay: 1.07s; }
.js-rv .ep.e3 .ep-ic svg path { animation-delay: 1.19s; } .js-rv .ep.e4 .ep-ic svg path { animation-delay: 1.31s; }

/* 누적 고객: 큰 숫자 하나(가운데) · 흐름띠 없음 */
.strip { padding: 48px 0 0; }
.proof { text-align: center; }
.proof-l { margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: -.5px; color: #4E5968; }
.proof-n { margin: 2px 0 0; font-size: 52px; line-height: 60px; font-weight: 800; letter-spacing: -2px; color: var(--b); }
.proof-n sup { margin-left: 2px; font-size: 20px; color: #8B95A1; vertical-align: super; }
.proof-note { margin: 10px 0 0; font-size: 12px; line-height: 18px; letter-spacing: -.3px; color: #8B95A1; }
@media (min-width: 960px) {
  .strip { padding: 72px 0 0; }
  .proof-l { font-size: 20px; line-height: 30px; }
  .proof-n { font-size: 80px; line-height: 88px; letter-spacing: -3px; }
  .proof-n sup { font-size: 26px; }
  .proof-note { font-size: 14px; line-height: 20px; }
}

/* 업종 사진: 단추 없음 · 휴대폰은 밀어 넘김(다음 카드가 살짝 보임) · PC 는 5칸 한 줄 */
.inds-foot { justify-content: flex-start; }
@media (min-width: 960px) {
  .inds-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; overflow: visible; max-width: 1325px; margin: 0 auto; padding: 0 20px; scroll-snap-type: none; scroll-padding-left: 0; }
  .ind-card { width: auto; height: auto; aspect-ratio: 444 / 616; }
  .ind-t { left: 20px; right: 12px; bottom: 26px; }
  .ind-t small { font-size: clamp(12px, 1vw, 14px); line-height: 22px; }
  .ind-t b { font-size: clamp(14px, 1.4vw, 20px); line-height: 1.45; letter-spacing: -.5px; }
}

/* 전화 상담 예약: 업종·작년 매출 각각 한 줄 5칸 · 동의 [필수]/[선택] 같은 꼴(굵은 제목 + 작은 한 덩어리) */
.times.five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.times.five label { display: grid; }
.times.five span { justify-content: center; min-height: 44px; padding: 0 2px; border-radius: 10px; font-size: 13px; letter-spacing: -.5px; white-space: nowrap; }
.agree > span { display: grid; gap: 3px; }
.agree b { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: -.3px; color: var(--ink); }
.agree small { font-size: 12px; line-height: 18px; letter-spacing: -.3px; color: var(--mute); }

/* 기장료 계산: STEP 1~3 */
.cd-l { gap: 8px; }
.cd-l .st { flex: none; padding: 3px 8px; border-radius: 6px; background: #EEF3FF; color: var(--b); font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .6px; }
.cd-l small { margin-left: 2px; }

/* 택스민 기장 문의(아래 떠 있는 단추) — 웍스 '도입 문의' 꼴, 우리 캐릭터 · 누르면 위로 세 갈래 */
.ask { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 46; display: grid; justify-items: end; gap: 10px; transition: opacity .2s, transform .2s, visibility 0s linear .2s; }
.ask.hide { opacity: 0; transform: translateY(12px); visibility: hidden; pointer-events: none; }
.ask:not(.hide) { transition-delay: 0s; }
.ask-btn { position: relative; display: flex; align-items: center; height: 56px; margin: 0; padding: 0 84px 0 20px; border: 0; border-radius: 28px; background: #202936; color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 12px 28px -10px rgba(11, 21, 48, .55); }
.ask-btn:hover { background: #2A3546; }
.ask-btn:focus-visible { outline: 3px solid var(--b); outline-offset: 3px; }
.ask-t { font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: -.4px; white-space: nowrap; }
.ask-chr { position: absolute; right: 2px; bottom: 0; width: 80px; height: auto; pointer-events: none; }
.ask-menu { width: 240px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 21, 48, .06), 0 18px 40px -16px rgba(11, 21, 48, .45); display: grid; gap: 2px; }
.ask-menu[hidden] { display: none; }
.ask-menu a { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 9px 10px; border-radius: 12px; color: #202124; text-decoration: none; }
.ask-menu a:hover, .ask-menu a:focus-visible { background: #F2F4F6; }
.ask-menu .ai { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #EEF3FF; color: var(--b); }
.ask-menu .ai svg { width: 19px; height: 19px; }
.ask-menu .ai.kk { background: #FEE500; color: #191919; }
.ask-menu b { font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: -.4px; }
.ask-menu small { font-size: 13px; line-height: 18px; letter-spacing: -.3px; color: #6B7684; }
.js-rv .ask-menu:not([hidden]) { animation: fade-up .22s var(--ease) both; }
@media (min-width: 960px) {
  .ask { right: 28px; bottom: 28px; }
  .ask-btn { height: 60px; padding: 0 92px 0 24px; border-radius: 30px; }
  .ask-t { font-size: 15px; line-height: 19px; }
  .ask-chr { width: 88px; }
  .ask-menu { width: 256px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-rv .ep-ic svg path { stroke-dashoffset: 0 !important; animation: none !important; }
  .js-rv .ask-menu:not([hidden]) { animation: none !important; }
}

/* ── 11차 = 구성은 네이버 웍스 '업종 솔루션' 쪽(실측 390·1440) ───────────────────────────────
   첫 화면 회색 #F1F3F9 · 제목 32/42(PC 48/60) 왼쪽 · 설명 16/28(18/28) · 휴대폰은 버튼 바로 아래 그림 · 구획 제목 26/36(PC 42/54) 왼쪽
   고민 카드 = 흰 바탕·얇은 테두리·아이콘·제목 22(26)·설명 16(18) · 해결 줄 = 그림·글 번갈아(제목 22/30 · PC 36/46, 첫 줄 18/30 · 20/30, 체크 목록 16/29) */
.hero { background: #F1F3F9; text-align: left; padding: 40px 0 28px; }
.hero h1 { font-size: 32px; line-height: 42px; }
.hero .lede { margin: 10px 0 0; font-size: 16px; line-height: 28px; }
.hero .cta { margin: 24px 0 0; justify-content: flex-start; }
.hero .cond { margin: 12px 0 0; text-align: left; }
@media (max-width: 1023px) { .show { margin-top: 20px; } }
@media (max-width: 389px) { .hero .cta { flex-wrap: nowrap; } .hero .cta .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; } }
@media (min-width: 960px) {
  .hero h1 { font-size: 48px; line-height: 60px; }
  .hero .lede { margin-top: 14px; font-size: 18px; line-height: 28px; }
  .hero .cta { margin-top: 32px; }
}
@media (min-width: 1024px) {
  .hero { min-height: 577px; padding: 24px 0; }
  .show-cap { margin-top: 4px; }
}
/* 구획 여백·제목(업종 쪽 꼴) */
#pain, #why, #calc { padding: 50px 0 0; }
#faq { padding: 60px 0; }
#flow { margin-top: 60px; }
.pain-sec .big, .feat-sec .big, .calc-sec .big, .faq-sec .big, .flow-txt .big, .inds-h .big { text-align: left; }
@media (min-width: 960px) {
  #pain { padding: 140px 0 0; }
  #why { padding: 140px 0 0; }
  #flow { margin-top: 140px; }
  #inds { margin-top: 0; }
  #calc { padding: 140px 0 100px; }
  #faq { padding: 0 0 140px; }
  .pain-sec .big, .feat-sec .big, .calc-sec .big, .faq-sec .big, .flow-txt .big, .inds-h .big { font-size: 42px; line-height: 54px; }
}
/* 고민 카드 3 */
.pains { display: grid; gap: 16px; margin-top: 30px; }
.pain { padding: 28px 24px 30px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #E1E4EA; }
.pain img { display: block; width: 72px; height: 72px; object-fit: contain; }
.pain h3 { margin: 18px 0 0; font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -.5px; color: #202124; }
.pain p { margin: 8px 0 0; font-size: 16px; line-height: 26px; letter-spacing: -.5px; color: #5F6B7A; }
@media (min-width: 960px) {
  .pains { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 50px; }
  .pain { padding: 40px 40px 44px; }
  .pain img { width: 96px; height: 96px; }
  .pain h3 { margin-top: 24px; font-size: 26px; line-height: 34px; }
  .pain p { margin-top: 12px; font-size: 18px; line-height: 28px; }
}
/* 해결 3줄: 휴대폰 그림 위·글 아래 / PC 그림·글 번갈아 · 그림은 테두리 없이 가장자리가 흐려지게 */
.feats2 { display: grid; gap: 56px; margin-top: 30px; }
.ft2 { display: grid; gap: 20px; align-items: center; }
.ft2-pic img, .ft2-pic video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; -webkit-mask-image: radial-gradient(ellipse 66% 66% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 66% 66% at 50% 50%, #000 62%, transparent 100%); }
.ft2 h3 { margin: 0; font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -.5px; color: #202124; }
.ft2-l { margin: 8px 0 0; font-size: 18px; line-height: 30px; letter-spacing: -.5px; color: #33383E; }
.ck-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.ck-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: start; font-size: 16px; line-height: 26px; letter-spacing: -.5px; color: #4E5968; }
.ck-list svg { width: 20px; height: 20px; margin-top: 3px; padding: 3px; border-radius: 50%; background: var(--b); color: #fff; }
@media (min-width: 960px) {
  .feats2 { gap: 90px; margin-top: 80px; }
  .ft2 { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 80px; }
  .ft2.rev .ft2-pic { order: 2; }
  .ft2 h3 { font-size: 36px; line-height: 46px; }
  .ft2-l { margin-top: 16px; font-size: 20px; line-height: 30px; }
  .ck-list { margin-top: 24px; gap: 12px; }
  .ck-list li { line-height: 29px; }
}
/* 원형 그림: 등장 전 비스듬히 돈 상태의 모서리가 화면 밖으로 나가 휴대폰 화면이 가로로 넓어지던 것(9차부터) 막음 — 아래 떠 있는 단추가 밀리던 원인 */
.flow-dia { overflow: hidden; }
.flow-sec { overflow-x: clip; }
/* 짙은 띠: 제목 + 누적 고객 큰 숫자(PC 제목 오른쪽 · 휴대폰 제목 아래) + 업종 사진 */
.inds-h { flex-wrap: wrap; align-items: flex-end; }
.inds-sec .proof { margin: 0; text-align: left; }
.inds-sec .proof-l { display: block; font-size: 15px; line-height: 22px; font-weight: 700; color: rgba(255, 255, 255, .7); }
.inds-sec .proof-n { display: block; margin: 0; font-size: 48px; line-height: 56px; font-weight: 800; letter-spacing: -2px; color: #8DB1FF; }
.inds-sec .proof-n sup { font-size: 18px; color: rgba(255, 255, 255, .55); }
@media (min-width: 960px) {
  .inds-h { flex-wrap: nowrap; }
  .inds-sec .proof { flex: none; text-align: right; }
  .inds-sec .proof-l { font-size: 18px; line-height: 26px; }
  .inds-sec .proof-n { font-size: 72px; line-height: 80px; letter-spacing: -3px; }
  .inds-sec .proof-n sup { font-size: 24px; }
}
/* 고민 카드 아이콘(납작한 색 아이콘 — 직접 그린 SVG) */
.pain .pi { display: block; width: 72px; height: 72px; }
@media (min-width: 960px) { .pain .pi { width: 88px; height: 88px; } }

/* ── 12차 = 문의 화면 = 단계별 간단 신청(업종 → 작년 매출 → 번호) · 휴대폰 전체 화면 · PC 가운데 카드 ───────── */
dialog.sheet.rsvdlg.ldlg { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border-radius: 0; overflow: auto; background: #F3F5F9; }
.ld { position: relative; min-height: 100%; padding-bottom: 28px; }
.ld-x { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
.ld-x svg { width: 20px; height: 20px; }
.ld-band { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; height: 290px; padding: 52px 20px 0; overflow: hidden; background: #13308F linear-gradient(160deg, #1B3FB4 0%, #112A80 100%); color: #fff; }
.ld-band-t { align-self: flex-start; position: relative; z-index: 1; }
.ld-t { margin: 0; font-size: 26px; line-height: 36px; font-weight: 800; letter-spacing: -.6px; }
.ld-s { margin: 12px 0 0; font-size: 15px; line-height: 24px; letter-spacing: -.4px; color: rgba(255, 255, 255, .86); }
.ld-chr { flex: none; width: 124px; height: auto; margin: 0 -4px -40px 0; }
.ld-card { position: relative; z-index: 2; margin: -64px 16px 0; padding: 0 20px 22px; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -22px rgba(11, 21, 48, .5); }
.ld-bar { position: relative; height: 8px; margin: 0 -20px; border-radius: 16px 16px 0 0; background: #E3E8F2; }
.ld-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 22%; border-radius: 16px 0 0 0; background: var(--b); transition: width .35s var(--ease); }
.ld-tip { position: absolute; left: calc(22% - 8px); top: 16px; padding: 4px 10px; border-radius: 999px; background: #0E1E5B; color: #fff; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); transition: left .35s var(--ease); }
.ld-tip::before { content: ""; position: absolute; left: 50%; top: -5px; margin-left: -5px; border: 5px solid transparent; border-top: 0; border-bottom-color: #0E1E5B; }
.ld-tip b { font-weight: 800; }
.ld-card .consult { margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.ld-step { display: none; }
.ld-step.on { display: grid; gap: 14px; animation: fade-up .3s var(--ease) both; }
.ld-q { margin: 52px 0 6px; font-size: 22px; line-height: 30px; font-weight: 800; letter-spacing: -.5px; color: #202124; }
.ld-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ld-opt { position: relative; display: grid; }
.ld-opt:last-child { grid-column: 1 / -1; }
.ld-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ld-opt span { display: grid; place-items: center; min-height: 64px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #D9DFEA; font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: -.4px; color: #202124; text-align: center; transition: box-shadow .15s, background-color .15s, color .15s; }
.ld-opt input:checked + span { background: var(--b-t); color: var(--b-d); box-shadow: inset 0 0 0 2px var(--b); }
.ld-opt input:focus-visible + span { outline: 3px solid var(--b); outline-offset: 2px; }
.ld-opt:hover span { box-shadow: inset 0 0 0 1.5px var(--b); }
.ld-back { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 4px; border: 0; background: none; color: #6B7684; font: inherit; font-size: 14px; cursor: pointer; }
.ld-back svg { width: 14px; height: 14px; }
.ld-pick { margin: -4px 0 0; font-size: 14px; line-height: 20px; color: var(--b-d); font-weight: 600; }
.ld-pick:empty { display: none; }
.ld-card .fld label { font-size: 15px; font-weight: 700; }
.ld-card .fld input { min-height: 56px; border-radius: 12px; background: #F7F9FC; box-shadow: inset 0 0 0 1px #D9DFEA; font-size: 17px; }
.ld-agree { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ld-ck { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 22px; color: #4E5968; cursor: pointer; }
.ld-ck input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--b); }
.ld-ck.sm { align-items: flex-start; font-size: 13px; line-height: 19px; }
.ld-ck.sm input { margin-top: 1px; }
.ld-more { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1.5px solid #4E5968; border-radius: 7px; background: #fff; color: #4E5968; cursor: pointer; }
.ld-more svg { width: 15px; height: 15px; transition: transform .2s; }
.ld-more[aria-expanded="true"] svg { transform: rotate(90deg); }
.ld-terms { display: grid; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #F5F7FA; }
.ld-terms[hidden] { display: none; }
.ld-terms p { margin: 0; font-size: 13px; line-height: 20px; letter-spacing: -.3px; color: #5F6B7A; }
.ld-terms a { color: var(--b); }
.ld-go { width: 100%; min-height: 56px; margin-top: 6px; border-radius: 12px; background: #C9CED6; color: #fff; font-size: 18px; font-weight: 800; box-shadow: none; }
.ld-go.on { background: var(--b); }
.ld-go.on:hover { background: var(--b-d); }
.ld-card .consult.done { margin-top: 52px; }
.ld-alt { display: flex; align-items: center; gap: 10px; margin: 14px 16px 0; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px -24px rgba(11, 21, 48, .45); }
.ld-alt p { flex: 1; margin: 0; font-size: 17px; line-height: 24px; font-weight: 800; letter-spacing: -.4px; color: #202124; }
.ld-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; text-decoration: none; }
.ld-ic svg { width: 24px; height: 24px; }
.ld-ic.kk { background: #FEE500; color: #191919; }
.ld-ic.tel { background: #EEF0F3; color: #202124; }
.ld-note { margin: 14px 20px 0; text-align: right; font-size: 12px; line-height: 18px; color: #8B95A1; }
@media (min-width: 720px) {
  dialog.sheet.rsvdlg.ldlg { width: 440px; height: auto; max-height: calc(100dvh - 40px); margin: auto; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) { .ld-step.on { animation: none; } .ld-bar i, .ld-tip { transition: none; } }

/* ── 13차 = 첫 화면 그림 = 대표님 시안(사진 + 둘레 카드·아이콘·점선) · 1024×650 판을 --k 로 맞춤 ─────────────── */
.hc-frame { --k: .35; position: relative; width: 100%; height: calc(650px * var(--k)); }
.hc { position: absolute; left: 0; top: 0; width: 1024px; height: 650px; transform: scale(var(--k)); transform-origin: top left; }
.hc-lines { position: absolute; inset: 0; width: 1024px; height: 650px; }
.hc-photo { position: absolute; left: 335px; top: 60px; width: 514px; height: 372px; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 60px -36px rgba(11, 21, 48, .55); }
.hc-b { position: absolute; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(11, 21, 48, .06), 0 14px 30px -16px rgba(11, 21, 48, .4); }
.hc-b svg { width: 56%; height: 56%; }
.hc-b1 { left: 206px; top: 113px; width: 74px; height: 74px; }
.hc-b2 { left: 206px; top: 233px; width: 74px; height: 74px; }
.hc-b3 { left: 893px; top: 200px; width: 100px; height: 100px; }
.hc-b3 svg { width: 60%; height: 60%; }
.hc-b3 text { font-family: var(--f); }
.hc-sch { position: absolute; left: 852px; top: 18px; width: 168px; padding: 14px 14px 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 21, 48, .06), 0 16px 34px -18px rgba(11, 21, 48, .45); }
.hc-sch-t { margin: 0 0 8px; font-size: 17px; line-height: 22px; font-weight: 800; letter-spacing: -.5px; color: #202124; }
.hc-sch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hc-sch li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 7px; padding: 7px 0; border-top: 1px solid #EEF0F3; }
.hc-sch .d { font-size: 13px; line-height: 18px; font-weight: 700; color: #6B7684; }
.hc-sch b { font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: -.5px; color: #202124; white-space: nowrap; }
.hc-sch i { display: grid; }
.hc-sch i svg { width: 20px; height: 20px; }
.hc-eff { position: absolute; left: 862px; top: 352px; margin: 0; font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -.5px; color: #2F6BEA; }
.hc-card { position: absolute; left: 35px; top: 380px; width: 545px; padding: 22px 22px 22px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 21, 48, .06), 0 24px 48px -26px rgba(11, 21, 48, .5); }
.hc-card-t { margin: 0 0 16px; font-size: 26px; line-height: 32px; font-weight: 800; letter-spacing: -.6px; color: #202124; }
.hc-card ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hc-card li { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 18px 6px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px #E3E7EE; text-align: center; color: #2B2F36; }
.hc-card .ti { display: grid; place-items: center; width: 56px; height: 56px; }
.hc-card .ti svg { width: 50px; height: 50px; }
.hc-card b { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.6px; color: #33383E; }
.hc-price { position: absolute; left: 636px; top: 404px; width: 374px; padding: 20px 22px 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 21, 48, .06), 0 24px 48px -26px rgba(11, 21, 48, .5); }
.hc-price-t { margin: 0 0 12px; text-align: center; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -.6px; color: #202124; }
.hc-bars { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.hb { display: grid; justify-items: center; gap: 4px; }
.hb .ar { display: grid; height: 18px; }
.hb .ar svg { width: 12px; height: 16px; }
.hb.dn .ar { color: #E85A4F; } .hb.upp .ar { color: #14A38B; }
.hb i { display: block; width: 100%; height: 54px; }
.hb.dn i { background: #F06A5A; clip-path: polygon(0 18%, 100% 62%, 100% 100%, 0 100%); }
.hb.upp i { background: #19B39A; clip-path: polygon(0 70%, 30% 52%, 55% 20%, 70% 0, 100% 34%, 100% 100%, 0 100%); }
.hb b { font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -.5px; color: #202124; white-space: nowrap; }
@media (min-width: 1024px) { .hc-frame { --k: .656; } }
/* 움직임: 사진 → 동그라미 → 카드 차례로 · 일정표 체크 그리기 · 막대 차오름 */
.js-rv .hc-photo { animation: fade-in .7s var(--ease) .1s both; }
.js-rv .hc-b { animation: pop-in .5s var(--ease) both; } .js-rv .hc-b1 { animation-delay: .45s; } .js-rv .hc-b2 { animation-delay: .6s; } .js-rv .hc-b3 { animation-delay: .75s; }
.js-rv .hc-card { animation: fade-up .6s var(--ease) .9s both; } .js-rv .hc-price { animation: fade-up .6s var(--ease) 1.05s both; } .js-rv .hc-sch { animation: fade-up .6s var(--ease) 1.2s both; }
.js-rv .hc-eff { animation: fade-in .6s var(--ease) 1.3s both; } .js-rv .hc-lines { animation: fade-in .9s var(--ease) .5s both; }
.js-rv .hc-sch i svg path { stroke-dasharray: 16; stroke-dashoffset: 16; animation: ck-draw .35s var(--ease) forwards; }
.js-rv .hc-sch li:nth-child(1) i svg path { animation-delay: 1.55s; } .js-rv .hc-sch li:nth-child(2) i svg path { animation-delay: 1.75s; }
.js-rv .hb i { transform-origin: bottom; animation: bar-up .7s var(--ease) 1.3s both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bar-up { from { transform: scaleY(.15); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js-rv .hc-photo, .js-rv .hc-b, .js-rv .hc-card, .js-rv .hc-price, .js-rv .hc-sch, .js-rv .hc-eff, .js-rv .hc-lines, .js-rv .hb i { animation: none !important; opacity: 1 !important; transform: none !important; }
  .js-rv .hc-sch i svg path { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* 업종 사진: PC 도 밀어 넘김 꼴(자동 슬라이드 · 단추 없음) — 10차 'PC 5칸 한 줄'을 되돌림 */
@media (min-width: 960px) {
  .inds-track { display: flex; gap: 30px; overflow-x: auto; max-width: none; margin: 0; padding: 0 max(20px, calc((100% - 1285px) / 2)); scroll-snap-type: x mandatory; scroll-padding-left: max(20px, calc((100% - 1285px) / 2)); }
  .ind-card { width: 446px; height: 620px; aspect-ratio: auto; }
  .ind-t { left: 40px; right: 24px; bottom: 44px; }
  .ind-t small { font-size: 16px; line-height: 28px; }
  .ind-t b { font-size: 28px; line-height: 40px; }
}

/* ── 14차 = 기장 문의 단추·여자 사진(대표님 "글씨 아래 선 없애고 색 웹에 맞게 · 여자 이미지 수정") ───────── */
.ask-btn { padding: 0 80px 0 22px; background: var(--ink); color: #fff; text-decoration: none; }
.ask-btn:hover { background: #16224A; }
.ask-btn:visited { color: #fff; }
.ask-av { position: absolute; right: 6px; bottom: 6px; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: #DCE6FF; box-shadow: 0 0 0 3px #fff, 0 10px 20px -10px rgba(11, 21, 48, .6); }
.ask-av img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.ld-chr { width: 136px; margin: 0 -20px -58px 0; }
@media (min-width: 960px) {
  .ask-btn { padding: 0 88px 0 24px; }
  .ask-av { width: 66px; height: 66px; }
}
/* 14차 덧붙임: 단추 얼굴은 원래 사진에서 얼굴 가운데로 · 팝업 띠 사장님 크게(머리~어깨가 카드 위로) */
.ask-av img { object-position: 50% 50%; }
.ld-chr { width: 164px; margin: 0 -20px -42px -24px; }
.ld-t { font-size: 24px; line-height: 34px; }
@media (min-width: 720px) { .ld-chr { width: 176px; } }

/* ── 15차 = 작업자 교차 검증 반영 ───────── */
/* 첫 화면 그림: 틀 높이는 폭으로만 정함(스크립트가 늦어도 밀림·가로 넘침 없음) · 배율은 CSS 가 바로 계산(못 하는 브라우저만 스크립트) */
.hc-frame { --k: .28; height: auto; aspect-ratio: 1024 / 650; container-type: inline-size; }
@media (min-width: 1024px) { .hc-frame { --k: .656; } }
@supports (width: 1cqw) and (width: calc(1px * tan(45deg))) { .hc { transform: scale(tan(atan2(100cqw, 1024px))); } }
/* 문의 창: PC 는 내용 높이만큼(아래 빈 회색 없음) · 띠 글이 길면 띠가 늘어남(320 에서 카드에 가리지 않게) */
@media (min-width: 720px) { dialog.sheet.rsvdlg.ldlg { height: fit-content; } .ld { padding-bottom: 20px; } .ld-q { margin-top: 46px; } .ld-alt { padding-block: 14px; } .ld-step.on { gap: 12px; } }
.ld-band { height: auto; min-height: 290px; }
.ld-band-t { padding-bottom: 76px; }
@media (max-width: 719px) and (max-height: 700px) { .ld-band { min-height: 246px; padding-top: 44px; } .ld-chr { width: 138px; } .ld-q { margin-top: 46px; } .ld-opt span { min-height: 54px; } }
.ld-q:focus { outline: none; }
.ld-tip[hidden] { display: none; }
/* 번호 칸: 초점·오류 테두리가 바탕 규칙에 덮이지 않게 */
.ld-card .fld input:focus { box-shadow: inset 0 0 0 2px var(--b); background: #fff; }
.ld-card .fld.bad input { box-shadow: inset 0 0 0 2px var(--err); }
/* 동의: [필수]·[선택] 같은 꼴 두 줄 + '보기' */
.ld-more { width: auto; height: 32px; padding: 0 12px; border: 1px solid #C9D0DA; border-radius: 8px; font: inherit; font-size: 13px; line-height: 1; font-weight: 700; color: #4E5968; }
.ld-agree + .ld-terms { margin-top: -6px; }
.ld-terms p { line-height: 21px; }
/* 신청 단추 회색 상태도 글이 읽히게 · 맨 아래 줄 대비 */
.ld-go { background: #E5E8EB; color: #4E5968; }
.ld-go.on { background: var(--b); color: #fff; }
.ld-note { color: #5F6B7A; }
/* 다른 방법: 동그라미 아래 이름 · 상담 시간 밖엔 전화 숨김(첫 화면도 '전화 예약'으로 바뀜) */
.ld-ic, .ld-ic.kk, .ld-ic.tel { width: auto; height: auto; display: grid; justify-items: center; gap: 4px; border-radius: 0; background: none; color: #202124; }
.ld-ic .ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; }
.ld-ic.kk .ic { background: #FEE500; color: #191919; }
.ld-ic.tel .ic { background: #EEF0F3; color: #202124; }
.ld-ic .tx { font-size: 12px; line-height: 16px; font-weight: 700; color: #4E5968; white-space: nowrap; }
html.tm-off .ld-ic.tel { display: none; }
/* 계산 팝업: 법인은 STEP 2·3 숨김 · 결과 표 끝말 홀로 남지 않게 */
.calcdlg.corp [data-q] { display: none; }
.cd-dl dd { text-wrap: pretty; }
/* 해결 3줄 그림: 네 변 끝까지 부드럽게 지움(하늘색 네모 경계 안 보이게) */
.ft2-pic img, .ft2-pic video {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
/* 보조 글 대비 */
.pst-s, .calc-fine { color: #6B7684; }
.closing .fine { color: #fff; }
.ind-card::after { inset: 36% 0 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .78)); }

/* ── 16차 = 기장 문의 단추 캐릭터(Gemini 로 만든 2D 사장님 — 알약 오른쪽 끝에서 위로 살짝 삐져나옴, 아래는 남색으로 스며듦) ───────── */
.ask-btn { padding: 0 98px 0 22px; }
.ask-ch { position: absolute; right: 10px; bottom: 0; width: 84px; height: auto; pointer-events: none; -webkit-mask-image: linear-gradient(#000 68%, transparent 100%); mask-image: linear-gradient(#000 68%, transparent 100%); }
/* 알약 위로 나온 머리도 단추(그림은 pointer-events:none 이라 머리 모양 누름 영역을 따로 — 뒤 본문이 눌리지 않게) */
.ask-btn::before { content: ""; position: absolute; right: 36px; bottom: 100%; width: 44px; height: 28px; border-radius: 22px 22px 0 0; }
@media (min-width: 960px) {
  .ask-btn { padding: 0 106px 0 24px; }
  .ask-ch { width: 92px; }
  .ask-btn::before { right: 38px; width: 48px; height: 32px; border-radius: 24px 24px 0 0; }
}

/* ── 17차 = 첫 화면 규격·그림을 웍스 업종 솔루션 쪽(naver.worksmobile.com/solutions/retail)에 맞춤 ───────── */
/* 그림 판 1024×817(웍스 그림과 같은 비율) — 화면 폭에 맞춰 통째로 줄어듦(배율 계산은 15차 그대로) */
.hc-frame { aspect-ratio: 1024 / 817; }
.hc { height: 817px; }
.hc-orbit { position: absolute; inset: 0; width: 1024px; height: 817px; }
.hc-photo { left: 208px; top: 80px; width: 602px; height: 630px; object-fit: cover; object-position: 40% 50%; border-radius: 30px; box-shadow: 0 0 0 2px #2B3040; }
.hc-chip { position: absolute; left: 122px; top: 126px; height: 77px; margin: 0; padding: 0 26px; display: flex; align-items: center; border-radius: 12px; background: #20C864; box-shadow: inset 0 0 0 3px #2B3040; font-size: 42px; line-height: 1; font-weight: 800; letter-spacing: -1px; color: #0B1530; white-space: nowrap; }
.hc-bd { position: absolute; top: 335px; display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #2B3040; }
.hc-bd svg { width: 62px; height: 62px; }
.hc-bd-l { left: 66px; }
.hc-bd-r { left: 832px; }
.hc-av { position: absolute; left: 5px; top: 589px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
.hc-av svg { display: block; width: 100%; height: 100%; }
.hc-nm { position: absolute; left: 65px; top: 585px; margin: 0; font-size: 14px; line-height: 18px; letter-spacing: -.3px; color: #4E5968; white-space: nowrap; }
.hc-bb { position: absolute; margin: 0; height: 56px; padding: 0 22px; display: flex; align-items: center; border-radius: 18px; box-shadow: inset 0 0 0 2px #2B3040; font-size: 21px; line-height: 1; letter-spacing: -.6px; color: #202124; white-space: nowrap; }
.hc-bb1 { left: 63px; top: 612px; background: #fff; border-top-left-radius: 4px; }
.hc-bb2 { left: 227px; top: 688px; background: #CDEAFC; border-top-right-radius: 4px; }
.hc-app { position: absolute; left: 593px; top: 550px; width: 427px; height: 240px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px #2B3040; overflow: hidden; }
.hc-ah { display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 20px; }
.hc-ah b { flex: 1; font-size: 22px; font-weight: 700; letter-spacing: -.6px; color: #202124; }
.hc-ah svg { flex: none; width: 26px; height: 26px; }
.hc-at { display: flex; gap: 26px; height: 46px; margin: 0 2px; padding: 0 18px; align-items: flex-end; box-shadow: inset 0 -1px 0 #E5E8EB; }
.hc-at span { padding: 0 2px 11px; font-size: 17px; line-height: 20px; letter-spacing: -.4px; color: #8B95A1; }
.hc-at .on { color: #2554F0; font-weight: 700; box-shadow: inset 0 -2px 0 #2554F0; }
.hc-ap { padding: 14px 22px 0 28px; }
.hc-pt { position: relative; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; line-height: 26px; letter-spacing: -.5px; color: #202124; }
.hc-pt i { position: absolute; left: -14px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: #F04452; }
.hc-pt .tag { padding: 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #12B76A; font-size: 13px; line-height: 22px; font-weight: 700; color: #0E9F5E; }
.hc-pb { margin: 6px 0 0; font-size: 16px; line-height: 22px; letter-spacing: -.4px; color: #4E5968; }
.hc-pm { display: flex; gap: 18px; margin: 8px 0 0; font-size: 14px; line-height: 20px; letter-spacing: -.3px; color: #8B95A1; }
/* 움직임: 사진·궤도 → 동그라미·칩 → 말풍선·카드 차례로 살짝(떠다니지 않음) */
.js-rv .hc-orbit { animation: fade-in .9s var(--ease) .3s both; }
.js-rv .hc-bd { animation: pop-in .5s var(--ease) .5s both; } .js-rv .hc-bd-r { animation-delay: .62s; }
.js-rv .hc-chip { animation: fade-up .6s var(--ease) .75s both; }
.js-rv .hc-av, .js-rv .hc-nm, .js-rv .hc-bb1 { animation: fade-up .6s var(--ease) .9s both; }
.js-rv .hc-bb2 { animation: fade-up .6s var(--ease) 1.1s both; }
.js-rv .hc-app { animation: fade-up .6s var(--ease) 1s both; }
@media (prefers-reduced-motion: reduce) {
  .js-rv .hc-orbit, .js-rv .hc-bd, .js-rv .hc-chip, .js-rv .hc-av, .js-rv .hc-nm, .js-rv .hc-bb1, .js-rv .hc-bb2, .js-rv .hc-app { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* 첫 화면 배치 — 휴대폰·태블릿: 제목 → 설명 20 → 버튼 20 → 조건 줄 → 그림(가로 꽉, 양옆 16) · 아래 30 */
@media (max-width: 1023px) {
  .hero { padding-bottom: 30px; }
  .hero .lede { margin-top: 20px; }
  .hero .cta { margin-top: 20px; }
  .show.hc-fig { margin: 20px 0 0; padding: 0 16px; }
}
/* PC: 오른쪽 그림 칸 최대 687(1440 에서 687×548) · 위아래 25 · 글 덩어리는 그림 높이 가운데 */
@media (min-width: 1024px) {
  .hero { min-height: 0; padding: 25px 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 687px); gap: 24px; align-items: center; }
  .hero .lede { margin-top: 20px; }
  .hero .cta { margin-top: 30px; }
  .show.hc-fig { margin: 0; padding: 0; }
  .hero-txt { position: relative; }
  .hero .cond { position: absolute; left: 0; right: 0; top: 100%; margin-top: 12px; }
}
/* 고민 카드: 웍스 규격(휴대폰 358×266 · PC 413×316 · 얇은 회색 테두리 · 아이콘 칸 98) */
.pains { gap: 20px; margin-top: 30px; }
.pain { padding: 24px 32px 31px; background: none; box-shadow: inset 0 0 0 1px #DBDEE1; }
.pain .pi { width: 98px; height: 98px; }
.pain h3 { margin-top: 34px; font-size: 22px; line-height: 22px; }
.pain p { margin-top: 15px; font-size: 16px; line-height: 21px; color: #202124; }   /* 웍스 설명 글 색(진한 회색) */
@media (min-width: 960px) {
  .pains { gap: 22.5px; margin-top: 46px; }
  .pain { padding: 31px 41px 41px; }
  .pain .pi { width: 98px; height: 98px; }
  .pain h3 { margin-top: 48px; font-size: 26px; line-height: 28px; }
  .pain p { margin-top: 14px; font-size: 18px; line-height: 28px; }
}

/* ── 18차 = 첫 화면 그림 택스민 고유 짜임(대표님 "웍스를 벤치마킹하되 너무 똑같이 하지마") ───────── */
/* 규격(판 1024×817 · 틀 자리 · 배율)은 17차 그대로. 판 안: 점 무늬(왼쪽 위) · 연한 파란 면(사진 뒤, 오른쪽·아래로 살짝)
   · 사진 602×630(오른쪽 x390 y74 · 오른쪽 아래만 크게 둥글게) · 카톡 대화 창(왼쪽 위) · 장부·신고 체크 카드(왼쪽 가운데) · 꼬리표 가격표(오른쪽 위)
   선 대신 흰 카드 + 부드러운 그림자 · 카톡 노란색은 카톡 표시에만 */
.hc .ha-dots { position: absolute; left: 0; top: 40px; width: 236px; height: 214px; background-image: radial-gradient(circle, #2554F0 2.6px, transparent 3.2px); background-size: 22px 22px; opacity: .3; }
.hc .ha-blk { position: absolute; left: 440px; top: 134px; width: 574px; height: 598px; border-radius: 40px 40px 140px 40px; background: linear-gradient(160deg, #DCE6FF 0%, #C2D3FF 100%); }
.hc .ha-photo { position: absolute; left: 390px; top: 74px; width: 602px; height: 630px; max-width: none; object-fit: cover; object-position: 22% 50%; border-radius: 40px 40px 140px 40px; box-shadow: 0 32px 64px -34px rgba(11, 21, 48, .5); }
.ha-chat { position: absolute; left: 22px; top: 110px; width: 420px; border-radius: 28px; background: #fff; box-shadow: 0 2px 4px rgba(11, 21, 48, .04), 0 30px 64px -30px rgba(11, 21, 48, .42); overflow: hidden; text-align: left; }
.ha-ch { display: flex; align-items: center; gap: 14px; padding: 18px 24px 16px; }
.ha-kk { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: #FEE500; color: #191919; }
.ha-kk svg { width: 30px; height: 30px; }
.ha-ch p { display: grid; margin: 0; }
.ha-ch b { font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -1px; color: #0B1530; }
.ha-ch span { font-size: 20px; line-height: 26px; letter-spacing: -.4px; color: #6B7684; }
.ha-cb { display: grid; gap: 12px; padding: 18px 20px 22px; background: #E4EBF7; }
.ha-b { width: fit-content; margin: 0; padding: 10px 18px; border-radius: 20px; font-size: 25px; line-height: 34px; letter-spacing: -.6px; color: #191F28; white-space: nowrap; }
.ha-me { justify-self: end; background: #FEE500; border-top-right-radius: 6px; }
.ha-us { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.ha-av { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px #DCE2EC; }
.ha-av .ha-sym { width: 32px; height: 19px; }
.ha-ur { background: #fff; border-top-left-radius: 6px; }
.ha-todo { position: absolute; left: 40px; top: 430px; width: 470px; padding: 24px 28px 26px; border-radius: 28px; background: #fff; box-shadow: 0 2px 4px rgba(11, 21, 48, .04), 0 30px 64px -30px rgba(11, 21, 48, .42); text-align: left; }
.ha-th { display: flex; align-items: baseline; justify-content: space-between; margin: 0; }
.ha-th b { font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -1px; color: #0B1530; }
.ha-th span { font-size: 19px; line-height: 24px; font-weight: 700; letter-spacing: -.4px; color: #2554F0; }
.ha-todo ul { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.ha-todo li { display: flex; align-items: center; gap: 12px; font-size: 25px; line-height: 30px; letter-spacing: -.5px; color: #191F28; white-space: nowrap; }
.ha-ck { flex: none; width: 30px; height: 30px; }
.ha-tag { position: absolute; left: 758px; top: 52px; width: 250px; height: 104px; filter: drop-shadow(0 14px 16px rgba(11, 21, 48, .26)); }
.ha-tg { position: relative; width: 100%; height: 100%; transform: rotate(6deg); transform-origin: 27px 52px; }
.ha-tg svg { position: absolute; left: 0; top: 0; width: 250px; height: 104px; max-width: none; overflow: visible; }
.ha-tg p { position: absolute; left: 52px; top: 0; bottom: 0; display: grid; align-content: center; margin: 0; color: #fff; text-align: left; }
.ha-tg span { font-size: 18px; line-height: 22px; font-weight: 600; letter-spacing: -.3px; opacity: .85; }
.ha-tg b { font-size: 46px; line-height: 50px; font-weight: 800; letter-spacing: -1.6px; white-space: nowrap; }
/* 움직임: 사진 → 대화 창 → 말풍선 차례로 → 장부·신고 카드(체크 그리기) → 가격표. 한 번만 · 살짝 */
.js-rv .ha-photo, .js-rv .ha-blk, .js-rv .ha-dots { animation: fade-in .8s var(--ease) .1s both; }
.js-rv .ha-chat { animation: fade-up .6s var(--ease) .3s both; }
.js-rv .ha-me { animation: fade-up .45s var(--ease) .65s both; }
.js-rv .ha-av, .js-rv .ha-ur { animation: fade-up .45s var(--ease) .9s both; }
.js-rv .ha-todo { animation: fade-up .6s var(--ease) .75s both; }
.js-rv .ha-todo .ha-ck path { stroke-dasharray: 18; stroke-dashoffset: 18; animation: ck-draw .35s var(--ease) forwards; }
.js-rv .ha-todo li:nth-child(1) .ha-ck path { animation-delay: 1.2s; } .js-rv .ha-todo li:nth-child(2) .ha-ck path { animation-delay: 1.35s; }
.js-rv .ha-todo li:nth-child(3) .ha-ck path { animation-delay: 1.5s; } .js-rv .ha-todo li:nth-child(4) .ha-ck path { animation-delay: 1.65s; }
.js-rv .ha-tag { animation: fade-up .55s var(--ease) 1s both; }
@media (prefers-reduced-motion: reduce) {
  .js-rv .ha-photo, .js-rv .ha-blk, .js-rv .ha-dots, .js-rv .ha-chat, .js-rv .ha-me, .js-rv .ha-av, .js-rv .ha-ur, .js-rv .ha-todo, .js-rv .ha-tag { animation: none !important; opacity: 1 !important; transform: none !important; }
  .js-rv .ha-todo .ha-ck path { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ── 19차 = 첫 화면 그림 차분하게(대표님 "시장통 됨 · 기존꺼로 좀 돌려") + 20대 여성 사장님 사진 · 문의 창 한눈에 ───────── */
/* 판 1024×817 · 틀 자리·배율은 그대로. 사진이 주인공(가운데 602×630) · 둘레는 작은 요소 4개만(얇은 진한 테두리로 통일) */
.hc .hb-plate { position: absolute; left: 330px; top: 36px; width: 630px; height: 560px; border-radius: 64px; background: linear-gradient(160deg, #E4EBFF 0%, #D6E2FF 100%); }
.hc .hb-photo { position: absolute; left: 208px; top: 80px; width: 602px; height: 630px; max-width: none; object-fit: cover; object-position: 50% 30%; border-radius: 30px; box-shadow: 0 0 0 2px #2B3040, 0 30px 60px -36px rgba(11, 21, 48, .5); }
.hb-q, .hb-a, .hb-ok { position: absolute; margin: 0; display: flex; align-items: center; height: 64px; border-radius: 22px; box-shadow: inset 0 0 0 2px #2B3040; font-size: 25px; line-height: 1; font-weight: 600; letter-spacing: -.6px; color: #191F28; white-space: nowrap; }
.hb-q { left: 30px; top: 146px; padding: 0 26px 0 76px; background: #FEE500; border-bottom-right-radius: 6px; }
.hb-kk { position: absolute; left: 14px; top: 11px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #3C1E1E; color: #FEE500; }
.hb-kk svg { width: 24px; height: 24px; }
.hb-a { left: 596px; top: 436px; padding: 0 74px 0 26px; background: #fff; border-bottom-left-radius: 6px; }
.hb-av { position: absolute; right: 11px; top: 11px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px #DCE2EC; }
.hb-av .ha-sym { width: 30px; height: 18px; }
.hb-tag { position: absolute; left: 60px; top: 586px; display: grid; align-content: center; height: 112px; padding: 0 30px 0 34px; border-radius: 20px; background: #2554F0; box-shadow: inset 0 0 0 2px #0B1530; color: #fff; transform: rotate(-3deg); }
.hb-tag span { font-size: 19px; line-height: 24px; font-weight: 600; letter-spacing: -.3px; opacity: .88; }
.hb-tag b { font-size: 48px; line-height: 54px; font-weight: 800; letter-spacing: -1.6px; white-space: nowrap; }
.hb-ok { left: 586px; top: 662px; gap: 12px; padding: 0 26px 0 16px; background: #fff; font-size: 23px; }
.hb-ok .ha-ck { width: 32px; height: 32px; }
.js-rv .hb-plate { animation: fade-in .8s var(--ease) .1s both; }
.js-rv .hb-photo { animation: fade-in .7s var(--ease) .15s both; }
.js-rv .hb-q { animation: fade-up .5s var(--ease) .55s both; }
.js-rv .hb-a { animation: fade-up .5s var(--ease) .85s both; }
.js-rv .hb-tag { animation: fade-up .5s var(--ease) 1s both; }
.js-rv .hb-ok { animation: fade-up .5s var(--ease) 1.15s both; }
@media (prefers-reduced-motion: reduce) {
  .js-rv .hb-plate, .js-rv .hb-photo, .js-rv .hb-q, .js-rv .hb-a, .js-rv .hb-tag, .js-rv .hb-ok { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* 문의 창 한눈에: 위 띠 낮게(캐릭터) · 간격·칸 높이 줄여 휴대폰에서 내리지 않고 한 화면에 */
.ld-band { min-height: 196px; padding-top: 38px; }
.ld-band-t { padding-bottom: 54px; }
.ld-t { font-size: 22px; line-height: 30px; }
.ld-s { margin-top: 8px; font-size: 14px; line-height: 21px; }
.ld-chr { width: 148px; margin: 0 -4px -44px 0; }
.ld-card { margin-top: -44px; }
.ld-q { margin: 40px 0 2px; font-size: 20px; line-height: 28px; }
.ld-step.on { gap: 10px; }
.ld-opts { gap: 8px; }
.ld-opt span { min-height: 50px; font-size: 15px; }
.ld-card .fld input { min-height: 50px; }
.ld-go { min-height: 52px; margin-top: 2px; }
.ld-back { min-height: 32px; }
.ld-agree + .ld-terms { margin-top: -4px; }
.ld-alt { margin-top: 10px; padding: 10px 16px; }
.ld-alt p { font-size: 15px; }
.ld-ic .ic { width: 44px; height: 44px; }
.ld-ic svg { width: 22px; height: 22px; }
.ld-note { margin-top: 8px; }
.ld { padding-bottom: 14px; }
@media (min-width: 720px) {
  .ld-band { min-height: 186px; }
  .ld-band-t { padding-bottom: 46px; }
  .ld-chr { width: 150px; }
  .ld-q { margin-top: 40px; }
  .ld { padding-bottom: 14px; }
}
/* 키 작은 휴대폰(높이 700 이하): 띠 설명 줄 숨기고 간격 더 줄여 3단계까지 한 화면에 */
@media (max-width: 719px) and (max-height: 700px) {
  .ld-s { display: none; }
  .ld-band { min-height: 148px; padding-top: 30px; }
  .ld-band-t { padding-bottom: 48px; }
  .ld-chr { width: 128px; margin-bottom: -40px; }
  .ld-q { margin-top: 36px; }
  .ld-step.on { gap: 8px; }
  .ld-opt span { min-height: 48px; }
}

/* ── 20차 = 첫 화면 그림 처음 짜임(대표님 시안 꼴)으로 되돌림 + 예쁜 20대 카페 사장님 사진 ───────── */
/* 13차 요소(.hc-lines·.hc-b1~3·.hc-sch·.hc-eff·.hc-card·.hc-price)를 17차 판 1024×817 에 맞게 아래로 넓혀 놓음 */
.hc .hc-lines { height: 817px; }
.hc .hc-photo { left: 335px; top: 70px; width: 514px; height: 600px; max-width: none; object-fit: cover; object-position: 50% 30%; border-radius: 28px; box-shadow: 0 30px 60px -36px rgba(11, 21, 48, .55); }
.hc .hc-b1 { top: 150px; }
.hc .hc-b2 { top: 290px; }
.hc .hc-b3 { top: 300px; }
.hc .hc-sch { top: 70px; }
.hc .hc-eff { top: 470px; }
.hc .hc-card { top: 520px; }
.hc .hc-price { top: 548px; }

/* ── 22차 = 첫 화면 아래 칸 크기 줄이기(대표님 "업종·설명이 큼직큼직 — 규격 줄이기") ───────── */
/* 기준 = 첫 화면(그대로): 제목 PC 48 · 휴대폰 32 → 칸 제목은 한 단계 아래(4:3) PC 36 · 휴대폰 24
   카드 제목 PC 22~24 · 휴대폰 18~20 · 본문 PC 16~17 · 휴대폰 15~16(15 밑으로 새로 줄인 글 없음) · 그림·사진은 비율 그대로 작게
   칸 사이 PC 140~160 → 96(색 띠 안 56~80) · 휴대폰 50~100 → 40~64 · 누르는 곳 모두 44 이상(질문 줄 56·64 · 기장료 칸 92·114 · 버튼 50 그대로)
   손대지 않음: 첫 화면(.hero·.hc*) · 머리줄 · 문의 창·계산 창 · 기장 문의 단추 · 문구
   아래 휴대폰 값(같은 세기·뒤에 있음)이 앞 회차 PC 규칙도 덮으므로 PC 값은 맨 아래 960px 묶음에서 다시 정함 — 블록은 통째로 붙일 것 */

/* 1. 칸 제목·칸 설명 */
.pain-sec .big, .feat-sec .big, .flow-txt .big, .inds-h .big, .calc-sec .big, .faq-sec .big, .closing .big { font-size: 24px; line-height: 34px; }
.flow-txt .lede, .calc-head .lede { margin-top: 12px; font-size: 15px; line-height: 24px; }

/* 2. 칸 사이 여백 */
#pain { padding-top: 40px; }
#why { padding-top: 48px; }
#flow { margin-top: 48px; padding: 44px 0; }
#inds { padding: 48px 0; }
#calc { padding-top: 48px; }
#faq { padding: 48px 0; }
.closing { padding-block: 64px; }

/* 3. 고민 카드: 휴대폰·태블릿은 아이콘 왼쪽 + 글 오른쪽(카드 266 → 약 116) */
.pains { gap: 12px; margin-top: 24px; }
.pain { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 20px 20px 22px; }
.pain .pi { grid-row: 1 / span 2; width: 56px; height: 56px; }
.pain h3 { margin-top: 0; font-size: 18px; line-height: 26px; }
.pain p { margin-top: 4px; font-size: 15px; line-height: 22px; text-wrap: pretty; }

/* 4. 하는 일 3줄: 휴대폰 그림 358 → 280(가운데) · 제목 22 → 20 · 첫 줄 18 → 16 · 체크 목록 16 → 15 */
.feats2 { gap: 40px; margin-top: 24px; }
.ft2 { gap: 12px; }
.ft2-pic { justify-self: center; width: min(100%, 280px); }
.ft2 h3 { font-size: 20px; line-height: 28px; }
.ft2-l { margin-top: 6px; font-size: 16px; line-height: 26px; text-wrap: pretty; }
.ck-list { margin-top: 12px; gap: 8px; }
.ck-list li { grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; font-size: 15px; line-height: 24px; text-wrap: pretty; }
.ck-list svg { width: 18px; height: 18px; }

/* 5. 하나로 이어져요: 휴대폰 원 그림 크기·둘레 글은 그대로(더 줄이면 읽히지 않음) · '노무·법무' 동그라미만 52 → 44(좁은 휴대폰에서 '부가세·소득세 신고' 글에 닿던 것) */
.flow { gap: 24px; }
.fp-ic { width: 44px; height: 44px; }
.fp-ic img { width: 30px; height: 30px; }

/* 6. 업종 사진(짙은 띠): 카드 300×480 → 272×377(사진 비율 888:1232 그대로 — 좌우가 덜 잘림) · 누적 고객 48 → 40 */
.inds-h { margin-bottom: 24px; }
.inds-sec .proof-n { font-size: 40px; line-height: 48px; letter-spacing: -1.5px; }
.inds-sec .proof-n sup { font-size: 16px; }
.inds-track { gap: 12px; }
.ind-card { width: 272px; height: auto; aspect-ratio: 888 / 1232; }
.ind-t { left: 20px; right: 16px; bottom: 22px; }
.ind-t small { font-size: 15px; line-height: 22px; }
.ind-t b { margin-top: 2px; font-size: 18px; line-height: 26px; }

/* 7. 기장료 큰 숫자 38 → 32 · '만원~'이 줄 높이를 늘리지 않게 */
.calc-head { margin-bottom: 24px; }
.pstats { gap: 24px 16px; }
.pst-n { font-size: 32px; line-height: 38px; letter-spacing: -1px; }
.pst-n small { font-size: 18px; line-height: 1; }
.pst b { margin-top: 10px; }
.calc-fine { margin-top: 24px; }

/* 8. 자주 묻는 질문(줄 높이 68 → 56 — 누르는 곳 44 이상 · 끝말 홀로 남지 않게) */
.faq-sec .big { margin-bottom: 24px; }
.faq summary { padding: 16px 4px; font-size: 16px; line-height: 24px; text-wrap: pretty; }

/* 9. 마무리 띠 */
.closing .cta { margin-top: 28px; }
.closing .fine { margin-top: 16px; }

/* 태블릿 이상(720px~): 하는 일 3줄을 그림 + 글 두 칸으로(그림은 번갈아 왼쪽·오른쪽) — 태블릿에서 그림이 화면 폭 가득(768×576)이던 것 */
@media (min-width: 720px) {
  .ft2 { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 0 40px; }
  .ft2.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); }
  .ft2.rev .ft2-pic { order: 2; }
  .ft2-pic { justify-self: stretch; width: auto; }
}

/* PC(960px~) */
@media (min-width: 960px) {
  /* 칸 제목 42~44 → 36 · 칸 설명 18 → 17 */
  .pain-sec .big, .feat-sec .big, .flow-txt .big, .inds-h .big, .calc-sec .big, .faq-sec .big, .closing .big { font-size: 36px; line-height: 48px; }
  .flow-txt .lede, .calc-head .lede { margin-top: 16px; font-size: 17px; line-height: 28px; }
  /* 칸 사이 140~160 → 96 · 색 띠 안 56~80 */
  #pain { padding-top: 96px; }
  #why { padding-top: 96px; }
  #flow { margin-top: 96px; padding: 56px 0; }
  #inds { padding: 72px 0; }
  #calc { padding: 96px 0 80px; }
  #faq { padding: 0 0 96px; }
  .closing { padding-block: 80px; }
  /* 고민 카드 413×316 → 약 415×232: 아이콘 98 → 64 · 제목 26 → 22 · 설명 18 → 16 */
  .pains { gap: 20px; margin-top: 36px; }
  .pain { display: block; padding: 28px 32px 30px; }
  .pain .pi { width: 64px; height: 64px; }
  .pain h3 { margin-top: 20px; font-size: 22px; line-height: 30px; }
  .pain p { margin-top: 8px; font-size: 16px; line-height: 26px; }
  /* 하는 일 3줄: 그림 634×476 → 336×252(줄 높이 476 → 252) · 제목 36 → 24 · 첫 줄 20 → 17 */
  .feats2 { gap: 48px; margin-top: 36px; }
  .ft2 { grid-template-columns: minmax(0, 336px) minmax(0, 1fr); gap: 0 64px; }
  .ft2.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 336px); }
  .ft2 h3 { font-size: 24px; line-height: 34px; }
  .ft2-l { margin-top: 8px; font-size: 17px; line-height: 28px; }
  .ck-list { margin-top: 16px; gap: 8px; }
  .ck-list li { grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; font-size: 16px; line-height: 26px; }
  .ck-list svg { width: 20px; height: 20px; }
  /* 하나로 이어져요: 원 그림 550 → 440(둘레 칸도 함께 — '부가세·소득세 신고'와 '노무·법무' 동그라미가 닿지 않게) */
  .flow { gap: 48px; }
  .flow-dia { width: min(100%, 440px); }
  .fn { width: 100px; }
  .fn img { width: 40px; height: 40px; }
  .fp-ic { width: 60px; height: 60px; }
  .fp-ic img { width: 40px; height: 40px; }
  .fn-plus b { font-size: 14px; }
  .flow-core .sym { width: 60px; }
  .flow-core b { font-size: 15px; }
  /* 업종 사진: 카드 446×620 → 360×500(사진 비율) · 넘김 한 칸 476 → 380 · 어느 폭에서나 다음 카드가 보임 · 누적 고객 72 → 56 */
  .inds-h { margin-bottom: 36px; }
  .inds-sec .proof-l { font-size: 16px; line-height: 24px; }
  .inds-sec .proof-n { font-size: 56px; line-height: 64px; letter-spacing: -2px; }
  .inds-sec .proof-n sup { font-size: 20px; }
  .inds-track { gap: 20px; }
  .ind-card { width: 360px; }
  .ind-t { left: 28px; right: 20px; bottom: 30px; }
  .ind-t small { font-size: 15px; line-height: 22px; }
  .ind-t b { margin-top: 4px; font-size: 22px; line-height: 30px; }
  .inds-foot { margin-top: 16px; }
  /* 기장료: 큰 숫자 64 → 44(960~1279 폭의 48 규칙도 함께 덮음) · 업종 20 → 18 · 매출 구간 16 → 15 */
  .calc-head { margin-bottom: 36px; }
  .pstats { gap: 0 24px; }
  .pst-n { font-size: 44px; line-height: 52px; letter-spacing: -1.5px; }
  .pst-n small { font-size: 22px; }
  .pst b { margin-top: 12px; font-size: 18px; line-height: 26px; }
  .pst-s { font-size: 15px; line-height: 22px; }
  .calc-fine { margin-top: 28px; font-size: 15px; line-height: 24px; }
  /* 자주 묻는 질문: 질문 20 → 18(줄 높이 70 → 64) */
  .faq-sec .big { margin-bottom: 36px; }
  .faq summary { padding: 18px 4px; font-size: 18px; line-height: 28px; }
  /* 마무리 띠: 제목 44 → 36 · 버튼 글 18 → 16(첫 화면 버튼과 같게, 높이 50 그대로) */
  .closing .cta { margin-top: 32px; }
  .closing .cta .btn { font-size: 16px; }
}

/* ── 22차-2 = 상담 신청 페이지(리드넘버·택스앤톡 구성) ── */
/* site/apply.html · body[data-page="apply"] — 모든 규칙은 .ap-* 또는 [data-page="apply"] 로 묶음(메인 index.html 영향 0).
   칸 순서(대표님이 본 뼈대 wf22b): ① 사진 첫 화면 ② 짧은 신청 칸 ③ 고르는 이유 3+2 · 칩 줄 ④ 업종 탭 + 사진 ⑤ 진행 과정(진한 파랑 띠)
   ⑥ 요금(개인/법인 탭 · 펼침) ⑦ 사진 띠 ⑧ 바닥글(메인 그대로) ⑨ 늘 떠 있는 막대 ⑩ 신청 창
   색: 남색 #0B1530 · 파랑 #2554F0(진하게 #1C43D1) · 연파랑 #EEF3FF · 회색 바탕 #F4F6FA · 카톡 #FEE500 · 오류 #D92D33
   크게 하나만 = 첫 화면 '월 5만원부터'(휴대폰 46/54 · PC 72/80). 칸 제목 22/32 · 34/46 · 본문 15/23 · 17/27 · 칸 위아래 48 · 88
   꾸밈 상자 없음(이유 카드만 연한 회색 면, 나머지는 여백·가는 줄) · 그림자는 신청 칸·신청 창·떠 있는 막대에만
   움직임 = 신청 창 열고 닫기 · 탭·펼침 바뀜만(150~250ms) — 움직임 줄이기는 tm.css 앞쪽 전체 규칙이 모두 끔 */
[data-page="apply"] {
  --ap-g: #F4F6FA; --ap-bl: #EEF3FF; --ap-line: #E3E7EE; --ap-sub: #4E5968; --ap-err: #D92D33;
  background: #fff;
}
.ap-w { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) and (max-width: 959px) { .ap-w { max-width: 720px; padding-left: 32px; padding-right: 32px; } }
@media (min-width: 960px) { .ap-w { padding-left: 40px; padding-right: 40px; } }

/* 버튼 */
.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px; border: 0; border-radius: 12px; font-family: inherit; font-size: 16px; line-height: 1.25; font-weight: 700; letter-spacing: -.3px; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s, box-shadow .15s; }
.ap-btn svg { width: 20px; height: 20px; flex: none; }
.ap-btn-b { background: #2554F0; color: #fff; }
.ap-btn-b:hover { background: #1C43D1; }
.ap-btn-k { background: #FEE500; color: #191600; }
.ap-btn-k:hover { background: #F2D900; }
.ap-btn-l { background: #fff; color: #0B1530; box-shadow: inset 0 0 0 1px #C5CDDA; }
.ap-btn-l:hover { box-shadow: inset 0 0 0 1px #8C97AA; }
.ap-btn[aria-disabled="true"] { cursor: progress; opacity: .72; }

/* 머리줄: 첫 화면 사진 위 투명(흰 글자) → 내리면 흰 머리줄(가는 줄) */
.ap-hd { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px); color: #fff; background: transparent; transition: background-color .2s, color .2s, box-shadow .2s; }
.ap-hd.on { background: #fff; color: #0B1530; box-shadow: 0 1px 0 var(--ap-line); }
.ap-hd-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; }
.ap-hd .logo { color: inherit; }
.ap-hd .logo b i { color: #8FB0FF; transition: color .2s; }
.ap-hd.on .logo b i { color: #2554F0; }
.ap-hd:not(.on) :focus-visible { outline-color: #fff; }
.ap-hd-r { display: flex; align-items: center; gap: 16px; }
.ap-hd-tel { display: none; }
.ap-hd-go { min-height: 44px; padding: 0 16px; border-radius: 10px; font-size: 15px; }

/* ① 첫 화면: 사진 꽉 참 · 휴대폰 글은 아래(사진 아래쪽 어둡게) · 버튼 2개 위아래로 꽉 차게 */
.ap-hero { position: relative; height: 580px; overflow: hidden; isolation: isolate; color: #fff; background: #10182B; }
.ap-hero-pic, .ap-hero-pic picture, .ap-hero-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.ap-hero-pic { z-index: -2; }
.ap-hero-pic img { object-fit: cover; object-position: 62% 0; }
.ap-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 21, 48, .95) 0%, rgba(11, 21, 48, .88) 34%, rgba(11, 21, 48, .42) 58%, rgba(11, 21, 48, .06) 76%, rgba(11, 21, 48, .38) 100%); }
.ap-hero-in { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 24px; }
.ap-hero h1 { margin: 0; font-weight: 700; }
.ap-h1a { display: block; font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -.5px; }
.ap-h1b { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; margin-top: 2px; font-size: 46px; line-height: 54px; font-weight: 800; letter-spacing: -1.8px; }
.ap-vat { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: rgba(255, 255, 255, .16); font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; }
.ap-lede { margin: 12px 0 0; font-size: 15px; line-height: 23px; font-weight: 600; letter-spacing: -.3px; }
.ap-cond { margin: 6px 0 0; font-size: 13px; line-height: 19px; color: rgba(255, 255, 255, .8); letter-spacing: -.2px; }
.ap-hero-cta { display: grid; gap: 8px; margin-top: 20px; }


/* 입력 칸(짧은 칸·신청 창 공통) — 라벨이 보이고, 오류는 칸 바로 아래 */
.ap-f { display: grid; gap: 6px; min-width: 0; }
.ap-f > label { font-size: 14px; line-height: 20px; font-weight: 700; }
.ap-in { display: block; width: 100%; height: 52px; margin: 0; padding: 0 14px; border: 1px solid #C5CDDA; border-radius: 12px; background-color: #fff; color: #0B1530; font-family: inherit; font-size: 17px; letter-spacing: 0; transition: border-color .15s, box-shadow .15s; }
.ap-in:hover { border-color: #98A3B5; }
.ap-in:focus, .ap-in:focus-visible { outline: none; border-color: #2554F0; border-radius: 12px; box-shadow: 0 0 0 3px rgba(37, 84, 240, .2); }
.ap-f.bad .ap-in { border-color: var(--ap-err); box-shadow: 0 0 0 3px rgba(217, 45, 51, .14); }
.ap-err { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ap-err); }
.ap-agw { display: grid; gap: 2px; min-width: 0; }
.ap-ag { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ap-ck { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; line-height: 22px; letter-spacing: -.3px; cursor: pointer; }
.ap-ck input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: #2554F0; cursor: pointer; }
.ap-more { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 2px 0 10px; border: 0; background: none; color: var(--ap-sub); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ap-more .dn { width: 18px; height: 18px; transition: transform .2s; }
.ap-more[aria-expanded="true"] .dn { transform: rotate(180deg); }
.ap-terms { margin: 0 0 6px; padding: 12px 14px; border-radius: 12px; background: var(--ap-g); font-size: 13px; line-height: 20px; color: var(--ap-sub); }
.ap-terms p { margin: 0; }
.ap-terms a { color: #1C43D1; font-weight: 600; text-underline-offset: 2px; }
.ap-fail { display: grid; gap: 10px; }
.ap-fail p { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ap-err); }
.ap-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ap-two .ap-btn { padding: 0 10px; font-size: 15px; }
.ap-one { display: grid; }
.ap-go[aria-busy="true"]::after { content: ""; width: 16px; height: 16px; margin-left: 2px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: ap-spin .8s linear infinite; }
@keyframes ap-spin { to { transform: rotate(360deg); } }
.ap-done { display: grid; justify-items: center; text-align: center; padding: 10px 0 8px; }
.ap-done:focus { outline: none; }
.ap-ok { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ap-bl); color: #2554F0; }
.ap-ok svg { width: 28px; height: 28px; }
.ap-done-t { margin: 14px 0 0; font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -.6px; }
.ap-done-s { margin: 4px 0 0; font-size: 15px; line-height: 23px; color: var(--ap-sub); }
.ap-done .ap-one, .ap-done .ap-two { width: 100%; margin-top: 20px; }

/* 칸 공통 */
.ap-sec { padding: 48px 0; }
.ap-head { text-align: center; }
.ap-eb { margin: 0 0 6px; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: -.2px; color: #2554F0; }
.ap-h2 { margin: 0; font-size: 22px; line-height: 32px; font-weight: 700; letter-spacing: -.7px; text-wrap: balance; }

/* ③ 고르는 이유: 휴대폰은 글 왼쪽 + 그림(68px) 오른쪽 낮은 카드(연한 회색 면) · 칩 줄은 옆으로 밂 */
.ap-why-l { display: grid; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.ap-wc { display: grid; grid-template-columns: minmax(0, 1fr) 68px; align-items: center; column-gap: 14px; padding: 16px 16px 16px 18px; border-radius: 16px; background: var(--ap-g); }
.ap-wc h3 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -.5px; }
.ap-wc p { margin: 2px 0 0; font-size: 15px; line-height: 22px; letter-spacing: -.3px; color: var(--ap-sub); text-wrap: pretty; }
.ap-wc-pic { position: relative; width: 68px; height: 68px; overflow: hidden; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.ap-wc-pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.55); }
.ap-i-card-receipt-scan .ap-wc-pic img { object-position: 56% 50%; }
.ap-i-bubble .ap-wc-pic { -webkit-mask-image: none; mask-image: none; }
.ap-i-bubble .ap-wc-pic img { object-fit: contain; transform: scale(.82); }
.ap-incl { margin-top: 24px; }
.ap-incl-t { margin: 0 0 10px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-sub); }
.ap-chips { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 2px; list-style: none; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.ap-chips::-webkit-scrollbar { display: none; }
.ap-chips li { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px #D7DDE7; font-size: 15px; font-weight: 600; letter-spacing: -.3px; white-space: nowrap; }
.ap-chips svg { width: 16px; height: 16px; color: #2554F0; }

/* ④ 업종 탭 + 사진 카드: 휴대폰은 옆으로 미는 탭 + 세로 사진(400) 위 아래쪽에 글 */
.ap-ind { background: var(--ap-g); }
.ap-ind-in { display: grid; grid-template-columns: minmax(0, 1fr); }
.ap-ind .ap-h2 { text-align: center; }
.ap-tabs { position: relative; display: flex; gap: 8px; margin: 20px -16px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.ap-tabs::-webkit-scrollbar { display: none; }
.ap-tab { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: var(--ap-sub); box-shadow: inset 0 0 0 1px #D7DDE7; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.3px; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.ap-tab:hover { color: #0B1530; }
.ap-tab[aria-selected="true"] { background: #0B1530; color: #fff; box-shadow: none; }
.ap-ind-pics, .ap-ind-ps { grid-row: 3; grid-column: 1; }
.ap-ind-pics { position: relative; height: 400px; margin-top: 16px; overflow: hidden; border-radius: 20px; background: #2A3142; }
.ap-ind-ph, .ap-ind-ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ap-ind-ph img { object-fit: cover; object-position: 50% 18%; }
.ap-ind-pics::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 21, 48, 0) 36%, rgba(11, 21, 48, .55) 60%, rgba(11, 21, 48, .92) 100%); }
.ap-ind-ps { align-self: end; position: relative; z-index: 1; padding: 0 20px 20px; color: #fff; }
.ap-ind-p h3 { margin: 0; font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -.6px; }
.ap-ind-a { margin: 6px 0 0; font-size: 15px; line-height: 23px; font-weight: 600; letter-spacing: -.3px; }
.ap-ind-b { margin: 2px 0 0; font-size: 15px; line-height: 22px; letter-spacing: -.3px; color: rgba(255, 255, 255, .8); }
.ap-ind-p .ap-btn { margin-top: 16px; min-height: 48px; }
.ap-ind-ps :focus-visible { outline-color: #fff; }
.ap-ind-p:not([hidden]), .ap-ind-ph:not([hidden]), .ap-pp:not([hidden]) { animation: ap-fade .2s ease-out; }
@keyframes ap-fade { from { opacity: 0; } }

/* ⑤ 진행 과정: 진한 파랑 띠 · 휴대폰 세로 3줄(번호·제목·한 줄, 번호 사이 가는 줄) */
.ap-flow { background: #1C43D1; color: #fff; }
.ap-flow .ap-h2 { text-align: center; color: #fff; }
.ap-flow :focus-visible { outline-color: #fff; }
.ap-steps { max-width: 520px; margin: 20px auto 0; padding: 0; list-style: none; }
.ap-steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 12px 0; }
.ap-n { grid-row: 1 / span 2; position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #1C43D1; font-size: 15px; font-weight: 800; }
.ap-steps h3 { margin: 6px 0 0; font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -.4px; color: #fff; }
.ap-steps p { margin: 2px 0 0; font-size: 15px; line-height: 23px; letter-spacing: -.3px; color: rgba(255, 255, 255, .84); }
.ap-steps li:not(:last-child)::before { content: ""; position: absolute; left: 18px; top: 48px; bottom: -12px; width: 1px; background: rgba(255, 255, 255, .38); }

/* ⑥ 요금: 개인/법인 탭 · '내 상황' 펼침(하나만 열림) */
.ap-price-in { max-width: 760px; margin: 0 auto; }
.ap-price .ap-h2 { text-align: center; }
.ap-seg { display: flex; max-width: 320px; margin: 20px auto 0; padding: 4px; border-radius: 12px; background: var(--ap-g); }
.ap-segb { flex: 1; min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--ap-sub); font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.3px; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.ap-segb[aria-selected="true"] { background: #fff; color: #0B1530; font-weight: 700; box-shadow: 0 0 0 1px #D7DDE7; }
.ap-pp { margin-top: 16px; }
.ap-acc { border-top: 1px solid var(--ap-line); }
.ap-acc-i { border-bottom: 1px solid var(--ap-line); }
.ap-acc h3 { margin: 0; font-size: inherit; line-height: inherit; }
.ap-acc-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 0 2px; border: 0; background: none; color: #0B1530; font-family: inherit; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: -.4px; text-align: left; cursor: pointer; }
.ap-acc-h .dn { flex: none; width: 20px; height: 20px; color: var(--ap-sub); transition: transform .2s; }
.ap-acc-h[aria-expanded="true"] .dn { transform: rotate(180deg); }
.ap-acc-p { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .22s var(--ease), visibility 0s linear .22s; }
.ap-acc-i.on .ap-acc-p { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .22s var(--ease), visibility 0s; }
.ap-acc-c { min-height: 0; overflow: hidden; }
.ap-acc-b { padding: 0 2px 20px; }
.ap-pv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 26px; line-height: 34px; font-weight: 800; letter-spacing: -1px; }
.ap-pv .ap-vat { background: var(--ap-bl); color: #1C43D1; }
.ap-ps { margin: 6px 0 0; font-size: 15px; line-height: 23px; letter-spacing: -.3px; color: var(--ap-sub); }
.ap-acc-b .ap-btn, .ap-pp-c .ap-btn { width: 100%; margin-top: 16px; }
.ap-pp-c { padding: 20px 2px 0; border-top: 1px solid var(--ap-line); }

/* ⑦ 사진 띠: 휴대폰 340(글은 아래) · PC 400(글은 가운데) */
.ap-band { position: relative; display: flex; align-items: flex-end; height: 340px; overflow: hidden; isolation: isolate; color: #fff; background: #2A3142; }
.ap-band-pic, .ap-band-pic picture, .ap-band-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.ap-band-pic { z-index: -2; }
.ap-band-pic img { object-fit: cover; object-position: 60% 22%; }
.ap-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 21, 48, .12) 0%, rgba(11, 21, 48, .5) 42%, rgba(11, 21, 48, .9) 100%); }
.ap-band-in { padding-bottom: 28px; text-align: center; }
.ap-band .ap-h2 { color: #fff; }
.ap-band :focus-visible { outline-color: #fff; }
.ap-band-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.ap-band-cta .ap-btn { padding: 0 10px; }

/* ⑧ 바닥글(메인 그대로) — 떠 있는 막대가 가리지 않게 아래 여백 */
[data-page="apply"] .ft { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }

/* ⑨ 늘 떠 있는 막대 — 휴대폰: 전화 아이콘(48) + [카카오로 상담] + [상담 신청하기] */
.ap-bar { position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 21, 48, .06), 0 12px 32px -10px rgba(11, 21, 48, .4); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .2s, transform .2s var(--ease), visibility 0s linear .2s; }
.ap-bar.on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--ease), visibility 0s; }
.ap-bar-t { display: none; }
.ap-bar-tel, .ap-bar-kk, .ap-bar-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 8px; border: 0; border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: -.3px; text-decoration: none; white-space: nowrap; cursor: pointer; }
.ap-bar-tel { width: 48px; padding: 0; background: var(--ap-bl); color: #2554F0; }
.ap-bar-tel svg { width: 22px; height: 22px; flex: none; }
.ap-bar-tt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ap-bar-kk { background: #FEE500; color: #191600; }
.ap-bar-kk svg { width: 18px; height: 18px; flex: none; }
.ap-bar-go { background: #2554F0; color: #fff; }
@media (max-width: 374px) { .ap-bar-kk, .ap-bar-go { font-size: 14px; letter-spacing: -.5px; } .ap-bar-kk { gap: 4px; } }

/* ⑩ 신청 창 — 휴대폰: 아래에서 올라오는 판 · 720px~: 가운데 창 */
.ap-dlg { box-sizing: border-box; width: 100%; max-width: none; max-height: calc(100dvh - 24px); margin: auto 0 0; padding: 0; border: 0; border-radius: 22px 22px 0 0; background: #fff; color: #0B1530; overflow: auto; overscroll-behavior: contain; box-shadow: 0 -16px 48px -16px rgba(11, 21, 48, .4); opacity: 0; transform: translateY(32px); transition: opacity .22s, transform .22s var(--ease), overlay .22s allow-discrete, display .22s allow-discrete; }
.ap-dlg[open] { opacity: 1; transform: none; }
@starting-style { .ap-dlg[open] { opacity: 0; transform: translateY(32px); } }
.ap-dlg::backdrop { background: rgba(11, 21, 48, 0); transition: background-color .22s, overlay .22s allow-discrete, display .22s allow-discrete; }
.ap-dlg[open]::backdrop { background: rgba(11, 21, 48, .55); }
@starting-style { .ap-dlg[open]::backdrop { background: rgba(11, 21, 48, 0); } }
.ap-dlg-in { position: relative; padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
.ap-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ap-sub); cursor: pointer; }
.ap-x:hover { background: var(--ap-g); }
.ap-x svg { width: 22px; height: 22px; }
.ap-dlg-t { margin: 0; padding-right: 48px; font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -.6px; }
.ap-dlg-t:focus { outline: none; }
.ap-dlg-s { margin: 4px 0 0; font-size: 15px; line-height: 23px; color: var(--ap-sub); }

/* 태블릿(720~959): 휴대폰 짜임을 넓게 */
@media (min-width: 720px) and (max-width: 959px) {
  .ap-hero { height: 600px; }
  .ap-hero-pic img { object-position: 62% 18%; }
  .ap-hero-cta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-chips, .ap-tabs { margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 32px; }
  .ap-ind-pics { height: 480px; }
  .ap-band { height: 380px; }
  .ap-bar { left: 50%; right: auto; width: 560px; transform: translate(-50%, 16px); }
  .ap-bar.on { transform: translateX(-50%); }
}
@media (min-width: 720px) {
  .ap-dlg { width: calc(100% - 48px); max-width: 440px; max-height: calc(100dvh - 48px); margin: auto; border-radius: 22px; transform: translateY(12px) scale(.98); box-shadow: 0 24px 64px -20px rgba(11, 21, 48, .5); }
  @starting-style { .ap-dlg[open] { opacity: 0; transform: translateY(12px) scale(.98); } }
  .ap-dlg-in { padding: 28px 28px 24px; }
}

/* PC(960px~) */
@media (min-width: 960px) {
  /* 머리줄: 전화 번호 글(밤엔 '전화 예약') */
  .ap-hd-in { height: 72px; }
  .ap-hd-r { gap: 24px; }
  .ap-hd-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; font-size: 16px; font-weight: 700; letter-spacing: -.2px; text-decoration: none; }
  .ap-hd-tel svg { width: 18px; height: 18px; }
  .ap-hd-go { padding: 0 20px; }
  /* ① 첫 화면 660: 글은 왼쪽, 사진 왼쪽을 어둡게(사진 오른쪽 = 서류 넘기는 손) */
  .ap-hero { height: 650px; }
  .ap-hero-pic img { object-position: 72% 50%; }
  .ap-hero::before { background: linear-gradient(90deg, rgba(11, 21, 48, .9) 0%, rgba(11, 21, 48, .72) 30%, rgba(11, 21, 48, .24) 56%, rgba(11, 21, 48, 0) 72%), linear-gradient(180deg, rgba(11, 21, 48, .42) 0, rgba(11, 21, 48, 0) 150px); }
  .ap-hero-in { top: 72px; bottom: 92px; display: flex; flex-direction: column; justify-content: center; padding-bottom: 0; }
  .ap-h1a { font-size: 30px; line-height: 40px; }
  .ap-h1b { margin-top: 6px; column-gap: 16px; font-size: 72px; line-height: 80px; letter-spacing: -3px; }
  .ap-vat { height: 30px; padding: 0 10px; border-radius: 8px; font-size: 15px; }
  .ap-lede { margin-top: 16px; font-size: 17px; line-height: 27px; }
  .ap-cond { margin-top: 8px; font-size: 14px; line-height: 22px; }
  .ap-hero-cta { grid-template-columns: repeat(2, max-content); gap: 10px; margin-top: 28px; }
  .ap-hero-cta .ap-btn { min-width: 176px; }
  /* 칸 공통 */
  .ap-sec { padding: 88px 0; }
  .ap-eb { margin-bottom: 10px; font-size: 16px; line-height: 24px; }
  .ap-h2 { font-size: 34px; line-height: 46px; letter-spacing: -1.2px; }
  /* ③ 큰 그림 카드 3 + 작은 카드 2 */
  .ap-why-l { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
  .ap-wc { border-radius: 20px; }
  .ap-wc-l { grid-column: span 2; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; padding: 28px 28px 0; }
  .ap-wc-l .ap-wc-t { flex: 1 0 auto; }
  .ap-wc-l .ap-wc-pic { width: auto; height: 140px; margin: 12px -28px 0; background: var(--pbg, #C6D6EF); -webkit-mask-image: linear-gradient(180deg, transparent, #000 44px); mask-image: linear-gradient(180deg, transparent, #000 44px); }
  .ap-wc-l .ap-wc-pic img { object-fit: contain; transform: none; -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 26%, #000 74%, transparent 98%); mask-image: linear-gradient(90deg, transparent 2%, #000 26%, #000 74%, transparent 98%); }
  .ap-i-card-receipt-scan { --pbg: #C5D5EF; } .ap-i-card-calendar { --pbg: #C9D8F0; } .ap-i-card-report { --pbg: #BCCDEA; }
  .ap-wc-s { grid-column: span 3; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; padding: 20px 24px; }
  .ap-wc-s .ap-wc-pic { order: -1; width: 64px; height: 64px; }
  .ap-wc h3 { font-size: 20px; line-height: 28px; letter-spacing: -.6px; }
  .ap-wc p { margin-top: 6px; font-size: 17px; line-height: 27px; }
  .ap-wc-s p { margin-top: 2px; }
  .ap-incl { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
  .ap-incl-t { margin: 0; font-size: 15px; line-height: 22px; }
  .ap-chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  /* ④ 업종: 왼쪽 탭·글·버튼 / 오른쪽 세로 사진(4:5 · 둥근 모서리) */
  .ap-ind-in { max-width: 980px; margin: 0 auto; grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 72px; }
  .ap-ind .ap-h2 { grid-column: 1; grid-row: 2; text-align: left; }
  .ap-tabs { grid-column: 1; grid-row: 3; flex-wrap: wrap; margin: 28px 0 0; padding: 0; overflow: visible; }
  .ap-ind-pics { grid-column: 2; grid-row: 1 / -1; height: auto; aspect-ratio: 4 / 5; margin: 0; border-radius: 24px; }
  .ap-ind-pics::after { display: none; }
  .ap-ind-ps { grid-column: 1; grid-row: 4; align-self: start; margin-top: 36px; padding: 0; color: #0B1530; }
  .ap-ind-ps :focus-visible { outline-color: #2554F0; }
  .ap-ind-p h3 { font-size: 26px; line-height: 34px; letter-spacing: -.8px; }
  .ap-ind-a { margin-top: 10px; font-size: 17px; line-height: 27px; }
  .ap-ind-b { font-size: 16px; line-height: 25px; color: var(--ap-sub); }
  .ap-ind-p .ap-btn { margin-top: 24px; min-height: 52px; }
  /* ⑤ 과정 3칸(번호 사이 가는 줄) */
  .ap-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; max-width: none; margin-top: 40px; }
  .ap-steps li { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .ap-n { grid-row: auto; width: 44px; height: 44px; font-size: 17px; }
  .ap-steps h3 { margin-top: 18px; font-size: 22px; line-height: 30px; letter-spacing: -.6px; }
  .ap-steps p { margin-top: 6px; font-size: 17px; line-height: 27px; }
  .ap-steps li:not(:last-child)::before { left: 60px; right: -24px; top: 22px; bottom: auto; width: auto; height: 1px; }
  /* ⑥ 요금: 가운데 760 */
  .ap-seg { margin-top: 24px; }
  .ap-pp { margin-top: 20px; }
  .ap-acc-h { min-height: 60px; font-size: 18px; line-height: 26px; }
  .ap-acc-b { padding-bottom: 24px; }
  .ap-pv { font-size: 30px; line-height: 38px; }
  .ap-ps { font-size: 17px; line-height: 27px; }
  .ap-acc-b, .ap-pp-c { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
  .ap-acc-b > p, .ap-pp-c > p { grid-column: 1; }
  .ap-acc-b .ap-btn, .ap-pp-c .ap-btn { grid-column: 2; grid-row: 1 / span 2; width: auto; min-width: 200px; margin-top: 0; }
  .ap-pp-c { padding-top: 24px; }
  /* ⑦ 사진 띠 400 · 글 가운데 */
  .ap-band { height: 380px; align-items: center; }
  .ap-band-pic img { object-position: 50% 38%; }
  .ap-band::before { background: linear-gradient(90deg, rgba(11, 21, 48, .5), rgba(11, 21, 48, .66) 50%, rgba(11, 21, 48, .5)); }
  .ap-band-in { padding-bottom: 0; }
  .ap-band-cta { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
  .ap-band-cta .ap-btn { min-width: 176px; padding: 0 24px; }
  /* ⑧ 바닥글: 콘텐츠 폭에 맞춤 · 알약 막대 자리 */
  [data-page="apply"] .ft { padding-bottom: 104px; }
  [data-page="apply"] .ft .wrap { max-width: 1200px; padding-left: 40px; padding-right: 40px; }
  /* ⑨ 떠 있는 막대 = 화면 아래 가운데 흰 알약: 한 줄 글 + 전화 · 카톡 아이콘 + [상담 신청하기] */
  .ap-bar { display: flex; left: 50%; right: auto; bottom: 24px; width: max-content; max-width: calc(100% - 48px); gap: 8px; padding: 8px 8px 8px 28px; border-radius: 999px; transform: translate(-50%, 16px); }
  .ap-bar.on { transform: translateX(-50%); }
  .ap-bar-t { display: block; margin: 0 16px 0 0; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: -.4px; white-space: nowrap; }
  .ap-bar-tel, .ap-bar-kk { width: 48px; height: 48px; padding: 0; border-radius: 50%; }
  .ap-bar-kk svg { width: 22px; height: 22px; }
  .ap-bar-kt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .ap-bar-go { padding: 0 26px; border-radius: 999px; font-size: 16px; }
  .ap-bar-tel.off { width: auto; padding: 0 18px 0 14px; border-radius: 999px; }
  .ap-bar-tel.off .ap-bar-tt { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}

/* ── 22차-3 = 상담 신청 4단계(리드넘버 상담 신청 화면 구성 · 메인 신청 창 .ld-* 부품) · 머리줄 메뉴 · 자주 묻는 질문 ── */
/* 모두 .ap-* 또는 [data-page="apply"] 로 묶음(메인 index.html 영향 0). 4단계 부품은 첫 화면 칸(.ap-st-quick)·신청 창(.ap-st-dlg) 두 곳. */

/* 머리줄: 1024~ 로고 오른쪽 메뉴 3개 · ~1023 [상담 신청하기] 옆 메뉴 단추(≡) → 아래로 펼치는 판 */
.ap-hd-in { justify-content: flex-start; }
.ap-hd-r { margin-left: auto; gap: 6px; }
.ap-nav { display: none; }
.ap-menu-b { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ap-menu-b svg { width: 24px; height: 24px; }
.ap-hd.menu { background: #fff; color: #0B1530; box-shadow: 0 1px 0 var(--ap-line); }
.ap-hd.menu .logo b i { color: #2554F0; }
.ap-hd.menu :focus-visible { outline-color: #2554F0; }
.ap-menu { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - 60px); overflow: auto; overscroll-behavior: contain; background: #fff; color: #0B1530; box-shadow: 0 1px 0 var(--ap-line), 0 20px 32px -20px rgba(11, 21, 48, .38); }
.ap-menu[hidden] { display: none; }
.ap-menu-l { margin: 0; padding: 4px 0 0; list-style: none; }
.ap-menu-l a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--ap-line); color: #0B1530; font-size: 17px; font-weight: 700; letter-spacing: -.4px; text-decoration: none; }
.ap-menu-c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px 0 20px; }
.ap-menu-c .ap-btn { min-height: 48px; padding: 0 10px; font-size: 15px; }
/* 메뉴로 간 칸 제목이 머리줄에 가리지 않게 */
[data-page="apply"] #service, [data-page="apply"] #price, [data-page="apply"] #faq { scroll-margin-top: 60px; }

/* 4단계 카드(메인 .ld-card · .ld-bar · .ld-step · .ld-opt · .ld-back · .ld-alt 를 그대로 쓰고 자리·크기만 맞춤) */
.ap-st.ld-card { z-index: auto; margin: 0; padding: 0 20px 16px; overflow: hidden; border-radius: 20px; color: #0B1530; box-shadow: 0 0 0 1px rgba(11, 21, 48, .06), 0 14px 34px -16px rgba(11, 21, 48, .32); }
.ap-st .ld-bar { margin: 0 -20px; border-radius: 0; }
.ap-st .ld-bar i { border-radius: 0; }
.ap-stf { min-height: 320px; }
.ap-stf[hidden] { display: none; }
.ap-st .ld-step.on { gap: 12px; }
.ap-st .ld-q { margin: 46px 0 4px; color: #0B1530; }
.ap-st[data-biz="ind"] [data-only="corp"], .ap-st[data-biz="corp"] [data-only="ind"] { display: none; }
.ap-o-big .ld-opt:last-child, .ap-o-4 .ld-opt:last-child { grid-column: auto; }
.ap-st .ld-opt span { align-content: center; gap: 2px; color: #0B1530; }
.ap-o-big .ld-opt span { min-height: 92px; font-size: 18px; }
.ap-st .ld-opt b { font-weight: 700; }
.ap-st .ld-opt small { display: block; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -.3px; color: #4E5968; }
.ap-st .ld-opt input:checked + span small { color: #1C43D1; }
.ap-cm { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px #A8B2C1; color: transparent; pointer-events: none; }
.ap-cm svg { width: 14px; height: 14px; }
.ap-st .ld-opt input:checked + span .ap-cm { background: #2554F0; box-shadow: none; color: #fff; }
.ap-next { width: 100%; }
.ap-next:disabled { background: #E5E8EB; color: #4E5968; cursor: not-allowed; }
.ap-st .ld-back { min-height: 44px; color: #4E5968; }
.ap-s4 { display: grid; gap: 12px; }
.ap-s4 .ap-agw { margin-top: -4px; }
.ap-s4 .ap-go { width: 100%; }
.ap-st .ap-done { padding: 48px 0 6px; }
.ap-st .ap-done .ap-two { max-width: 420px; }
.ap-st .ld-alt { margin: 14px -20px 0; padding: 10px 20px 0; border-top: 1px solid var(--ap-line); border-radius: 0; background: none; box-shadow: none; }
.ap-st .ld-alt[hidden] { display: none; }
.ap-st .ld-alt p { font-size: 15px; line-height: 22px; font-weight: 700; color: #0B1530; }
.ap-st .ld-ic .ic { width: 44px; height: 44px; }
.ap-st .ld-ic .tx { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ap-st .ld-ic svg { width: 22px; height: 22px; }
.ap-st .ld-tip { font-weight: 600; }
.ap-st .ld-step :focus-visible, .ap-st .ld-alt :focus-visible { outline-color: #2554F0; }

/* ② 첫 화면 아래 신청 칸 */
.ap-quick { padding-top: 16px; }

/* ⑩ 신청 창: 위 줄(상담 신청 · 닫기) + 같은 4단계 */
.ap-dlg-in { padding: 0; }
.ap-dlg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 8px 0 20px; }
.ap-dlg-t { padding-right: 0; font-size: 18px; line-height: 26px; }
.ap-dlg .ap-x { position: static; }
.ap-dlg .ap-st.ld-card { border-radius: 0; box-shadow: none; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

/* 자주 묻는 질문(접고 펴기 · 가는 줄로 나눔) — 요금 칸 바로 다음이라 위 여백은 요금 칸 아래 여백으로 */
.ap-faq { padding-top: 0; }
.ap-faq-in { max-width: 760px; margin: 0 auto; }
.ap-faq .ap-h2 { text-align: center; }
.ap-qas { margin-top: 20px; border-top: 1px solid var(--ap-line); }
.ap-qa { border-bottom: 1px solid var(--ap-line); }
.ap-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 14px 2px; list-style: none; cursor: pointer; color: #0B1530; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: -.4px; }
.ap-qa summary::-webkit-details-marker { display: none; }
.ap-qa summary .dn { flex: none; width: 20px; height: 20px; color: var(--ap-sub); transition: transform .2s; }
.ap-qa[open] summary .dn { transform: rotate(180deg); }
.ap-qa summary:focus-visible { outline: 3px solid #2554F0; outline-offset: 2px; border-radius: 6px; }
.ap-qa p { margin: 0; padding: 0 2px 18px; font-size: 15px; line-height: 23px; letter-spacing: -.3px; color: var(--ap-sub); text-wrap: pretty; }

@media (min-width: 720px) {
  .ap-dlg-in { padding: 0; }
  .ap-dlg-top { padding: 10px 12px 0 28px; }
  .ap-dlg .ap-st.ld-card { padding: 0 28px 22px; }
  .ap-dlg .ap-st .ld-bar { margin: 0 -28px; }
  .ap-dlg .ap-st .ld-alt { margin: 14px -28px 0; padding: 12px 28px 0; }
  .ap-dlg .ap-stf { min-height: 264px; }
}

@media (min-width: 960px) {
  [data-page="apply"] #service, [data-page="apply"] #price, [data-page="apply"] #faq { scroll-margin-top: 72px; }
  .ap-hd-r { gap: 20px; }
  /* ② 첫 화면 칸: 첫 화면 아래에 걸친 넓은 카드 — 왼쪽 질문·이전·다른 방법, 오른쪽 고를 거리 */
  .ap-quick { margin-top: -96px; padding-top: 0; }
  .ap-hero-in { bottom: 108px; }
  .ap-st-quick.ld-card { position: relative; max-width: 1040px; margin: 0 auto; padding: 0 40px 20px; border-radius: 22px; }
  .ap-st-quick .ld-bar { margin: 0 -40px; }
  .ap-st-quick .ap-stf { min-height: 226px; }
  /* 질문 위 · 고를 거리 가로 한 줄 · 아래 줄 왼쪽 [이전] / 오른쪽 '다른 방법으로 상담'(같은 줄, 겹치지 않음) */
  .ap-st-quick .ld-step.on { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 14px; align-items: start; }
  .ap-st-quick .ld-step > * { grid-column: 1 / -1; }
  .ap-st-quick .ld-step > .ld-q { margin: 46px 0 0; font-size: 24px; line-height: 32px; letter-spacing: -.7px; }
  .ap-st-quick .ld-step > .ld-back { grid-column: 1; }
  .ap-st-quick [data-step="3f"].on > .ld-opts { grid-column: 1; }
  .ap-st-quick [data-step="3f"].on > .ap-next { grid-column: 2; grid-row: 2; align-self: stretch; width: auto; min-width: 180px; }
  .ap-st-quick .ap-o-big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-st-quick .ap-o-big .ld-opt span { min-height: 72px; }
  .ap-st-quick .ap-o-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ap-st-quick .ap-o-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-st-quick .ap-o-3 .ld-opt:last-child { grid-column: auto; }
  .ap-st-quick .ap-s4 { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: start; }
  .ap-st-quick .ap-s4 > .ap-f-tel { grid-column: 1; grid-row: 1; }
  .ap-st-quick .ap-s4 > .ap-go { grid-column: 2; grid-row: 1; width: auto; min-width: 200px; margin-top: 26px; padding: 0 28px; }
  .ap-st-quick .ap-s4 > .ap-agw, .ap-st-quick .ap-s4 > .ap-fail { grid-column: 1 / -1; }
  .ap-st-quick .ap-s4 > .ap-agw { margin-top: 0; }
  .ap-st-quick .ap-fail { grid-template-columns: auto auto; align-items: center; justify-content: start; gap: 12px; }
  .ap-st-quick .ap-fail .ap-two { grid-template-columns: repeat(2, max-content); }
  .ap-st-quick .ap-fail .ap-btn { min-height: 44px; padding: 0 16px; }
  .ap-st-quick .ld-alt { position: absolute; right: 40px; bottom: 20px; gap: 8px; margin: 0; padding: 0; border: 0; }
  .ap-st-quick .ld-alt p { margin-right: 6px; }
  .ap-st-quick .ap-done { padding: 44px 0 4px; }
  /* ⑥ 요금 아래 여백은 자주 묻는 질문으로 이어지므로 줄임 · 자주 묻는 질문 = 왼쪽 제목 / 오른쪽 질문 목록 */
  .ap-price { padding-bottom: 48px; }
  .ap-faq { padding: 0 0 64px; }
  .ap-faq-in { max-width: 980px; display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .ap-faq .ap-h2 { margin-top: 10px; text-align: left; }
  .ap-qas { margin-top: 0; }
  .ap-qa summary { min-height: 56px; padding: 12px 2px; font-size: 18px; line-height: 26px; }
  .ap-qa p { padding-bottom: 22px; font-size: 17px; line-height: 27px; }
}
@media (min-width: 1024px) {
  .ap-nav { display: flex; align-items: center; gap: 2px; margin-left: 36px; }
  .ap-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; color: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.3px; text-decoration: none; transition: background-color .15s; }
  .ap-nav a:hover { background: rgba(255, 255, 255, .14); }
  .ap-hd.on .ap-nav a:hover { background: var(--ap-g); }
  .ap-menu-b, .ap-menu { display: none; }
}

/* ── 22차-3 메뉴 쪽(price.html · tax.html · faq.html) 머리 칸: 투명 머리줄 아래 남색 칸(흰 글) ── */
.ap-sub { background: #0B1530; color: #fff; padding: 108px 0 40px; }
.ap-sub h1 { font-size: 30px; line-height: 40px; font-weight: 800; letter-spacing: -0.02em; }
.ap-sub-l { margin-top: 8px; font-size: 15px; line-height: 23px; color: rgba(255, 255, 255, .82); }
.ap-sub-cta { margin-top: 20px; }
.ap-sub-cta .ap-btn { min-width: 180px; }
.ap-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.ap-menu-l a[aria-current="page"] { color: #2554F0; }
@media (min-width: 960px) {
  .ap-sub { padding: 136px 0 56px; }
  .ap-sub h1 { font-size: 44px; line-height: 56px; }
  .ap-sub-l { font-size: 18px; line-height: 28px; }
}

/* ── 22차-4 = 신청 쪽 글자 체계 정리(크기 단계 줄이고 줄 간격·자간 통일) + 메뉴 쪽 로고 바탕 + 서비스 소개 ── */
/* 단계(휴대폰 → PC 960~): 가격 44 → 64 · 쪽 제목 30 → 44 · 칸 제목 24 → 34 · 카드 제목 18 → 20 · 본문 15 → 17 · 작은 글 13 → 14 · 단추·탭 16
   자간: 큰 제목 -0.03em · 제목 -0.025em · 본문·단추 -0.01em · 줄 간격: 제목 1.35 · 본문 1.6 */
[data-page="apply"] { letter-spacing: -0.01em; }
[data-page="apply"] main p, [data-page="apply"] main li, [data-page="apply"] dialog p { letter-spacing: -0.01em; }
[data-page="apply"] .ap-h1a { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
[data-page="apply"] .ap-h1b { font-size: 44px; line-height: 52px; letter-spacing: -0.03em; }
[data-page="apply"] .ap-h1b .num { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
[data-page="apply"] .ap-vat { height: 26px; font-size: 13px; letter-spacing: 0; }
[data-page="apply"] .ap-lede { margin-top: 12px; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -0.01em; }
[data-page="apply"] .ap-cond { font-size: 13px; line-height: 20px; letter-spacing: 0; }
[data-page="apply"] .ap-eb { margin-bottom: 8px; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: -0.01em; }
[data-page="apply"] .ap-h2 { font-size: 24px; line-height: 33px; font-weight: 800; letter-spacing: -0.025em; }
[data-page="apply"] main h3 { font-size: 18px; line-height: 26px; font-weight: 700; letter-spacing: -0.02em; }
[data-page="apply"] .ap-ind-p h3 { font-size: 22px; line-height: 30px; }
[data-page="apply"] main p { font-size: 15px; line-height: 24px; }
[data-page="apply"] .ap-ind-a { font-size: 15px; line-height: 24px; font-weight: 500; }
[data-page="apply"] .ap-ind-b, [data-page="apply"] .ap-fit-n, [data-page="apply"] .ap-incl-t { font-size: 13px; line-height: 20px; letter-spacing: 0; }
[data-page="apply"] .ap-btn, [data-page="apply"] .ap-bar-go { font-size: 16px; line-height: 22px; letter-spacing: -0.01em; }
[data-page="apply"] .ap-tab, [data-page="apply"] .ap-segb, [data-page="apply"] .ap-chips li { font-size: 15px; line-height: 22px; letter-spacing: -0.01em; }
[data-page="apply"] .ap-nav a { letter-spacing: -0.01em; }
[data-page="apply"] .ap-sub h1 { letter-spacing: -0.03em; }
[data-page="apply"] .ap-sub-l { font-size: 15px; line-height: 24px; letter-spacing: -0.01em; }

/* 메뉴 쪽 남색 칸: 로고 m 을 오른쪽 뒤에 은은하게 */
.ap-sub { position: relative; overflow: hidden; }
.ap-sub .ap-w { position: relative; z-index: 1; }
.ap-sub-m { position: absolute; right: -36px; bottom: -28px; width: 230px; opacity: .07; pointer-events: none; }
.ap-sub-m svg { display: block; width: 100%; height: auto; }

/* 서비스 소개 */
.ap-fit-l { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ap-fit-l li { position: relative; padding-left: 26px; font-size: 15px; line-height: 24px; }
.ap-fit-l li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 14px; height: 8px; border-left: 2.5px solid #2554F0; border-bottom: 2.5px solid #2554F0; transform: rotate(-45deg); }
.ap-fit-h2 { margin-top: 48px; }
.ap-fit-g { margin: 20px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ap-fit-c { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #0B1530; cursor: pointer; aspect-ratio: 4 / 5; text-align: left; font-family: inherit; }
.ap-fit-c img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.ap-fit-c::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 21, 48, .86) 0%, rgba(11, 21, 48, 0) 55%); }
.ap-fit-t { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; color: #fff; }
.ap-fit-t small { display: block; font-size: 12px; line-height: 18px; font-weight: 700; opacity: .85; }
.ap-fit-t b { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: -0.02em; }
.ap-fit-c:focus-visible { outline: 3px solid #2554F0; outline-offset: 3px; }
.ap-fit-n { margin-top: 14px; color: var(--ap-sub, #5A6478); }

@media (min-width: 960px) {
  [data-page="apply"] .ap-h1a { font-size: 26px; line-height: 36px; }
  [data-page="apply"] .ap-h1b { font-size: 64px; line-height: 72px; }
  [data-page="apply"] .ap-vat { height: 30px; font-size: 14px; }
  [data-page="apply"] .ap-lede { font-size: 18px; line-height: 28px; }
  [data-page="apply"] .ap-cond { font-size: 14px; line-height: 22px; }
  [data-page="apply"] .ap-eb { font-size: 15px; line-height: 22px; }
  [data-page="apply"] .ap-h2 { font-size: 34px; line-height: 46px; }
  [data-page="apply"] main h3 { font-size: 20px; line-height: 30px; }
  [data-page="apply"] .ap-ind-p h3 { font-size: 28px; line-height: 38px; }
  [data-page="apply"] main p { font-size: 17px; line-height: 28px; }
  [data-page="apply"] .ap-ind-a { font-size: 17px; line-height: 28px; }
  [data-page="apply"] .ap-ind-b, [data-page="apply"] .ap-fit-n, [data-page="apply"] .ap-incl-t { font-size: 14px; line-height: 22px; }
  [data-page="apply"] .ap-tab, [data-page="apply"] .ap-segb, [data-page="apply"] .ap-chips li { font-size: 16px; }
  [data-page="apply"] .ap-sub-l { font-size: 18px; line-height: 28px; }
  .ap-sub-m { right: 6%; bottom: -60px; width: 420px; }
  .ap-fit-l li { font-size: 17px; line-height: 28px; }
  .ap-fit-h2 { margin-top: 72px; }
  .ap-fit-g { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
  .ap-fit-t { left: 16px; right: 16px; bottom: 16px; }
  .ap-fit-t small { font-size: 13px; }
  .ap-fit-t b { font-size: 16px; line-height: 23px; }
}

/* ── 22차-4b 서비스 소개 업종 사진: 한 줄 옆으로 넘기기(세로 줄임 · 화살표 없음 · 손가락/휠로 밀기) ── */
.ap-fit-g { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-left: -20px; margin-right: -20px; padding: 0 20px 4px; scroll-padding: 0 20px; }
.ap-fit-g::-webkit-scrollbar { display: none; }
.ap-fit-g li { flex: 0 0 168px; scroll-snap-align: start; }
.ap-fit-c { aspect-ratio: 3 / 4; }
@media (min-width: 960px) {
  .ap-fit-g { gap: 16px; margin-left: 0; margin-right: 0; padding: 0 0 6px; scroll-padding: 0; }
  .ap-fit-g li { flex-basis: 220px; }
}

/* ── 22차-4c 안내 글은 한 줄(넘치면 말줄임) ── */
.ap-fit-n, [data-page="apply"] .ap-ind-b, [data-page="apply"] .ap-incl-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-fit-l li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 22차-5 계산기 직원 수 4칸(없음·1~3명·4~5명·6명 이상) · 자주 묻는 질문 한 칸(제목 숨긴 쪽에서 좁은 칸에 몰리던 것) ── */
.cd-opts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 960px) {
  .ap-faq-in { display: block; max-width: 820px; }
  .ap-faq-in > .ap-h2:not(.sr) { margin-bottom: 28px; text-align: center; }
}

/* ── 22차-6 요금 카드(리드넘버 요금제 구성: 포함 내역 · 금액 · 상담 신청하기) ── */
.ap-plans { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.ap-plan { display: flex; flex-direction: column; padding: 24px 22px; border-radius: 20px; background: #F4F6FA; }
.ap-plan-k { margin: 0; font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; color: #0B1530; }
.ap-plan-s { margin: 2px 0 0; font-size: 14px; line-height: 21px; font-weight: 600; color: #2554F0; }
.ap-plan-l { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; flex: 1; }
.ap-plan-l li { position: relative; padding-left: 14px; font-size: 15px; line-height: 23px; color: #3C4658; letter-spacing: -0.01em; }
.ap-plan-l li::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: #2554F0; border-radius: 2px; }
.ap-plan-p { margin: 18px 0 14px; font-size: 15px; line-height: 1.2; font-weight: 700; color: #0B1530; }
.ap-plan-p .num { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; }
.ap-plan-v { display: inline-block; margin-left: 4px; padding: 3px 7px; border-radius: 6px; background: #EEF3FF; color: #2554F0; font-size: 12px; font-weight: 700; vertical-align: 3px; }
.ap-plan .ap-btn { width: 100%; }
.ap-plan-n { margin: 16px 0 0; font-size: 13px; line-height: 20px; color: #5A6478; }
.ap-plan-calc { margin: 14px 0 0; }
.ap-plan-calc .ap-btn { width: 100%; }
@media (min-width: 960px) {
  .ap-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
  .ap-plan { padding: 30px 28px; }
  .ap-plan-p .num { font-size: 38px; }
  .ap-plan-n { font-size: 14px; text-align: center; }
  .ap-plan-calc { text-align: center; }
  .ap-plan-calc .ap-btn { width: auto; min-width: 260px; }
  [data-page="apply"] .ap-price .ap-h2 { text-align: center; }
}

/* ── 22차-6b '이런 사장님께 맞아요' = 1·2·3 번호 한 줄 ── */
.ap-fit-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.ap-fit-l li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 12px; border-radius: 14px; background: #F4F6FA; white-space: normal; overflow: visible; font-size: 13px; line-height: 19px; font-weight: 600; letter-spacing: -0.02em; color: #0B1530; }
.ap-fit-l li::before { content: none; }
.ap-fit-l li .num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #2554F0; color: #fff; font-size: 13px; font-weight: 800; }
@media (min-width: 960px) {
  .ap-fit-l { gap: 16px; margin-top: 24px; }
  .ap-fit-l li { flex-direction: row; align-items: center; gap: 12px; padding: 18px 20px; font-size: 17px; line-height: 26px; }
  .ap-fit-l li .num { width: 32px; height: 32px; font-size: 15px; flex: none; }
}

/* ── 22차-7 신청 4단계: 직원 수 안내 · 예상 기장료 판 ── */
.ap-o-n { margin: 10px 0 0; font-size: 13px; line-height: 20px; color: #5A6478; }
.ap-est { margin: 0 0 16px; padding: 16px 18px; border-radius: 16px; background: #EEF3FF; }
.ap-est-l { margin: 0; font-size: 13px; line-height: 20px; font-weight: 700; color: #2554F0; }
.ap-est-p { margin: 4px 0 0; color: #0B1530; }
.ap-est-p .num { font-size: 28px; line-height: 36px; font-weight: 800; letter-spacing: -0.03em; }
.ap-est-p .ap-vat { background: #fff; color: #2554F0; vertical-align: 5px; }
.ap-est-s { margin: 2px 0 0; font-size: 13px; line-height: 20px; color: #5A6478; }
.ap-est-s:empty { display: none; }

/* ── 22차-8b 첫 화면 '월 4만원부터' 더 크게(대표님) ── */
[data-page="apply"] .ap-h1b { font-size: 54px; line-height: 62px; }
@media (min-width: 960px) { [data-page="apply"] .ap-h1b { font-size: 88px; line-height: 96px; } }

/* ── 23차 평가 반영: 첫 화면 믿을 근거·상담 시간 밖 안내 · 요금 조건 줄 · 흰 띠 없앰 · 요금 카드 줄 간격 · 원형 그림 이름표 · 밤 막대 '전화 예약' 글 ── */
.ap-trust { margin: 12px 0 0; font-size: 14px; line-height: 20px; font-weight: 600; color: rgba(255, 255, 255, .88); }
.ap-off { display: none; margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .14); font-size: 13px; line-height: 19px; color: #fff; }
html.tm-off .ap-off { display: block; }
.ap-plan-c { margin: 12px 0 0; font-size: 14px; line-height: 21px; color: #3C4658; }
.ap-plan-l li { line-height: 23px; min-height: 23px; }
.ap-plan-l { gap: 8px; align-content: start; }
[data-page="apply"] #flow { margin-top: 0; }
[data-page="apply"] .fn b, [data-page="apply"] .fn-plus b { font-size: 13px; line-height: 17px; }
html.tm-off [data-page="apply"] .ap-bar-tt, html.tm-off .ap-bar-tel .ap-bar-tt { display: inline; }
@media (min-width: 960px) {
  .ap-trust { font-size: 15px; }
  .ap-plan-c { text-align: center; font-size: 15px; }
}

/* ── 23차-b 상자 빼기: 밤 안내는 상자 없이 한 줄 · '이런 사장님께 맞아요' 번호 칸도 상자 없이 ── */
.ap-off { padding: 0; border-radius: 0; background: none; color: rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-fit-l li { padding: 0; border-radius: 0; background: none; }
@media (max-width: 379px) { .ap-off { font-size: 12px; letter-spacing: -0.03em; } }

/* ── 24차 언슬롭 다듬기(신청 쪽 /home/ 만 — [data-page="apply"]) ──
   방향: 숫자가 분명한 · 차분한 · 동네 세무사처럼 편한 / 계산대 위 영수증과 장부(흰 종이 · 남색 잉크)
   강조는 두 곳(첫 화면 사진+가격 · 요금 카드 금액)만, 나머지 바탕은 흰색·아주 연한 회색 두 가지, 파랑은 주 버튼·핵심 숫자에만 */
[data-page="apply"] { --ap-g: #F6F7F9; }
/* 바탕: 흰색 ↔ 연한 회색 번갈아(원형 그림 흰 · 업종 회 · 진행 흰 · 요금 회 · 질문 흰 · 마무리 남색) */
[data-page="apply"] #flow { background: #fff; }
[data-page="apply"] .ap-ind { background: var(--ap-g); }
[data-page="apply"] .ap-flow { background: #fff; color: #0B1530; border-top: 1px solid rgba(11, 21, 48, .08); }
[data-page="apply"] .ap-flow .ap-h2 { color: #0B1530; }
[data-page="apply"] .ap-flow :focus-visible { outline-color: #2554F0; }
[data-page="apply"] .ap-steps h3 { color: #0B1530; }
[data-page="apply"] .ap-steps p { color: #5A6478; }
[data-page="apply"] .ap-steps li:not(:last-child)::before { background: rgba(11, 21, 48, .14); }
[data-page="apply"] .ap-steps .ap-n { background: #fff; color: #2554F0; box-shadow: inset 0 0 0 1.5px #2554F0; }
[data-page="apply"] .ap-price { background: var(--ap-g); }
[data-page="apply"] .ap-plan { background: #fff; box-shadow: 0 0 0 1px rgba(11, 21, 48, .08); }
/* 파랑 절제: 카드 소제목·목록 막대는 회색 */
[data-page="apply"] .ap-plan-s { color: #5A6478; font-weight: 500; }
[data-page="apply"] .ap-plan-l li::before { background: #C5CDDA; }
/* 굵기: 큰 제목 700 · 소제목 600 · 본문 400 */
[data-page="apply"] .ap-h2, [data-page="apply"] .flow-txt .big { font-weight: 700; }
[data-page="apply"] .ap-h1b { font-weight: 700; }
[data-page="apply"] main h3, [data-page="apply"] .ap-plan-k { font-weight: 600; }
[data-page="apply"] .ap-plan-k { font-size: 18px; line-height: 26px; }
/* 가격: '월 4만원' 한 꼴 · 영수증 점선 위 금액 · '부가세 별도'는 알약 대신 조용한 글 */
[data-page="apply"] .ap-plan-p { margin: 20px 0 16px; padding-top: 16px; border-top: 1px dashed #C5CDDA; }
[data-page="apply"] .ap-plan-p .num { font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.03em; }
[data-page="apply"] .ap-plan-v, [data-page="apply"] .ap-vat { padding: 0; height: auto; border-radius: 0; background: none; font-size: 13px; font-weight: 500; letter-spacing: 0; vertical-align: baseline; }
[data-page="apply"] .ap-plan-v { color: #5A6478; margin-left: 6px; }
[data-page="apply"] .ap-hero .ap-vat { color: rgba(255, 255, 255, .8); font-size: 14px; }
[data-page="apply"] .ap-est-p .ap-vat { color: #5A6478; background: none; }
/* 첫 화면: 낮엔 믿을 근거 한 줄, 밤엔 그 자리에 안내 한 줄 */
html.tm-off [data-page="apply"] .ap-trust { display: none; }
[data-page="apply"] .ap-off { margin-top: 12px; }
/* 마무리 띠: 사진 빼고 남색 바탕(사람 사진 반복 줄임) */
[data-page="apply"] .ap-band { height: auto; background: #0B1530; align-items: center; }
[data-page="apply"] .ap-band-pic, [data-page="apply"] .ap-band::before { display: none; }
[data-page="apply"] .ap-band-in { padding-top: 56px; padding-bottom: 56px; }
/* 업종 탭: 휴대폰에서 잘리지 않게 두 줄 */
[data-page="apply"] .ap-tabs { flex-wrap: wrap; justify-content: center; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
/* 칸 위아래 여백 통일: 휴대폰 56 · PC 96 */
[data-page="apply"] .ap-sec, [data-page="apply"] #flow { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 960px) {
  [data-page="apply"] .ap-sec, [data-page="apply"] #flow { padding-top: 96px; padding-bottom: 96px; }
  [data-page="apply"] .ap-plan-p .num { font-size: 34px; line-height: 42px; }
  [data-page="apply"] .ap-plan-k { font-size: 20px; line-height: 28px; }
  [data-page="apply"] .ap-band-in { padding-top: 80px; padding-bottom: 80px; }
}

/* ── 25차 받고 싶은 연락(전화/문자) ── */
.ap-way { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; }
.ap-way-l { margin-right: 4px; font-size: 14px; font-weight: 600; color: #3C4658; }
.ap-way-o { position: relative; }
.ap-way-o input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ap-way-o span { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 40px; padding: 0 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px #C5CDDA; font-size: 15px; font-weight: 600; color: #3C4658; background: #fff; }
.ap-way-o input:checked + span { box-shadow: inset 0 0 0 1.5px #0B1530; color: #0B1530; background: #F6F7F9; }
.ap-way-o input:focus-visible + span { outline: 2px solid #2554F0; outline-offset: 2px; }

/* ── 27차 업종 칸 자동 넘김: 사진 겹쳐 바뀜 · 글 살짝 떠오름 ── */
[data-page="apply"] .ap-ind-ph { opacity: 0; transition: opacity .7s ease; }
[data-page="apply"] .ap-ind-ph.on { opacity: 1; }
[data-page="apply"] .ap-ind-p:not([hidden]) { animation: apIndIn .5s ease both; }
@keyframes apIndIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  [data-page="apply"] .ap-ind-ph { transition: none; }
  [data-page="apply"] .ap-ind-p:not([hidden]) { animation: none; }
}