/* OVER PLATFORM PASS */
:root {
  --page:#090b10;
  --panel:#11141b;
  --panel-2:#151923;
  --line:rgba(255,255,255,.1);
  --line-strong:rgba(255,255,255,.18);
  --text:#f6f7fa;
  --muted:#939aaa;
  --cyan:#73e8ff;
  --blue:#8da7ff;
  --violet:#c9a6ff;
  --green:#a9efc1;
  --danger:#ff8f9b;
}

* { box-sizing:border-box; }
html { color-scheme:dark; background:var(--page); scroll-behavior:smooth; }
body.pricing-plans-page {
  min-width:320px;
  margin:0;
  overflow-x:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 5%,rgba(80,116,255,.09),transparent 24rem),
    radial-gradient(circle at 82% 20%,rgba(139,83,255,.07),transparent 28rem),
    var(--page);
  font-family:Pretendard,"Noto Sans KR","Segoe UI",sans-serif;
  word-break:keep-all;
}

button,a,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { color:inherit; }
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }

.subscription-topbar {
  position:sticky;
  top:12px;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:min(1440px,calc(100% - 40px));
  min-height:64px;
  margin:12px auto 0;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(9,11,16,.84);
  box-shadow:0 14px 38px rgba(0,0,0,.22);
  backdrop-filter:blur(18px);
}

.subscription-brand { display:flex; align-items:center; gap:10px; min-width:0; }
.subscription-brand > span {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
}
.subscription-brand img { display:block; width:28px; height:28px; object-fit:contain; }
.subscription-brand strong { font-size:15px; font-weight:750; white-space:nowrap; }
.subscription-topbar nav { display:flex; align-items:center; gap:4px; }
.subscription-topbar nav a {
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:40px;
  padding:0 13px;
  border-radius:6px;
  color:var(--muted);
  font-size:13px;
  font-weight:650;
  white-space:nowrap;
  transition:color .2s ease,background .2s ease;
}
.subscription-topbar nav a:hover { color:var(--text); background:rgba(255,255,255,.05); }
.subscription-topbar nav a.is-active { color:var(--text); background:rgba(255,255,255,.07); }
.subscription-topbar nav a.is-active::after {
  content:"";
  position:absolute;
  right:12px;
  bottom:0;
  left:12px;
  height:2px;
  background:var(--cyan);
}
.subscription-topbar nav svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; }

.pricing-shell {
  width:min(1440px,calc(100% - 40px));
  margin:0 auto;
  padding:30px 0 72px;
}

.pricing-intro {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:48px;
  padding-bottom:36px;
}
.pricing-intro .eyebrow,
.section-heading p,
.pass-status header p {
  margin:0 0 12px;
  color:var(--cyan);
  font-size:12px;
  font-weight:750;
  letter-spacing:0;
}
.pricing-intro h1 {
  max-width:720px;
  margin:0;
  font-size:44px;
  line-height:1.12;
  font-weight:780;
  letter-spacing:0;
}
.pricing-intro > div:first-child > p:last-child {
  max-width:620px;
  margin:20px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
}

.account-strip {
  display:grid;
  grid-template-columns:repeat(3,minmax(120px,1fr));
  width:min(580px,100%);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.018);
}
.account-strip > span { min-width:0; padding:18px 20px; border-left:1px solid var(--line); }
.account-strip > span:first-child { border-left:0; }
.account-strip small { display:block; margin-bottom:7px; color:#8991a1; font-size:12px; }
.account-strip b {
  display:block;
  overflow:hidden;
  color:#e8ebf2;
  font-size:14px;
  font-weight:680;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.account-strip em { color:var(--cyan); font-style:normal; }

.plan-section { padding-top:28px; border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.section-heading h2 { margin:0; font-size:27px; line-height:1.25; letter-spacing:0; }
.section-heading > span {
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:5px;
  color:#b5bbca;
  font-size:12px;
  white-space:nowrap;
}

.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:stretch; }
.plan-card {
  --accent:var(--cyan);
  position:relative;
  display:flex;
  min-width:0;
  min-height:650px;
  flex-direction:column;
  overflow:hidden;
  padding:26px;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--panel);
  box-shadow:0 20px 45px rgba(0,0,0,.16);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.plan-card::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  opacity:.28;
  background:var(--accent);
  transition:opacity .25s ease;
}
.plan-card:hover { transform:translateY(-3px); border-color:var(--line-strong); }
.plan-card.is-selected {
  border-color:color-mix(in srgb,var(--accent) 52%,transparent);
  box-shadow:0 24px 64px rgba(0,0,0,.28),inset 0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent);
}
.plan-card.is-selected::before { opacity:1; }
.plan-card--view { --accent:var(--blue); background:linear-gradient(145deg,rgba(75,102,202,.13),transparent 44%),var(--panel); }
.plan-card--studio { --accent:var(--violet); background:linear-gradient(145deg,rgba(134,76,196,.12),transparent 44%),var(--panel); }

.plan-head > div { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.plan-head > div span {
  display:grid;
  place-items:center;
  width:30px;
  height:24px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  border-radius:4px;
  color:var(--accent);
  font-size:11px;
  font-weight:800;
}
.plan-head > div p { margin:0; color:#858d9e; font-size:11px; font-weight:700; }
.plan-head h3 { margin:0; font-size:30px; line-height:1.1; font-weight:780; }
.plan-head > p { min-height:50px; margin:11px 0 0; color:#a2a9b7; font-size:14px; line-height:1.65; }

.plan-visual {
  position:relative;
  height:132px;
  margin:18px 0 0;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  border-radius:7px;
  background:#080a10;
}
.plan-visual::after { content:""; position:absolute; inset:auto 0 0; height:40%; background:linear-gradient(transparent,var(--panel)); pointer-events:none; }
.plan-visual img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 52%; transition:transform .45s ease; }
.plan-card:hover .plan-visual img { transform:scale(1.025); }

.plan-price { position:relative; min-height:146px; margin-top:20px; padding:18px 18px 16px; overflow:hidden; border-top:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); border-bottom:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 68%); }
.plan-price::after { content:""; position:absolute; top:18px; right:0; width:2px; height:34px; border-radius:2px; background:var(--accent); opacity:.7; }
.plan-price-label { display:flex; align-items:center; gap:8px; color:#aab2c0; font-size:12px; font-weight:700; }
.plan-price-label svg { width:16px; height:16px; fill:none; stroke:var(--accent); stroke-width:1.8; }
.plan-price-main { display:flex; align-items:baseline; gap:10px; margin-top:14px; }
.plan-price-main strong { color:#fff; font-size:50px; line-height:.92; font-weight:820; font-variant-numeric:tabular-nums; }
.plan-price-main span { color:var(--accent); font-size:14px; font-weight:750; }
.plan-price-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:15px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); }
.plan-price-foot b { color:#f1f3f7; font-size:14px; font-weight:750; font-variant-numeric:tabular-nums; }
.plan-price-foot small { color:#929baa; font-size:11px; font-weight:600; text-align:right; }
.plan-divider { height:1px; margin:24px 0; background:transparent; }

.plan-config {
  min-height:148px;
  margin:20px 0 16px;
  padding:19px 0 16px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.config-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.config-head span,.plan-config label > span { color:#a0a8b7; font-size:12px; }
.config-head b,.plan-config label > b { font-size:13px; font-weight:700; white-space:nowrap; }
.config-head em,.plan-config label em { color:var(--accent); font-style:normal; }
.plan-config input[type="range"] {
  width:100%;
  height:20px;
  margin:18px 0 4px;
  padding:0;
  cursor:pointer;
  accent-color:var(--accent);
  background:transparent;
  filter:brightness(1);
  transition:filter .22s ease;
}
.plan-config input[type="range"].is-wheel-moving { filter:brightness(1.35); }
.plan-config input[type="range"]::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 80%,white),rgba(255,255,255,.12)); }
.plan-config input[type="range"]::-webkit-slider-thumb { width:16px; height:16px; margin-top:-6.5px; border:3px solid #11151d; border-radius:50%; appearance:none; background:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent); transition:box-shadow .22s ease,transform .22s ease; }
.plan-config input[type="range"].is-wheel-moving::-webkit-slider-thumb { transform:scale(1.16); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 16%,transparent); }
.range-labels { display:flex; justify-content:space-between; color:#7d8595; font-size:11px; font-variant-numeric:tabular-nums; }
.plan-config > small { display:flex; align-items:center; justify-content:space-between; margin-top:12px; color:#a4acba; font-size:12px; }
.plan-config > small b { color:#f0f2f6; font-size:14px; font-weight:750; }
.plan-config--studio { display:grid; gap:13px; min-height:148px; padding-top:15px; }
.plan-config--studio label { display:grid; grid-template-columns:1fr auto; align-items:center; gap:0 12px; }
.plan-config--studio label input { grid-column:1/-1; margin:5px 0 0; }
.plan-config--studio > small { margin-top:0; }

.feature-list { display:grid; gap:0; margin:0 0 25px; padding:0; list-style:none; }
.feature-list li {
  display:grid;
  grid-template-columns:18px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-height:46px;
  border-bottom:1px solid rgba(255,255,255,.065);
  color:#d7dbe4;
  font-size:13px;
}
.feature-list li:last-child { border-bottom:0; }
.feature-list svg { width:14px; height:14px; fill:none; stroke:var(--accent); stroke-width:1.8; }
.feature-list span { min-width:0; line-height:1.45; }
.feature-list b { color:#a0a7b5; font-size:12px; font-weight:600; text-align:right; white-space:nowrap; }
.feature-list .is-planned { color:#afb5c1; }
.feature-list .is-planned b { color:#9ea9c1; }

.plan-select,
.plan-included {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:50px;
  margin-top:auto;
  padding:0 16px;
  border:1px solid var(--line-strong);
  border-radius:6px;
  color:#f4f5f8;
  background:rgba(255,255,255,.035);
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.plan-select:hover { border-color:color-mix(in srgb,var(--accent) 50%,transparent); background:rgba(255,255,255,.07); }
.is-selected .plan-select { border-color:transparent; color:#080a0e; background:var(--accent); }
.plan-select svg,.plan-included svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.plan-included { color:#080a0e; background:var(--cyan); cursor:default; }

.purchase-panel {
  position:relative;
  display:grid;
  grid-template-columns:minmax(310px,1.15fr) minmax(430px,1.45fr) auto;
  align-items:center;
  gap:24px;
  margin-top:14px;
  padding:24px 26px 46px;
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:rgba(18,22,30,.88);
}
.purchase-plan { min-width:0; }
.purchase-order-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.purchase-order-head small { color:#929aaa; font-size:11px; font-weight:650; }
.purchase-order-head code { padding:4px 7px; border:1px solid var(--line); border-radius:4px; color:#9ea7b8; background:rgba(255,255,255,.025); font-family:"SFMono-Regular",Consolas,monospace; font-size:10px; white-space:nowrap; }
.purchase-plan h2 { margin:8px 0 10px; font-size:20px; }
.purchase-products { display:flex; flex-wrap:wrap; gap:6px; }
.purchase-products > span { display:inline-flex; align-items:center; gap:8px; min-height:28px; padding:0 9px; border:1px solid rgba(115,232,255,.22); border-radius:5px; color:#e9edf4; background:rgba(115,232,255,.055); font-size:11px; font-weight:650; }
.purchase-products > span[hidden] { display:none; }
.purchase-products > span.is-basic { border-color:var(--line); color:#bbc2ce; background:rgba(255,255,255,.025); }
.purchase-products b { color:var(--cyan); font-size:9px; font-weight:700; }
.purchase-plan p { margin:11px 0 0; color:#8f98a8; font-size:11px; line-height:1.55; }
.purchase-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); min-width:0; border-left:1px solid var(--line); }
.purchase-metrics > span { display:flex; min-width:0; min-height:66px; flex-direction:column; justify-content:center; padding:4px 15px; border-right:1px solid var(--line); }
.purchase-metrics small { display:block; margin-bottom:7px; color:#8991a1; font-size:11px; }
.purchase-metrics b { display:block; overflow:hidden; font-size:13px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.purchase-metrics em { color:#f0f2f6; font-style:normal; font-variant-numeric:tabular-nums; }
.purchase-metrics .is-total { background:rgba(115,232,255,.035); }
.purchase-metrics .is-total small { color:var(--cyan); }
.purchase-metrics i { display:block; margin-top:5px; color:#818a9b; font-size:10px; font-style:normal; font-weight:500; }
.purchase-metrics i em { color:inherit; }
.purchase-actions { display:flex; align-items:center; gap:8px; }
.purchase-actions > a,.purchase-actions > button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 15px;
  border-radius:6px;
  white-space:nowrap;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
}
.purchase-actions > a { border:1px solid var(--line); color:#aab1c0; background:transparent; }
.purchase-actions > button { gap:12px; border:0; color:#06090d; background:var(--cyan); }
.purchase-actions > button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }
.shortfall { color:#9da5b4; font-size:11px; white-space:nowrap; }
.shortfall b { color:var(--danger); }
.shortfall[hidden] { display:none; }
.purchase-policy { position:absolute; bottom:14px; left:26px; margin:0; color:#7e8798; font-size:10px; }
.purchase-policy a { margin-left:12px; color:#929aaa; text-decoration:underline; text-underline-offset:3px; }

.pass-status { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px; }
.pass-status > article { min-width:0; padding:24px; border-top:1px solid var(--line-strong); background:rgba(255,255,255,.015); }
.pass-status header { display:flex; align-items:start; justify-content:space-between; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.pass-status header p { margin-bottom:7px; color:#7f8798; }
.pass-status header h2 { margin:0; font-size:17px; }
.pass-status header > span,.pass-status header button { color:#969eac; font-size:11px; }
.pass-status header button { border:0; background:none; cursor:pointer; }
.status-row,.history-row,.status-empty {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  min-height:72px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.status-row:last-child,.history-row:last-child { border-bottom:0; }
.status-row strong,.history-row strong { display:block; margin-bottom:4px; font-size:14px; }
.status-row small,.history-row small,.status-empty small { color:#929aaa; font-size:11px; line-height:1.55; }
.status-row > span,.history-row > span { color:#b6bdc9; font-size:11px; text-align:right; }
.status-row > span b,.history-row > span b { display:block; margin-bottom:4px; color:#eef0f5; font-size:12px; }
.status-empty { display:flex; min-height:92px; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; }
.status-empty b { font-size:12px; }

.subscription-toast {
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:90;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  max-width:min(360px,calc(100vw - 32px));
  padding:0 16px;
  border:1px solid rgba(115,232,255,.32);
  border-radius:6px;
  background:#151922;
  box-shadow:0 18px 50px rgba(0,0,0,.36);
  font-size:12px;
}
.subscription-toast[hidden] { display:none!important; }
.subscription-toast svg { width:16px; height:16px; fill:none; stroke:var(--cyan); stroke-width:2; }
.subscription-toast.is-error { border-color:rgba(255,143,155,.4); }
.subscription-toast.is-error svg { stroke:var(--danger); }

@media (max-width:1250px) {
  .pricing-intro { grid-template-columns:1fr; align-items:start; gap:32px; }
  .account-strip { width:100%; }
  .plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plan-card--studio { grid-column:1/-1; min-height:580px; }
  .plan-card--studio .feature-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .plan-card--studio .feature-list li { grid-template-columns:18px minmax(0,1fr); align-content:center; }
  .plan-card--studio .feature-list b { grid-column:2; text-align:left; }
  .purchase-panel { grid-template-columns:minmax(280px,.9fr) 1.5fr; }
  .purchase-actions { grid-column:1/-1; justify-content:flex-end; }
}

@media (max-width:820px) {
  .subscription-topbar { top:7px; width:calc(100% - 16px); min-height:54px; margin-top:7px; padding:6px 8px; }
  .subscription-brand strong { display:none; }
  .subscription-topbar nav { gap:0; }
  .subscription-topbar nav a { min-height:38px; padding:0 9px; font-size:11px; }
  .subscription-topbar nav svg { width:14px; height:14px; }
  .pricing-shell { width:min(100% - 16px,680px); padding:22px 0 64px; }
  .pricing-intro { gap:28px; padding-bottom:34px; }
  .pricing-intro h1 { font-size:38px; }
  .pricing-intro > div:first-child > p:last-child { font-size:13px; }
  .account-strip { grid-template-columns:1fr 1fr; }
  .account-strip > span { padding:14px; }
  .account-strip > span:last-child { grid-column:1/-1; border-top:1px solid var(--line); border-left:0; }
  .section-heading { align-items:start; }
  .section-heading h2 { font-size:21px; }
  .plan-grid { grid-template-columns:1fr; }
  .plan-card,.plan-card--studio { grid-column:auto; min-height:0; padding:22px; }
  .plan-card--studio .feature-list { grid-template-columns:1fr; gap:0; }
  .plan-card--studio .feature-list li { grid-template-columns:18px minmax(0,1fr) auto; }
  .plan-card--studio .feature-list b { grid-column:auto; text-align:right; }
  .plan-head > p { min-height:0; }
  .purchase-panel { grid-template-columns:1fr; gap:22px; padding:22px 20px 48px; }
  .purchase-metrics { border-top:1px solid var(--line); border-left:0; padding-top:18px; }
  .purchase-metrics > span:first-child { padding-left:0; }
  .purchase-actions { grid-column:auto; justify-content:stretch; }
  .purchase-actions > a,.purchase-actions > button { flex:1; }
  .pass-status { grid-template-columns:1fr; margin-top:38px; }
}

@media (max-width:520px) {
  .subscription-topbar nav a { width:42px; padding:0; justify-content:center; font-size:0; }
  .subscription-topbar nav a svg { width:17px; height:17px; }
  .pricing-shell { width:calc(100% - 20px); padding-top:38px; }
  .pricing-intro h1 { font-size:32px; line-height:1.16; }
  .pricing-intro > div:first-child > p:last-child { margin-top:15px; line-height:1.65; }
  .account-strip { grid-template-columns:1fr; }
  .account-strip > span,.account-strip > span:last-child { grid-column:auto; border-top:1px solid var(--line); border-left:0; }
  .account-strip > span:first-child { border-top:0; }
  .section-heading { margin-bottom:18px; }
  .section-heading > span { display:none; }
  .plan-card { padding:20px 17px; }
  .plan-head > div { margin-bottom:24px; }
  .plan-head h3 { font-size:25px; }
  .plan-price { min-height:142px; padding:16px 14px 14px; }
  .plan-price-main strong { font-size:42px; }
  .plan-price-main span { font-size:13px; }
  .plan-price-foot b { font-size:13px; }
  .plan-price-foot small { font-size:10px; }
  .feature-list li { grid-template-columns:17px minmax(0,1fr); padding:8px 0; }
  .feature-list b { grid-column:2; text-align:left; white-space:normal; }
  .config-head { align-items:start; flex-direction:column; gap:4px; }
  .plan-config--studio label { grid-template-columns:1fr auto; }
  .purchase-metrics { grid-template-columns:1fr 1fr; gap:0; }
  .purchase-metrics > span { padding:11px 10px; border-bottom:1px solid var(--line); }
  .purchase-metrics > span:nth-child(odd) { padding-left:0; }
  .purchase-actions { display:grid; grid-template-columns:1fr 1.25fr; }
  .purchase-order-head { align-items:flex-start; flex-direction:column; gap:7px; }
  .purchase-plan h2 { font-size:18px; }
  .purchase-plan p { font-size:10px; }
  .shortfall { grid-column:1/-1; }
  .purchase-policy { right:18px; left:18px; overflow:hidden; white-space:nowrap; }
  .pass-status > article { padding:20px 14px; }
  .subscription-toast { right:10px; bottom:10px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; }
}

/* 2026-08 grid alignment: summary and plan cards share the same thirds. */
@media (min-width:1251px) {
  .pricing-intro {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
  }
  .pricing-intro > div:first-child { grid-column:span 2; padding-right:32px; }
  .account-strip { width:100%; align-self:stretch; }
}
.plan-divider { min-height:184px; margin:0; }
.subscription-topbar nav a { min-height:42px; }