/* 첫 화면 아래 섹션들. 밝은 섹션은 종이색 바탕(--paper) */

.only-mobile { display: none; }
@media (max-width: 860px) {
  .only-mobile { display: inline; }
  .only-desktop { display: none; }
}

/* 2. 지금 보신 이 페이지에 들어간 것들 */
/* 흰 종이: 따뜻한 흰색 위에 실제 종이 스캔 두 장을 곱해 깐다(ambientCG Paper003 구김·명암, Paper001 고운 입자, CC0).
   두 장의 반복 크기를 다르게 해서 같은 무늬가 되풀이되는 티가 나지 않게 한다 */
.is-paper {
  background-color: var(--paper);
  background-image: url("/assets/paper-grain.webp"), url("/assets/paper-crease.webp");
  background-size: 512px 512px, 1024px 1024px;
  background-blend-mode: multiply, multiply;
}

.proof {
  color: var(--ink);
  padding: clamp(80px, 11vw, 160px) var(--gutter) clamp(72px, 9vw, 128px);
}
.proof__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px clamp(40px, 6vw, 96px);
  align-items: start;
}
.proof__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1.22;
  letter-spacing: -0.035em;
  text-wrap: balance;
  position: sticky;
  top: calc(var(--header-h) + 32px);
}

.proof__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}
.proof__item {
  padding: 30px 0 32px;
  border-bottom: 1px solid var(--paper-line);
}
.proof__fact {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.03em;
}
/* 실제 값은 색 대신 빨간 동그라미로 짚는다(블루와 빨강을 한 단어에 겹치지 않게) */
.proof__fact strong { font-weight: 900; }
.proof__why {
  max-width: 36em;
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: #4a4a46;
}

/* 선생님 빨간 색연필(승인된 예외 색). 표시와 손글씨 메모에만 쓰고 버튼·링크에는 쓰지 않는다 */
.mark {
  position: relative;
  display: inline-block;
}
.mark__svg {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}
.mark--circle .mark__svg { inset: -0.32em -0.42em -0.26em -0.42em; width: calc(100% + 0.84em); height: calc(100% + 0.58em); }
.mark--underline .mark__svg { left: -0.08em; right: -0.08em; bottom: -0.3em; width: calc(100% + 0.16em); height: 0.42em; }
.mark__svg path {
  fill: none;
  stroke: var(--pen);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0; /* 그리기 전에는 둥근 선 끝이 점으로 남지 않게 숨긴다 */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .7s cubic-bezier(.55, .05, .3, 1);
}
.mark.is-drawn .mark__svg path { stroke-dashoffset: 0; opacity: .9; }

.pen-note {
  display: inline-block;
  margin-left: 0.6em;
  font-family: "Nanum Pen Script", cursive;
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: 0;
  color: var(--pen);
  transform: rotate(-4deg) translateY(-0.1em);
  opacity: 0;
  transition: opacity .4s ease .65s;
}
.is-drawn ~ .pen-note, .pen-note.is-shown { opacity: 1; }

/* 3. 하소연 → 와이프 → 간단하게 사업합시다! (블루블랙)
   스크롤 길이 동안 무대(stage)를 화면에 붙여 두고 단계별로 진행한다.
   하소연은 박스 없이 글자만 띄운다(키네틱 타이포). 새 문장이 뜨면 앞 문장은 흐려진다 */
.sweep {
  position: relative;
  height: 320vh;
  background: var(--navy);
  color: var(--ink-text);
}
.sweep__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + 8px) var(--gutter) 24px;
}
.sweep__cards {
  width: min(980px, 100%);
  display: grid;
  justify-items: center;
  gap: clamp(20px, 3.2vh, 40px);
}

/* AI 오브: 가는 선으로 된 구가 천천히 돈다(sweep.js가 그린다). 이 섹션에서만 쓰는 보라·파랑 빛 */
.sweep__orb {
  width: clamp(120px, 15vh, 190px);
  height: clamp(120px, 15vh, 190px);
}

.sweep__lines {
  width: 100%;
  display: grid;
  gap: clamp(14px, 2.4vh, 26px);
}
.sweep__line {
  margin: 0;
  text-align: center; /* 오브와 같은 축에 맞춘다 */
  text-wrap: balance;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1), color .4s ease;
  color: #eceef5;
}
.sweep__line.is-in { opacity: 1; transform: none; }
.sweep__line.is-past { opacity: .32; }
.sweep__quote {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.035em;
  word-break: keep-all;
}
.sweep__pen {
  display: inline-block;
  margin-left: 0.3em;
  font-family: "Nanum Pen Script", cursive;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.1;
  color: var(--pen);
  transform: rotate(-2deg);
}
.sweep__estimate {
  display: block;
  margin-top: 6px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.sweep__estimate small { font-size: .5em; margin-left: .1em; font-weight: 800; }
.sweep__cards.is-swept { visibility: hidden; }
.sweep.is-measuring .sweep__line { transition: none !important; }

.sweep__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* 와이프의 날 끝. 얇은 빛줄기 하나만 지나간다 */
.sweep__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(transparent, rgba(255, 255, 255, .95) 18%, rgba(255, 255, 255, .95) 82%, transparent);
  box-shadow: 0 0 18px 4px rgba(111, 140, 255, .35), 0 0 60px 18px rgba(111, 140, 255, .12);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.sweep__answer {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(44px, 7.4vw, 120px);
  line-height: 1.1;
  letter-spacing: -0.045em;
  word-break: keep-all;
  opacity: 0;
  pointer-events: none;
}

/* 움직임 줄이기, WebGL 없음: 무대를 고정하지 않고 차례로 보여 준다 */
.sweep.is-static { height: auto; }
.sweep.is-static .sweep__stage { position: static; height: auto; display: block; padding: 120px var(--gutter); }
.sweep.is-static .sweep__cards { margin: 0 auto; }
.sweep.is-static .sweep__line { opacity: 1; transform: none; }
.sweep.is-static .sweep__fx, .sweep.is-static .sweep__edge { display: none; }
.sweep.is-static .sweep__answer { position: static; transform: none; opacity: 1; margin-top: 96px; }

@media (max-width: 860px) {
  .sweep__orb { width: 112px; height: 112px; }
  .sweep__quote { font-size: 21px; }
  .sweep__pen { font-size: 25px; margin-left: 0; display: block; }
  .sweep__estimate { font-size: 38px; }
}

/* 4. 이런 영상, 이런 페이지 (먹색 바탕. 영상을 상영하듯 어둡게) */
.work {
  padding: clamp(88px, 11vw, 160px) var(--gutter) clamp(88px, 10vw, 150px);
  background: var(--ink);
  color: var(--ink-text);
}
.work__inner { max-width: 1240px; margin: 0 auto; }
.work__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.16;
  letter-spacing: -0.04em;
}
.work__title .nb { display: inline-block; white-space: nowrap; }

.work__tabs { display: flex; gap: 8px; margin-top: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--ink-line); }
.work__tab {
  position: relative;
  padding: 14px 18px 16px;
  border: 0;
  background: none;
  color: var(--ink-sub);
  font: inherit;
  font-weight: 700;
  font-size: 17px;
  text-align: left;
  cursor: pointer;
}
/* 탭 한 칸: 굵은 줄은 맡긴 사람(박성호 2026-10-23 "에어컨 … 사장님 (업체명)"), 아래 작은 줄은 업체명 */
.work__tab b { display: block; font-weight: 700; word-break: keep-all; }
.work__tab span { display: block; margin-top: 3px; font-weight: 500; font-size: 13px; color: var(--ink-sub); word-break: keep-all; }
.work__tab[aria-selected="true"] { color: var(--ink-text); }
.work__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--ink-text); }
.work__tab:hover { color: var(--ink-text); }

.work__panel { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 300px); justify-content: start; gap: clamp(40px, 6vw, 96px); margin-top: 48px; align-items: start; }
.work__panel[hidden] { display: none; }
.work__film video { width: 100%; height: auto; aspect-ratio: 9 / 16; background: #000; border-radius: 6px; }
.work figcaption, .work__page--soon p { margin-top: 16px; font-size: 15px; line-height: 1.65; color: var(--ink-sub); }
.work figcaption b, .work__page--soon b { display: block; margin-bottom: 4px; font-size: 16px; color: var(--ink-text); }
.work figcaption span { display: block; text-wrap: pretty; word-break: keep-all; }
.work figcaption a { display: inline-block; margin-top: 10px; color: var(--ink-text); font-weight: 700; text-underline-offset: 4px; }

/* 휴대폰 화면 안에서 샘플 페이지가 천천히 아래로 흐른다 */
.phone { width: 100%; padding: 10px; border-radius: 34px; background: #2a2a2a; box-shadow: inset 0 0 0 1px #3a3a3a; }
.phone__screen { position: relative; aspect-ratio: 9 / 19; overflow: hidden; border-radius: 24px; background: #fff; }
.work.is-static .phone__screen { overflow-y: auto; }
.work.is-static .phone__screen img { position: static; }
.phone__screen img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; will-change: transform; }
.work__page--soon { align-self: center; }
.work__page--soon p { margin: 0; padding: 22px 0; border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); }

/* 스크롤 무대(showcase.js가 .is-scroll을 붙인다): 섹션 높이만큼 스크롤하는 동안 안쪽을 화면에 고정하고,
   스크롤 위치에 따라 냉난방 → 학원 → 변리사 → 피부과로 넘어간다(업체 하나에 화면 한 높이). 영상과 휴대폰은 화면 높이에 맞춰 줄어든다 */
.work.is-scroll { height: 400vh; padding: 0 var(--gutter); }
.work.is-scroll .work__inner { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); padding: clamp(24px, 5vh, 64px) 0; }
.work.is-scroll .work__film { width: min(340px, calc((100svh - var(--header-h) - 260px) * 9 / 16)); }
.work.is-scroll .work__page { width: min(300px, calc((100svh - var(--header-h) - 260px) * 9 / 19.4)); }
.work.is-scroll .work__panel { grid-template-columns: auto auto; }

/* PC: 왼쪽 칸에 제목과 업종 목록, 오른쪽에 영상과 페이지 */
@media (min-width: 1100px) {
  .work__inner { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 56px; }
  .work__title, .work__tabs { grid-column: 1; }
  .work__title { font-size: 38px; line-height: 1.24; }
  .work__panel { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .work__tabs { flex-direction: column; gap: 0; margin-top: 40px; border-bottom: 0; border-top: 1px solid var(--ink-line); }
  .work__tab { padding: 16px 0; border-bottom: 1px solid var(--ink-line); font-size: 19px; }
  .work__tab[aria-selected="true"]::after { display: none; }
  .work__tab[aria-selected="true"] b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .work__tab span { margin-top: 4px; font-size: 15px; }
}
@media (max-width: 1099px) {
  .work.is-scroll .work__inner { display: flex; flex-direction: column; padding: 20px 0 calc(64px + env(safe-area-inset-bottom)); }
  .work.is-scroll .work__title { font-size: clamp(24px, 6.4vw, 34px); }
  .work.is-scroll .work__tabs { margin-top: 16px; }
  .work.is-scroll .work__panel { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; flex: 1; min-height: 0; }
  .work.is-scroll .work__film, .work.is-scroll .work__page { width: 100%; max-width: none; }
  .work.is-scroll .work__film video { max-height: calc(100svh - var(--header-h) - 290px); width: auto; max-width: 100%; }
  .work.is-scroll .phone { max-height: calc(100svh - var(--header-h) - 290px); width: auto; aspect-ratio: 9 / 19.4; max-width: 100%; padding: 6px; border-radius: 22px; }
  .work.is-scroll .phone__screen { border-radius: 16px; height: 100%; aspect-ratio: auto; }
  .work.is-scroll figcaption span { display: none; }
  .work.is-scroll figcaption, .work.is-scroll .work__page--soon p { margin-top: 8px; font-size: 13px; }
  .work.is-scroll figcaption b, .work.is-scroll .work__page--soon b { font-size: 15px; }
  .work.is-scroll figcaption a { margin-top: 2px; font-size: 13px; }
  .work.is-scroll .work__page--soon { align-self: start; }
  .work.is-scroll .work__page--soon p { margin-top: 0; padding: 14px 0; }
}
/* 가로 영상(유튜브 광고) 업체: 영상 칸이 남는 폭을 다 쓰고 휴대폰은 그대로 */
.work__panel--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
.work__panel--wide .work__film { align-self: center; max-width: 620px; }
.work__panel--wide .work__film video { aspect-ratio: 16 / 9; }
.work.is-scroll .work__panel--wide { grid-template-columns: minmax(0, 400px) auto; gap: 48px; }
.work.is-scroll .work__panel--wide .work__film { width: auto; }
@media (max-width: 1099px) {
  .work.is-scroll .work__panel--wide { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .work.is-scroll .work__panel--wide .work__film video { width: 100%; max-height: none; }
  .work.is-scroll .work__panel--wide { gap: 14px; }
  .work.is-scroll .work__panel--wide .work__page { display: flex; gap: 14px; align-items: flex-start; align-self: stretch; height: 100%; min-height: 0; }
  .work.is-scroll .work__panel--wide .phone { height: 100%; max-height: none; flex: none; }
  .work.is-scroll .work__panel--wide .work__page figcaption { margin-top: 0; }
}

@media (max-width: 860px) {
  .work__panel--wide .work__film { max-width: none; }
  /* 모바일: 2×2로 내려 두 줄씩. 탭이 높아진 만큼 고정 무대의 영상·휴대폰 높이를 줄인다 */
  .work__tabs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; border-bottom: 0; }
  .work__tab { padding: 10px 0 11px; border-bottom: 1px solid var(--ink-line); font-size: 15px; }
  .work__tab span { margin-top: 2px; }
  .work__tab[aria-selected="true"]::after { left: 0; right: 0; }
  .work.is-scroll .work__film video, .work.is-scroll .phone { max-height: calc(100svh - var(--header-h) - 370px); }
  .work__panel { grid-template-columns: 1fr; gap: 40px; margin-top: 32px; }
  .work__film { max-width: 360px; }
  .work__page { max-width: 300px; }
}

@media (max-width: 860px) {
  .proof__inner { grid-template-columns: 1fr; gap: 32px; }
  .proof__title { position: static; }
  .proof__item { padding: 24px 0 26px; }
  .proof__why { font-size: 16px; }
}