/* 메테우스 구독제 요금제 — 2026-09-25. 상점 상품 페이지(.shop-detail) 본문 구역으로 들어간다.
   요금 카드는 테두리 한 겹과 추천 플랜의 진한 윗선만으로 구분한다. 월/연 전환은 라디오와 :has로만 바꾼다. */
.sub-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.sub-plans-intro{margin:-6px 0 22px;max-width:85ch;font-size:15px;line-height:1.9;color:var(--ui-ink-3)}
.sub-section-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 30px;margin-bottom:18px}
.sub-section-head h2,.sub-split-head h2{font-size:23px;line-height:1.5;font-weight:600;margin:0}

.sub-cycle{display:inline-flex;border:1px solid var(--ui-line-strong);border-radius:var(--ui-pill);padding:3px;margin:0;background:#fff}
.sub-cycle label{position:relative;cursor:pointer}
.sub-cycle input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sub-cycle label>span{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border-radius:var(--ui-pill);font-size:13px;color:var(--ui-ink-3)}
.sub-cycle em{font-style:normal;font-size:11px;color:var(--ui-link)}
.sub-cycle input:checked+span{background:var(--ui-accent);color:#fff}
.sub-cycle input:checked+span em{color:inherit;opacity:.8}
.sub-cycle input:focus-visible+span{outline:3px solid var(--ui-focus);outline-offset:2px}

.sub-plans{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sub-plan{display:flex;flex-direction:column;padding:28px 26px 26px;background:#fff;border:1px solid var(--ui-line);border-radius:var(--ui-radius-m)}
.sub-plan.is-featured{border-top:3px solid var(--ui-accent);padding-top:26px}
.sub-plan-head{display:flex;justify-content:space-between;align-items:center;min-height:24px}
.sub-plan-label{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--ui-ink-3)}
.sub-plan-badge{font-size:12px;padding:3px 10px;border-radius:var(--ui-pill);background:var(--ui-accent-soft);color:var(--ui-accent)}
.sub-plan h3{font-size:24px;font-weight:580;letter-spacing:-.04em;margin-top:14px}
.sub-plan-lead{font-size:14px;line-height:1.7;color:var(--ui-ink-3);margin-top:6px}
.sub-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:14px;min-height:46px}
.sub-price strong{font-size:32px;font-weight:600;letter-spacing:-.04em}
.sub-price span{font-size:13px;color:var(--ui-ink-3)}
.sub-price-yearly{display:none}
.sub-plans-section:has(input[name="sub-cycle"][value="yearly"]:checked) .sub-price-monthly{display:none}
.sub-plans-section:has(input[name="sub-cycle"][value="yearly"]:checked) .sub-price-yearly{display:flex}
.sub-plan-action{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;margin-top:20px;border-radius:var(--ui-radius-s);font-size:14px;font-weight:550}
.sub-plan-action.is-pending{border:1px dashed var(--ui-line-strong);background:var(--ui-surface);color:var(--ui-ink-3);cursor:default}
.sub-plan-items{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--ui-line);display:grid;gap:11px}
.sub-plan-items li{position:relative;padding-left:20px;font-size:14px;line-height:1.6;color:var(--ui-ink-2)}
.sub-plan-items li::before{content:"";position:absolute;left:2px;top:.45em;width:8px;height:5px;border-left:1.6px solid var(--ui-link);border-bottom:1.6px solid var(--ui-link);transform:rotate(-45deg)}
.sub-plan-fine{margin-top:auto;padding-top:18px;font-size:12px;color:var(--ui-ink-3)}
.sub-plans-note{margin-top:18px;font-size:12px;line-height:1.8;color:var(--ui-ink-3)}

.sub-table-wrap{overflow-x:auto}
.sub-table{width:100%;border-collapse:collapse;min-width:620px;font-size:14px}
.sub-table th,.sub-table td{padding:15px 12px;border-bottom:1px solid var(--ui-line);text-align:left;vertical-align:top;line-height:1.6}
.sub-table thead th{font-size:13px;font-weight:600;color:var(--ui-ink-2)}
.sub-table tbody th{font-weight:500;color:var(--ui-ink-2);width:30%}
.sub-table td{color:var(--ui-ink-3)}
.sub-table td:nth-child(3){color:var(--ui-ink);font-weight:500}

.sub-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:24px 70px}
.sub-split-head>p{margin-top:12px;font-size:14px;line-height:1.85;color:var(--ui-ink-3);max-width:360px}
.sub-steps{list-style:none;margin:0;padding:0}
.sub-steps>li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--ui-line)}
.sub-steps>li:first-child{padding-top:4px}
.sub-step-number{font:12px/1.9 Consolas,monospace;color:var(--ui-ink-3)}
.sub-steps h3{font-size:17px;font-weight:560;letter-spacing:-.03em}
.sub-steps p{margin-top:5px;font-size:14px;line-height:1.8;color:var(--ui-ink-3)}
.sub-rules{margin:0}
.sub-rules>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--ui-line)}
.sub-rules>div:first-child{padding-top:4px}
.sub-rules dt{font-size:14px;font-weight:560;color:var(--ui-ink-2)}
.sub-rules dd{margin:0;font-size:14px;line-height:1.8;color:var(--ui-ink-3)}

.sub-premium{margin:8px 0 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px 40px;padding:30px 32px;background:#e4efe7;border-radius:var(--ui-radius-m)}
.sub-premium-label{font-size:11px;font-weight:600;letter-spacing:.08em;color:#52695e;margin-bottom:8px}
.sub-premium h2{font-size:21px;font-weight:560;line-height:1.45;letter-spacing:-.04em}
.sub-premium p:not(.sub-premium-label){margin-top:6px;font-size:14px;line-height:1.8;color:#536b5d}

.sub-faq{border-top:1px solid var(--ui-line)}
.sub-faq details{border-bottom:1px solid var(--ui-line)}
.sub-faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:58px;padding:14px 0;font-size:15px;font-weight:540;cursor:pointer;list-style:none}
.sub-faq summary::-webkit-details-marker{display:none}
.sub-faq summary::after{content:"+";font-size:20px;font-weight:300;color:var(--ui-ink-3)}
.sub-faq details[open] summary::after{content:"−"}
.sub-faq details p{padding:0 40px 20px 0;font-size:14px;line-height:1.9;color:var(--ui-ink-3);max-width:760px}

.sub-plans-section a:focus-visible,.sub-premium a:focus-visible,.sub-faq summary:focus-visible{outline:3px solid var(--ui-focus);outline-offset:4px}

@media(max-width:980px){.sub-plans{grid-template-columns:minmax(0,1fr);max-width:560px}.sub-split{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
 .sub-section-head h2,.sub-split-head h2{font-size:21px}.sub-plans-intro{font-size:14px}
 .sub-cycle{width:100%}.sub-cycle label{flex:1}.sub-cycle label>span{justify-content:center;width:100%;padding:0 8px}
 .sub-plan{padding:24px 20px 22px}.sub-plan.is-featured{padding-top:22px}.sub-price strong{font-size:28px}
 .sub-rules>div{grid-template-columns:minmax(0,1fr);gap:4px}
 .sub-premium{display:block;padding:24px 20px}
 .sub-faq summary{font-size:14px}.sub-faq details p{padding-right:0;font-size:13px}
}
.shop-price dd:has(.shop-price-note){flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
.shop-price dd .shop-price-note{flex-basis:100%;text-align:right;font-size:12px;color:var(--ui-ink-3)}
.shop-price dd:has(.shop-price-note) strong{white-space:nowrap}
.shop-price div:has(.shop-price-note)>dt{white-space:nowrap}
/* 내 구독: 결제가 열린 서버에서만 요금제 위에 붙는다 */
.sub-mine{display:grid;grid-template-columns:1fr auto;gap:14px 30px;align-items:center;margin-bottom:26px;padding:24px 26px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius-m)}
.sub-mine.is-ended{grid-template-columns:1fr}
.sub-mine-label{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ui-ink-3)}
.sub-mine h2{font-size:21px;margin-top:8px}
.sub-mine p{font-size:14px;line-height:1.7;color:var(--ui-ink-2);margin-top:6px}
.sub-mine .sub-mine-label{margin-top:0}
.sub-mine-actions{display:flex;gap:14px;align-items:center}
.sub-mine-charges{grid-column:1/-1;border-top:1px solid var(--ui-line);padding-top:14px}
.sub-mine-charges summary{font-size:13px;color:var(--ui-ink-2);cursor:pointer}
.sub-mine-charges ul{list-style:none;padding:0;margin:12px 0 0}
.sub-mine-charges li{display:grid;grid-template-columns:1fr auto auto auto;gap:18px;align-items:center;font-size:13px;padding:8px 0;border-bottom:1px solid var(--ui-line)}
.sub-mine-charges a{color:var(--ui-link)}
@media(max-width:650px){.sub-mine{grid-template-columns:1fr;padding:20px}.sub-mine-actions{justify-content:flex-start}.sub-mine-charges li{grid-template-columns:1fr auto;gap:6px 14px}}
/* 팀 플랜 카드의 팀·좌석 고르기(subscription-billing.js) */
.sub-team-slot{display:grid;gap:10px;margin-top:20px}
.sub-team-slot .sub-plan-action{margin-top:0}
.sub-team-form{display:grid;gap:10px}
.sub-team-form label{display:grid;gap:6px;font-size:12px;font-weight:600;color:var(--ui-ink-2)}
.sub-team-form select,.sub-team-form input{min-height:40px;padding:8px 10px;border:1px solid var(--ui-line-strong);border-radius:var(--ui-radius-s);background:var(--ui-surface);font:inherit;font-size:14px;font-weight:400;color:var(--ui-ink)}
.sub-team-total{font-size:14px;font-weight:600;color:var(--ui-ink)}
.sub-mine-team-list{list-style:none;margin:8px 0 0;padding:0}
.sub-mine-team-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:8px 0;border-top:1px solid var(--ui-line);font-size:13px;color:var(--ui-ink-2)}
.sub-mine-team-list a{color:var(--ui-link)}