/* 홈 전용 — 홈(index.html)만 이 파일을 부른다. 다른 쪽은 tokens.css · style.css */
/*T*/
:root {
  --bg: #FFFFFF;
  --card: #F7F8FA;
  --line: rgba(17, 24, 39, .08);
  --line-strong: rgba(17, 24, 39, .18);
  --tx: #111827;
  --tx-2: #4B5563;
  --tx-3: #6B7280;
  --h-dim: #858D9A;
  --h-w: 600;
  --green: #03C75A;
  --focus: #111827;
  --tile: #EEF0F3;
  --tile-line: transparent;
  --btn-bg: #111827;
  --btn-tx: #FFFFFF;
  --logo: #111827;
  --head-bg: rgba(255, 255, 255, .82);
  --kakao-bg: #BACEE0;
  --kakao: #FEE500;
  --kakao-ink: #191919;
  --ink: #111827;
  --fill-off: #CDD2D9;
  color-scheme: light;
}
/*/T*/
:root {
  --ease: cubic-bezier(.2, .6, .2, 1);
  --pop: cubic-bezier(.3, 1.6, .5, 1);
  --wrap: 1240px;
  --pad: clamp(20px, 4vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tx);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px; line-height: 1.6; word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
img, svg { display: block; }
.wrap { max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.nw { white-space: nowrap; }
.br-pc { display: none; }

/* 맨 위 진행 막대 — 스크롤한 만큼 초록 선이 찬다 */
.prog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 40; pointer-events: none; display: none; }
.has-js .prog { display: block; }
.prog i { display: block; height: 100%; background: var(--green); transform-origin: 0 50%; transform: scaleX(0); }

/* 머리 */
.head { position: sticky; top: 0; z-index: 20; background: var(--head-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); }
.head.scrolled { border-bottom-color: var(--line); }
.head-in { display: flex; align-items: center; gap: 24px; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo svg { width: 26px; height: 26px; }
.logo .ink { fill: var(--logo); }
.logo b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.logo small { font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--tx-3); margin-left: 2px; }
.nav { margin-left: auto; display: none; }
.nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav a { font-size: 14.5px; color: var(--tx-2); text-decoration: none; transition: color .2s var(--ease); white-space: nowrap; }
.nav a:hover { color: var(--tx); }
.head-cta { display: none; margin-left: 4px; height: 40px; padding: 0 18px; align-items: center; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .2s var(--ease), background .2s var(--ease); }
.head-cta:hover { border-color: var(--tx-2); }
.head-m { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.head-m .cta-s { height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; }
.nav-toggle { width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: var(--tx); display: grid; place-content: center; gap: 4px; cursor: pointer; padding: 0; }
.nav-toggle span { display: block; width: 16px; height: 1.5px; background: currentColor; }
.mmenu { border-top: 1px solid var(--line); }
.mmenu ul { list-style: none; margin: 0; padding: 8px var(--pad) 16px; }
.mmenu a { display: block; padding: 12px 0; font-size: 15px; color: var(--tx-2); text-decoration: none; border-bottom: 1px solid var(--line); }
@media (max-width: 519px) { .logo small { display: none; } }
@media (min-width: 1180px) {
  .nav, .head-cta { display: flex; }
  .head-m, .mmenu { display: none !important; }
}

/* 머리말 — 로고 문법의 작은 조각 네 개(초록 하나만 위로) + 글 */
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 22px; font-size: 13px; line-height: 1.4; color: var(--tx-2); }
.kicker .sep { color: var(--tx-3); }
.mk { display: grid; grid-template-columns: 6px 6px; gap: 2px; flex: none; }
.mk i { width: 6px; height: 6px; border-radius: 1.5px; background: var(--tx-3); }
.mk i.g { background: var(--green); transform: translate(1px, -1px); }

/* 제목 줄 가림막 — 줄마다 아래에서 올라온다 */
.ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ln > span { display: inline-block; }

/* 단추 */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 6px; font-size: 16px; font-weight: 600; text-decoration: none; transition: background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease); }
.btn .ar { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn:hover .ar { transform: translateX(4px); }
.btn-fill { background: var(--btn-bg); color: var(--btn-tx); border: 1px solid var(--btn-bg); }
.btn-fill:hover { opacity: .92; }
.btn-fill::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .26), transparent); transform: skewX(-18deg); pointer-events: none; opacity: 0; }
.btn-fill:hover::after { animation: shine2 .8s var(--ease); }
.btn-line { border: 1px solid var(--line-strong); color: var(--tx); }
.btn-line:hover { border-color: var(--tx-2); }
.btn-kakao { background: var(--kakao); color: var(--kakao-ink); border: 1px solid var(--kakao); }
.btn-kakao:hover { opacity: .92; }
.btn-kakao .kk { width: 20px; height: 20px; }

/* 첫 화면 */
.hero { padding: clamp(32px, 6vw, 96px) 0 clamp(48px, 6vw, 88px); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
h1 { font-size: clamp(2rem, 1.1rem + 3.2vw, 3.6rem); font-weight: var(--h-w); line-height: 1.16; letter-spacing: -.035em; margin: 0 0 24px; }
h1 .dim, h2 .dim { color: var(--h-dim); }
.sub { font-size: clamp(1rem, .92rem + .3vw, 1.125rem); line-height: 1.75; color: var(--tx-2); margin: 0 0 28px; max-width: 34em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 32px; padding: 0; }
.chips li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; color: var(--tx-2); }
.chips li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--tx-3); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.note { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--tx-3); }

/* 첫 화면 그림 한 덩어리 — 초록 판(타일 무늬) + 폰(8/13 실제 검색 화면이 내려가 우리 가게 빨간 테두리에서 멈춤) + 순위 카드 + 카톡 답장(실제 가린 컷) */
.hero-art { position: relative; width: 100%; max-width: 340px; margin: 0 auto; }
.ha-bg { position: absolute; left: 9%; right: 3%; top: 6%; bottom: 30%; }
.ha-board { position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, .28), transparent 55%), linear-gradient(155deg, #12CF67 0%, #03C75A 40%, #02A24A 100%); }
.ha-tiles { position: absolute; inset: 0; width: 100%; height: 100%; }
.ha-tiles rect { fill: rgba(255, 255, 255, .1); }
.ha-tiles rect.hi { fill: rgba(255, 255, 255, .28); }
.ha-ph { position: absolute; z-index: 2; top: 24px; left: 45%; width: 188px; margin-left: -94px; }
.ha-phone { background: var(--ink); padding: 7px; border-radius: 32px; box-shadow: 0 30px 60px -24px rgba(6, 60, 30, .55); }
.ha-scr { --end: -55.88%; position: relative; overflow: hidden; background: #FFFFFF; border-radius: 26px; padding-top: 30px; }
.ha-scr::before { content: ""; position: absolute; top: 9px; left: 50%; width: 64px; height: 18px; margin-left: -32px; border-radius: 999px; background: var(--ink); }
.ha-vp { position: relative; height: 345px; overflow: hidden; }
.ha-pg { position: relative; transform: translateY(var(--end)); }
.ha-pg img { width: 100%; height: auto; }
.ha-me { position: absolute; left: 0; right: 0; top: 72.68%; height: 22.16%; pointer-events: none; }
.ha-pill { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px; border-radius: 999px; background: var(--green); color: #0B2414; font-size: 14px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(2, 122, 55, .6); }
.ha-pill svg { width: 12px; height: 12px; }
.px-card { position: relative; z-index: 3; width: 54%; margin-top: 370px; }
.px-bub { position: absolute; z-index: 4; top: 0; left: calc(45% + 40px); right: 0; }
.rk-card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: 0 30px 60px -28px rgba(17, 24, 39, .45), 0 2px 8px rgba(17, 24, 39, .06); }
.rk-card .area { fill: url(#haArea); }
@media (min-width: 900px) { .px-card { margin-top: 384px; } }
@media (min-width: 1200px) { .ha-ph { left: 50%; width: 216px; margin-left: -108px; } .ha-scr { --end: -62%; } .px-card { width: 56%; margin-top: 376px; } .px-bub { left: calc(50% + 40px); } }
.rk-kw { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tx-3); }
.rk-move { margin: 2px 0 8px; font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.rk-move b, .case .move b { color: var(--tx); font-weight: 600; }
.rk-period { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--tx-2); }
.rk-period b { color: var(--tx); font-weight: 600; }
.h-slope { width: 100%; height: auto; overflow: visible; }
.h-slope .base { stroke: #E5E7EB; stroke-width: 1; }
.h-slope .draw { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.h-slope .startpt { fill: #9CA3AF; }
.h-slope .endpt { fill: var(--green); }
.kbub { background: var(--kakao-bg); border-radius: 14px; padding: 10px 12px 12px; box-shadow: 0 22px 44px -22px rgba(17, 24, 39, .32); }
.kb-t { margin: 0 0 8px; font-size: 14px; line-height: 1.4; color: #24313F; text-wrap: balance; }
.kb-cut { position: relative; overflow: hidden; max-width: 170px; aspect-ratio: 170 / 77; }
.kb-cut img { position: absolute; width: 268.24%; max-width: none; height: auto; left: -4.71%; top: -257.14%; }
@media (min-width: 900px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; }
  .hero-art { width: clamp(360px, 36vw, 500px); max-width: none; margin: 0; }
  .br-pc { display: inline; }
}

/* 구역 */
.sec { border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 96px) 0; }
.sec.soft { background: var(--card); }
.sec-head { margin-bottom: clamp(28px, 4vw, 48px); }
h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: var(--h-w); line-height: 1.25; letter-spacing: -.03em; margin: 0; }
.lead { margin: 18px 0 0; font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.75; color: var(--tx-2); max-width: 36em; }

/* 다섯 가지 답 */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fc { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px 18px 20px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-content: start; }
.fc > * { grid-column: 2; }
.fc .no { grid-column: 1; grid-row: 1; align-self: baseline; font-size: 13px; line-height: 1.6; letter-spacing: .08em; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.fc:hover { border-color: var(--line-strong); }
.fc .q { grid-row: 1; align-self: baseline; margin: 0 0 4px; font-size: 15px; line-height: 1.6; color: var(--tx-3); }
.fc .a { margin: 0 0 8px; font-size: clamp(1.25rem, 1.1rem + .4vw, 1.4rem); font-weight: 600; line-height: 1.35; letter-spacing: -.02em; color: var(--tx); }
.fc .d { margin: 0; font-size: 15px; line-height: 1.65; color: var(--tx-2); }
@media (min-width: 720px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fc { display: block; padding: 24px 24px 26px; }
  .fc .no { display: block; margin-bottom: 16px; letter-spacing: .14em; }
  .fc .q { margin-bottom: 6px; }
  .fc:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .facts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fc:last-child { grid-column: auto; }
  .fc .no { margin-bottom: 28px; }
}

/* 숫자 띠 */
.nums { background: var(--card); border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 96px) 0; }
.nums-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.nk { display: block; margin-bottom: 10px; font-size: 14px; color: var(--tx-3); }
.nb { margin: 0 0 10px; font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); font-weight: 600; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.nb i { font-style: normal; color: var(--h-dim); margin-left: 2px; }
.nd { margin: 0; font-size: 15px; color: var(--tx-2); }
.nn { margin: 32px 0 0; font-size: 14px; color: var(--tx-3); }
@media (min-width: 720px) {
  .nums-l { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .nums-l li { padding: 0 32px; border-left: 1px solid var(--line-strong); }
  .nums-l li:first-child { padding-left: 0; border-left: 0; }
}
.cnt { display: inline-block; text-align: right; transition: min-width .45s var(--ease); }

/* 8일 순위 기록 */
.rec { display: grid; gap: 48px; }
.cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.case { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 16px 14px; }
.case .kw { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tx-3); }
.case .move { margin: 4px 0 10px; font-size: clamp(1.125rem, .95rem + .8vw, 1.625rem); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.case .period { margin: 8px 0 0; font-size: 14px; color: var(--tx-2); }
.case .period b { color: var(--tx); font-weight: 600; }
.tally { margin: 28px 0 0; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.75; color: var(--tx-2); }
.tally mark { background: linear-gradient(transparent 58%, rgba(3, 199, 90, .28) 58%) no-repeat 0 0 / 100% 100%; color: var(--tx); font-weight: 600; padding: 0 2px; }
.rec-note { margin: 16px 0 0; font-size: 14px; line-height: 1.7; color: var(--tx-3); }
.serp { margin: 0; }
.serp h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; }
.serp .serp-d { margin: 0 0 20px; font-size: 15px; color: var(--tx-2); }
.serp .serp-d b { color: var(--tx); font-weight: 600; }
.device { display: block; max-width: 280px; margin: 0 auto; padding: 8px; background: var(--ink); border-radius: 34px; box-shadow: 0 40px 80px -40px rgba(17, 24, 39, .45); }
.device img { width: 100%; height: auto; border-radius: 26px; }
.serp figcaption { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--tx-2); }
.serp .rec-note { text-align: center; }
@media (min-width: 900px) {
  .rec { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 64px; align-items: start; }
}

/* 카톡 답장 */
.marq { overflow: hidden; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); margin: 0 0 clamp(40px, 5vw, 64px); padding: 22px 0; }
.marq-t { list-style: none; margin: 0; padding: 0 var(--pad); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; will-change: transform; }
.marq-t li { display: flex; align-items: center; gap: 40px; font-size: clamp(1.625rem, 1.1rem + 2.4vw, 3.25rem); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.marq-t li:nth-child(even) { color: var(--h-dim); }
.marq-t li::after { content: ""; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--green); }
.marq-t li:last-child::after { display: none; }
.has-js .marq-t { flex-wrap: nowrap; width: max-content; }
.has-js .marq-t li { white-space: nowrap; }
.phones { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.ph-set { margin: 0; width: 100%; max-width: 270px; }
.ph-t { margin: 0 0 14px; text-align: center; font-size: 14px; color: var(--tx-3); }
.phone { padding: 9px; background: var(--ink); border-radius: 44px; box-shadow: 0 40px 80px -40px rgba(17, 24, 39, .5); }
.phone-scr { position: relative; overflow: hidden; border-radius: 36px; background: var(--kakao-bg); padding: 40px 0 16px; }
.phone-scr::before { content: ""; position: absolute; top: 10px; left: 50%; width: 84px; height: 22px; margin-left: -42px; border-radius: 12px; background: var(--ink); }
.kchip { display: table; margin: 10px auto 8px; padding: 3px 12px; border-radius: 999px; background: rgba(17, 24, 39, .1); font-size: 14px; line-height: 1.5; color: #1F2937; }
.phone-scr img { width: 100%; height: auto; }
.fine { max-width: 46em; margin: 36px auto 0; text-align: center; font-size: 14px; line-height: 1.7; color: var(--tx-3); }
@media (min-width: 720px) {
  .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .ph-set { max-width: 300px; }
  .ph-set:nth-child(2) { margin-top: 48px; }
}

/* 무료 순위 진단 */
.rc { display: grid; gap: 36px; }
.rc-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 3vw, 32px); }
.rank-form { display: grid; gap: 14px; }
.rank-form .f { display: grid; gap: 6px; }
.rank-form label { font-size: 14px; font-weight: 600; color: var(--tx); }
.rank-form input { height: 50px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: #FFFFFF; font: inherit; font-size: 16px; color: var(--tx); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.rank-form input::placeholder { color: #80878F; }
.rank-form input:focus { outline: none; border-color: var(--tx); box-shadow: 0 0 0 3px rgba(17, 24, 39, .12); }
.rank-form .btn { width: 100%; margin-top: 4px; cursor: pointer; font-family: inherit; }
.field-hint { margin: 14px 0 0; font-size: 14px; color: var(--tx-2); }
.field-hint b { color: var(--tx); font-weight: 600; }
.kw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.kw-chips button { height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: #FFFFFF; font: inherit; font-size: 14px; color: var(--tx-2); cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.kw-chips button:hover { border-color: var(--tx-2); color: var(--tx); transform: translateY(-1px); }
.rank-hint { margin: 16px 0 0; font-size: 14px; line-height: 1.7; color: var(--tx-3); }
.rank-hint b { color: var(--tx-2); font-weight: 600; }
#rankOut:not(:empty) { margin-top: 14px; }
@media (min-width: 900px) {
  .rc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: center; }
}
/* 무료 자료실 띠 — 무료 순위 진단 다음 · 표지·안쪽 쪽을 겹쳐 보인다 (gd-dark = 어두운 띠) */
.gd { padding: clamp(64px, 8vw, 112px) 0; border-top: 1px solid var(--line); background: var(--bg); }
.gd-in { display: grid; gap: 40px; align-items: center; }
.gd-stats { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 520px; }
.gd-stats li { border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; }
.gd-stats b { display: block; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.gd-stats span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--tx-3); }
.gd-cta { margin-top: 28px; }
.gd-note { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--tx-3); }
.gd-art { position: relative; display: block; width: min(100%, 300px); aspect-ratio: 1 / 1.02; justify-self: center; }
.gd-art img { position: absolute; width: 60%; height: auto; border-radius: 6px; background: #FFFFFF; transition: transform .6s var(--ease); }
.gd-art .gd-b { left: 4%; top: 2%; transform: rotate(-6deg); box-shadow: 0 18px 40px -18px rgba(17, 24, 39, .45), 0 0 0 1px rgba(17, 24, 39, .08); }
.gd-art .gd-f { right: 4%; bottom: 2%; z-index: 2; transform: rotate(4deg); box-shadow: 0 30px 60px -24px rgba(17, 24, 39, .55), 0 0 0 1px rgba(17, 24, 39, .08); }
.gd-art:hover .gd-b { transform: rotate(-8deg) translateX(-6px); }
.gd-art:hover .gd-f { transform: rotate(5deg) translateX(6px); }
.gd-dark { background: var(--ink); border-top: 0; color: #F3F4F6; }
.gd-dark h2 { color: #F9FAFB; }
.gd-dark h2 .dim { color: #8B93A1; }
.gd-dark .kicker { color: #B8BFC9; }
.gd-dark .mk i { background: #4B5563; }
.gd-dark .mk i.g { background: var(--green); }
.gd-dark .lead { color: #B8BFC9; }
.gd-dark .gd-stats li { border-color: rgba(255, 255, 255, .16); }
.gd-dark .gd-stats span, .gd-dark .gd-note { color: #A3ABB6; }
.gd-dark .btn-fill { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }
.gd-dark .btn-fill::after { background: linear-gradient(100deg, transparent, rgba(17, 24, 39, .12), transparent); }
.gd-dark .gd-art .gd-b { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 24px 50px -20px rgba(0, 0, 0, .7); }
.gd-dark .gd-art .gd-f { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .75); }
.gd-dark :focus-visible { outline-color: #FFFFFF; }
@media (min-width: 900px) {
  .gd-in { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 72px; }
  .gd-art { width: min(100%, 460px); }
}

/* 진행 과정 + 서류 부채꼴 */
.pr { display: grid; gap: 48px; }
.docs { margin: 36px 0 0; }
.fan { --fx: 46%; --fr: 8deg; --fxh: 52%; --frh: 10deg; position: relative; max-width: 460px; height: clamp(290px, 30vw, 380px); }
@media (max-width: 719px) { .fan { --fx: 30%; --fr: 5deg; --fxh: 33%; --frh: 6deg; } }
.fan a { position: absolute; bottom: 0; left: 25%; width: 50%; display: block; transform-origin: 50% 100%; transition: transform 1s var(--ease), opacity .8s var(--ease); }
.fan img { width: 100%; height: auto; border-radius: 4px; background: #FFFFFF; box-shadow: 0 24px 44px -24px rgba(17, 24, 39, .42), 0 0 0 1px rgba(17, 24, 39, .08); }
.fan .f1 { transform: translateX(calc(var(--fx) * -1)) rotate(calc(var(--fr) * -1)); }
.fan .f2 { transform: translateY(-3%); z-index: 2; }
.fan .f3 { transform: translateX(var(--fx)) rotate(var(--fr)); }
.fan:hover .f1 { transform: translateX(calc(var(--fxh) * -1)) rotate(calc(var(--frh) * -1)); }
.fan:hover .f3 { transform: translateX(var(--fxh)) rotate(var(--frh)); }
.docs figcaption { margin: 20px 0 0; font-size: 14px; line-height: 1.7; color: var(--tx-3); }
.docs figcaption span { display: block; color: var(--tx-2); }
.steps-w { position: relative; }
.steps-w::before { content: ""; position: absolute; left: 21.5px; top: 22px; bottom: 22px; width: 1px; background: var(--line-strong); }
.steps-fill { display: none; }
.has-js .steps-fill { display: block; position: absolute; left: 20.5px; top: 22px; bottom: 22px; width: 3px; border-radius: 2px; background: var(--green); transform-origin: 50% 0; transform: scaleY(0); }
.steps { list-style: none; margin: 0; padding: 0; }
.h-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 0 0 36px; }
.h-step:last-child { padding-bottom: 0; }
.sn { position: relative; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--card); font-size: 15px; font-weight: 600; color: var(--tx-2); font-variant-numeric: tabular-nums; transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--pop); }
.h-step.on .sn { background: var(--green); border-color: var(--green); color: #0B2414; transform: scale(1.06); }
.h-step h3 { margin: 9px 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; }
.h-step p { margin: 0 0 4px; font-size: 16px; color: var(--tx-2); }
@media (min-width: 900px) {
  .pr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
  .pr-l { position: sticky; top: 112px; }
}

/* 요금 */
.tiers { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.h-tier { display: flex; flex-direction: column; padding: 28px 26px 30px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.h-tier:hover { transform: translateY(-4px); box-shadow: 0 28px 52px -30px rgba(17, 24, 39, .4); }
.tname { margin: 0 0 14px; font-size: 16px; font-weight: 600; }
.tprice { margin: 0 0 10px; font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.tprice small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--tx-3); }
.tdesc { margin: 0 0 22px; font-size: 15px; color: var(--tx-2); }
.checks { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--tx-2); }
.ck { flex: none; width: 16px; height: 16px; margin-top: 4px; }
.ck .draw { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.h-tier .btn { margin-top: 28px; align-self: flex-start; }
.h-tier.main { background: var(--ink); border-color: var(--ink); color: #F9FAFB; }
.h-tier.main .tprice small, .h-tier.main .tdesc, .h-tier.main .checks li { color: #C2C8D0; }
.h-tier.main .checks { border-top-color: rgba(255, 255, 255, .14); }
.h-tier.main .ck .draw { stroke: var(--green); }
.h-tier.main .btn-fill { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }
.h-tier.main .btn-fill::after { background: linear-gradient(100deg, transparent, rgba(17, 24, 39, .12), transparent); }
.h-tier.main :focus-visible { outline-color: #FFFFFF; }
.tier-foot { margin: 22px 0 0; font-size: 14px; color: var(--tx-3); }
.tier-foot a { color: var(--tx); font-weight: 600; text-underline-offset: 3px; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 걱정 다섯 */
.worries { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.wc { padding: 22px 22px 24px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.wc:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 28px 52px -30px rgba(17, 24, 39, .32); }
.bub { display: inline-block; margin: 0 0 18px; padding: 10px 14px; background: var(--tile); border-radius: 14px 14px 14px 4px; font-size: 15px; line-height: 1.5; color: var(--tx); transform-origin: 0 100%; }
.wc h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; }
.wc p { margin: 0 0 6px; font-size: 15px; color: var(--tx-2); }
.wc .but { margin-top: 10px; font-size: 14px; color: var(--tx-3); }
@media (min-width: 720px) { .worries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .worries { grid-template-columns: repeat(6, minmax(0, 1fr)); } .worries .wc { grid-column: span 2; } .worries .wc:nth-child(n+4) { grid-column: span 3; } }

/* 일하는 원칙 — 큰 글자가 낱말마다 채워진다 */
.pp-l { list-style: none; margin: 0; padding: 0; counter-reset: pp; }
.pp-l li { padding: clamp(18px, 2.4vw, 28px) 0; border-top: 1px solid var(--line); }
.pp-l li:last-child { border-bottom: 1px solid var(--line); }
.pp-big { margin: 0; font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; color: var(--tx); }
.pp-big.split .w { color: var(--fill-off); transition: color .35s var(--ease); }
.pp-big.split .w.on { color: var(--tx); }
.pp-d { margin: 12px 0 0; font-size: clamp(1rem, .95rem + .25vw, 1.125rem); color: var(--tx-2); }

/* 질문 */
.fq { display: grid; gap: 32px; }
.fq-l details { border-top: 1px solid var(--line-strong); }
.fq-l details:last-child { border-bottom: 1px solid var(--line-strong); }
.fq-l summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.45; }
.fq-l summary::-webkit-details-marker { display: none; }
.pm { position: relative; flex: none; width: 14px; height: 14px; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; top: 6.25px; width: 14px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.pm::after { transform: rotate(90deg); }
details[open] .pm::after { transform: rotate(0deg); }
.ans { padding: 0 0 22px; font-size: 16px; color: var(--tx-2); }
.ans p { margin: 0 0 6px; }
.ans a { color: var(--tx); text-underline-offset: 3px; }
@media (min-width: 900px) {
  .fq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 80px; align-items: start; }
  .fq-head { position: sticky; top: 112px; }
}

/* 마지막 문의 — 어두운 띠 */
.cb { background: var(--ink); color: #F3F4F6; padding: clamp(72px, 9vw, 128px) 0; }
.cb-in { display: grid; gap: 48px; align-items: center; }
.cb h2 { color: #F9FAFB; }
.cb h2 .dim { color: #8B93A1; }
.cb .kicker { color: #B8BFC9; }
.cb .mk i { background: #4B5563; }
.cb .mk i.g { background: var(--green); }
.cb .lead { color: #B8BFC9; margin-bottom: 28px; }
.cb .assure { margin: 16px 0 0; font-size: 14px; color: #A3ABB6; }
.cb :focus-visible { outline-color: #FFFFFF; }
.cb-art { width: clamp(220px, 26vw, 340px); height: auto; overflow: visible; justify-self: center; }
.cb-art rect { fill: #1F2937; }
.cb-art rect.up { fill: var(--green); }
@media (min-width: 900px) { .cb-in { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; } }

/* 바닥 */
.ft { border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 14px; color: var(--tx-3); }
.ft-top { display: grid; gap: 32px; }
.ft-logo { margin: 0 0 10px; font-size: 17px; font-weight: 600; color: var(--tx); }
.ft p { margin: 0; line-height: 1.7; }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ft a { color: var(--tx-2); text-decoration: none; }
.ft a:hover { color: var(--tx); text-decoration: underline; text-underline-offset: 3px; }
.legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); line-height: 1.75; }
@media (min-width: 900px) { .ft-top { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 899px) { .ft { padding-bottom: 104px; } .ft-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; } .ft-top > :first-child { grid-column: 1 / -1; } }

/* 폰 아래 고정 단추 줄 — 첫 화면 단추가 화면 밖으로 나가면 올라온다 */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); transition: transform .4s var(--ease); }
.mbar a { height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 15px; font-weight: 600; text-decoration: none; }
.mb-diag { background: var(--btn-bg); color: var(--btn-tx); }
.mb-kakao { background: var(--kakao); color: var(--kakao-ink); }
.has-js .mbar:not(.on) { transform: translateY(110%); visibility: hidden; transition: transform .4s var(--ease), visibility 0s linear .4s; }
@media (min-width: 900px) { .mbar { display: none; } }

/* ─── 움직임 — 처음 한 번만 · JS 가 켜졌을 때만 숨긴 채 시작 ─── */
@keyframes up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lnUp { from { transform: translateY(110%); } to { transform: none; } }
@keyframes tileIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes tileRise { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { transform: scale(0); } to { transform: none; } }
@keyframes mkPop { 0% { transform: translate(1px, 7px); opacity: 0; } 100% { transform: translate(1px, -1px); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes shine { 0% { transform: translateX(0) skewX(-18deg); opacity: 1; } 100% { transform: translateX(475%) skewX(-18deg); opacity: 1; } }
@keyframes shine2 { 0% { transform: translateX(0) skewX(-18deg); opacity: 1; } 100% { transform: translateX(475%) skewX(-18deg); opacity: 1; } }
@keyframes ansIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes gPop { from { opacity: 0; transform: translateY(14px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes stageIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes phoneUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes pgScroll { 0% { transform: translateY(0); } 40% { transform: translateY(calc(var(--end) * .45)); } 55% { transform: translateY(calc(var(--end) * .45)); } 100% { transform: translateY(var(--end)); } }
@keyframes areaIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kChip { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes kType { 0% { opacity: 0; visibility: visible; transform: scale(.8); } 18%, 82% { opacity: 1; visibility: visible; transform: none; } 100% { opacity: 0; visibility: hidden; transform: scale(.9); } }
@keyframes kDot { 0%, 100% { opacity: .35; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes kPop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* 첫 화면 시간표 */
.has-js .hero-copy > :where(:not(h1):not(.chips)) { animation: up .8s var(--ease) both; }
.has-js .hero-copy > .kicker { animation-delay: .05s; }
.has-js .hero h1 .ln > span { animation: lnUp 1s var(--ease) .12s both; }
.has-js .hero h1 .ln + .ln > span { animation-delay: .22s; }
.has-js .hero-copy > .sub { animation-delay: .38s; }
.has-js .chips li { animation: up .7s var(--ease) both; }
.has-js .chips li:nth-child(1) { animation-delay: .48s; }
.has-js .chips li:nth-child(2) { animation-delay: .53s; }
.has-js .chips li:nth-child(3) { animation-delay: .58s; }
.has-js .chips li:nth-child(4) { animation-delay: .63s; }
.has-js .hero-copy > .cta { animation-delay: .62s; }
.has-js .hero-copy > .note { animation-delay: .72s; }
.has-js .hero .kicker .mk i.g { animation: mkPop .7s var(--pop) .3s both; }
.has-js .hero .btn-fill::after { animation: shine 1.1s var(--ease) 1.5s both; }
.has-js .hero .btn-fill:hover::after { animation: shine2 .8s var(--ease); }
.has-js .ha-board { animation: stageIn .6s var(--ease) .05s both; }
.has-js .ha-tiles rect { transform-box: fill-box; transform-origin: center; animation: tileIn .6s var(--ease) both; }
.has-js .ha-tiles rect:nth-child(1) { animation-delay: .12s; }
.has-js .ha-tiles rect:nth-child(2) { animation-delay: .16s; }
.has-js .ha-tiles rect:nth-child(3) { animation-delay: .20s; }
.has-js .ha-tiles rect:nth-child(4) { animation-delay: .24s; }
.has-js .ha-tiles rect:nth-child(5) { animation-delay: .28s; }
.has-js .ha-tiles rect:nth-child(6) { animation-delay: .32s; }
.has-js .ha-tiles rect:nth-child(7) { animation-delay: .36s; }
.has-js .ha-tiles rect:nth-child(8) { animation-delay: .40s; }
.has-js .ha-tiles rect:nth-child(9) { animation-delay: .44s; }
.has-js .ha-tiles rect:nth-child(10) { animation-delay: .48s; }
.has-js .ha-tiles rect:nth-child(11) { animation-delay: .52s; }
.has-js .ha-tiles rect:nth-child(12) { animation-delay: .56s; }
.has-js .ha-tiles rect.hi { animation: gPop .6s var(--pop) .7s both; }
.has-js .ha-phone { animation: phoneUp .7s var(--ease) .25s both; }
.has-js .ha-pg { animation: pgScroll 1.35s var(--ease) 1s both; }
.has-js .ha-pill { transform-origin: 100% 50%; animation: pop .45s var(--pop) 2.3s both; }
.has-js .rk-card { animation: cardIn .8s var(--ease) 1.6s both; }
.has-js .rk-card .draw { animation: draw 1s var(--ease) 1.9s forwards; }
.has-js .rk-card .area { animation: areaIn .5s var(--ease) 2.5s both; }
.has-js .rk-card .endpt { animation: pop .45s var(--pop) 2.85s both; }
.has-js .kbub { transform-origin: 0 100%; animation: cardIn .7s var(--ease) 2.4s both; }
.px { will-change: transform; }

/* 선 그리기 · 끝점 튐 (8일 기록 · 요금 체크) */
.has-js .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.has-js .endpt { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.has-js .case.in .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease) .3s; }
.has-js .case.in .endpt { transform: none; transition: transform .45s var(--pop) 1.45s; }

/* 구역 머리 — 머리말 · 줄 가림막 · 리드 */
.has-js .sh > :not(h2) { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.has-js .sh.in > :not(h2) { opacity: 1; transform: none; }
.has-js .sh.in > h2 ~ * { transition-delay: .25s; }
.has-js .sh .ln > span { transform: translateY(110%); transition: transform 1s var(--ease); }
.has-js .sh.in .ln > span { transform: none; }
.has-js .sh.in .ln + .ln > span { transition-delay: .1s; }
.has-js .sh.in .mk i.g { animation: mkPop .7s var(--pop) .15s both; }

/* 한 번 올라오며 나타남 */
.has-js .h-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.has-js .h-reveal.in { opacity: 1; transform: none; }
@media (min-width: 720px) and (max-width: 1199px) { .has-js .fc.h-reveal:nth-child(even) { transition-delay: .08s; } }
@media (min-width: 1200px) {
  .has-js .fc.h-reveal:nth-child(2) { transition-delay: .08s; }
  .has-js .fc.h-reveal:nth-child(3) { transition-delay: .16s; }
  .has-js .fc.h-reveal:nth-child(4) { transition-delay: .24s; }
  .has-js .fc.h-reveal:nth-child(5) { transition-delay: .32s; }
}
.has-js .nums-l li:nth-child(2) { transition-delay: .1s; }
.has-js .nums-l li:nth-child(3) { transition-delay: .2s; }
.has-js .case:nth-child(2) { transition-delay: .08s; }
.has-js .case:nth-child(3) { transition-delay: .16s; }
.has-js .case:nth-child(4) { transition-delay: .24s; }
.has-js .tally mark { background-size: 0% 100%; transition: background-size 1.2s var(--ease) .4s; }
.has-js .tally.in mark { background-size: 100% 100%; }

/* 카톡 폰 — 폰이 올라온 뒤 장마다 이름표 → 입력 중 점 → 컷이 톡 튀어나옴(카톡 받는 느낌)
   점 말풍선 .kdots 은 index.html 에 꾸밈으로 둔다(aria-hidden · 글자 없음 · 자리를 차지하지 않음) — JS 가 있을 때 잠깐 보였다가 끝나면 숨는다.
   장 번호 --k 는 index.html 의 style 에 적는다. 장마다 0.33초 간격 · 마지막 컷은 폰 등장 시작 뒤 2×.33+.5+.32 = 1.48초에 제자리 */
.has-js .ph-set:nth-child(2) { transition-delay: .12s; }
.has-js .phone-scr > * { opacity: 0; transform: translateY(12px); }
.has-js .ph-set.in .phone-scr > * { opacity: 1; transform: none; }
.kdots { display: none; }
.has-js .phone-scr > .kdots { position: absolute; left: 14px; z-index: 1; display: flex; align-items: center; gap: 4px; height: 30px; margin-top: 6px; padding: 0 12px; border-radius: 15px 15px 15px 5px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(17, 24, 39, .1); pointer-events: none; visibility: hidden; transform-origin: 0 100%; }
.kdots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #9AA3AE; }
.has-js .ph-set.in .phone-scr > .kchip { animation: kChip .24s var(--ease) calc(var(--k, 0) * .33s + .18s) backwards; }
.has-js .ph-set.in .phone-scr > .kdots { animation: kType .3s linear calc(var(--k, 0) * .33s + .24s) both; }
.has-js .ph-set.in .phone-scr > .kdots i { animation: kDot .2s ease-in-out calc(var(--k, 0) * .33s + .26s) both; }
.has-js .ph-set.in .phone-scr > .kdots i + i { animation-delay: calc(var(--k, 0) * .33s + .31s); }
.has-js .ph-set.in .phone-scr > .kdots i + i + i { animation-delay: calc(var(--k, 0) * .33s + .36s); }
.has-js .ph-set.in .phone-scr > img { transform-origin: 0 100%; animation: kPop .32s var(--pop) calc(var(--k, 0) * .33s + .5s) backwards; }

/* 서류 — 겹쳐 올라온 뒤 부채꼴로 펼쳐짐 */
.has-js .docs .fan a { opacity: 0; transform: translateY(24px); }
.has-js .docs.in .fan a { opacity: 1; }
.has-js .docs.in .fan .f1 { transform: translateX(calc(var(--fx) * -1)) rotate(calc(var(--fr) * -1)); transition-delay: .25s; }
.has-js .docs.in .fan .f2 { transform: translateY(-3%); transition-delay: .1s; }
.has-js .docs.in .fan .f3 { transform: translateX(var(--fx)) rotate(var(--fr)); transition-delay: .4s; }
.has-js .docs.in .fan:hover .f1 { transform: translateX(calc(var(--fxh) * -1)) rotate(calc(var(--frh) * -1)); transition-delay: 0s; }
.has-js .docs.in .fan:hover .f3 { transform: translateX(var(--fxh)) rotate(var(--frh)); transition-delay: 0s; }

/* 요금 — 차례로 올라오고 체크가 그려짐 (끝난 뒤엔 손대면 위로 뜸) */
.has-js .h-tier.rv:not(.in), .has-js .wc.rv:not(.in) { opacity: 0; }
.has-js .h-tier.rv.in { animation: rise .9s var(--ease) backwards; }
.has-js .h-tier.rv.in:nth-child(2) { animation-delay: .1s; }
.has-js .h-tier.rv.in:nth-child(3) { animation-delay: .2s; }
.has-js .h-tier.in .draw { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease) .5s; }
.has-js .h-tier.in li:nth-child(2) .draw { transition-delay: .65s; }
.has-js .h-tier.in li:nth-child(3) .draw { transition-delay: .8s; }

/* 걱정 — 말풍선이 튀고 → 본문 */
.has-js .wc.rv.in { animation: rise .8s var(--ease) backwards; }
.has-js .wc .bub { opacity: 0; transform: scale(.85); transition: transform .5s var(--pop), opacity .3s var(--ease); }
.has-js .wc.in .bub { opacity: 1; transform: none; transition-delay: .2s; }
.has-js .wc > :not(.bub) { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.has-js .wc.in > :not(.bub) { opacity: 1; transform: none; transition-delay: .4s; }
@media (min-width: 720px) {
  .has-js .wc.rv.in:nth-child(even) { animation-delay: .08s; }
}

/* 질문 — 펼치면 답이 올라옴 */
.has-js details[open] .ans { animation: ansIn .45s var(--ease) both; }

/* 마지막 문의 — 흩어진 타일이 모이고 초록 타일이 튐 */
.has-js .cb-art rect { transform-box: fill-box; transform-origin: center; opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.8); transition: transform 1.1s var(--ease), opacity .8s var(--ease); }
.has-js .cb-art.in rect { opacity: 1; transform: none; }
.has-js .cb-art.in rect.up { animation: gPop .6s var(--pop) 1.1s both; }
.has-js .cb-art rect:nth-child(2) { transition-delay: .03s; }
.has-js .cb-art rect:nth-child(3) { transition-delay: .06s; }
.has-js .cb-art rect:nth-child(4) { transition-delay: .09s; }
.has-js .cb-art rect:nth-child(5) { transition-delay: .12s; }
.has-js .cb-art rect:nth-child(6) { transition-delay: .15s; }
.has-js .cb-art rect:nth-child(7) { transition-delay: .18s; }
.has-js .cb-art rect:nth-child(8) { transition-delay: .21s; }
.has-js .cb-art rect:nth-child(9) { transition-delay: .24s; }
.has-js .cb-art rect:nth-child(10) { transition-delay: .27s; }
.has-js .cb-art rect:nth-child(11) { transition-delay: .3s; }

/* 「움직임 줄이기」 — 모든 애니메이션·전환을 끄고 최종 모습만 */
@media (prefers-reduced-motion: reduce) {
  .has-js *, .has-js *::before, .has-js *::after { animation: none !important; transition: none !important; }
  .has-js .h-reveal, .has-js .rv, .has-js .sh > *, .has-js .phone-scr > *, .has-js .wc > *, .has-js .wc .bub, .has-js .docs .fan a, .has-js .cb-art rect { opacity: 1 !important; }
  .has-js .h-reveal, .has-js .sh > *, .has-js .sh .ln > span, .has-js .phone-scr > *, .has-js .wc > *, .has-js .wc .bub, .has-js .cb-art rect, .has-js .endpt { transform: none !important; }
  .has-js .docs .fan .f1 { transform: translateX(calc(var(--fx) * -1)) rotate(calc(var(--fr) * -1)) !important; }
  .has-js .docs .fan .f2 { transform: translateY(-3%) !important; }
  .has-js .docs .fan .f3 { transform: translateX(var(--fx)) rotate(var(--fr)) !important; }
  .has-js .draw { stroke-dashoffset: 0 !important; }
  .has-js .tally mark { background-size: 100% 100% !important; }
  .has-js .marq-t { flex-wrap: wrap; width: auto; transform: none !important; }
  .has-js .marq-t li { white-space: normal; }
  .has-js .steps-fill { transform: none !important; }
  .has-js .btn-fill::after { display: none; }
  .has-js .kdots { display: none !important; }
}

/* 순위 조회 결과 — main.js 가 #rankOut 에 그려 넣는 칸. 모양 · 움직임은 다른 쪽(style.css)과 같게 둔다 */
#rankOut {
  --ink-dark: #111827; --ink: #1F2937; --mid: #636B78; --border: #E5E7EB; --bg-card: #F8F9FA; --white: #FFFFFF;
  --naver: #03C75A; --accent: #111827; --radius-pill: 999px;
  --shadow-s: 0 1px 3px rgba(17, 24, 39, .06); --shadow-m: 0 6px 20px rgba(17, 24, 39, .07);
  --ease: cubic-bezier(.2, .6, .2, 1); --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --dur-xs: .18s; --dur-s: .3s; --dur-m: .5s;
  --fs-small: .98rem; --fs-tiny: .9rem;
  font-size: 1.09rem; line-height: 1.65; color: var(--ink);
}
#rankOut .rank-out { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--border); }
#rankOut .rank-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
#rankOut .rank-head .q { font-size: .85rem; color: var(--mid); }
#rankOut .rank-big { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
#rankOut .rank-big b { font-size: 2.6rem; line-height: 1.05; letter-spacing: -.02em; color: var(--naver); font-variant-numeric: tabular-nums; }
#rankOut .rank-big.miss b { color: var(--ink-dark); font-size: 1.6rem; }
#rankOut .rank-big span { font-size: .9rem; color: var(--mid); }
#rankOut .rank-verdict { margin-top: 10px; font-size: .93rem; color: var(--ink); line-height: 1.6; }
#rankOut .rank-note { margin-top: 10px; padding: 9px 12px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); font-size: .86rem; color: var(--mid); line-height: 1.55; }
#rankOut .rank-note b { color: var(--ink-dark); }
#rankOut .rank-cmp { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: .86rem; }
#rankOut .rank-cmp th, #rankOut .rank-cmp td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: right; }
#rankOut .rank-cmp th:first-child, #rankOut .rank-cmp td:first-child { text-align: left; }
#rankOut .rank-cmp thead th { background: var(--bg-card); color: var(--mid); font-weight: 700; font-size: .8rem; }
#rankOut .rank-cmp td { font-variant-numeric: tabular-nums; color: var(--ink); }
#rankOut .rank-cmp .gap { color: #B45309; font-weight: 700; }
#rankOut .rank-cmp .gap.ok { color: var(--naver); }
#rankOut .rank-top { margin-top: 16px; }
#rankOut .rank-top h4 { font-size: .82rem; color: var(--mid); margin: 0 0 8px; font-weight: 700; }
#rankOut .rank-top ol { margin: 0; padding-left: 20px; }
#rankOut .rank-top li { font-size: .86rem; color: var(--ink); padding: 3px 0; }
#rankOut .rank-top li.me { color: var(--naver); font-weight: 700; }
#rankOut .rank-top li span { color: var(--mid); font-size: .78rem; }
#rankOut .rank-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
#rankOut .rank-err { margin-top: 18px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; font-size: .9rem; color: var(--ink); }
#rankOut .rank-load { margin-top: 18px; font-size: .9rem; color: var(--mid); }
@media (max-width: 720px) {
  #rankOut .rank-big b { font-size: 2.1rem; }
  #rankOut .rank-cmp { font-size: .8rem; }
  #rankOut .rank-cmp th, #rankOut .rank-cmp td { padding: 8px 6px; }
}
/* 본문 글씨 키움(style.css 의 main .rank-* 값) — 같은 무게라 위 줄보다 뒤에 둔다 */
#rankOut .rank-head .q { font-size: .93rem; }
#rankOut .rank-big span { font-size: .98rem; }
#rankOut .rank-verdict { font-size: 1.02rem; }
#rankOut .rank-cmp { font-size: .94rem; }
#rankOut .rank-cmp thead th { font-size: .88rem; }
#rankOut .rank-top h4 { font-size: .9rem; }
#rankOut .rank-top li { font-size: .94rem; }
#rankOut .rank-top li span { font-size: .86rem; }
#rankOut .rank-err, #rankOut .rank-load { font-size: .98rem; }
@media (max-width: 720px) {
  #rankOut .rank-cmp { font-size: .89rem; }
}
/* 결과 칸 단추 — 위 .btn(홈 단추) 값을 되돌리고 style.css 단추 값으로 */
#rankOut .btn {
  position: static; overflow: visible; display: inline-block; height: auto; gap: normal; align-items: normal; justify-content: normal;
  padding: 13px 26px; border-radius: var(--radius-pill); font-weight: 700; text-decoration: none; font-size: var(--fs-small); border: 2px solid var(--ink-dark);
  transition: transform var(--dur-xs) var(--ease), box-shadow var(--dur-xs) var(--ease), background-color var(--dur-xs), color var(--dur-xs);
}
#rankOut .btn:hover { opacity: .85; }
#rankOut .btn-primary { background: var(--ink-dark); color: #fff; }
#rankOut .btn-outline { background: #fff; color: var(--ink-dark); }
@media (hover: hover) and (pointer: fine) {
  #rankOut .btn:hover { opacity: 1; transform: translateY(-2px); box-shadow: var(--shadow-m); }
}
#rankOut .btn:active { transform: translateY(0); box-shadow: var(--shadow-s); }
#rankOut .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* 조회 중 단추 */
.rank-form button[disabled] { background: var(--fill-off); border-color: var(--fill-off); color: var(--tx-2); cursor: progress; }
/* 결과 나타남 */
@keyframes rankIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rankPop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.has-js #rankOut .rank-out { animation: rankIn var(--dur-m) var(--ease) both; }
.has-js #rankOut .rank-out .rank-big { animation: rankIn var(--dur-m) var(--ease) .10s backwards; }
.has-js #rankOut .rank-out .rank-big b { animation: rankPop var(--dur-m) var(--ease-pop) .18s backwards; display: inline-block; }
.has-js #rankOut .rank-out .rank-verdict { animation: rankIn var(--dur-m) var(--ease) .26s backwards; }
.has-js #rankOut .rank-out .rank-cmp { animation: rankIn var(--dur-m) var(--ease) .34s backwards; }
.has-js #rankOut .rank-out .rank-top { animation: rankIn var(--dur-m) var(--ease) .42s backwards; }
.has-js #rankOut .rank-out .rank-cta { animation: rankIn var(--dur-m) var(--ease) .50s backwards; }
.has-js #rankOut .rank-err, .has-js #rankOut .rank-load { animation: rankIn var(--dur-s) var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .has-js #rankOut .rank-out, .has-js #rankOut .rank-out *,
  .has-js #rankOut .rank-err, .has-js #rankOut .rank-load {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  #rankOut .btn { transition: none !important; }
}
/* 꼬리말 소개 — 한 줄에 몰아 쓰던 실적을 숫자 3칸으로 (2026-10-17 대표님 「가독성 안좋지않아? 디벨롭해줘」) */
.ft .ft-tag { font-size: 15px; line-height: 1.6; color: var(--tx-2); }
.ft .ft-stats { display: flex; gap: 0; margin: 18px 0 0; }
.ft .ft-stats li { display: flex; flex-direction: column; gap: 2px; padding: 0 22px; border-left: 1px solid var(--line); }
.ft .ft-stats li:first-child { padding-left: 0; border-left: 0; }
.ft .ft-stats li:last-child { padding-right: 0; } /* 끝 칸 오른 여백은 안 보이는 자리 — 320 폰에서 12px 넘쳤다(2026-10-17) */
@media (max-width: 359px) { .ft .ft-stats li { padding: 0 16px; } }
.ft .ft-stats b { font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--tx); letter-spacing: -.01em; white-space: nowrap; }
.ft .ft-stats span { font-size: 14px; color: var(--tx-3); }
.ft .ft-note { margin-top: 12px; font-size: 14px; color: var(--tx-3); }

/* seo-261017:footer-guides */
/* 꼬리말 「가이드·자료」 칸 (2026-10-17 검색 상위노출 묶음 · apply_seo_261017.py 가 넣는다 — 손으로 고치지 말 것)
   1100px 이상 = 4칸(900px 에서 4칸이면 실적 숫자 칸이 넘친다) · 그 아래 = 가이드 칸만 한 줄 전체 */
@media (min-width: 1100px) { .ft-top.has-guides { grid-template-columns: 1.3fr 1fr .75fr 1.25fr; } }
@media (max-width: 1099px) { .ft-top.has-guides > .ft-guides { grid-column: 1 / -1; } }
@media (min-width: 640px) and (max-width: 1099px) {
  .ft-top.has-guides > .ft-guides ul { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 24px; }
}
/* /seo-261017:footer-guides */