/* ── 검색 존 — 당근 실측을 그대로 옮긴 것 ─────────────────── */
.hero h1{margin:0 auto;max-width:20em}
/* 회전 단어 — 높이를 고정하고 그 안에서만 움직인다.
   높이가 없으면 span 이 흐름을 벗어나 제목과 따로 뜬다(실제로 그렇게 깨졌다) */

.sform{display:flex;align-items:center;max-width:754px;margin:clamp(22px,2.6vw,34px) auto 0;
  box-shadow:var(--edge), var(--sh-2);
  transition:box-shadow .3s ease-out, transform .44s var(--spring), border-color .2s ease-out;
  height:48px;border:1px solid var(--line);border-radius:var(--r-pill);
  padding-left:20px;background:var(--bg);
  transition:border-color .2s ease-out, box-shadow .24s ease-out}
.sform:hover{box-shadow:var(--edge), var(--sh-3)}
/* 물어보려고 손을 얹는 순간 검색창이 «올라온다» — 이 사이트에서 가장 중요한 상호작용이다 */
.sform:focus-within{border-color:var(--ink-3);transform:translateY(-2px);
  box-shadow:var(--edge), var(--sh-4), 0 0 0 3px rgba(26,28,32,.07)}
.scat{position:relative;flex:none}
.scat button{background:none;border:0;font:inherit;font-size:15px;font-weight:700;
  color:var(--ink);cursor:pointer;padding:0 12px 0 0;display:flex;align-items:center;gap:5px;
  height:48px;white-space:nowrap}
.scat button svg{transition:transform .32s var(--spring)}
.scat[aria-expanded=true] button svg{transform:rotate(180deg)}
.scat-menu{position:absolute;top:52px;left:-14px;min-width:172px;background:var(--bg);
  border:1px solid var(--line);border-radius:14px;padding:6px;z-index:40;text-align:left;
  box-shadow:0 4px 8px rgba(26,28,32,.06), 0 18px 40px -18px rgba(26,28,32,.3)}
.scat-menu[hidden]{display:none}
.scat-menu button{width:100%;height:auto;padding:10px 12px;border-radius:9px;font-size:14.5px;
  font-weight:600;color:var(--ink-2);justify-content:flex-start}
.scat-menu button:hover{background:var(--bg-2);color:var(--ink)}
.scat-menu button[aria-current=true]{color:var(--ink);font-weight:700}
.sdiv{width:1px;height:20px;background:var(--line);flex:none;margin-right:14px}
.sform input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;
  font-size:16px;font-weight:400;color:var(--ink);height:48px}
.sform input::placeholder{color:var(--ink-3)}
.sgo{flex:none;width:36px;height:36px;margin-right:6px;border-radius:50%;border:0;
  background:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(28,38,56,.18), 0 4px 10px rgba(28,38,56,.16);
  transition:transform .1s ease-out, background .22s ease-out, box-shadow .24s ease-out}
.sgo:hover{box-shadow:0 2px 4px rgba(28,38,56,.22), 0 8px 18px rgba(28,38,56,.2)}
.sgo:not(:active){transition:transform .44s var(--spring-b), background .22s ease-out,
  box-shadow .24s ease-out}
.sgo:not(:active){transition-timing-function:var(--spring);transition-duration:.4s}
.sgo:active{transform:scale(.9)}
.sgo:hover{background:#2E3238}

/* 인기 검색어 — 칩이 아니라 텍스트 링크 (당근 방식) */
.pop{margin:16px auto 0;max-width:820px;display:flex;flex-wrap:wrap;justify-content:center;
  gap:4px 0;font-size:14px;line-height:1.6}
.pop .lb{color:var(--pop-ink);font-weight:700;margin-right:10px}
.pop a{color:var(--ink-2);padding:2px 9px;border-radius:6px;
  transition:background .16s ease-out,color .16s ease-out}
.sugs{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.wc .sugs{margin-top:12px}
.sug{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:var(--edge-s), var(--sh-1);
  padding:9px 15px;transition:transform .1s ease-out, border-color .2s ease-out}
.sug:not(:active){transition:transform .4s var(--spring), border-color .2s ease-out}
.sug:hover{border-color:var(--ink-3);color:var(--ink);box-shadow:var(--edge), var(--sh-2);transform:translateY(-1px)}
.sug:active{transform:scale(.97)}
.pop a:hover{background:var(--bg-2);color:var(--ink)}

/* ── 배너 ────────────────────────────────────────────────── */
/* 더블 베젤 — 바깥 트레이 안에 판이 얹힌 구조. 평면에 선 하나 긋는 것과 다르다. */
.banner{position:relative;border-radius:22px;margin-top:0;
  aspect-ratio:1080/240;display:flex;align-items:center;
  background:var(--bg-2);padding:7px;text-decoration:none;color:inherit;
  box-shadow:var(--edge-s), var(--sh-1);
  transition:transform .1s ease-out, box-shadow .3s ease-out}
.banner:not(:active){transition:transform .44s var(--spring-b), box-shadow .3s ease-out}
.banner::before{content:'';position:absolute;inset:7px;border-radius:15px;
  background:var(--bg);box-shadow:var(--edge), 0 1px 2px rgba(28,38,56,.06);
  transition:box-shadow .3s ease-out}
.banner:hover{transform:translateY(-3px);box-shadow:var(--edge-s), var(--sh-3)}
.banner:hover::before{box-shadow:var(--edge), 0 2px 6px rgba(28,38,56,.09)}
.banner:active{transform:translateY(-1px) scale(.995)}
.banner:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.banner .grid{position:absolute;right:7px;top:7px;height:calc(100% - 14px);width:52%;z-index:2;
  display:flex;align-items:center;justify-content:flex-end;padding-right:clamp(18px,2.4vw,34px);
}
.banner .grid svg{height:70%;width:auto;max-width:100%}
.banner-in{position:relative;z-index:2;padding:0 clamp(24px,3.4vw,44px);text-align:left}
.banner .pill{display:inline-block;color:var(--pop-ink);
  background:linear-gradient(180deg,var(--pop-2),var(--pop));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(107,74,0,.18);
  font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:var(--r-pill);margin-bottom:9px}


/* ── 히어로 ────────────────────────────────────────────────
   레퍼런스 = gumroad.com (서방님 2026-08-27).
   실측: 헤드라인 96px/무게400 · 배경 크림 · 로고 심볼을 «크게 흩뿌림»(img 17개, 화면의 1.82배).
   영상이 아니라 «정지 벡터»다. 그래서 우리 로고를 동전처럼 그려 사방에 앉힌다. */
.hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:min(94svh, 820px);display:flex;align-items:center;
  padding:clamp(56px,8vh,96px) 0;border-bottom:1.5px solid var(--ink)}
.hero > .wrap{position:relative;z-index:3;width:100%}

/* 흩뿌려진 심볼 — 화면을 채우는 것은 여백이 아니라 «물체»다 */
.coins{position:absolute;inset:0;z-index:1;pointer-events:none}
.coin{position:absolute;display:block}
.coin svg{display:block;width:100%;height:100%}
/* 🔴 심볼은 헤드라인의 «수직 범위»를 피해야 한다.
   좌우 여백만 피하면 안 된다 — 큰 헤드라인은 화면 폭을 거의 다 쓰기 때문에
   좌우로는 피할 자리가 없다. 위쪽 띠(0~22%)와 아래쪽 띠(66~100%)에만 앉힌다.
   그리고 좌표는 % 가 아니라 «음수 px 상한»으로 잡아 좁은 화면에서 밖으로 안 새게 한다. */
.c1{left:-42px;top:70%;width:clamp(96px,13vw,180px);aspect-ratio:1;transform:rotate(-14deg)}
.c2{left:4%;top:2%;width:clamp(62px,8vw,104px);aspect-ratio:1;transform:rotate(21deg)}
.c3{right:-38px;top:3%;width:clamp(84px,11vw,146px);aspect-ratio:1;transform:rotate(9deg)}
.c4{right:2%;top:72%;width:clamp(88px,12vw,164px);aspect-ratio:1;transform:rotate(-26deg)}
.c5{left:22%;bottom:-14px;width:clamp(56px,7vw,92px);aspect-ratio:1;transform:rotate(33deg)}
.c6{right:24%;bottom:-10px;width:clamp(64px,8.5vw,110px);aspect-ratio:1;transform:rotate(-8deg)}
.c7{left:26%;top:-16px;width:clamp(52px,6vw,80px);aspect-ratio:1;transform:rotate(16deg)}
.c8{right:29%;top:-10px;width:clamp(48px,5.5vw,72px);aspect-ratio:1;transform:rotate(-19deg)}
@media(max-width:900px){ .c2,.c5,.c7,.c8{display:none} }
@media(max-width:560px){ .c3,.c6{display:none} }

.hero h1{margin:0 0 clamp(18px,2.2vw,26px);text-align:center;
  font-size:clamp(36px,5.4vw,72px);font-weight:600;line-height:1.06;
  letter-spacing:-.04em;color:var(--ink)}
.hero-sub{text-align:center;margin:0 auto clamp(26px,3.2vw,38px);max-width:32em;
  font-size:clamp(15px,1.2vw,18px);line-height:1.65;color:var(--ink-2)}
.hero-sub b{color:var(--ink);font-weight:600}

/* ── 분야 버튼 — 서방님 2026-08-27
   「검색창 밑에 통화녹음 배우자휴대폰등 버튼이 있어야 가독성이 좋다」 ────── */
.cats{display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(7px,.9vw,12px);
  margin:clamp(20px,2.4vw,30px) auto 0;max-width:1000px}
.cat{display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:16px 6px 14px;border-radius:var(--r);text-decoration:none;color:var(--ink);
  background:var(--bg-2);border:1.5px solid var(--ink);box-shadow:var(--sh-hard-s);
  transition:transform .1s ease-out, box-shadow .1s ease-out, background .18s ease-out}
.cat:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-hard);background:var(--pop-3)}
.cat:active{transform:translate(2px,2px);box-shadow:0 0 0 #000}
.cat:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cat i{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;border:1.5px solid var(--ink)}
.cat span{font-size:13px;font-weight:600;text-align:center;line-height:1.35;
  letter-spacing:-.015em}

/* ── 검색창 ────────────────────────────────────────────────
   실측: 각진 모서리 + 검정 테두리. 754×48 기하는 당근 실측을 그대로 지킨다. */
.sform{display:flex;align-items:center;max-width:760px;margin:0 auto;height:56px;
  background:var(--bg-2);border:1.5px solid var(--ink);border-radius:var(--r-pill);
  padding-left:22px;box-shadow:var(--sh-hard-s);
  transition:transform .1s ease-out, box-shadow .16s ease-out}
.sform:focus-within{transform:translate(-1px,-1px);box-shadow:var(--sh-hard)}
.scat{position:relative;flex:none}
.scat button{background:none;border:0;font:inherit;font-size:15px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:7px;padding-right:14px;height:54px;
  color:var(--ink)}
.scat button svg{transition:transform .3s var(--spring)}
.scat[aria-expanded=true] button svg{transform:rotate(180deg)}
.scat-menu{position:absolute;top:58px;left:-16px;min-width:184px;background:var(--bg-2);
  border:1.5px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh-hard);
  padding:6px;z-index:40}
.scat-menu[hidden]{display:none}
.scat-menu button{width:100%;height:auto;padding:11px 13px;border-radius:var(--r);
  font-size:15px;font-weight:500;color:var(--ink-2);text-align:left;display:block}
.scat-menu button:hover{background:var(--pop-3);color:var(--ink)}
.scat-menu button[aria-current=true]{color:var(--ink);font-weight:700}
.sdiv{width:1.5px;height:24px;background:var(--ink);flex:none;opacity:.22}
.sform input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;
  font-size:16.5px;font-weight:400;height:54px;padding:0 16px;color:var(--ink)}
.sform input::placeholder{color:var(--ink-3)}
.sgo{width:42px;height:42px;margin-right:6px;border-radius:50%;flex:none;cursor:pointer;
  background:var(--pop);border:1.5px solid var(--ink);display:flex;align-items:center;
  justify-content:center;transition:transform .1s ease-out, background .18s ease-out}
.sgo:hover{background:var(--pop-2)}
.sgo:active{transform:scale(.92)}

/* ── 층 ────────────────────────────────────────────────── */
.band{padding:clamp(56px,6.4vw,96px) 0;border-bottom:1.5px solid var(--ink)}
.band-cream{background:var(--pop-3)}
.band-gray{background:var(--bg-3)}
.eyebrow{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.eyebrow::before{content:'';display:inline-block;width:22px;height:8px;border-radius:99px;
  background:var(--pop);border:1.5px solid var(--ink);vertical-align:middle;margin-right:10px;
  transform:translateY(-1px)}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:clamp(24px,3vw,38px)}
.lnk-r{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;
  padding:11px 20px;border-radius:var(--r-pill);border:1.5px solid var(--ink);
  background:var(--bg-2);box-shadow:var(--sh-hard-s);
  transition:transform .1s ease-out, box-shadow .1s ease-out, background .18s}
.lnk-r:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-hard);background:var(--pop)}
.lnk-r:active{transform:translate(2px,2px);box-shadow:0 0 0 #000}

/* ── 판정 카드 ─────────────────────────────────────────── */
.wall{display:grid;gap:clamp(12px,1.4vw,18px);grid-template-columns:repeat(2,1fr)}
.wc{position:relative;padding:22px 22px 20px 24px;border-radius:var(--r);
  background:var(--bg-2);border:1.5px solid var(--ink);box-shadow:var(--sh-hard-s);
  transition:transform .1s ease-out, box-shadow .1s ease-out}
.wc:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-hard-2)}
.wc.y{background:var(--yes-bg)}
.wc.n{background:var(--no-bg)}
.wc .m{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--bg-2);
  border:1.5px solid var(--ink);margin-bottom:12px}
.wc p{margin:0;font-size:17px;font-weight:600;line-height:1.42;letter-spacing:-.024em}
.wc .s{display:block;margin-top:10px;font-size:13.5px;font-weight:500;line-height:1.5;
  color:var(--ink-2)}

/* ── 숫자 ──────────────────────────────────────────────── */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
.fig{padding:clamp(26px,3vw,38px) clamp(22px,2.4vw,30px);border-radius:var(--r-lg);
  background:var(--bg-2);border:1.5px solid var(--ink);box-shadow:var(--sh-hard-s);
  transition:transform .1s ease-out, box-shadow .1s ease-out}
.fig:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-hard-2)}
/* 실측: 최대 글자가 본문의 12배. 숫자야말로 크게 쓸 자리다. */
.fig b{display:block;font-size:clamp(56px,7.4vw,116px);font-weight:600;line-height:.92;
  letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.fig b em{font-style:normal;font-size:.3em;font-weight:600;margin-left:4px;
  letter-spacing:-.02em}
.fig .fl{display:block;margin-top:18px;font-size:16px;font-weight:600;letter-spacing:-.02em}
.fnote{margin:clamp(20px,2.4vw,30px) 0 0;font-size:14.5px;color:var(--ink-2)}

/* ── 자료 카드 ─────────────────────────────────────────── */
.docs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px);margin-top:10px}
.doc{display:block;padding:0 0 28px;border-radius:var(--r-lg);background:var(--bg-2);
  border:1.5px solid var(--ink);overflow:hidden;box-shadow:var(--sh-hard-s);
  transition:transform .1s ease-out, box-shadow .1s ease-out}
.doc:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-hard-2)}
.doc-fig{display:block;height:190px;position:relative;overflow:hidden;
  border-bottom:1.5px solid var(--ink)}
.doc-a{background:var(--pop)}
.doc-b{background:var(--t4)}
.doc b{display:block;margin:24px 26px 0;font-size:26px;font-weight:600;letter-spacing:-.032em}
.doc .dt{display:block;margin:12px 26px 0;font-size:15px;line-height:1.62;color:var(--ink-2)}
.doc-go{display:inline-block;margin:18px 26px 0;font-size:15px;font-weight:600;
  padding:10px 18px;border-radius:var(--r-pill);border:1.5px solid var(--ink);
  background:var(--bg);box-shadow:var(--sh-hard-s)}
.doc:hover .doc-go{background:var(--pop)}
/* 진단 카드 미리보기 */
.doc-b .prog{position:absolute;left:26px;right:26px;top:38px;display:flex;gap:6px}
.doc-b .prog i{height:8px;flex:1;border-radius:99px;background:var(--bg-2);
  border:1.5px solid var(--ink)}
.doc-b .prog i:first-child{background:var(--ink)}
.doc-b .qtxt{position:absolute;left:26px;right:26px;top:70px;font-size:19px;font-weight:600;
  letter-spacing:-.026em;line-height:1.4}
/* 증거 카드 미리보기 */
.doc-a .chk{position:absolute;left:26px;right:26px;display:flex;align-items:center;gap:12px;
  font-size:15.5px;font-weight:600}
.doc-a .chk:nth-of-type(1){top:40px}
.doc-a .chk:nth-of-type(2){top:82px}
.doc-a .chk:nth-of-type(3){top:124px}
.doc-a .chk i{width:24px;height:24px;border-radius:5px;flex:none;background:var(--bg-2);
  border:1.5px solid var(--ink);position:relative}
.doc-a .chk i::after{content:'';position:absolute;left:7px;top:4px;width:6px;height:11px;
  border-right:2.6px solid var(--yes);border-bottom:2.6px solid var(--yes);transform:rotate(42deg)}
.doc-a .chk i.x::after{left:10px;top:4px;width:0;height:12px;
  border-right:2.6px solid var(--no);border-bottom:0;transform:rotate(45deg)}
.doc-a .chk i.x::before{content:'';position:absolute;left:10px;top:4px;width:0;height:12px;
  border-right:2.6px solid var(--no);transform:rotate(-45deg)}

/* ── 신뢰 한 줄 ────────────────────────────────────────── */
.trust{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,48px);flex-wrap:wrap}

/* ── 추천 버튼 ─────────────────────────────────────────── */
.sugs{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.sug{font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;color:var(--ink);
  background:var(--bg-2);border:1.5px solid var(--ink);border-radius:var(--r-pill);
  padding:10px 17px;box-shadow:var(--sh-hard-s);
  transition:transform .1s ease-out, box-shadow .1s ease-out, background .18s}
.sug:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-hard);background:var(--pop)}
.sug:active{transform:translate(2px,2px);box-shadow:0 0 0 #000}

/* ── 푸터 ──────────────────────────────────────────────── */
.ft{background:var(--ink);color:var(--bg);padding:clamp(48px,5.4vw,76px) 0 32px}
.ft a{color:var(--bg)}
.ft .hd-mark b{color:var(--bg)}
.ft-in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:clamp(20px,2.6vw,40px)}
.ft-col b{display:block;font-size:14px;font-weight:700;margin-bottom:14px;color:var(--bg)}
.ft-col a,.ft-col span{display:block;font-size:15px;color:#C9C9C2;margin-bottom:10px;
  line-height:1.55}
.ft-col a:hover{color:var(--pop)}
.ft .tx-c{color:#C9C9C2}
.ft-bot{margin-top:clamp(28px,3vw,44px);padding-top:20px;border-top:1px solid #3A3A36;
  font-size:13.5px;color:#8E8E88}

@media(max-width:1000px){
  .cats{grid-template-columns:repeat(4,1fr)}
  .ft-in{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .wall{grid-template-columns:1fr}
  .figs{grid-template-columns:1fr}
  .docs{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr}
  .sform{height:52px;padding-left:16px}
  .sform input{height:48px;font-size:16px;padding:0 12px}
  .sgo{width:38px;height:38px}
}

/* ══ 홍보 블록 ═══════════════════════════════════════════ */

/* ── 거대 숫자 ─────────────────────────────────────────────
   Gumroad 는 «$2,100,528» 하나를 192px 로 세운다.
   숫자를 셋으로 나눠 놓으면 눈이 어디를 볼지 몰라 뜻이 안 보인다(서방님 지적). */
.big-num{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,64px);
  align-items:center}
.bn-l{min-width:0}
.bn{display:block;font-size:clamp(88px,13.5vw,208px);font-weight:600;line-height:.84;
  letter-spacing:-.06em;font-variant-numeric:tabular-nums;margin:6px 0 0;color:var(--ink)}
.bn em{font-style:normal;font-size:.3em;font-weight:600;letter-spacing:-.02em;margin-left:2px}
.bn-say{margin:0;font-size:clamp(22px,2.6vw,34px);font-weight:600;line-height:1.34;
  letter-spacing:-.03em}
.bn-say b{font-weight:600;background:linear-gradient(180deg,transparent 62%,var(--pop) 62%)}
.bn-sub{margin:16px 0 22px;font-size:15.5px;line-height:1.68;color:var(--ink-2);max-width:32em}
.bn-sub b{font-weight:600;color:var(--ink)}

/* ── 두려움을 말하고 뒤집기 ────────────────────────────────
   Gumroad: 「Don't take risks. That's scary!」 → 「Place small bets. That's exciting!」 */
.flip{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px);margin-top:8px}
.fl{padding:clamp(24px,2.8vw,34px);border-radius:var(--r-lg);border:1.5px solid var(--ink);
  box-shadow:var(--sh-hard-s)}
.fl-a{background:var(--bg-3)}
.fl-b{background:var(--pop)}
.fl b{display:block;font-size:clamp(20px,2.2vw,28px);font-weight:600;line-height:1.34;
  letter-spacing:-.028em}
.fl p{margin:12px 0 0;font-size:15px;line-height:1.66;color:var(--ink-2)}
.fl-b p{color:#4A3400}

/* ── 공정 루프 ─────────────────────────────────────────────
   서방님이 짚어 주신 Gumroad 의 순환 다이어그램.
   🔴 애니메이션 금지이므로 «정지 SVG» 로만 그린다 — 시계방향은 화살표가 말한다. */
.loop-q{margin:0 0 clamp(18px,2.2vw,26px);text-align:center;
  font-size:clamp(22px,2.6vw,34px);font-weight:600;letter-spacing:-.03em}
.loop{max-width:1000px;margin:0 auto}
.loop-svg{display:block;width:100%;height:auto}
.loop-svg .lp{font-family:inherit;font-size:23px;font-weight:600;fill:#000;letter-spacing:-.02em}
.loop-svg a{cursor:pointer}
.loop-svg a:hover .lp{fill:#3A2900;text-decoration:underline}
.loop-say{max-width:640px;margin:clamp(26px,3.2vw,40px) auto 0;text-align:center}
.loop-say p{margin:14px 0 0;font-size:16px;line-height:1.68;color:var(--ink-2)}
.loop-say p b{color:var(--ink);font-weight:600}
.loop-btns{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:24px!important}

@media(max-width:860px){ .big-num{grid-template-columns:1fr;gap:18px} }
@media(max-width:760px){ .flip{grid-template-columns:1fr} }
@media(max-width:700px){
  .loop-svg .lp{font-size:30px}
  .loop-say{text-align:left}
  .loop-btns{justify-content:flex-start}
}

/* ══ 기능 블록 ═══════════════════════════════════════════
   서방님 2026-08-27 「모든게 하나하나 본연의 기능을 하는것들로 채운다」 */

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* 판정 카드가 링크가 됐다 — 누르면 근거로 간다 */
.wc{display:block;text-decoration:none;color:inherit}
.wc-go{display:block;margin-top:12px;font-size:13px;font-weight:600;color:var(--ink);
  opacity:0;transform:translateY(4px);transition:opacity .2s ease-out, transform .3s ease-out}
.wc:hover .wc-go{opacity:1;transform:none}

/* 위자료 간이 계산기 */
.calc{margin:22px 0 20px;padding:20px 22px;border-radius:var(--r);background:var(--bg-2);
  border:1.5px solid var(--ink);box-shadow:var(--sh-hard-s);max-width:26em}
.calc label{display:block;font-size:14px;font-weight:600;margin-bottom:11px}
.calc-row{display:flex;align-items:center;gap:9px}
.calc-row input{flex:1;min-width:0;height:46px;padding:0 14px;font:inherit;font-size:17px;
  font-weight:600;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--bg);
  color:var(--ink);outline:0;font-variant-numeric:tabular-nums}
.calc-row input:focus{box-shadow:var(--sh-hard-s)}
.calc-unit{font-size:15px;font-weight:600;flex:none}
.calc-row button{flex:none;height:46px;padding:0 18px;font:inherit;font-size:15px;
  font-weight:600;cursor:pointer;border:1.5px solid var(--ink);border-radius:var(--r);
  background:var(--pop);color:var(--ink);box-shadow:var(--sh-hard-s);
  transition:transform .1s ease-out, box-shadow .1s ease-out}
.calc-row button:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-hard)}
.calc-row button:active{transform:translate(2px,2px);box-shadow:0 0 0 #000}
.calc-out{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.calc-out b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* 푸터 — 검정 면 위의 기능들 */
.ft{background:var(--ink);color:var(--bg);padding:clamp(48px,5.4vw,76px) 0 30px}
.ft a{color:var(--bg);text-decoration:none}
.ft-top{display:grid;grid-template-columns:minmax(280px,1fr) 1.5fr;
  gap:clamp(30px,4vw,64px);padding-bottom:clamp(34px,4vw,52px);
  border-bottom:1px solid #33332F}
.ft-search h2{margin:0 0 16px;font-size:clamp(22px,2.4vw,30px);font-weight:600;
  letter-spacing:-.03em;line-height:1.3;color:var(--bg)}
.fs-form{display:flex;gap:9px}
.fs-form input{flex:1;min-width:0;height:50px;padding:0 16px;font:inherit;font-size:16px;
  border:1.5px solid #55554F;border-radius:var(--r);background:#111110;color:var(--bg);outline:0}
.fs-form input::placeholder{color:#8E8E88}
.fs-form input:focus{border-color:var(--pop)}
.fs-form button{flex:none;width:56px;height:50px;font-size:20px;cursor:pointer;
  border:1.5px solid var(--pop);border-radius:var(--r);background:var(--pop);color:#000;
  transition:transform .1s ease-out}
.fs-form button:active{transform:scale(.94)}
.ft-recent{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;
  font-size:13.5px;color:#C9C9C2}
.ft-recent-l{font-weight:600;color:#8E8E88}
.ft-recent-i a{color:var(--pop);text-decoration:underline;margin-right:12px}
.ft-recent button{background:none;border:0;color:#8E8E88;font:inherit;font-size:13px;
  cursor:pointer;text-decoration:underline;padding:0}
.ft-recent button:hover{color:var(--bg)}
.ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px)}
.ft-col b{display:block;font-size:13.5px;font-weight:700;margin-bottom:14px;color:var(--pop)}
.ft-col a{display:block;font-size:14.5px;color:#C9C9C2;margin-bottom:10px;line-height:1.5}
.ft-col a:hover{color:var(--bg);text-decoration:underline}
.ft-tools{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:26px 0 0}
.ft-mark{display:flex;align-items:center;gap:9px}
.ft-mark b{font-size:17px;font-weight:700;letter-spacing:-.03em;color:var(--bg)}
.ft-btns{display:flex;gap:9px;flex-wrap:wrap}
.ft-btns button{font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  padding:11px 17px;border-radius:var(--r-pill);border:1.5px solid #55554F;
  background:transparent;color:var(--bg);transition:background .18s, border-color .18s, transform .1s}
.ft-btns button:hover{background:var(--pop);color:#000;border-color:var(--pop)}
.ft-btns button:active{transform:scale(.96)}
.ft-bot{margin:24px 0 0;font-size:13px;line-height:1.6;color:#8E8E88}

@media(max-width:900px){
  .ft-top{grid-template-columns:1fr}
  .ft-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){ .ft-cols{grid-template-columns:1fr} }

/* ══ 파이프라인 ═════════════════════════════════════════
   서방님 2026-08-27 「고객을 더 오래 체류시키고 더많은 버튼을눌러서
   유료로 탐정을 사용하게해야 우리에게 수익이들어온다」
   계산에서 끝내지 않고 «그 돈을 받으려면 무엇이 필요한가»로 이어 붙인다. */

.next-step{margin:20px 0 22px;padding:20px 22px;border-radius:var(--r);
  background:var(--bg-2);border:1.5px solid var(--ink);box-shadow:var(--sh-hard-s);
  max-width:30em}
.ns-say{margin:0 0 16px;font-size:15.5px;line-height:1.66;color:var(--ink)}
.ns-say b{font-weight:700;background:linear-gradient(180deg,transparent 60%,var(--pop) 60%)}
.ns-btns{display:flex;gap:9px;flex-wrap:wrap}
.ns-btns .btn{font-size:15px;padding:12px 20px}

/* 자료 진단 — 파이프라인 끝단 */
.ask{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,60px);align-items:start}
.ask-say{margin:14px 0 0;font-size:16px;line-height:1.68;color:var(--ink-2);max-width:26em}
.ask-r{padding:clamp(24px,2.8vw,32px);border-radius:var(--r-lg);background:var(--bg-2);
  border:1.5px solid var(--ink);box-shadow:var(--sh-hard)}
.ask-q{margin:0 0 14px;font-size:15px;font-weight:700}
.ask-chips{display:flex;flex-wrap:wrap;gap:9px}
.ask-chips button{font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  padding:11px 17px;border-radius:var(--r-pill);border:1.5px solid var(--ink);
  background:var(--bg);color:var(--ink);box-shadow:var(--sh-hard-s);
  transition:transform .1s ease-out, box-shadow .1s ease-out, background .18s}
.ask-chips button:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-hard)}
.ask-chips button[aria-pressed=true]{background:var(--pop)}
.ask-chips button:active{transform:translate(2px,2px);box-shadow:0 0 0 #000}
.ask-out{margin-top:20px;padding-top:18px;border-top:1.5px solid var(--line-soft)}
.ask-out p{margin:0;font-size:15px;line-height:1.68;color:var(--ink-2)}
.ask-out b{color:var(--ink);font-weight:700}
.ask-meter{display:flex;gap:5px;margin:0 0 14px}
.ask-meter i{height:9px;flex:1;border-radius:99px;background:var(--bg-3);
  border:1.5px solid var(--ink)}
.ask-meter i.on{background:var(--pop)}
.ask-btns{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
@media(max-width:900px){ .ask{grid-template-columns:1fr} }

/* 푸터 마지막 줄 — 해명이 아니라 다음 행동 */
.ft-bot a{color:var(--pop);text-decoration:underline;margin-left:6px}
.ft-bot b{color:var(--bg);font-weight:600}
.ft-src{display:block;margin-top:10px;font-size:12.5px;color:#8F8F87}

/* 헤더의 맡기기 — 한 번에 눈에 띄어야 한다 */
.hd-cta{background:var(--pop);border:1.5px solid var(--ink);border-radius:var(--r-pill);
  box-shadow:var(--sh-hard-s);font-weight:700;padding:9px 16px;margin-left:6px}
.hd-cta:hover{background:var(--pop-2);color:var(--ink);
  transform:translate(-1px,-1px);box-shadow:var(--sh-hard)}

/* 평화로운 일러스트 (서방님 지시로 Higgsfield 생성) */
.scene{display:block;width:100%;height:auto;border-top:1.5px solid var(--ink)}

/* ── 판정 카드에 그림 칸 ────────────────────────────────────
   서방님 2026-08-27 「각 박스안에 우측에는 빈공간이 너무 많으니까」
   그림 6개를 낱장으로 부르지 않고 «조각 시트» 한 장을 잘라 쓴다 —
   요청이 1번이고, 여섯 개의 결이 저절로 같아진다. */
.wc{display:grid;grid-template-columns:1fr 108px;gap:14px;align-items:center}
.wc-txt{display:block;min-width:0}
.wc .m{display:inline-flex;margin-bottom:12px}
.wc-t{display:block;font-size:17px;font-weight:600;line-height:1.42;letter-spacing:-.024em}
.wc-pic{display:block;width:108px;height:96px;border-radius:12px;
  background-image:url(img/cards.jpg);
  background-size:300% 200%;      /* 3열 × 2행 */
  background-repeat:no-repeat;
  transition:transform .38s var(--spring-b)}
.wc:hover .wc-pic{transform:scale(1.05) rotate(-2deg)}
.wc-pic.p0{background-position:0%   0%}
.wc-pic.p1{background-position:50%  0%}
.wc-pic.p2{background-position:100% 0%}
.wc-pic.p3{background-position:0%   100%}
.wc-pic.p4{background-position:50%  100%}
.wc-pic.p5{background-position:100% 100%}
@media(max-width:520px){
  .wc{grid-template-columns:1fr 76px}
  .wc-pic{width:76px;height:72px}
}

/* ── 두려움 뒤집기 + 가운데 안내인 ─────────────────────────
   서방님 2026-08-27 「좌우 박스 사이를 벌리고 센터에 궁금한 얼굴의 사람을,
   마우스를 올린 쪽으로 고개를 돌리게」
   3방향을 한 장에서 잘라 냈으므로 세 컷의 캐릭터가 완전히 같다.
   전환은 «갈아 끼우기»다 — 영상이 아니라 자세가 바뀔 뿐이다. */
.flip{display:grid;grid-template-columns:1fr clamp(150px,15vw,210px) 1fr;
  gap:clamp(24px,4vw,64px);align-items:center;margin-top:8px}
.looker{position:relative;aspect-ratio:1;align-self:center}
.lk{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:scale(.97);
  transition:opacity .22s ease-out, transform .42s var(--spring-b)}
.lk-c{opacity:1;transform:none}
.flip.look-l .lk-c,.flip.look-r .lk-c{opacity:0;transform:scale(.97)}
.flip.look-l .lk-l{opacity:1;transform:none}
.flip.look-r .lk-r{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){ .lk{transition:none} }
@media(max-width:860px){
  .flip{grid-template-columns:1fr;gap:16px}
  .looker{display:none}
}

/* ── 60% 섹션의 일상 그림 ──────────────────────────────────
   서방님 2026-08-27 「좌측공간엔 작은 일러스트 우측은 2~3개」
   숫자만 크게 놓으면 왼쪽 아래가 비고, 오른쪽은 글만 남아 딱딱해진다.
   평범한 하루를 보내는 사람을 놓아 «이 숫자가 누구 얘기인지»를 눈으로 잇는다. */
.day-one{display:block;width:clamp(120px,13vw,190px);height:auto;margin:18px 0 0;
  border-radius:var(--r);border:1.5px solid var(--ink);box-shadow:var(--sh-hard-s);
  transition:transform .42s var(--spring-b)}
.day-one:hover{transform:translateY(-3px) rotate(-1.5deg)}
.day-row{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.day-row img{width:clamp(76px,8.4vw,108px);height:auto;border-radius:var(--r-s);
  border:1.5px solid var(--ink);box-shadow:var(--sh-hard-s);
  transition:transform .42s var(--spring-b)}
.day-row img:hover{transform:translateY(-3px) rotate(2deg)}
@media(max-width:860px){ .day-one{width:120px} }

/* ── 공정 루프 (그림 + 얹은 라벨) ──────────────────────────
   그림은 Higgsfield, 글자는 코드 — 생성 모델에 한글을 맡기면 헛글자가 난다. */
.loop{position:relative;max-width:1000px;margin:0 auto}
.loop-img{display:block;width:100%;height:auto}
.loop .lp{position:absolute;transform:translate(-50%,-50%);
  font-size:clamp(14px,1.5vw,20px);font-weight:700;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.loop .lp span{display:inline-block;padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.0);transition:background .18s ease-out, transform .1s ease-out}
.loop .lp:hover span{background:rgba(255,255,255,.85);transform:translateY(-1px)}
.loop .lp:active span{transform:translateY(1px)}
.lp1{left:33%;top:21.5%}
.lp2{left:67%;top:21.5%}
.lp3{left:67%;top:78.5%}
.lp4{left:33%;top:78.5%}

/* ── 분야 아이콘 (그림 시트에서 잘라 쓴다) ────────────────── */
.cat i.ico{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--ink);
  background-image:url(img/icons.jpg);background-size:400% 200%;background-repeat:no-repeat;
  display:block;transition:transform .42s var(--spring-b)}
.cat:hover i.ico{transform:translateY(-2px) scale(1.06)}
.ico.i0{background-position:0%      0%}
.ico.i1{background-position:33.33%  0%}
.ico.i2{background-position:66.66%  0%}
.ico.i3{background-position:100%    0%}
.ico.i4{background-position:0%      100%}
.ico.i5{background-position:33.33%  100%}
.ico.i6{background-position:66.66%  100%}
.ico.i7{background-position:100%    100%}

/* ── 걱정 마당 ─────────────────────────────────────────────
   서방님 2026-08-27 「무작위 위치의 작은 박스에 큰 글씨로 걱정만 담고,
   얹으면 그 박스만 커지며 해소 글귀를 보여주고, 캐릭터는 하단 경계선에」

   🔴 위치는 «고정된 무작위»다. 진짜 난수를 쓰면 새로 고칠 때마다 배치가 흔들려
      방금 본 박스를 다시 못 찾는다. */
.worry-h{margin:0 auto clamp(30px,4vw,52px);text-align:center;
  font-size:clamp(28px,3.8vw,50px);font-weight:600;line-height:1.14;letter-spacing:-.035em}

.worry-yard{position:relative;height:clamp(430px,44vw,540px);max-width:1060px;margin:0 auto}

.wb{position:absolute;font:inherit;cursor:pointer;text-align:left;
  padding:16px 20px;border-radius:var(--r);border:1.5px solid var(--ink);
  background:var(--bg-2);box-shadow:var(--sh-hard-s);
  width:max-content;max-width:250px;
  transition:transform .34s var(--spring-b), box-shadow .26s ease-out,
             background .2s ease-out, max-width .34s var(--spring-b)}
.wb b{display:block;font-size:clamp(16px,1.5vw,20px);font-weight:700;letter-spacing:-.026em;
  line-height:1.34;white-space:nowrap}
.wb span{display:block;max-height:0;opacity:0;overflow:hidden;
  font-size:14.5px;line-height:1.66;color:var(--ink);font-weight:500;
  transition:max-height .34s ease-out, opacity .24s ease-out, margin-top .34s ease-out}
/* 얹으면 그 박스만 커지고 그때 해소 글귀가 나온다 */
.wb:hover,.wb:focus-visible{z-index:5;max-width:360px;background:var(--pop);
  transform:translate(-2px,-3px) rotate(0deg) scale(1.03);box-shadow:var(--sh-hard-2)}
.wb:hover b,.wb:focus-visible b{white-space:normal;color:#000}
.wb:hover span,.wb:focus-visible span{color:#1A1A16}
.wb:hover span,.wb:focus-visible span{max-height:200px;opacity:1;margin-top:10px}
.wb:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* 흩뿌린 자리 — 각도와 크기를 전부 다르게 둬야 «격자»로 안 읽힌다 */
.w1{left:2%;   top:4%;   transform:rotate(-3deg)}
.w2{left:38%;  top:0%;   transform:rotate(2deg)}
.w3{right:3%;  top:7%;   transform:rotate(-2deg)}
.w4{left:12%;  top:34%;  transform:rotate(3deg)}
.w5{right:8%;  top:37%;  transform:rotate(-3deg)}
.w6{left:1%;   top:64%;  transform:rotate(2deg)}
.w7{right:14%; top:66%;  transform:rotate(3deg)}

/* 캐릭터는 아래 경계선에 «걸터선다» */
/* 🔴 생성 이미지의 크림과 페이지 크림이 미세하게 달라 사각형이 도드라졌다.
   배경색을 맞추면 페이지 색이 바뀔 때 또 어긋난다 — 아예 투명 PNG 로 뺐다. */
.worry-guy{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:clamp(88px,9.5vw,132px);height:auto;pointer-events:none}

@media(max-width:820px){
  .worry-yard{height:auto;display:flex;flex-direction:column;gap:11px;padding-bottom:120px}
  .wb{position:static;transform:none!important;max-width:100%;width:100%}
  .wb:hover,.wb:focus-visible{transform:scale(1.01)!important}
  .worry-guy{width:96px}
}

/* ── 60% 섹션의 나무 ───────────────────────────────────────
   서방님 2026-08-27 「우측에 멋진 나무 한그루, 밑에는 흙과 강아지 한마리」
   숫자·설명·그림 셋으로 갈라야 오른쪽이 비지 않는다. */
.big-num.has-tree{grid-template-columns:auto minmax(0,1fr) clamp(190px,20vw,300px)}
.bn-tree{align-self:center}
.bn-tree img{display:block;width:100%;height:auto;border-radius:var(--r-lg);
  border:1.5px solid var(--ink);box-shadow:var(--sh-hard);
  transition:transform .5s var(--spring-b)}
.bn-tree img:hover{transform:translateY(-4px) rotate(-1deg)}
@media(max-width:1100px){
  .big-num,.big-num.has-tree{grid-template-columns:auto minmax(0,1fr)}
  .bn-tree{grid-column:1/-1;justify-self:center;max-width:280px;margin-top:8px}
}
/* 🔴 좁은 화면에서는 «한 열»로 접는다. auto 열을 남겨 두면 큰 숫자 폭이 그대로
   열 너비가 되어 문서가 화면보다 넓어진다(실측 440px vs 390px). */
@media(max-width:860px){
  .big-num,.big-num.has-tree{grid-template-columns:minmax(0,1fr)}
  .bn-l,.bn-r,.bn-tree{min-width:0;max-width:100%}
  .bn{font-size:clamp(72px,22vw,120px)}
}

/* ── 섹션 라벨 (eyebrow) ───────────────────────────────────
   서방님 2026-08-27 「작아서 보이지도 않는다 · 영어로 · 조금 더 크게 · 멋있는 글씨체로」
   13px → 15px, 자간을 넓혀 대문자가 «라벨»로 읽히게. */
.eyebrow{margin:0 0 14px;font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:15px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink)}
.eyebrow::before{content:'';display:inline-block;width:26px;height:9px;border-radius:99px;
  background:var(--pop);border:1.5px solid var(--ink);vertical-align:middle;margin-right:11px;
  transform:translateY(-1px)}