/* 구독 쪽(subscribe.html) 꾸밈. 알툴즈 구독 쪽 형태: 큰 제목 → 요금 카드 비교 → 안내 → 기능 격자 → 이용 3단계(어두운 띠) → 자주 묻는 질문.
   제품 색은 패널 클래스(.sb-panel.is-mind / .is-viewer)로 정한다. 공통 변수·단추는 chrome.css(--x-*, .nx-btn, .nx-icon). */
.sb{--p1:#b18cff;--p2:#6a2fe6;overflow-x:clip}
.sb-panel.is-mind{--p1:#b18cff;--p2:#6a2fe6}
.sb-panel.is-viewer{--p1:#4cc3ff;--p2:#1f6bff}
.sb,.sb-panel{--sb-grad:linear-gradient(135deg,var(--p1),var(--p2))}
.sb *,.sb *:before,.sb *:after{box-sizing:border-box}
.sb-wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}
.sb-wrap.is-narrow{width:min(860px,calc(100% - 48px))}
.sb-h2{margin:0 0 36px;font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.035em;text-align:center;word-break:keep-all}

/* 제품 바꾸기 탭 */
.sb-tabs-wrap{display:flex;justify-content:center;padding:36px 16px 0}
.sb-tabs{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--x-soft);box-shadow:inset 0 0 0 1px var(--x-line)}
.sb-tab{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px 0 7px;border:0;border-radius:999px;background:none;font:inherit;font-size:15.5px;font-weight:700;color:var(--x-sub);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.sb-tab .nx-icon{--s:32px;box-shadow:none}
.sb-tab:hover{color:var(--x-ink)}
.sb-tab[aria-selected=true]{background:#fff;color:var(--x-ink);box-shadow:0 2px 10px #1113181a}
.sb-tab:focus-visible{outline:2px solid var(--x-blue);outline-offset:2px}

/* 큰 제목 */
.sb-hero{padding:56px 24px 40px;text-align:center}
.sb-eyebrow{display:inline-block;margin:0 0 18px;padding:7px 14px;border-radius:999px;background:color-mix(in srgb,var(--p1) 14%,#fff);font-size:13.5px;font-weight:700;color:var(--p2)}
.sb-hero h1{margin:0;font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1.28;letter-spacing:-.045em;color:var(--x-ink);word-break:keep-all}
.sb-hero em{font-style:normal;background:var(--sb-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sb-lead{max-width:640px;margin:20px auto 0;font-size:17px;line-height:1.75;color:var(--x-text);word-break:keep-all}

/* 월간 / 연 선납 전환 */
.sb-cycle{display:flex;justify-content:center;gap:0;width:max-content;margin:0 auto;padding:4px;border-radius:12px;background:var(--x-soft);box-shadow:inset 0 0 0 1px var(--x-line)}
.sb-cycle-btn{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 22px;border:0;border-radius:9px;background:none;font:inherit;font-size:15px;font-weight:700;color:var(--x-sub);cursor:pointer}
.sb-cycle-btn[aria-pressed=true]{background:var(--x-ink);color:#fff}
.sb-cycle-btn:focus-visible{outline:2px solid var(--x-blue);outline-offset:2px}
.sb-cycle-off{padding:2px 7px;border-radius:999px;background:var(--sb-grad);font-size:12px;color:#fff}
.sb-cycle-off:empty{display:none}
.sb-cycle-note{margin:12px 0 34px;text-align:center;font-size:13.5px;color:var(--x-sub)}

/* 요금 카드 */
.sb-plans{display:grid;gap:20px;align-items:stretch}
.sb-plans.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.sb-plans.is-six{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px;padding-top:12px}
.sb-plan{position:relative;display:flex;flex-direction:column;padding:30px 28px 28px;border:2px solid var(--x-line);border-radius:22px;background:#fff}
.sb-plan.is-paid{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,var(--sb-grad) border-box;box-shadow:0 18px 40px -22px color-mix(in srgb,var(--p2) 55%,transparent)}
.sb-plan.is-mind{box-shadow:0 12px 30px -24px color-mix(in srgb,var(--p2) 60%,transparent)}
.sb-ribbon{position:absolute;top:-14px;left:50%;margin:0;padding:5px 16px;border-radius:999px;background:var(--sb-grad);font-size:13px;font-weight:800;color:#fff;transform:translateX(-50%);white-space:nowrap;box-shadow:0 6px 14px -6px var(--p2)}
.sb-plan-tag{margin:0 0 6px;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--x-sub)}
.sb-plan.is-paid .sb-plan-tag{color:var(--p2)}
.sb-plan-name{margin:0 0 14px;font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--x-ink)}
.sb-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 4px;margin:0}
.sb-price b{font-size:clamp(28px,2.6vw,34px);font-weight:800;letter-spacing:-.04em;color:var(--x-ink)}
.sb-price span{font-size:15px;font-weight:700;color:var(--x-sub)}
.sb-price-sub{min-height:1.6em;margin:6px 0 20px;font-size:13.5px;line-height:1.6;color:var(--x-sub)}
.sb-price-sub s{color:#a3a8b2}
.sb-checks{flex:1;display:grid;align-content:start;gap:11px;margin:0 0 24px;padding:20px 0 0;list-style:none;border-top:1px solid var(--x-line)}
.sb-checks li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.6;color:var(--x-text);word-break:keep-all}
.sb-checks li:before{content:'';position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;background:var(--x-soft)}
.sb-checks li:after{content:'';position:absolute;left:7px;top:6px;width:4px;height:8px;border-right:2px solid var(--x-sub);border-bottom:2px solid var(--x-sub);transform:rotate(45deg)}
.is-paid .sb-checks li:before{background:var(--sb-grad)}
.is-paid .sb-checks li:after{border-color:#fff}
.sb-checks strong{font-weight:800;color:var(--x-ink)}
.sb-plan-btn{width:100%}
.is-paid .sb-plan-btn:not(.is-line){background:var(--sb-grad)}
.is-paid .sb-plan-btn:not(.is-line):hover{filter:brightness(1.08)}
.sb-swipe-hint{display:none;margin:-22px 0 6px;text-align:center;font-size:12.5px;font-weight:600;color:var(--p2)}
.sb-empty{grid-column:1/-1;padding:28px;border-radius:16px;background:var(--x-soft);text-align:center;color:var(--x-text)}

/* 평가판 카드(도큐마인드) */
.sb-plan.is-trial{flex-direction:row;align-items:center;gap:32px;margin-top:24px;padding:30px 34px}
.sb-trial-copy{flex:1;min-width:0}
.sb-trial-copy .sb-plan-name{margin-bottom:8px}
.sb-trial-text{margin:0 0 16px;font-size:15px;line-height:1.75;color:var(--x-text);word-break:keep-all}
.sb-checks.is-inline{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;border:0}
.sb-trial-cta{flex:0 0 auto;display:grid;justify-items:center;gap:10px;max-width:260px;text-align:center}
.sb-trial-cta small{font-size:12.5px;line-height:1.6;color:var(--x-sub);word-break:keep-all}

/* 도큐뷰어: 구독 시작 방법·PC 웹 */
.sb-howto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;margin-top:24px}
.sb-howto-item{padding:24px 26px;border-radius:18px;background:var(--x-soft)}
.sb-howto-item b{display:block;margin-bottom:6px;font-size:16px;font-weight:800;color:var(--x-ink)}
.sb-howto-item p{margin:0;font-size:14.5px;line-height:1.75;color:var(--x-text);word-break:keep-all}
.sb-howto-item strong{color:var(--x-ink)}
.sb-howto-item.is-web{display:flex;align-items:center;gap:18px;background:color-mix(in srgb,var(--p1) 12%,#fff)}
.sb-howto-item.is-web>div{flex:1;min-width:0}
.sb-howto-item.is-web .nx-btn{flex:0 0 auto}

/* 안내 문구 */
.sb-notice{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:28px;padding:22px 4px 0;border-top:1px solid var(--x-line)}
.sb-notice ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.sb-notice li{position:relative;padding-left:12px;font-size:13.5px;line-height:1.7;color:var(--x-sub);word-break:keep-all}
.sb-notice li:before{content:'·';position:absolute;left:0}
.sb-notice a{color:var(--x-blue)}
.sb-notice a:hover{text-decoration:underline}
.sb-notice-links{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px}
.sb-notice-links .nx-btn{text-decoration:none}

/* 기능 격자 */
.sb-feat-sec{padding:104px 0 96px}
.sb-feat{display:grid;gap:16px}
.sb-feat.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.sb-feat.is-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.sb-feat>div{padding:28px 26px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--x-line);transition:transform .2s,box-shadow .2s}
.sb-feat>div:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--x-line),0 16px 32px -18px #1113183d}
.sb-feat-ico{position:relative;display:block;width:40px;height:40px;margin-bottom:18px;border-radius:12px;background:var(--sb-grad)}
.sb-feat-ico:after{content:'';position:absolute;left:15px;top:10px;width:8px;height:15px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(45deg)}
.sb-feat h3{margin:0 0 8px;font-size:17px;font-weight:800;letter-spacing:-.025em;color:var(--x-ink)}
.sb-feat p{margin:0;font-size:14.5px;line-height:1.75;color:var(--x-text);word-break:keep-all}

/* 이용 3단계(어두운 띠) */
.sb-steps{padding:88px 0;background:#141a26;color:#fff}
.sb-steps .sb-h2{color:#fff}
.sb-step-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none;counter-reset:sb-step}
.sb-step-list li{counter-increment:sb-step;padding:30px 28px;border-radius:20px;background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff1a}
.sb-step-list li:before{content:'0' counter(sb-step);display:block;margin-bottom:14px;font-size:30px;font-weight:800;letter-spacing:-.03em;background:var(--sb-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:brightness(1.35)}
.sb-step-list b{display:block;margin-bottom:8px;font-size:18px;font-weight:800}
.sb-step-list span{display:block;font-size:14.5px;line-height:1.75;color:#ffffffb8;word-break:keep-all}

/* 자주 묻는 질문 */
.sb-faq-sec{padding:96px 0 112px}
.sb-faq{border-top:1.5px solid var(--x-ink)}
.sb-faq details{border-bottom:1px solid var(--x-line)}
.sb-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:21px 4px;font-size:16.5px;font-weight:700;color:var(--x-ink);cursor:pointer;list-style:none}
.sb-faq summary::-webkit-details-marker{display:none}
.sb-faq summary:before{content:'Q';flex:0 0 auto;font-weight:800;color:var(--p2)}
.sb-faq summary:after{content:'';flex:0 0 auto;margin-left:auto;width:9px;height:9px;border-right:2px solid var(--x-sub);border-bottom:2px solid var(--x-sub);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.sb-faq details[open] summary:after{transform:rotate(225deg)}
.sb-faq summary:focus-visible{outline:2px solid var(--x-blue);outline-offset:2px}
.sb-faq details>div{padding:0 4px 22px 30px;font-size:15px;line-height:1.8;color:var(--x-text);word-break:keep-all}
.sb-faq a{color:var(--x-blue);text-decoration:underline}

@media(max-width:1000px){
  .sb-plans.is-six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-feat.is-four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-howto{grid-template-columns:1fr}
}
@media(max-width:800px){
  .sb-plans.is-three{grid-template-columns:1fr;max-width:480px;margin-inline:auto;gap:28px}
  .sb-feat.is-three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-step-list{grid-template-columns:1fr}
  .sb-notice{flex-direction:column;align-items:flex-start}
  .sb-plan.is-trial{flex-direction:column;align-items:stretch}
  .sb-trial-cta{max-width:none}
}
@media(max-width:600px){
  .sb-wrap,.sb-wrap.is-narrow{width:calc(100% - 32px)}
  .sb-tabs-wrap{padding-top:24px}
  .sb-tab{height:42px;padding:0 14px 0 6px;font-size:14.5px}
  .sb-tab .nx-icon{--s:28px}
  .sb-hero{padding:36px 16px 28px}
  .sb-lead{font-size:15.5px}
  /* 요금제 6장은 가로로 넘겨 본다 */
  .sb-swipe-hint{display:block}
  .sb-plans.is-six{display:flex;gap:14px;margin-inline:-16px;padding:14px 16px 10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
  .sb-plans.is-six>.sb-plan{flex:0 0 84%;scroll-snap-align:center}
  .sb-plan{padding:26px 22px 22px}
  .sb-plan.is-trial{padding:24px 22px}
  .sb-feat.is-three,.sb-feat.is-four{grid-template-columns:1fr}
  .sb-feat-sec{padding:72px 0 64px}
  .sb-steps{padding:64px 0}
  .sb-faq-sec{padding:64px 0 80px}
  .sb-howto-item.is-web{flex-direction:column;align-items:flex-start}
}

/* 원스토어·구글 플레이 단추 나란히 */
.sb-store-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sb-store-btns .sb-plan-btn{width:100%;padding-inline:8px;font-size:14px}