/* 7. 광고비(리서치/09): 종이 바탕의 정적인 장면. 왼쪽은 "누가 눌러야 나간다"와 클릭 한 번 값, 오른쪽은 실제 네이버 검색 화면.
   숫자는 클릭 한 번에서 시작하고 월 합계는 없다. 파란색은 상담 버튼 하나에만 쓴다 */
.price { position: relative; overflow: clip; color: var(--ink); padding: clamp(88px, 11vw, 160px) var(--gutter) clamp(80px, 10vw, 140px); }



.price__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
/* 왼쪽 글과 오른쪽 아이폰만 한 칸으로 묶는다. 아이폰이 따라 내려오는 범위가 이 칸 안으로 묶여 아래 시뮬레이터를 덮지 않는다 */
.price__main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "top phone" "body phone"; gap: 0 clamp(48px, 7vw, 110px); }
.price__top { grid-area: top; }
.price__phone { grid-area: phone; align-self: start; margin: 0; }
/* PC: 오른쪽 아이폰이 스크롤을 따라 내려온다(왼쪽 글이 끝나는 자리까지) */
@media (min-width: 981px) { .price__phone { position: sticky; top: calc(var(--header-h) + 32px); } }
.price__body { grid-area: body; }


.price__kicker { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 800; font-size: 16px; line-height: 1; color: #03a94d; }
.price__kicker::before { content: "N"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: #03c75a; color: #fff; font-weight: 900; font-size: 13px; }
.price__title { margin: 16px 0 0; font-family: var(--font-head); font-weight: 900; font-size: clamp(36px, 5vw, 68px); line-height: 1.16; letter-spacing: -0.045em; }
.price__lead { margin: 22px 0 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 2vw, 26px); line-height: 1.5; letter-spacing: -0.03em; color: #3a3a37; }

.price__field { margin: 56px 0 0; padding: 0; border: 0; min-width: 0; }
.price__field legend { margin-bottom: 14px; padding: 0; font-weight: 800; font-size: 16px; color: var(--paper-sub); }
.price__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.price__chip { position: relative; cursor: pointer; }
.price__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.price__chip span { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border: 1.5px solid #c9c4b8; border-radius: 999px; background: #fff; font-weight: 700; font-size: 16px; transition: border-color .15s ease; }
.price__chip:hover span { border-color: var(--ink); }
.price__chip input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.price__chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.price__now { margin: 30px 0 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.35; letter-spacing: -0.035em; }
.price__now q { quotes: "‘" "’"; }
.price__duo { display: flex; flex-wrap: wrap; gap: 8px 40px; margin-top: 12px; }
.price__duo p { margin: 0; }
.price__dev { display: block; margin-bottom: 2px; font-weight: 700; font-size: 15px; color: var(--paper-sub); }
.price__won { display: inline-flex; align-items: baseline; font-family: var(--font-head); font-weight: 900; font-size: clamp(36px, 4vw, 52px); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.price__gap { margin: 10px 0 0; font-size: 17px; color: #4a4a46; }

/* 숫자 굴림: 자리마다 0~9 띠가 굴러가다 멈춘다(토스 금리 연출) */
.roll { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: -0.2em; }
.roll__strip { display: flex; flex-direction: column; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.roll__strip span { display: block; height: 1.1em; line-height: 1.1em; }

.price__how { margin: 36px 0 0; padding: 24px 0 0; border-top: 1px solid var(--paper-line); list-style: none; counter-reset: how; }
.price__how li { position: relative; padding: 4px 0 4px 34px; font-size: 17px; line-height: 1.6; color: #3a3a37; word-break: keep-all; counter-increment: how; }
.price__how li::before { content: counter(how); position: absolute; left: 0; top: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; font-size: 13px; }
.price__how-title, .price__control-title { margin: 36px 0 0; font-weight: 800; font-size: 15px; color: var(--paper-sub); }
.price__how-title + .price__how { margin-top: 10px; padding-top: 0; border-top: 0; }
.price__control-title + .price__control { margin-top: 6px; }
.price__control { margin: 18px 0 0; padding: 0; list-style: none; }
.price__control li { position: relative; padding: 6px 0 6px 30px; font-weight: 700; font-size: 18px; }
.price__control li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 14px; height: 8px; border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(-45deg); }
/* CTA: 손가락이 버튼을 톡톡 누르는 모션(박성호 "누가봐도 클릭하라는듯 모션이라던지 손가락이라던지"). 화살표·반짝임은 쓰지 않는다 */
.price__ctawrap { position: relative; display: inline-block; margin-top: 28px; }
.price__cta { height: 60px; padding: 0 30px; border: 0; border-radius: 14px; background: var(--blue); color: #fff; font: 800 18px var(--font-body); cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(47, 91, 255, .7); animation: cta-press 2.4s ease-in-out infinite; }
.price__cta:hover { background: #2349e0; }
.price__cta[aria-expanded="true"] { animation: none; background: var(--ink); box-shadow: none; }
.price__tap { position: absolute; right: -14px; bottom: -22px; width: 44px; height: 44px; pointer-events: none; animation: tap 2.4s ease-in-out infinite; }
.price__tap svg { width: 100%; height: 100%; fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.price__tap i { position: absolute; left: 6px; top: -2px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(47, 91, 255, .7); opacity: 0; animation: tap-ring 2.4s ease-out infinite; }
.price__cta[aria-expanded="true"] + .price__tap { display: none; }
@keyframes tap { 0%, 30%, 100% { transform: translate(10px, 10px) rotate(-8deg); } 45% { transform: translate(0, 0) rotate(-8deg) scale(.92); } 60% { transform: translate(3px, 3px) rotate(-8deg); } }
@keyframes cta-press { 0%, 40%, 60%, 100% { transform: none; } 47% { transform: scale(.97); } }
@keyframes tap-ring { 0%, 44% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(.8); } 75% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; } }

@keyframes sim-in { from { opacity: 0; transform: translateY(14px); } }

/* 나눠 걸기 아래 덧붙임: 부드러운 벽돌빛 빨강(박성호 "혐오스럽지 않은 빨간색") */
/* 필독 딱지(박성호 "저게 눈에 띄었음 좋겠어 필독이라던지") */
.price__must { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 4px; background: #b8452f; color: #fff; font-weight: 800; font-size: 13px; vertical-align: 1px; }
/* 중요한 말에 색연필 밑줄과 색(박성호 "중요한 곳들마다 밑줄과 색감 변경 … 색연필 문법") */
.price__how .pen, .price__control .pen { color: #b8452f; font-weight: 800; }

/* 실제 검색 화면: 휴대폰 테두리 안에 캡처, 위에 검색창 타이핑과 빨간 펜 */
/* 아이폰 모델링: 크기는 전부 기기 폭(cqw) 기준이라 어떤 폭에서도 비율이 같다.
   티타늄 테두리(밝고 어두운 금속 결) → 검은 베젤 → 화면(상태 표시줄 + 다이내믹 아일랜드 + 캡처 + 홈 표시줄), 왼쪽 동작·음량 버튼, 오른쪽 측면 버튼 */
.iphone { position: relative; container-type: inline-size; filter: drop-shadow(0 40px 40px rgba(18, 18, 18, .28)) drop-shadow(0 8px 12px rgba(18, 18, 18, .18)); }
.iphone__frame { padding: 1.05cqw; border-radius: 16.4cqw;
  background: linear-gradient(140deg, #e9e6df 0%, #a19e97 18%, #f4f2ed 34%, #8d8a83 52%, #d8d5ce 70%, #75726b 86%, #c9c6bf 100%);
  box-shadow: inset 0 0 0 .35cqw rgba(255, 255, 255, .45), inset 0 0 0 .6cqw rgba(0, 0, 0, .18); }
.price__screen { position: relative; border: 2.7cqw solid #050505; border-radius: 15.3cqw; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 .25cqw #2a2a2a; }
.iphone__btn { position: absolute; width: 1.1cqw; border-radius: .6cqw; background: linear-gradient(90deg, #7d7a73, #d9d6cf 45%, #8a877f); }
.iphone__btn--action { left: -.75cqw; top: 17%; height: 5.5%; }
.iphone__btn--up { left: -.75cqw; top: 26%; height: 9.5%; }
.iphone__btn--down { left: -.75cqw; top: 38%; height: 9.5%; }
.iphone__btn--power { right: -.75cqw; top: 28%; height: 14%; background: linear-gradient(90deg, #8a877f, #d9d6cf 55%, #7d7a73); }
.iphone__status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 12.5cqw; padding: 1.2cqw 7.5cqw 0 9.5cqw; background: #fff; color: #111; }
.iphone__status b { font-weight: 700; font-size: 4.3cqw; letter-spacing: -.02em; }
.iphone__island { position: absolute; left: 50%; top: 2.6cqw; width: 30cqw; height: 8.7cqw; border-radius: 999px; background: #000; transform: translateX(-50%); }
.iphone__icons { display: flex; align-items: center; gap: 1.4cqw; }
.iphone__icons svg { height: 3cqw; width: auto; fill: currentColor; }
.iphone__icons svg:last-child { height: 3.1cqw; }
.iphone__home { position: absolute; left: 50%; bottom: 2.1cqw; width: 34cqw; height: 1.35cqw; border-radius: 999px; background: #111; opacity: .85; transform: translateX(-50%); }
.price__shot { position: relative; container-type: inline-size; }
.price__shot img { display: block; width: 100%; height: auto; transition: opacity .25s ease; }
.price__screen.is-swap img { opacity: .35; }
/* 검색창 글자 자리: 캡처의 입력칸(390 기준 x66 y20 w223 h32)을 같은 바탕색으로 덮고 그 위에 타이핑 */
.price__typed { position: absolute; left: 16.9%; top: 2.6%; width: 57.5%; height: 4.7%; display: flex; align-items: center; background: #f7f7f7;
  font-weight: 700; font-size: 4.5cqw; color: #111; white-space: nowrap; overflow: hidden; }
.price__typed i { width: 1.5px; height: 1.2em; margin-left: 1px; background: #03c75a; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* '광고' 표시(390 기준 x331 y141 w43 h16)에 빨간 동그라미 */
.price__badge-mark { position: absolute; left: 81.5%; top: 18.4%; width: 17%; height: 4.6%; }
.price__badge-mark [data-mark] { display: block; width: 100%; height: 100%; }
.price__pen { position: absolute; right: 6%; top: 24.5%; transform: rotate(-5deg); text-align: right; font-family: "Nanum Pen Script", cursive; font-size: 8.6cqw; line-height: 1.05; color: var(--pen); }
.price__pen b { font-weight: 400; font-size: 1.25em; }

.price__fine { margin: 64px 0 0; padding: 22px 0 0; border-top: 1px solid var(--paper-line); list-style: none; }
.price__fine li { position: relative; padding: 0 0 8px 22px; font-size: 15px; line-height: 1.6; color: var(--paper-sub); word-break: keep-all; }
.price__fine li::before { content: "※"; position: absolute; left: 0; top: 0; }

@media (max-width: 980px) {
  .price__main { grid-template-columns: 1fr; grid-template-areas: "top" "phone" "body"; }
  .price__phone { width: min(320px, 82vw); margin: 40px auto 0; }
  .price__field { margin-top: 44px; }
}
@media (max-width: 860px) {
  .price__chip span { height: 40px; padding: 0 14px; font-size: 15px; }
  .price__how, .price__control li { font-size: 17px; }
  .price__cta { width: 100%; }
  .price__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .price__won { font-size: clamp(28px, 8vw, 36px); }
  .price__dev { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .roll__strip { transition: none; }
  .price__typed i { animation: none; }
}


/* 약속 판(리서치: Basecamp·Stripe·Linear·Hook Agency·배민): 종이 위 흰 판 한 장, 두 칸은 1px 선으로, 아래 띠에 버튼 하나와 한 줄.
   판 안은 흰색 단색이라 바탕 검색어 무늬가 글 뒤로 들어오지 않는다 */
.price__pact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 40px; border: 1px solid #d9d5cb; border-radius: 6px; background: #fff;
  box-shadow: 0 1px 0 rgba(18, 18, 18, .04), 0 18px 40px -28px rgba(18, 18, 18, .35); }
.price__pact-col { padding: 26px 28px 22px; }
.price__pact-col + .price__pact-col { border-left: 1px solid #e4e0d6; }
.price__pact-title { margin: 0 0 10px; font-family: var(--font-head); font-weight: 800; font-size: 20px; letter-spacing: -0.03em; }
.price__pact .price__how, .price__pact .price__control { margin: 0; padding: 0; border: 0; list-style: none; }
.price__pact .price__how li, .price__pact .price__control li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid #eeebe4; font-weight: 500; font-size: 16px; line-height: 1.6; color: #2f2f2c; }
.price__pact .price__how li:first-child, .price__pact .price__control li:first-child { border-top: 0; }
/* 번호는 작게(Hook): 01 02 03 */
.price__pact .price__how li::before { content: "0" counter(how); left: 0; top: 14px; width: auto; height: auto; border-radius: 0; background: none; color: #9a968c; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.price__pact .price__control li::before { left: 3px; top: 21px; }
.price__pact-cta { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; padding: 20px 28px 22px; border-top: 1px solid #e4e0d6; background: #fbfaf6; border-radius: 0 0 6px 6px; }
.price__pact-cta .price__ctawrap { margin-top: 0; }
.price__pact-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--paper-sub); }
@media (max-width: 980px) {
  .price__pact { grid-template-columns: 1fr; }
  .price__pact-col + .price__pact-col { border-left: 0; border-top: 1px solid #e4e0d6; }
  .price__pact-col { padding: 22px 18px 16px; }
  .price__pact-cta { flex-direction: column; align-items: stretch; gap: 10px; padding: 18px; }
  .price__pact-cta .price__ctawrap { display: block; }
  .price__pact-cta .price__cta { width: 100%; }
  .price__pact-note { text-align: center; }
}

/* 배경: 기획 도면(박성호 "대기업·잘나가는 곳처럼, AI 딸깍이 아닌 정성과 기획요소"). 종이 질감 대신 차가운 흰 바탕에 방안지 격자(굵은 칸 80, 잔칸 16),
   여백에는 이 섹션을 만들 때의 실제 기획 메모가 주석처럼 붙는다. 넓은 화면에서만 여백 주석, 첫 줄(프레임 이름)은 어디서나 */
.price.is-paper { background-color: #f6f7f9;
  background-image: linear-gradient(rgba(47, 91, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 91, 255, .07) 1px, transparent 1px),
    linear-gradient(rgba(47, 91, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 91, 255, .035) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; background-position: center top; }
.price__notes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
/* 기획 용어 메모: 상자 없이 글만, 살짝 기울이고 옅게(투명도 .38). 본문과 겹쳐도 읽기를 방해하지 않을 만큼만. 넓은 화면에서만 */
.price__note { position: absolute; display: none; max-width: 260px; transform: rotate(var(--r, 0deg)); font-weight: 700; font-size: 13px; line-height: 1.4; color: #3d4f8a; opacity: .38; white-space: nowrap; }
.price__note::before { content: "+"; margin-right: 6px; color: var(--blue); }
@media (min-width: 1680px) { .price__note { display: block; } } /* 본문 옆 여백이 넉넉한 화면에서만 */
}