/* Hallmark · component: coaching offer card · genre: editorial · existing WOSP BLACK marble / gold theme
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4
 * 会員枠の外・直上に、既存の黒大理石カードを表示する。
 */
@import url('/onboard-offer/tokens.css');

/* Scoped to the purchase card and dialog. Calendar, day, chip, time and slot theme rules are untouched. */
[data-onboard-offer] {
  color:var(--color-ink);
  font-family:var(--font-body);
  overflow-wrap:normal;
  word-break:normal;
  line-break:strict;
  font-variant-numeric:tabular-nums;
}
[data-onboard-offer] :is(.offer-product,.offer-reading,.offer-hero,.offer-contents,.offer-pricing,.offer-payment,.offer-schedule) {min-width:0; box-sizing:border-box}
[data-onboard-offer] :is(.offer-title,.offer-copy,.offer-price,.offer-renew,.offer-section-title,.offer-lessons,.offer-benefits,.offer-fineprint p) {margin:0}
[data-onboard-offer] .offer-logo {display:block; width:240px; max-width:100%; height:auto; object-fit:contain}
[data-onboard-offer] .offer-title {max-width:20em; color:var(--color-ink); font-size:var(--text-title); font-weight:700; line-height:1.5; letter-spacing:0; text-wrap:balance; overflow-wrap:normal; word-break:normal}
[data-onboard-offer] .offer-title span {display:inline-block}
[data-onboard-offer] .offer-copy {max-width:38em; color:var(--color-muted); font-size:var(--text-body); font-weight:400; line-height:1.8}
[data-onboard-offer] .offer-label {display:block; color:var(--color-muted); font-size:var(--text-small); line-height:1.75}
[data-onboard-offer] .offer-price {color:var(--color-accent); font-size:var(--text-price); font-weight:600; line-height:1.3; letter-spacing:-.03em; white-space:nowrap}
[data-onboard-offer] .offer-price small {font-size:var(--text-small); font-weight:400; letter-spacing:0; margin-left:4px}
[data-onboard-offer] .offer-renew {color:var(--color-muted); font-size:var(--text-small); line-height:1.75; margin-top:4px; text-wrap:balance}
[data-onboard-offer] .offer-renew span {display:inline-block; white-space:nowrap}
[data-onboard-offer] .offer-section-title {color:var(--color-ink); font-size:var(--text-section); line-height:1.6; font-weight:600; text-wrap:balance}
[data-onboard-offer] :is(.offer-action,.offer-text-action) {box-sizing:border-box; font-family:var(--font-body); white-space:nowrap; text-decoration:none; cursor:pointer; transition:none; animation:none; box-shadow:none; letter-spacing:0}
[data-onboard-offer] .offer-action {display:flex; align-items:center; justify-content:center; gap:var(--space-md); width:100%; min-height:48px; padding:var(--space-sm) var(--space-lg); border:var(--rule-width) solid var(--color-accent); border-radius:var(--radius-control); background:var(--color-accent); color:var(--color-accent-ink); font-size:var(--text-small); line-height:1.5; font-weight:600}
[data-onboard-offer] .offer-text-action {display:inline-flex; align-items:center; justify-content:center; gap:var(--space-sm); min-height:44px; padding:var(--space-xs) var(--space-sm); border:var(--rule-width) solid var(--color-edge); border-radius:var(--radius-control); background:var(--color-paper); color:var(--color-accent); font-size:var(--text-small); line-height:1.5; font-weight:500}
body [data-onboard-offer] :is(.offer-action,.offer-text-action,.offer-fineprint a):focus-visible {outline:2px solid var(--color-ink); outline-offset:3px}
[data-onboard-offer] :is(.offer-action,.offer-text-action):active:not(:disabled) {transform:translateY(1px)}
[data-onboard-offer] .offer-action:disabled {background:var(--color-wash); color:var(--color-muted); border-color:var(--color-rule); cursor:not-allowed}
@media(hover:hover) {
  [data-onboard-offer] .offer-action:hover:not(:disabled) {background:var(--color-ink); color:var(--color-paper); border-color:var(--color-ink); opacity:1}
  [data-onboard-offer] .offer-text-action:hover:not(:disabled) {background:var(--color-selected); color:var(--color-accent); border-color:var(--color-accent)}
}

/* The original plan card, scoped to the FREE offer immediately above the member card. */
#onboardOffer {width:100%; max-width:800px; min-width:0; margin:0 auto var(--space-xl)}
#onboardOffer[hidden] {display:none}
#onboardOffer .plans {margin:0}
#onboardOffer .plan.black {box-sizing:border-box; width:100%; max-width:100%; border-color:var(--color-accent)}
#onboardOffer .offer-title {max-width:none; font-size:18px; color:var(--color-ink); text-align:center}
#onboardOffer .offer-price {margin:12px 0 8px; font-size:32px; color:var(--color-accent)}
#onboardOffer .plan.black[data-onboard-offer] .offer-copy {max-width:none; margin:0 0 20px; font-size:12px; text-align:center}
#onboardOffer .plan.black[data-onboard-offer] .offer-body {margin:0 0 20px; padding:16px 0; border-top:1px solid var(--color-rule); border-bottom:1px solid var(--color-rule)}
#onboardOffer .plan.black[data-onboard-offer] .offer-summary {width:fit-content; max-width:100%; box-sizing:border-box; margin:0 auto 10px; font-size:calc(.8rem - 1px); font-weight:400; line-height:1.6; color:inherit; text-align:center}
#onboardOffer .plan.black[data-onboard-offer] .offer-body > ul {margin:0; padding:0; border:0; display:grid; grid-template-columns:repeat(4,max-content); justify-content:center; column-gap:16px; row-gap:10px; font-size:calc(.8rem - 1px); text-align:left; border-color:var(--color-rule)}
#onboardOffer .plan.black[data-onboard-offer] .offer-body > ul > li {white-space:nowrap; overflow-wrap:normal}
#onboardOffer .btn.gold {background:var(--color-accent); color:var(--color-accent-ink); border-color:var(--color-accent); white-space:nowrap}
#onboardOffer .btn.gold:focus-visible {outline:2px solid var(--color-accent); outline-offset:3px; text-decoration:none}
@media(hover:hover) {
  #onboardOffer .btn.gold:hover {outline:1px solid var(--color-accent-ink); outline-offset:-4px; opacity:1}
}
@media(max-width:600px) {
  #onboardOffer .plan.black {padding:16px}
  #onboardOffer .offer-title {font-size:16px}
  #onboardOffer .plan.black[data-onboard-offer] .offer-copy,
  #onboardOffer .plan.black[data-onboard-offer] .offer-body > ul {display:none}
  #onboardOffer .plan.black[data-onboard-offer] .offer-summary {margin:0 auto}
  #onboardOffer .offer-price {margin:6px 0 12px}
}
@media(max-width:768px) {
  #onboardOffer .plan.black[data-onboard-offer] .offer-body > ul {grid-template-columns:repeat(2,max-content); column-gap:12px}
}
@media(max-width:480px) {
  #onboardOffer .plan.black[data-onboard-offer] .offer-body > ul {grid-template-columns:max-content}
}

/* Frame and reading typography only. No overrides target calendar/day/time internals. */
[data-onboard-offer] .onboard-slot-shell {width:min(100%,1240px); overscroll-behavior:contain; scroll-behavior:auto}
[data-onboard-offer] .onboard-slot-head {align-items:center; padding:var(--space-md) var(--space-2xl); gap:var(--space-md)}
[data-onboard-offer] .onboard-slot-title {max-width:22em; font-size:var(--text-small); line-height:1.75; letter-spacing:0; text-wrap:balance; overflow-wrap:normal}
[data-onboard-offer] .onboard-slot-close {font-size:var(--text-small)}
[data-onboard-offer] .onboard-slot-body {padding:var(--space-3xl) var(--space-2xl) var(--space-section)}
[data-onboard-offer] :is(.offer-pricing,.offer-schedule,.offer-payment) {margin:0}
[data-onboard-offer] .offer-hero .offer-title {margin-top:var(--space-xl)}
[data-onboard-offer] .offer-intro {
  display:grid; width:fit-content; max-width:100%; box-sizing:border-box;
  gap:1.9em; margin-top:var(--space-lg); margin-bottom:24px; padding:var(--space-lg);
  color:var(--slot-ink); font-size:var(--text-small); line-height:1.9;
  /* 文言全体を淡い白の面で覆い、縁だけ柔らかく溶かす。 */
  background-color:rgba(255,252,245,.07); border-radius:24px; box-shadow:0 0 56px 28px rgba(255,252,245,.06);
}
[data-onboard-offer] .offer-intro p {margin:0; white-space:pre-line}
[data-onboard-offer] .offer-contents {margin:0; padding:0; border:0}
[data-onboard-offer] .offer-lessons {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-lg); padding:var(--space-lg) 0; border-bottom:var(--rule-width) solid var(--color-rule)}
[data-onboard-offer] .offer-lessons dt {font-size:var(--text-small); line-height:1.75; font-weight:500; text-wrap:balance}
[data-onboard-offer] .offer-lessons dd {margin:var(--space-xs) 0 0; font-size:var(--text-small); line-height:1.75; color:var(--color-muted)}
[data-onboard-offer] .offer-count {font-size:22px; color:var(--color-ink); font-weight:600; margin:0 4px}
[data-onboard-offer] .offer-benefits {list-style:none; padding:0; font-size:var(--text-small); line-height:1.75}
[data-onboard-offer] :is(.offer-benefits,.offer-terms) li {display:flex; justify-content:space-between; flex-wrap:wrap; gap:0 var(--space-md); padding:var(--space-sm) 0; border-bottom:var(--rule-width) solid var(--color-rule)}
[data-onboard-offer] :is(.offer-benefits,.offer-terms) li::before {display:none}
[data-onboard-offer] .offer-benefits li span + span {color:var(--color-muted)}
[data-onboard-offer] .offer-review-link {display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:12px; box-sizing:border-box; width:100%; min-width:0; margin-top:auto; padding:14px 18px; border:1px solid var(--slot-rule); border-radius:8px; background:none; box-shadow:none; color:var(--slot-gold); font-size:13px; line-height:1.75; text-decoration:none}
[data-onboard-offer] .offer-review-brand {display:flex; align-items:center; gap:8px; flex:0 0 auto}
[data-onboard-offer] .offer-review-mark {display:block; width:32px; height:32px; flex:0 0 auto; object-fit:contain}
[data-onboard-offer] .offer-review-name {display:block; width:auto; height:16px; flex:0 0 auto; object-fit:contain}
[data-onboard-offer] .offer-review-label {flex:0 0 auto; white-space:nowrap}
@media(hover:hover) {
  [data-onboard-offer] .offer-review-link:hover {border-color:var(--slot-gold); text-decoration:none}
}
[data-onboard-offer] .offer-review-link:focus-visible {outline:2px solid var(--slot-gold); outline-offset:3px}
@media(max-width:359px) {
  [data-onboard-offer] .offer-review-name {display:none}
}
[data-onboard-offer] .offer-pricing .offer-price-group {margin-top:var(--space-md)}
[data-onboard-offer] .offer-schedule {scroll-margin-top:var(--space-lg)}
[data-onboard-offer] .onboard-detail-heading {font-size:var(--text-section); font-weight:600; line-height:1.6; text-wrap:balance; margin:0 0 var(--space-xs)}
[data-onboard-offer] .offer-copy.offer-progress {margin:8px 0 14px; font-size:12px; color:var(--slot-muted)}
[data-onboard-offer] .offer-terms {list-style:none; margin:8px 0 12px; padding:0; color:var(--slot-ink); font-size:12px; line-height:1.75}
[data-onboard-offer] .offer-terms li {flex-wrap:nowrap; align-items:baseline; gap:12px; padding:8px 0}
[data-onboard-offer] .offer-terms li:first-child {padding-top:0}
[data-onboard-offer] .offer-terms li span:first-child {flex:0 0 auto}
[data-onboard-offer] .offer-terms li span + span {min-width:0; color:var(--slot-muted); text-align:right}
[data-onboard-offer] .offer-terms + .offer-progress {margin-top:0}
[data-onboard-offer] .offer-payment {min-width:0}
[data-onboard-offer] .onboard-slot-selection {text-align:left; font-size:var(--text-small); line-height:1.75; margin:var(--space-md) 0}
[data-onboard-offer][data-offer-state="ready"] .onboard-slot-selection {color:var(--color-accent)}
[data-onboard-offer] .onboard-slot-submit {font-size:var(--text-small)}
[data-onboard-offer] .offer-trust {margin-top:var(--space-lg)}
[data-onboard-offer] .offer-stripe {display:flex; align-items:center; gap:var(--space-sm); margin-bottom:var(--space-xs); color:var(--color-muted); font-size:var(--text-note); line-height:1.75}
[data-onboard-offer] .offer-stripe img {display:block; width:72px; height:30px; object-fit:contain; flex:0 0 auto; filter:brightness(0) invert(1)}
/* 2026-10-18 wosp指示: 決済情報の注記は下の保持情報の注記（.offer-fineprint）と同じ文字サイズに揃える */
[data-onboard-offer] .offer-copy.offer-trust-copy {font-size:var(--text-note); max-width:38em}
[data-onboard-offer] .offer-fineprint {max-width:44em; margin-top:var(--space-lg); color:var(--color-muted); font-size:var(--text-note); line-height:1.8}
[data-onboard-offer] .offer-fineprint a {color:var(--color-accent); display:inline-block; white-space:nowrap; text-underline-offset:3px}
/* プライバシーポリシーのリンクは1行空けて単独行に置く（2026-10-18 wosp指示） */
[data-onboard-offer] .offer-fineprint .offer-fineprint-link {margin-top:1.8em}

/* The divider fills the grid row; the existing column gap is shared equally around it. */
[data-onboard-offer] .onboard-slot-body {display:grid; grid-template-columns:minmax(0,.85fr) 1px minmax(0,1fr); gap:var(--space-section); column-gap:calc((var(--space-section) - 1px) / 2); align-items:stretch}
[data-onboard-offer] .offer-column-rule {width:1px; align-self:stretch; background:var(--slot-rule); pointer-events:none}
[data-onboard-offer] .offer-product {display:flex; flex-direction:column; gap:var(--space-xl); padding:4px}
[data-onboard-offer] .offer-logo {width:224px; filter:brightness(0) invert(1)}
[data-onboard-offer] .offer-pricing {margin:0}
[data-onboard-offer] .offer-pricing > .offer-section-title {font-size:var(--text-small)}
[data-onboard-offer] .offer-pricing .offer-price-group {margin-top:var(--space-xs)}
[data-onboard-offer] .offer-payment {padding-top:var(--space-xl); border-top:var(--rule-width) solid var(--color-rule)}
[data-onboard-offer] .offer-reading {display:grid; align-content:start; gap:var(--space-xl)}
[data-onboard-offer] .offer-copy {font-size:var(--text-small)}

@media(max-width:959px) {
  /* Logo → course → introduction → price → contents → schedule → payment. */
  [data-onboard-offer] .onboard-slot-body {grid-template-columns:minmax(0,1fr); gap:var(--space-xl)}
  [data-onboard-offer] .offer-column-rule {display:none}
  [data-onboard-offer] .offer-product {padding:0}
  [data-onboard-offer] .offer-product > .offer-pricing {padding:var(--space-lg); background:var(--color-wash); color:var(--color-ink)}
}
@media(max-width:600px) {
  [data-onboard-offer] .onboard-slot-head {padding:var(--space-md) var(--space-lg)}
  [data-onboard-offer] .onboard-slot-body {padding:var(--space-xl) var(--space-lg) var(--space-3xl)}
  [data-onboard-offer] .offer-title {font-size:22px}
  [data-onboard-offer] .offer-copy {font-size:var(--text-small)}
  [data-onboard-offer] .offer-logo {width:224px}
  [data-onboard-offer] .offer-lessons {gap:var(--space-md)}
}
@media(max-width:359px) {
  [data-onboard-offer] .onboard-slot-head {padding-inline:var(--space-md)}
  [data-onboard-offer] .onboard-slot-body {padding-inline:var(--space-md)}
  [data-onboard-offer] .offer-lessons {gap:var(--space-sm)}
}
@media(prefers-reduced-motion:reduce) {
  [data-onboard-offer] :is(.offer-action,.offer-text-action):active:not(:disabled) {transform:none}
}

/* 受講済みチェックは購入モーダル内だけに適用する。 */
[data-onboard-offer] .offer-completed {display:flex; align-items:center; gap:8px; min-width:0; margin:var(--space-sm) 0; color:var(--color-muted); font-size:var(--text-small); line-height:1.75; text-decoration:none; cursor:pointer}
[data-onboard-offer] .offer-completed input {appearance:auto; flex:0 0 16px; width:16px; height:16px; margin:0; padding:0; accent-color:var(--color-accent)}
[data-onboard-offer] .offer-completed input:focus-visible {outline:2px solid var(--color-accent); outline-offset:3px}
@media(max-width:600px) {
  [data-onboard-offer] .offer-product .offer-intro {font-size:13px; padding:18px 10px; gap:1.6em}
}
[data-onboard-offer] .offer-benefits li span.offer-pending, .onboard-detail-benefits .offer-pending {color:#8a8374}

[data-onboard-offer] .onboard-coupon {margin:8px 0 12px}
[data-onboard-offer] .onboard-coupon-row {display:flex; align-items:center; gap:12px}
[data-onboard-offer] .onboard-coupon-row input {width:140px; min-width:0; padding:8px 10px; border:1px solid var(--slot-rule); border-radius:4px; background:transparent; color:var(--slot-ink); font:inherit; font-size:14px; text-transform:uppercase}
[data-onboard-offer] .onboard-coupon-row button {min-height:40px; padding:8px 16px; border:1px solid var(--slot-rule); border-radius:4px; background:transparent; color:var(--slot-gold); font-size:13px; text-decoration:none}
@media(hover:hover){[data-onboard-offer] .onboard-coupon-row button:hover {border-color:var(--slot-gold); background:transparent; color:var(--slot-gold); text-decoration:none}}
[data-onboard-offer] .onboard-coupon-note {margin:4px 0; color:var(--slot-muted); font-size:12px}
[data-onboard-offer] .onboard-coupon-error {margin:4px 0 0; color:var(--slot-error); font-size:12px}
[data-onboard-offer] .onboard-coupon-error:empty {display:none}