.pricing-wrap{padding-top:var(--sp-32);padding-bottom:var(--sp-40)}
.pr-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--sp-32);align-items:center;padding:var(--sp-24) var(--sp-32);border:1px solid var(--line);border-radius:var(--r-xl);background:var(--panel);overflow:hidden;position:relative}
.pr-hero .eyebrow{margin:0 0 var(--sp-12)}
.pr-hero h1{font:900 clamp(30px,3vw,40px)/1.15 var(--disp);letter-spacing:-.045em;margin:0;max-width:22ch;text-wrap:balance}
.pr-hero h1 em{display:block;font-style:normal;color:var(--hot)}
.pr-hero-copy>p:not(.eyebrow){font-size:var(--t-lg);line-height:1.6;color:var(--ink-1);margin:var(--sp-12) 0}
.pr-trial{display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--sp-8);font-size:var(--t-md);color:var(--ink-1)}
.pr-trial b{font-weight:600;color:var(--hot)}
.pr-trial a{color:var(--ink);text-underline-offset:4px;text-decoration:underline}
.pr-showcase{display:block;text-decoration:none;color:var(--ink);justify-self:end;width:100%;max-width:360px}
.pr-films{display:flex;gap:var(--sp-12);align-items:center;justify-content:center;isolation:isolate}
.pr-films img{width:calc((100% - 24px)/3);aspect-ratio:9/16;object-fit:cover;border:1px solid var(--line-2);border-radius:var(--r);max-height:168px}
.pr-films img:first-child{transform:rotate(-7deg) translateY(8px)}
.pr-films img:last-child{transform:rotate(7deg) translateY(8px)}
.pr-showcase>span{display:block;text-align:center;margin-top:var(--sp-16);font-size:var(--t-base);color:var(--ink-2)}
.pr-showcase>span{transition:color var(--dur-2) var(--ease)}
.pr-films img{transition:transform var(--dur-3) var(--ease),border-color var(--dur-2) var(--ease)}
.pr-buy-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-16);margin:var(--sp-32) 0 var(--sp-20)}
.pr-tabs{display:inline-flex;gap:var(--sp-4);padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-full);background:var(--panel)}
.pr-tabs a{display:flex;align-items:center;justify-content:center;gap:var(--sp-8);height:var(--ctl-xl);padding:0 var(--sp-20);border-radius:var(--r-full);font-size:var(--t-lg);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.pr-tabs a[aria-selected="true"]{background:var(--ink);color:var(--surface-0);font-weight:700}
.pr-currency{font-size:var(--t-base);color:var(--ink-2);text-align:right}
.pr-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-16);margin-bottom:var(--sp-16)}
.pr-section-head h2{font-size:var(--t-2xl);margin:0}
.pr-section-head p{font-size:var(--t-md);color:var(--ink-2);margin:0;line-height:1.6}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-16)}
.plan-card{--plan:var(--ink-1);position:relative;border:1px solid var(--line-2);border-top:3px solid var(--plan);border-radius:var(--r-lg);padding:var(--sp-20);background:var(--panel);min-width:0;display:flex;flex-direction:column}
.plan-card[data-plan-id="pro"]{--plan:var(--hot)}
.plan-card[data-plan-id="studio"]{--plan:var(--cool)}
.plan-card.hot{border-color:var(--hot)}
.plan-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8)}
.plan-card h3{font-size:var(--t-2xl);font-weight:700;color:var(--plan);letter-spacing:.02em;margin:0}
.plan-audience{font-size:var(--t-md);line-height:1.6;color:var(--ink-2);margin:var(--sp-6) 0 var(--sp-16);min-height:1.6em}
.plan-output{border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);padding:var(--sp-12) var(--sp-16);margin-bottom:var(--sp-16)}
.plan-output>span{display:block;font-size:var(--t-base);color:var(--ink-2);margin-bottom:var(--sp-6)}
.plan-output p{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-6);margin:0;font-size:var(--t-lg);color:var(--ink-1)}
.plan-output strong{font-size:var(--t-6xl);font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums}
.plan-output small{display:block;font-size:var(--t-base);color:var(--ink-2);margin-top:var(--sp-10)}
.plan-card.hot .plan-output{border-color:var(--hot-dim);background:var(--hot-ghost)}
.plan-price{display:flex;align-items:baseline;gap:var(--sp-6);margin:0;font-size:var(--t-5xl);font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.plan-price small{font-size:var(--t-md);font-weight:400;letter-spacing:0;color:var(--ink-2)}
.plan-unit{font-size:var(--t-base);color:var(--ink-2);margin:var(--sp-6) 0 var(--sp-16)}
.plan-card>.btn{height:var(--ctl-hero);width:100%;justify-content:center;font-size:var(--t-lg);font-weight:700;flex-shrink:0}
/* 노랑(채움)은 추천 플랜 하나만 (R5-06) — 나머지는 중립 단추다. 예전엔 흰 채움이라 채운 단추가 셋이었다 */
.plan-card>.btn:not(.primary):not([disabled]){background-color:var(--fill);color:var(--ink);border-color:var(--line-2)}
.plan-card>.btn[disabled]{background-color:var(--fill);color:var(--ink-2);border-color:var(--line-2);opacity:1;cursor:not-allowed}
.plan-terms{font-size:var(--t-base);line-height:1.6;color:var(--ink-2);margin:var(--sp-10) 0 var(--sp-20)}
.plan-benefits{border-top:1px solid var(--line);padding-top:var(--sp-16);margin-top:auto}
.plan-benefits>p{font-size:var(--t-base);font-weight:600;color:var(--ink-1);margin:0 0 var(--sp-12)}
.plan-benefits ul{list-style:none;display:grid;gap:var(--sp-10);padding:0;margin:0;font-size:var(--t-md)}
.plan-benefits li{display:flex;gap:var(--sp-8);align-items:baseline}
.plan-benefits li:before{content:'✓';color:var(--plan)}
.pr-more{display:flex;justify-content:space-between;gap:var(--sp-16);flex-wrap:wrap;margin:var(--sp-16) 0;font-size:var(--t-md);color:var(--ink-2)}
.pr-more a{color:var(--ink-1);text-decoration:underline;text-underline-offset:4px}
.pr-policy{margin:var(--sp-12) 0 0;font-size:var(--t-base);line-height:1.7;color:var(--ink-2)}
.pr-calc{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;margin-top:var(--sp-40);background:var(--panel);scroll-margin-top:112px}
.pr-calc-form{padding:var(--sp-32)}
.pr-calc h2{font-size:var(--t-3xl);letter-spacing:-.02em;margin:0 0 var(--sp-8)}
.pr-calc p{font-size:var(--t-md);color:var(--ink-2);line-height:1.7;margin:0}
.pr-calc-controls{display:grid;gap:var(--sp-20);margin:var(--sp-24) 0}
.pr-calc-control{min-width:0}
.pr-calc-control-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);margin-bottom:var(--sp-4)}
.pr-calc-controls label{font-size:var(--t-md);color:var(--ink-1)}
.pr-calc-controls input[type="number"]{width:88px;height:var(--ctl-xl);min-width:0;padding:0 var(--sp-8);border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel-2);color:var(--ink);font:600 var(--t-xl) var(--body);font-variant-numeric:tabular-nums;text-align:center}
.pr-calc-controls input[type="range"]{--range-progress:0%;appearance:none;-webkit-appearance:none;display:block;width:100%;height:32px;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;accent-color:var(--hot)}
.pr-calc-controls input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:var(--r-full);background:linear-gradient(to right,var(--hot) var(--range-progress),var(--line-2) var(--range-progress))}
.pr-calc-controls input[type="range"]::-moz-range-track{height:6px;border-radius:var(--r-full);background:linear-gradient(to right,var(--hot) var(--range-progress),var(--line-2) var(--range-progress))}
.pr-calc-controls input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:calc((6px - 20px)/2);border:3px solid var(--hot);border-radius:50%;background:var(--ink);box-shadow:0 1px 5px #0003}
.pr-calc-controls input[type="range"]::-moz-range-thumb{width:14px;height:14px;border:3px solid var(--hot);border-radius:50%;background:var(--ink);box-shadow:0 1px 5px #0003}
.pr-calc-scale{display:flex;justify-content:space-between;font-size:var(--t-sm);color:var(--ink-2);font-variant-numeric:tabular-nums}
.pr-calc .chk{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--t-md);color:var(--ink-1)}
/* 앱의 스위치 — 레이아웃 화면(.lt-edit)과 같은 모양 · 브라우저 기본 체크 상자는 이 화면만 다른 그림이었다 (P07) */
.pr-calc .chk{min-height:var(--ctl-md);cursor:pointer}
.pr-calc .chk input{appearance:none;-webkit-appearance:none;flex:none;position:relative;margin:0;width:32px;height:18px;
  border-radius:var(--r-full);background:var(--surface-5);border:1px solid var(--line-2);cursor:pointer;
  transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.pr-calc .chk input::before{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;
  background:var(--ink-3);transition:transform var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}
.pr-calc .chk input:checked{background:var(--hot-dim);border-color:var(--hot-dim)}
.pr-calc .chk input:checked::before{transform:translateX(14px);background:var(--hot)}
.pr-calc .chk input:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.pr-calc-result{padding:var(--sp-32);background:var(--panel-2);border-left:1px solid var(--line)}
.pr-calc-result .pr-monthly{font-size:var(--t-5xl);font-weight:700;color:var(--hot);line-height:1.3;letter-spacing:-.03em;margin:var(--sp-8) 0 var(--sp-16)}
.pr-estimate-detail{display:flex;flex-wrap:wrap;gap:var(--sp-6) var(--sp-12);margin:var(--sp-12) 0;font-size:var(--t-base);color:var(--ink-2)}
.pr-estimate-detail b{color:var(--ink-1);font-weight:600}
.pr-calc-result .btn{margin-top:var(--sp-16);height:var(--ctl-xl)}
.pr-calc-result [role="status"]{font-size:var(--t-md);line-height:1.7;color:var(--ink-1)}
.pr-details{margin-top:var(--sp-40);border-top:1px solid var(--line);padding-top:var(--sp-24)}
.pr-details>summary{font-size:var(--t-2xl);font-weight:600}
.pr-cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--sp-24);align-items:start;margin-top:var(--sp-24)}
.pricing-wrap table{border-collapse:collapse;width:100%;font-size:var(--t-md)}
.pricing-wrap th,.pricing-wrap td{text-align:left;padding:var(--sp-12);border-bottom:1px solid var(--line);vertical-align:top}
.pricing-wrap thead th{font-size:var(--t-base);color:var(--ink-2);background:var(--panel-2);font-weight:500}
.pricing-wrap td.n,.pricing-wrap th.n{text-align:right;white-space:nowrap}
.pricing-wrap td .sub{display:block;font-size:var(--t-base);color:var(--ink-2);margin-top:var(--sp-4);line-height:1.7}
.pr-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.freebox{padding:var(--sp-20);border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.freebox h3{font-size:var(--t-xl);margin:0 0 var(--sp-8)}
.freebox p{font-size:var(--t-md);color:var(--ink-2);line-height:1.7;margin:0 0 var(--sp-16)}
.freebox ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-10);font-size:var(--t-md);color:var(--ink-1)}
.freebox li{display:flex;gap:var(--sp-12)}
.freebox li b{color:var(--hot);font-weight:500}
.pr-faq-title{font-size:var(--t-3xl);margin:var(--sp-40) 0 var(--sp-16)}
.faq-lite{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-12);align-items:start}
.faq-lite details{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:var(--sp-16)}
.faq-lite summary{font-size:var(--t-lg)}
.faq-lite .a{font-size:var(--t-md);color:var(--ink-1);line-height:1.8;margin-top:var(--sp-12)}
.pr-foot{display:flex;gap:var(--sp-20);flex-wrap:wrap;border-top:1px solid var(--line);margin-top:var(--sp-40);padding-top:var(--sp-24);font-size:var(--t-base);color:var(--ink-2)}
.pr-hero{background-image:radial-gradient(ellipse at 0% 0%,color-mix(in srgb,var(--hot) 7%,transparent),transparent 60%),radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--cool) 5%,transparent),transparent 55%)}
.plan-card{background-image:linear-gradient(140deg,color-mix(in srgb,var(--plan) 13%,transparent),color-mix(in srgb,var(--plan) 3%,transparent) 42%,transparent 80%)}
.plan-card.hot .plan-output{background-image:linear-gradient(135deg,color-mix(in srgb,var(--hot) 12%,transparent),transparent 80%)}
.pr-tabs a[aria-selected="true"]{background-image:linear-gradient(120deg,rgba(255,255,255,.3),transparent 45%,rgba(0,0,0,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 6px rgba(0,0,0,.16)}
/* Keep card emphasis and pointer movement separate so reduced motion keeps the feedback. */
.plan-card{transition:transform var(--dur-3) var(--ease),filter var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),box-shadow var(--dur-3) var(--ease)}
.plan-output{transition:border-color var(--dur-2) var(--ease)}
.plan-card>.btn{transition:transform var(--dur-2) var(--ease),filter var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.pr-tabs a{transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.plan-card:focus-within{border-color:var(--plan);box-shadow:var(--e-1)}
.pr-showcase:focus-visible>span{color:var(--hot)}
@media(hover:hover) and (pointer:fine){
  .plan-card:hover{filter:brightness(1.08);border-color:var(--plan);background-color:var(--panel-2);box-shadow:var(--e-1)}
  .plan-card:hover .plan-output{border-color:var(--plan)}
  .plan-card>.btn:not(:disabled):hover{filter:brightness(1.08);box-shadow:var(--e-1)}
  .pr-tabs a:not([aria-selected="true"]):hover{background:var(--fill-2);color:var(--ink)}
  .pr-showcase:hover>span{color:var(--hot)}
  .pr-showcase:hover img{border-color:var(--ink-3)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .plan-card:hover{transform:translateY(-4px)}
  .plan-card>.btn:not(:disabled):hover{transform:translateY(-2px)}
  .plan-card>.btn:not(:disabled):active{transform:translateY(0)}
  .pr-showcase:hover img:first-child{transform:rotate(-10deg) translateY(2px)}
  .pr-showcase:hover img:nth-child(2){transform:translateY(-6px)}
  .pr-showcase:hover img:last-child{transform:rotate(10deg) translateY(2px)}
}
@media(max-width:1000px){.pr-hero{padding:var(--sp-24);gap:var(--sp-24)}.plan-card{padding:var(--sp-20)}.pr-films img{max-height:176px}.pr-calc-form,.pr-calc-result{padding:var(--sp-24)}}
@media(max-width:760px){.pr-hero{grid-template-columns:1fr auto;gap:var(--sp-16)}.pr-showcase{max-width:120px}.pr-films img{display:none}.pr-films img:nth-child(2){display:block;width:100%;max-height:180px}.pr-showcase>span{font-size:var(--t-sm)}.pr-hero h1{font-size:var(--t-5xl)}.plan-grid{grid-template-columns:1fr;gap:var(--sp-16)}.plan-output strong{font-size:var(--t-6xl)}.plan-benefits{margin-top:0}.pr-calc,.pr-cols{grid-template-columns:1fr}.pr-calc-result{border-left:0;border-top:1px solid var(--line)}.pr-section-head{align-items:flex-start;flex-direction:column;gap:var(--sp-6)}.faq-lite{grid-template-columns:1fr}}
@media(max-width:460px){.pricing-wrap{padding-top:var(--sp-20)}.pr-hero{padding:var(--sp-24) var(--sp-20);grid-template-columns:1fr}.pr-showcase{display:none}.pr-buy-heading{flex-wrap:wrap;gap:var(--sp-12);margin-top:var(--sp-24)}.pr-tabs{width:100%}.pr-tabs a{flex:1;padding:0 var(--sp-12)}.pr-currency{width:100%;text-align:left}.pr-calc-controls{gap:var(--sp-8)}.pr-calc-form,.pr-calc-result{padding:var(--sp-20)}}

/* 구독 혜택 줄 (billing.catalog plans[].perks) — 크레딧이 아니라 '값을 안 받는 일' 이라 강조색으로 가른다 */
.plan-benefits li.plan-perk{color:var(--ink);font-weight:600}
/* 한국어는 어절 단위로 접는다 (P15) */
.pricing-wrap:lang(ko){word-break:keep-all;overflow-wrap:anywhere}
/* 세 카드의 줄 기준선을 맞춘다 (R2-18) — 768 에서 PRO 설명만 두 줄로 넘어가 그 아래 숫자·가격·단추·혜택 줄이 카드마다 어긋났다.
   카드 안 여덟 줄(머리·설명·제작 목안·가격·단가·단추·안내·혜택)을 부모 격자의 줄로 잇는다 (subgrid). 한 열(≤760)은 그대로다. */
@media(min-width:761px){
  .plan-grid{grid-auto-rows:auto}
  .plan-card{display:grid;grid-row:span 8;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .plan-benefits{margin-top:0}
}
/* 1000 아래 세 열에서 긴 단추 문구(ja·es)가 잘렸다 — 한 계단 줄인다 */
@media(max-width:1000px) and (min-width:761px){.plan-card>.btn{font-size:var(--t-base);padding-inline:var(--sp-8)}}