/* 料金 and the legal pages (info.js). Builds on .page / .panel-sec / .sec-note / .about-p in app.css. */

/* Long titles (特定商取引法に基づく表記) break between phrases, not before the last character */
.page:has(> .info-links) > .page-title { text-wrap: balance; word-break: auto-phrase; }

/* 料金: the price figure */
.price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.price-num { font: 200 clamp(68px, 19vw, 112px)/.95 var(--f-num); letter-spacing: -.05em; }
.price-unit { color: rgb(var(--fg) / .56); font-size: 20px; font-weight: 400; }
.plan-early { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.plan-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border: 1px solid rgb(240 138 75 / .5); border-radius: 999px; color: var(--accent); font-size: 12px; font-weight: 500; letter-spacing: .04em; }
.info-auth { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.info-auth a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 0; padding: 0 24px; }
.info-auth .primary, .info-auth .lp-btn--reg { flex: 1 1 auto; max-width: 320px; }

/* 料金: what each plan shows */
.info-list { display: grid; }
.info-list li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); color: rgb(var(--fg) / .86); font-size: 15px; }
.info-list li::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: calc(.875em - 3.5px); border-radius: 50%; box-shadow: inset 0 0 0 1.2px rgb(var(--fg) / .45); }
.info-list li:last-child { border-bottom: 0; }
.info-list--paid li::before { background: var(--accent); box-shadow: none; }
.info-sub { color: rgb(var(--fg) / .5); font-size: 13.5px; }

/* Links to 料金 and the legal pages */
.panel-sec.info-links { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; }
.info-links a { padding: 6px 0; color: rgb(var(--fg) / .64); text-decoration: underline; text-decoration-color: rgb(var(--fg) / .25); text-underline-offset: 4px; }
.info-links a:hover { color: #fff; }

/* Legal pages: rendered Markdown */
.md-sec h2 { line-height: 1.5; }
.md-h3 { margin-top: 6px; font-size: 15px; font-weight: 500; }
.md-h4 { margin: 0; color: rgb(var(--fg) / .78); font-size: 14px; font-weight: 500; }
.md-sec strong { color: #fff; font-weight: 500; }
.md-sec a { color: #fff; text-decoration: underline; text-decoration-color: rgb(var(--fg) / .4); text-underline-offset: 4px; overflow-wrap: anywhere; }
.md-list { display: grid; gap: 6px; padding-left: 1.5em; color: rgb(var(--fg) / .78); font-size: 14.5px; line-height: 1.9; }
ul.md-list { list-style: disc; }
ol.md-list { list-style: decimal; }
.md-list .md-list { margin-top: 6px; }
ul.md-list ul.md-list { list-style: circle; }
.md-list li::marker { color: rgb(var(--fg) / .4); font-family: var(--f-num); }
.md-table-wrap { overflow-x: auto; }
.md-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.8; }
.md-table th, .md-table td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.md-table td { color: rgb(var(--fg) / .86); overflow-wrap: anywhere; }
.md-table thead th { padding-top: 0; color: rgb(var(--fg) / .46); font-size: 12px; font-weight: 400; }
.md-table tbody th { color: rgb(var(--fg) / .56); font-size: 13px; font-weight: 400; }
.md-table th { word-break: auto-phrase; }
.md-sec > .md-table-wrap:last-child tbody tr:last-child > * { border-bottom: 0; }
/* Two-column tables (特商法) are label / value rows: the header row stays for screen readers only */
.md-table--kv thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.md-table--kv tbody tr:first-child > * { padding-top: 0; }
.md-table--kv tbody th { width: 34%; padding-right: 24px; }
@media (max-width: 560px) {
  .md-table--kv, .md-table--kv tbody, .md-table--kv tr, .md-table--kv th, .md-table--kv td { display: block; width: auto; }
  .md-table--kv tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .md-table--kv tbody tr:first-child { padding-top: 0; }
  .md-sec > .md-table-wrap:last-child .md-table--kv tr:last-child { border-bottom: 0; }
  .md-table--kv tbody th, .md-table--kv td { padding: 0; border: 0; }
  .md-table--kv tbody th { width: auto; margin-bottom: 2px; font-size: 12px; }
}
.plan-early { display: grid; justify-items: start; gap: 8px; }
.plan-early-note { color: rgb(var(--fg) / .9); font-size: 14.5px; line-height: 1.8; }
.plan-nudge { font-size: 15px; font-weight: 500; }