@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════
   딸깍 요금제(pricing.html · 서버 /pricing) — 메인(index2.css) 위에 얹는 칸만.
   2026-10-19 메인 결로 다시 짬. 생성기 _tools/pricing2.py.

   ── 눈금은 메인 것을 그대로 쓴다 ──
   색 --paper · --ink · --lime / 면 .sec--paper · .sec--ink · .sec--brand · .sec--lift
   마디 제목 .chap__t(--fs-h2) · 소개 .chap__lead · 마디 여백 .chap · 판 폭 .shell(1280 · 좌우 20/48)
   문답 .bento .bc · 맺음 .end · 머리 .nav2 · 꼬리 .foot2 — 여기서 다시 정하지 않는다.
   여기서 새로 정한 크기는 메인 표의 값에 맞췄다:
     카드 이름 22 · 금액 clamp(38→52) · 단추 52 높이(첫 화면 .intro__go 와 같음) · 작은 글 13.5~14.5

   ── 반응형 ──
   1024 아래 손가락 화면 리듬은 메인(대문 site.css)과 같다 — 마디 위아래 64 · 제목→내용 32 ·
   다음 마디가 32 올라타므로(.sec--lift) 뒤따르는 마디가 있으면 아래 64+32.
   카드: 1024 위 한 줄 · 600~1023 두 칸(홀수면 마지막을 한 줄로) · 600 아래 한 칸. 320 까지 가로 넘침 0.
   ══════════════════════════════════════════════════════════════════ */

.pr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pr-ic { flex: none; width: 18px; height: 18px; }

/* ══════════════════ 첫 마디 — 제목 · 주기 고르개 · 카드 ══════════════════ */
.pr-hero { position: relative; padding: calc(64px + clamp(40px, 6vw, 80px)) 0 clamp(64px, 8vw, 112px); }
.pr-head { text-align: center; }
/* 첫 화면 .intro__eye 와 같은 배지 — 검정 알약 · 라임 글자 · 안쪽 라임 낱말(오른쪽 끝에 붙는 낱말이라 오른쪽 여백 = 위아래 여백 · 2026-10-20) */
.pr-eye {
  display: inline-flex; align-items: baseline; gap: .4em; padding: .3em .3em .3em .95em; border-radius: 999px;
  background: #0a0a0a; color: var(--lime); line-height: 1.2;
  font-size: clamp(14px, .7rem + .5vw, 18px); font-weight: 800; letter-spacing: -.02em;
}
.pr-eye b { display: inline-block; padding: .2em .6em; line-height: 1.2; border-radius: 999px; background: var(--lime); color: #0a0a0a; font-weight: 900; }
/* 제목 — 첫 화면 제목(.intro__t)과 같은 굵기 · 자간 · 라임 밑줄, 크기는 한 단 작게 */
.pr-t {
  margin-top: clamp(14px, 2vw, 22px);
  font-size: clamp(34px, 1.2rem + 4.6vw, 72px); font-weight: 800; line-height: 1.08; letter-spacing: -.055em;
  word-break: keep-all; text-wrap: balance;
}
.pr-t b { background: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%); padding: 0 .04em; }
.pr-s {
  margin: clamp(12px, 2vw, 20px) auto 0; max-width: 46ch;
  font-size: clamp(14px, .8rem + .4vw, 19px); line-height: 1.55; color: var(--ink-2); text-wrap: balance;
}
.pr-s strong { color: var(--ink); font-weight: 800; }

/* 결제 주기 — 알약 셋. 고른 것은 검정 · 라임 */
.pr-cyc {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  width: min(100%, 520px); margin: clamp(24px, 4vw, 40px) auto 0; padding: 4px;
  border-radius: 999px; background: var(--white); border: 1px solid var(--rule);
  box-shadow: 0 10px 30px -22px rgba(10, 10, 10, .4);
}
.pr-cyc__b {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 6px; min-height: 48px;
  padding: 4px 8px; border-radius: 999px; font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-2);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.pr-cyc__b:hover { color: var(--ink); }
.pr-cyc__b em { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--brand-50); color: var(--brand); }
.pr-cyc__b.is-on { background: #0a0a0a; color: #f4f4ee; }
.pr-cyc__b.is-on em { background: var(--lime); color: #0a0a0a; }
.pr-cyc__b em i { font-style: normal; }

/* 카드 */
.pr-cards { display: grid; gap: 14px; margin-top: clamp(20px, 3vw, 32px); grid-template-columns: minmax(0, 1fr); }
.pc {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 26px 22px 24px; border-radius: 22px; background: var(--white); border: 1px solid var(--rule);
  box-shadow: 0 24px 50px -40px rgba(10, 10, 10, .45);
}
.pc--ink { background: #0a0a0a; border-color: #0a0a0a; color: #f4f4ee; --ink-2: #b6b7ad; --ink-3: #a2a399; --rule: rgba(255, 255, 255, .16); }
.pc--build { background: var(--paper-2); border-style: dashed; border-color: var(--rule-2); box-shadow: none; }
.pc__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc__n { font-size: 22px; font-weight: 800; letter-spacing: -.04em; line-height: 1.2; }
.pc__tag { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--lime); color: #0a0a0a; font-size: 12px; font-weight: 800; letter-spacing: -.02em; }
.pc__d { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pc__price { margin-top: 20px; min-height: 1.1em; }
.pc__c { display: none; }
.pc__c--all { display: flex; }
.pr-cards[data-c="m"] .pc__c[data-c="m"], .pr-cards[data-c="y"] .pc__c[data-c="y"], .pr-cards[data-c="t"] .pc__c[data-c="t"] { display: flex; }
.pc__price .pc__c { align-items: baseline; flex-wrap: wrap; gap: 4px 6px; }
.pc__price b { font-size: clamp(38px, 1.6rem + 1.6vw, 52px); font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.pc__price span { font-size: 15px; font-weight: 700; color: var(--ink-3); }
.pc__sub { margin-top: 8px; min-height: 1.5em; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.pc__sub .pc__c { flex-wrap: wrap; gap: 0 .3em; }
.pc__sub em { font-style: normal; font-weight: 800; color: var(--brand); }
.pc--ink .pc__sub em { color: var(--lime); }
/* 단추 — 첫 화면 「무료로 체험하기」(.intro__go)와 같은 높이 · 모양. 카드 폭을 다 쓴다 */
.pc__go {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin-top: 20px;
  padding: 0 6px 0 22px; border-radius: 999px; background: #0a0a0a; color: #f4f4ee;
  font-size: 15.5px; font-weight: 800; letter-spacing: -.02em;
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.pc__go.pc__c { display: none; }   /* 결제 주기마다 하나씩 그린 시작하기 단추 — 고른 주기 것만(아래 79줄 규칙이 보인다) */
.pc__go em { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lime); color: #0a0a0a; transition: transform .35s var(--ease-out); }
.pc__go em svg { width: 17px; height: 17px; }
.pc__go:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(10, 10, 10, .55); }
.pc__go:hover em { transform: rotate(-45deg); }
.pc--ink .pc__go { background: var(--lime); color: #0a0a0a; }
.pc--ink .pc__go em { background: #0a0a0a; color: var(--lime); }
.pc__go--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pc__go--line em { background: #0a0a0a; color: var(--lime); }
/* 테두리 단추 hover — 테두리도 그림자(inset)라 떠오르는 그림자가 덮어써 테두리가 사라졌다(2026-10-20 사용자 「hover 시 이상」) · 테두리를 남긴 채 검게 채워 「시작하기」 단추와 같은 끝 모양 */
.pc__go--line { transition: transform .3s var(--ease-out), box-shadow .3s, background .3s, color .3s; }
.pc__go--line:hover { background: #0a0a0a; color: #f4f4ee; box-shadow: inset 0 0 0 1.5px #0a0a0a, 0 16px 30px -16px rgba(10, 10, 10, .55); }
.pc__go--line:hover em { background: var(--lime); color: #0a0a0a; }
/* 숫자 칸 넷(+솔루션) */
.pc__spec { display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); }
.pc__spec li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.pc__spec .pr-ic { color: var(--brand); }
.pc--ink .pc__spec .pr-ic { color: var(--lime); }
.pc__spec b { color: var(--ink); font-weight: 800; }
.pc--ink .pc__spec b { color: #fff; }
.pc__ft { display: grid; gap: 8px; margin-top: 16px; }
.pc__spec + .pc__ft { padding-top: 16px; border-top: 1px dashed var(--rule); }
.pc__ft li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pc__ft .pr-ic { width: 16px; height: 16px; margin-top: 3px; color: var(--brand); }
.pc--ink .pc__ft .pr-ic { color: var(--lime); }
.pc--build .pc__ft { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); }
.pc__all { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 10px;
  font-size: 14px; font-weight: 800; color: var(--ink-2); border-bottom: 1.5px solid var(--rule-2); }
.pc__all:hover { color: var(--ink); border-bottom-color: currentColor; }
.pc__all em { font-style: normal; }
.pr-note { margin-top: 20px; text-align: center; text-wrap: balance; font-size: 13px; line-height: 1.6; color: var(--ink-3); }

@media (min-width: 600px) {
  .pr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pc { padding: 30px 28px 28px; border-radius: 26px; }
}
@media (min-width: 1024px) {
  .pr-cards { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 18px; }
  .pr-cards > :last-child:nth-child(odd) { grid-column: auto; }
  .pc { padding: 34px 32px 32px; }
  .pc__n { font-size: 24px; }
  .pc:not(.pc--build):hover { transform: translateY(-4px); }
  .pc { transition: transform .4s var(--ease-out); }
}

/* ══════════════════ 모두 들어 있어요 — 검정 면 · 체크 목록 ══════════════════
   휴대폰은 칸 없이 줄만(열여섯 줄이 칸이면 화면 셋을 넘었다) · 768 부터 칸 */
.inc { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule); }
.inc__it {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 2px;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em;
}
.js .inc__it.up { transition-delay: calc(min(var(--i, 0), 8) * 50ms); }
.inc__ck { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--lime); color: #0a0a0a; stroke-width: 2.6; }
@media (min-width: 600px) { .inc { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
@media (min-width: 768px) {
  .inc { gap: 10px; border-top: 0; }
  .inc__it { min-height: 60px; padding: 12px 16px; border-radius: 16px; background: var(--white); border: 1px solid var(--rule); }
  .inc__ck { width: 26px; height: 26px; }
}
@media (min-width: 1024px) {
  .inc { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .inc__it { min-height: 72px; padding: 16px 18px; border-radius: 18px; font-size: 15px; }
}

/* ══════════════════ 3년 셈 — 라임 면 · 막대 셋 ══════════════════ */
.cbw { max-width: 920px; margin: 0 auto; padding: 22px 18px; border-radius: 24px; background: #0a0a0a; color: #f4f4ee;
  box-shadow: 0 30px 60px -40px rgba(40, 60, 0, .7); }
.cb-tab { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 18px; padding: 4px; border-radius: 999px; background: #1a1a1a; }
.cb-tab__b { min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 14.5px; font-weight: 800; color: #b6b7ad; transition: background .3s, color .3s; }
.cb-tab__b:hover { color: #fff; }
.cb-tab__b[aria-selected="true"] { background: var(--lime); color: #0a0a0a; }
.cb[hidden] { display: none; }
.cb__rs { display: grid; gap: 14px; }
.cb__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l a" "bar bar"; gap: 8px 12px; align-items: end;
  padding: 14px 14px 16px; border-radius: 16px; background: #151515; }
.cb__l { grid-area: l; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb__l b { font-size: 15.5px; font-weight: 800; letter-spacing: -.03em; }
.cb__l span { font-size: 12.5px; color: #a2a399; }
.cb__a { grid-area: a; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 13px; font-weight: 700; color: #b6b7ad; }
.cb__a > span { white-space: nowrap; }
.cb__a b { margin-right: 2px; font-size: clamp(20px, 1rem + 1vw, 28px); font-weight: 800; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cb__a em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--lime); }
.cb__bar { grid-area: bar; height: 12px; border-radius: 999px; background: #262626; overflow: hidden; }
.cb__bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: #5f6058; transform-origin: 0 50%; }
.cb__r--best { background: #1d2600; box-shadow: inset 0 0 0 1.5px var(--lime); }
.cb__r--best .cb__bar i { background: var(--lime); }
.js .cbw .cb__bar i { transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.js .cbw.is-in .cb__bar i { transform: none; }
.cb__note { margin-top: 16px; text-align: center; font-size: 13px; line-height: 1.55; color: #a2a399; }
@media (min-width: 768px) {
  .cbw { padding: 32px; border-radius: 30px; }
  .cb__r { grid-template-columns: 170px minmax(0, 1fr) 190px; grid-template-areas: "l bar a"; align-items: center; gap: 20px; padding: 18px 22px; }
  .cb__bar { height: 16px; }
}

/* ══════════════════ 부가서비스 — 검정 면 · 칸 ══════════════════ */
.ads { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.ad {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic tx" "ic p"; gap: 4px 14px; align-items: start;
  padding: 18px; border-radius: 18px; background: var(--white); border: 1px solid var(--rule);
}
.ad__ic { grid-area: ic; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lime); color: #0a0a0a; }
.ad__ic svg { width: 22px; height: 22px; }
.ad__tx { grid-area: tx; min-width: 0; }
.ad__tx h3 { font-size: 16px; font-weight: 800; letter-spacing: -.03em; line-height: 1.35; }
.ad__tx p { margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.ad__p { grid-area: p; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 5px; margin-top: 8px; }
.ad__p b { font-size: 22px; font-weight: 800; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ad__p span { font-size: 13px; font-weight: 700; color: var(--ink-3); }
@media (min-width: 600px) { .ads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1024px) {
  .ads { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .ad { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ic" "tx" "p"; gap: 0; padding: 26px; border-radius: 22px; }
  .ad__tx { margin-top: 16px; }
  .ad__tx h3 { font-size: 18px; }
  .ad__tx p { font-size: 14px; }
  .ad__p { margin-top: auto; padding-top: 18px; }
  .ad { min-height: 220px; }
  .ad__p b { font-size: 26px; }
}

/* ══════════════════ 문답 — 메인 벤토 그대로 · 2열(600~899)에서 하나를 한 줄로 ══════════════════ */
@media (min-width: 600px) and (max-width: 899px) { .prp .bc--w2 { grid-column: span 2; } }   /* 2열(메인과 같은 구간)에서만 한 줄 — wide 는 메인과 같이 둔다 */

/* ══════════════════ 손가락 화면(1024 아래) — 메인과 같은 리듬 ══════════════════ */
@media (max-width: 1023px) {
  .prp .chap { padding-top: 64px; padding-bottom: 64px; }
  .prp .chap:not(:last-child) { padding-bottom: 96px; }   /* 다음 마디가 32 올라탄다 — 보이는 여백은 64 */
  .prp .chap__head { margin-bottom: 32px; }
  .pr-hero { padding-top: calc(64px + 40px); padding-bottom: 96px; }
}
@media (max-width: 599px) {
  /* 결제 주기 — 이름과 할인율을 한 줄에(2026-10-20 사용자) · 칸 폭은 글 길이만큼 · 「할인」 낱말은 화면에서만 숨긴다(읽어 주기는 그대로) */
  .pr-cyc { grid-template-columns: auto auto auto; }
  .pr-cyc__b { flex-wrap: nowrap; gap: 4px; padding: 4px 8px; font-size: 13px; white-space: nowrap; }
  .pr-cyc__b em { font-size: 10.5px; padding: 0 6px; }
  .pr-cyc__b em i { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cb-tab { width: 100%; }
  .cb-tab__b { flex: 1 1 0; padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .cbw .cb__bar i { transform: none; transition: none; }
  .pc, .pc__go, .pc__go em { transition: none; }
}

/* 머리띠 — 지금 보고 있는 메뉴(서버에서 메뉴 설정 링크가 aria-current 를 단다) */
.nav2__gt[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--lime); }
/* 두 칸 줄에서 한 줄을 다 쓰는 카드(제작 대행) — 단추가 너무 길어지지 않게 */
@media (min-width: 600px) and (max-width: 1023px) {
  .pr-cards > :last-child:nth-child(odd) .pc__go { max-width: 360px; }
}
/* 요금제 카드 — 1024 아래는 한 줄로 밀어 넘긴다(2026-10-20 사용자 「swiper 방식 · 한 줄에」) · 다음 카드가 살짝 보여 밀 수 있다는 걸 알린다 · 아래 점은 pricing2.js 가 단다 */
@media (max-width: 1023px) {
  .pr-cards { display: flex; gap: 12px; margin-inline: calc(-1 * var(--s5)); padding: 4px var(--s5) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s5); overscroll-behavior-x: contain; scrollbar-width: none; }
  .pr-cards::-webkit-scrollbar { display: none; }
  .pr-cards > li { flex: 0 0 84%; scroll-snap-align: start; }
  .pr-cards > :last-child:nth-child(odd) { grid-column: auto; }
  .pr-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
  .pr-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(10, 10, 10, .18); cursor: pointer; transition: width .25s var(--ease), background .25s var(--ease); }
  .pr-dots button.is-on { width: 22px; background: #0a0a0a; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .pr-cards { margin-inline: calc(-1 * var(--s9)); padding-inline: var(--s9); scroll-padding-inline: var(--s9); }
  .pr-cards > li { flex-basis: calc(50% - 6px); }
}
@media (min-width: 1024px) { .pr-dots { display: none; } }
/* 결제 주기를 바꾸면 보이는 금액이 한 번 떠오른다(pricing2.js 가 .is-flip 을 단다) */
@keyframes prFlip { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pr-cards.is-flip .pc__price .pc__c, .pr-cards.is-flip .pc__sub .pc__c { animation: prFlip .45s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .pr-cards.is-flip .pc__price .pc__c, .pr-cards.is-flip .pc__sub .pc__c { animation: none; } }
/* 휴대폰(600 아래) — 메인 페이지 리듬에 맞춰 한 단 줄인다(2026-10-20 사용자 「탭 높이 · 글자 크기 다 축소 · 메인 참고」): 탭 40 · 단추 46 · 배지 13 */
@media (max-width: 599px) {
  .pr-eye { font-size: 13px; }
  .pr-s { font-size: 13.5px; }
  .pr-cyc { padding: 3px; border-radius: 24px; }
  .pr-cyc__b { min-height: 40px; font-size: 12.5px; border-radius: 20px; }
  .pr-cyc__b em { font-size: 10px; }
  .pc { padding: 22px 18px 20px; border-radius: 20px; }
  .pc__n { font-size: 19px; }
  .pc__d { margin-top: 4px; font-size: 13px; }
  .pc__price { margin-top: 16px; }
  .pc__price b { font-size: 32px; }
  .pc__price span { font-size: 13.5px; }
  .pc__sub { margin-top: 6px; font-size: 12.5px; }
  .pc__go { min-height: 46px; margin-top: 16px; padding-left: 18px; font-size: 14.5px; }
  .pc__go em { width: 34px; height: 34px; }
  .pc__go em svg { width: 15px; height: 15px; }
  .pc__spec { gap: 8px; margin-top: 18px; padding-top: 16px; }
  .pc__spec li { gap: 8px; font-size: 13.5px; }
  .pc__ft { gap: 6px; margin-top: 14px; }
  .pc__ft li { font-size: 13px; }
  .inc__it { gap: 10px; min-height: 42px; padding: 8px 2px; font-size: 13.5px; }
  .cb-tab__b { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .cb__l b { font-size: 14px; }
  .cb__l span { font-size: 12px; }
  .cb__a { font-size: 12px; }
  .cb__a b { font-size: 18px; }
  .cb__a em { font-size: 11.5px; }
  .ad { gap: 2px 12px; padding: 16px; border-radius: 16px; }
  .ad__ic { width: 38px; height: 38px; }
  .ad__ic svg { width: 19px; height: 19px; }
  .ad__tx h3 { font-size: 15px; }
  .ad__tx p { font-size: 12.5px; }
  .ad__p b { font-size: 19px; }
  .ad__p span { font-size: 12px; }
  .pr-note { font-size: 12.5px; }
}
/* 준비 중인 요금제(고급형 · 설정 관리 「솔루션 요금제」) — 꼬리표는 테두리만 · 단추 자리는 누를 수 없는 흐린 알약 */
.pc__tag--soon { background: transparent; color: var(--lime); box-shadow: inset 0 0 0 1.5px var(--lime); }
.pc .pc__go.pc__go--soon { background: rgba(255, 255, 255, .08); color: #d9dace; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); cursor: default; }
.pc .pc__go.pc__go--soon:hover { transform: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); }
.pc .pc__go.pc__go--soon em { background: rgba(255, 255, 255, .12); color: var(--lime); }
.pc .pc__go.pc__go--soon:hover em { transform: none; }
/* 세어 올리는 숫자(pricing2.js countUp · 이름 붙은 태그라 「… span」 규칙이 안 닿는다) — 끝값이 투명하게 자리를 잡고 세는 값은 그 위 오른쪽에 겹친다 · 폭이 안 바뀌어 옆 글이 안 흔들린다 */
pr-num { position: relative; display: inline-block; }
pr-f { visibility: hidden; }
pr-v { position: absolute; top: 0; right: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 기본 기능 — 아이콘 칸(2026-10-20 사용자 「다른 방식」 · 왼쪽 아이콘 · 오른쪽 글 · 가운데 맞춤) · 휴대폰 1열 8개 · 태블릿 3열 9개 · PC 4열 12개만 보이다가 「모두 보기」로 다(스크립트가 없으면 다 보인다) */
.pf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pf__it { display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.js .pf__it.up { transition-delay: calc(min(var(--i, 0), 8) * 40ms); }
.pf__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--lime); color: #0a0a0a; }
.pf__svg { width: 22px; height: 22px; }
.pf__tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf__tx b { font-size: 14.5px; font-weight: 800; line-height: 1.35; letter-spacing: -.03em; color: #f4f4ee; word-break: keep-all; overflow-wrap: anywhere; }
.pf__tx small { font-size: 12px; font-weight: 600; line-height: 1.4; color: #a2a399; word-break: keep-all; }
.js .pf:not(.is-all) .pf__it:nth-child(n+9) { display: none; }
.pf-more { display: none; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin: 18px auto 0; padding: 0 22px; border-radius: 999px; background: transparent; color: #f4f4ee; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.js .pf-more { display: flex; }
.pf-more em { font-style: normal; transition: transform .3s var(--ease-out); }
.pf-more.is-on em { transform: rotate(180deg); }
.pf-more:hover { background: var(--lime); color: #0a0a0a; box-shadow: inset 0 0 0 1.5px var(--lime); }
.pf-more:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
@media (min-width: 600px) {
  .pf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .js .pf:not(.is-all) .pf__it:nth-child(n+9) { display: flex; }
  .js .pf:not(.is-all) .pf__it:nth-child(n+10) { display: none; }
}
@media (min-width: 1024px) {
  .pf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .pf__it { gap: 14px; padding: 18px 20px; }
  .pf__ic { flex: none; width: 44px; height: 44px; }
  .pf__tx b { font-size: 15.5px; }
  .js .pf:not(.is-all) .pf__it:nth-child(n+10) { display: flex; }
  .js .pf:not(.is-all) .pf__it:nth-child(n+13) { display: none; }
  .pf-more { margin-top: 24px; }
}
@media (max-width: 599px) {
  .pf { grid-template-columns: minmax(0, 1fr); gap: 8px; }   /* 휴대폰은 한 줄에 하나 — 두 칸이면 이름 · 설명이 서너 줄로 꺾였다 */
  .pf__it { gap: 12px; padding: 12px 14px; border-radius: 16px; }
  .pf__ic { width: 36px; height: 36px; border-radius: 10px; }
  .pf__svg { width: 20px; height: 20px; }
  .pf__tx b { font-size: 13.5px; }
  .pf__tx small { font-size: 11.5px; }
  .pf-more { min-height: 42px; font-size: 13.5px; }
}
/* 기본 기능 비용 표시 · 설명 — 이름 옆 작은 알약(별도 비용 라임 · AI 크레딧 차감 보라 · 그 밖 회색) · 아래 흐린 작은 글 */
.pf__tx b .pf__n { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(200, 240, 0, .14); color: var(--lime); font-size: 11px; font-style: normal; font-weight: 700; line-height: 1.5; letter-spacing: -.01em; vertical-align: 1px; white-space: nowrap; }
.pf__tx b .pf__n--ai { background: rgba(167, 139, 250, .2); color: #c4b5fd; }
.pf__tx b .pf__n--info { background: rgba(255, 255, 255, .1); color: #c9cabf; }
@media (max-width: 599px) { .pf__tx b .pf__n { margin-left: 4px; padding: 0 6px; font-size: 10px; } }
/* 기본 기능 휴대폰 — 칸마다 상자 대신 한 장의 목록(가는 줄로 나눔) · 줄 높이 · 마디 위아래 여백을 줄인다(2026-10-20 사용자 「높이는 줄이고 글자는 안 꺾이게」) */
@media (max-width: 599px) {
  .prp #all.chap { padding-top: 48px; }
  .prp #all.chap:not(:last-child) { padding-bottom: 80px; }
  .prp #all .chap__head { margin-bottom: 22px; }
  .pf { gap: 0; padding: 2px 14px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
  .pf__it { gap: 12px; padding: 10px 0; border: 0; border-radius: 0; background: none; }
  .pf__it + .pf__it { border-top: 1px solid rgba(255, 255, 255, .08); }
  .pf__ic { width: 30px; height: 30px; border-radius: 9px; }
  .pf__svg { width: 17px; height: 17px; }
  .pf__tx { gap: 1px; }
  .pf__tx b { font-size: 13.5px; line-height: 1.3; }
  .pf__tx small { font-size: 11.5px; line-height: 1.35; }
  .pf-more { margin-top: 14px; }
}