/* 가격 카드(무료 · PRO 평생 소장은 스토어 링크 · 기업·단체는 메일 문의). 칸 수는 build.py가 --cm-cols로 넣는다. build.py price_cards()가 만들고 요금 안내와 랜딩이 같이 쓴다 */
.cm-plans{display:grid;grid-template-columns:repeat(var(--cm-cols,3),minmax(0,1fr));gap:16px;align-items:stretch;text-align:left;max-width:860px;margin-inline:auto}
.cm-plan{display:flex;flex-direction:column;border-radius:32px;padding:36px 32px;background:#f4f5f7;color:#111}
.cm-plan.cm-paid{background:#fff;box-shadow:inset 0 0 0 1.5px #e6e8ec}
/* 가장 띄우는 칸(PRO 평생 소장): 배경색 대신 로고색 테두리·빛·숨쉬는 모션으로 띄운다(2026-10-13 사용자 요청) */
.cm-plan.cm-life{background:#fff;box-shadow:0 30px 56px -30px #3477f54d,inset 0 0 0 3px #3477f5;transform:translateY(-10px)}
@media (prefers-reduced-motion:no-preference){.cm-plan.cm-life{animation:cm-life-glow 3.6s ease-in-out infinite}}
@keyframes cm-life-glow{0%,100%{box-shadow:0 30px 56px -30px #3477f54d,inset 0 0 0 3px #3477f5}50%{box-shadow:0 36px 66px -28px #3477f599,inset 0 0 0 3px #5b92ff}}
.cm-plans .cm-name{display:flex;align-items:center;gap:8px;margin:0;font-size:16px;font-weight:700;color:#60656e}
.cm-plans .cm-life .cm-name{color:#3477f5;font-size:17px}
/* 빨간 알약 꼬리표(PRO ‘한 번 결제 · 할인율’) */
.cm-tag{display:inline-block;padding:3px 10px;border-radius:999px;background:#f26b4f;color:#fff;font-size:12px;font-style:normal;font-weight:800;line-height:1.4;letter-spacing:0}
.cm-plans .cm-won{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;margin:12px 0 2px;font-size:20px;font-weight:700}
.cm-won strong{font:800 48px/1.15 Manrope,"Pretendard Variable",Pretendard,sans-serif;letter-spacing:-.05em}
/* 취소선 값(정가)과 할인 꼬리표 */
.cm-won s{font-size:17px;font-weight:700;color:#80868f;margin-right:2px}
.cm-won .cm-tag{margin-left:6px;align-self:center}
/* PRO 정가 줄: 취소선 값 옆 큰 할인 배지, 값 아래 혜택 칩(2026-10-30 사용자: 눈에 띄게) */
.cm-plans .cm-was{display:flex;align-items:center;gap:8px;margin:14px 0 -4px}
.cm-was s{font-size:17px;font-weight:700;color:#80868f}
.cm-was .cm-tag{font-size:16px;padding:5px 12px;box-shadow:0 8px 18px -8px #f26b4fb3}
.cm-plans .cm-perks{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.cm-perks span{padding:6px 11px;border-radius:999px;background:#eaf1fe;color:#3477f5;font-size:14px;font-weight:800;line-height:1.3}
.cm-plans .cm-sub{margin:0;font-size:15px;color:#60656e}
.cm-plans .cm-life .cm-sub{color:#3477f5;font-weight:700}
.cm-plans .cm-lead{margin:26px 0 0;font-size:13px;font-weight:700;color:#60656e}
.cm-plan ul{list-style:none;margin:12px 0 30px;padding:0;display:grid;gap:12px;font-size:15px;line-height:1.5}
.cm-free ul{margin-top:26px}
.cm-plan li{display:flex;gap:10px;align-items:flex-start}
.cm-plan li svg{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:#3477f5;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* PRO 칸의 기능 목록은 전부 빨간 체크에 굵게, 무료·기업 칸은 파란 체크(2026-10-22 사용자) */
.cm-plan ul.cm-hot li{font-weight:700;color:#111}.cm-plan ul.cm-hot li svg{stroke:#f26b4f;stroke-width:3}
.cm-btn{display:flex;align-items:center;justify-content:center;margin-top:auto;padding:17px 20px;border-radius:16px;background:#111;color:#fff!important;font-size:16px;font-weight:700;text-decoration:none;white-space:nowrap;transition:transform .3s cubic-bezier(.23,1,.32,1),background-color .25s ease,color .25s ease,box-shadow .3s ease}
.cm-btn.cm-soft{background:#fff;color:#111!important;box-shadow:inset 0 0 0 1px #e6e8ec}
.cm-btn:active{transform:scale(.97);transition-duration:.12s}
@media (hover:hover) and (pointer:fine){.cm-btn:hover{background:#3477f5;color:#fff!important;transform:translateY(-3px) scale(1.03);box-shadow:0 18px 32px -14px #3477f5cc}}
/* PRO 칸의 스토어 버튼(스마트스토어·쿠팡) */
/* 기업·단체 칸: 값 자리에 ‘문의’ 글자. 숫자 크기면 너무 커서 조금 줄인다 */
.cm-plans .cm-biz .cm-won strong{font-size:34px;letter-spacing:-.03em}
.cm-store-btns{display:grid;gap:8px;margin-top:auto}.cm-store-btns .cm-btn{margin-top:0}
p.cm-plans-note{margin:18px 4px 0;font-size:14px;line-height:1.6;color:#60656e;text-align:center}
p.cm-plans-note b{display:block;margin-bottom:5px;font-size:15px;color:#111}
.cm-plans-note[hidden]{display:none}
@media (max-width:860px){
  .cm-plans{grid-template-columns:minmax(0,1fr)}
  .cm-plan{padding:28px 24px;border-radius:28px}
  .cm-plan.cm-life{transform:none}
  .cm-won strong{font-size:42px}
}
/* 세 칸(무료·PRO·기업)은 한 줄에 들어가게 조금 넓히고, 취소선 값은 윗줄에 따로 둔다 */
.cm-plans[style*="--cm-cols:3"]{max-width:1040px}
.cm-plans[style*="--cm-cols:3"] .cm-won s{flex-basis:100%;margin:0 0 -6px}
/* 세 칸이 861~1040px에 끼면 칸이 270px쯤이라 숫자와 여백을 조금 줄인다(태블릿 가로·작은 노트북) */
@media (max-width:1040px){.cm-plans[style*="--cm-cols:3"] .cm-plan{padding:30px 22px}.cm-plans[style*="--cm-cols:3"] .cm-won strong{font-size:40px}.cm-plans[style*="--cm-cols:3"] .cm-plan li{font-size:14px}}