/* Cheetah デモ — 追加ページ（ログイン／マイページ／事業者マイページ）共通。
   値は tokens.css を参照します。既存ページには影響しません。 */

/* ---- 入力欄の追加（メール・パスワード） ---- */
input[type="email"], input[type="password"] { width: 100%; padding: .8em 1em; border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.btn.block { width: 100%; }
.btn.sm { min-height: 44px; padding: .45em 1.1em; font-size: .88rem; }

/* ---- ページ内の2カラム（本文＋脇） ---- */
.cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr); gap: calc(var(--gap) * 2); align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

/* ---- セクション見出し ---- */
.blk { margin-bottom: clamp(30px, 4.5vw, 48px); }
.blk-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; font-family: var(--f-head); font-weight: var(--head-w); font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.35; letter-spacing: var(--head-ls); border-top: calc(var(--bw) * 2) solid var(--line); padding-top: .5em; margin-bottom: .8em; }
.blk-h .more { font-family: var(--f-body); font-size: .82rem; font-weight: 700; letter-spacing: 0; }
[data-skin="a"] .blk-h { border-top: 6px solid var(--ink); }
[data-skin="b"] .blk-h { border-top-style: dashed; }

/* ---- パネル ---- */
.panel { background: var(--bg-2); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 22px 24px; }
[data-skin="c"] .panel { background: #F4F0E6; }
.panel-h { font-family: var(--f-head); font-weight: var(--head-w); font-size: 1.2rem; line-height: 1.4; margin-bottom: .4em; }
.panel-note { font-size: .85rem; color: var(--muted); }

/* ---- 状態の印 ---- */
.st { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; line-height: 1; padding: .35em .6em; border: var(--bw) solid currentColor; white-space: nowrap; }
.st-go { color: var(--accent-text); }
.st-done { color: var(--muted); }
.st-wait { color: var(--muted); border-style: dashed; }
.st-new { background: var(--ink); color: var(--bg); border-color: var(--ink); }
[data-skin="c"] .st-new { background: var(--accent); color: var(--ink); border-color: var(--ink); }

/* ---- 行リスト（困りごと・履歴・お気に入り・依頼） ---- */
.rows > li { padding-block: 1.05em; border-top: var(--bw) solid var(--hair); }
.rows > li:first-child { border-top: 0; padding-top: .2em; }
.row-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: start; }
.row-t { font-weight: 700; line-height: 1.6; }
.row-t a { text-decoration: none; border-bottom: var(--bw) solid var(--hair); }
.row-t a:hover { border-bottom-color: var(--ink); }
.row-meta { font-size: .83rem; color: var(--muted); margin-top: .25em; }
.row-side { text-align: right; display: grid; gap: 8px; justify-items: end; }
.row-link { font-size: .85rem; font-weight: 700; white-space: nowrap; }
.row-num { font-family: var(--f-num); font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.row-num small { font-family: var(--f-body); font-size: .75rem; color: var(--muted); margin-left: .3em; }
@media (max-width: 640px) { .row-main { grid-template-columns: 1fr; } .row-side { justify-items: start; text-align: left; } }

/* ---- お知らせ ---- */
.notice > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding-block: .85em; border-top: var(--bw) solid var(--hair); font-size: .92rem; }
.notice > li:first-child { border-top: 0; padding-top: .2em; }
.notice time { font-family: var(--f-num); font-size: .82rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.notice a { font-weight: 700; }

/* ---- 設定リンク ---- */
.set-list > li { border-top: var(--bw) solid var(--hair); }
.set-list > li:first-child { border-top: 0; }
.set-list a { display: flex; justify-content: space-between; gap: 16px; padding-block: .75em; text-decoration: none; font-size: .92rem; }
.set-list a span { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.set-list a:hover { color: var(--accent-text); }

/* ---- 興味のあるカテゴリー ---- */
.cat-pick { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1em; }
.cat-pick .chip { min-height: 46px; padding: .4em 1.1em; font-size: .9rem; cursor: default; }
.cat-pick .chip[aria-checked="false"] { color: var(--muted); border-color: var(--hair); }

/* ---- ログイン ---- */
.auth-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: calc(var(--gap) * 2); align-items: start; padding-bottom: 56px; }
@media (max-width: 860px) { .auth-grid { grid-template-columns: 1fr; } }
.auth-form .field:first-of-type { margin-top: 1.2em; }
.form-note { margin-top: .9em; font-size: .82rem; color: var(--muted); }
.auth-alt { margin-top: 1.4em; padding-top: 1.1em; border-top: var(--bw) solid var(--hair); display: grid; gap: .5em; font-size: .9rem; }
.auth-alt a { font-weight: 700; }

/* ---- 事業者向け案内（biz冒頭） ---- */
.biz-guide { padding-block: clamp(24px, 5vw, 56px) 4px; }
.biz-facts { margin: clamp(20px, 3.5vw, 36px) 0 1em; }
.biz-note { font-size: .9rem; color: var(--muted); max-width: 40em; margin-bottom: 1.8em; }
.biz-sub { font-family: var(--f-head); font-weight: var(--head-w); font-size: 1.25rem; line-height: 1.4; margin-bottom: .4em; }
.reg-flow { margin: .4em 0 1.6em; max-width: 46em; }
.reg-flow > li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: 4px 14px; padding-block: .85em; border-top: var(--bw) solid var(--hair); }
.reg-flow > li:first-child { border-top: 0; padding-top: .2em; }
.reg-flow .rf-no { font-family: var(--f-num); font-size: 1.6rem; line-height: 1.25; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.reg-flow h3 { font-family: var(--f-head); font-weight: var(--head-w); font-size: 1.12rem; line-height: 1.4; margin-bottom: .15em; }
.reg-flow p { color: var(--muted); font-size: .92rem; }

/* ---- 赤字の注意書き（低額案件） ---- */
.fee-warn { margin-top: .45em; font-size: .83rem; font-weight: 700; line-height: 1.6; color: var(--accent-text); }

/* ---- 事業者：数字の帯 ---- */
.stat-band { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px); padding-block: 1.1em 1.3em; border-block: var(--bw) solid var(--line); margin-bottom: clamp(28px, 4vw, 44px); }
.stat-band dt { font-size: .75rem; letter-spacing: .12em; color: var(--muted); margin-bottom: .2em; }
.stat-band dd { font-family: var(--f-num); font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.stat-band dd span { font-family: var(--f-body); font-size: .82rem; color: var(--muted); margin-left: .35em; letter-spacing: .04em; }
[data-skin="b"] .stat-band { border-block-style: dashed; }

/* ---- 事業者：やることリスト ---- */
.todo > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding-block: .85em; border-top: var(--bw) solid var(--hair); }
.todo > li:first-child { border-top: 0; padding-top: .2em; }
.todo-n { font-family: var(--f-num); font-size: 1.7rem; line-height: 1; color: var(--accent-text); font-variant-numeric: tabular-nums; min-width: 1.4em; }
.todo-t { font-size: .94rem; }
.todo-t small { display: block; color: var(--muted); font-size: .8rem; }
@media (max-width: 640px) { .todo > li { grid-template-columns: auto minmax(0, 1fr); } .todo .row-link { grid-column: 2; } }

/* ---- 事業者：決済の明細 ---- */
.pay > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 20px; padding-block: .9em; border-top: var(--bw) solid var(--hair); }
.pay > li:first-child { border-top: 0; padding-top: .2em; }
.pay-t { font-weight: 700; }
.pay-meta { font-size: .82rem; color: var(--muted); }
.pay-amt { text-align: right; }
.pay-amt b { font-family: var(--f-num); font-weight: 400; font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pay-amt small { display: block; font-size: .75rem; color: var(--muted); margin-top: .3em; }
.pay-total { display: flex; flex-wrap: wrap; gap: 6px 28px; justify-content: space-between; margin-top: 1.1em; padding-top: 1em; border-top: calc(var(--bw) * 2) solid var(--line); font-size: .9rem; }
.pay-total b { font-family: var(--f-num); font-weight: 400; font-size: 1.3rem; font-variant-numeric: tabular-nums; }

/* ---- 事業者：口コミ ---- */
.rev { padding-block: 1.1em; border-top: var(--bw) solid var(--hair); }
.rev:first-of-type { border-top: 0; padding-top: .2em; }
.rev-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: .35em; }
.rev-rate { font-family: var(--f-num); font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.rev-rate small { font-family: var(--f-body); font-size: .72rem; letter-spacing: .12em; color: var(--muted); margin-right: .5em; }
.rev-who { font-size: .82rem; color: var(--muted); }
.rev-reply { margin-top: .8em; padding: .9em 1.1em; background: var(--bg-2); border: var(--bw) solid var(--hair); border-radius: var(--r); font-size: .88rem; color: var(--muted); }
[data-skin="c"] .rev-reply { background: var(--bg); }
.rev-reply b { display: block; font-size: .72rem; letter-spacing: .14em; color: var(--ink); margin-bottom: .3em; }
.rev-act { margin-top: .8em; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---- 定義リスト（店舗情報など） ---- */
.defs > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px 16px; padding-block: .6em; border-top: var(--bw) solid var(--hair); font-size: .92rem; }
.defs > div:first-child { border-top: 0; padding-top: .2em; }
.defs dt { color: var(--muted); font-size: .82rem; letter-spacing: .06em; padding-top: .25em; }
@media (max-width: 520px) { .defs > div { grid-template-columns: 1fr; gap: 2px; } .defs dt { padding-top: 0; } }

/* ---- トップ：具体例（困りごと → 届く提案） ---- */
.examples, .fees { padding-block: clamp(48px, 8vw, 104px); }
.ex-list { margin-top: clamp(24px, 4vw, 44px); }
.ex-list > li { display: grid; grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr); gap: 8px clamp(14px, 3vw, 36px); align-items: center; padding-block: clamp(16px, 2.4vw, 26px); border-top: var(--bw) solid var(--hair); }
.ex-list > li:last-child { border-bottom: var(--bw) solid var(--hair); }
@media (min-width: 861px) {
  .ex-list > li:nth-child(2) { margin-left: clamp(0px, 5vw, 72px); }
  .ex-list > li:nth-child(3) { margin-left: clamp(0px, 10vw, 144px); }
  .ex-list > li:nth-child(4) { margin-left: clamp(0px, 5vw, 72px); }
}
.ex-need h3 { font-family: var(--f-head); font-weight: var(--head-w); font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.45; letter-spacing: var(--head-ls); }
.ex-meta { font-size: .82rem; color: var(--muted); margin-top: .3em; }
.ex-arrow { font-family: var(--f-num); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1; color: var(--accent-text); }
.ex-get { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.ex-get b { font-family: var(--f-num); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.ex-get span { font-size: .88rem; color: var(--muted); white-space: nowrap; }
.ex-get .ex-price { font-family: var(--f-num); font-size: 1.25rem; color: var(--ink); }
.ex-note { margin-top: 1.2em; font-size: .85rem; color: var(--muted); max-width: 42em; }
@media (max-width: 700px) {
  .ex-list > li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "need arrow" "get get"; }
  .ex-need { grid-area: need; } .ex-arrow { grid-area: arrow; } .ex-get { grid-area: get; }
}
[data-skin="b"] .ex-list > li { border-top: 2px dashed var(--hair); }
[data-skin="b"] .ex-arrow { font-family: var(--f-note); font-weight: 600; transform: rotate(-4deg); display: inline-block; }
[data-skin="c"] .ex-arrow { background: var(--accent); color: var(--ink); padding: .05em .3em; transform: skewX(-6deg); }
[data-skin="c"] .ex-get b { font-weight: 900; }

/* ---- 追従CTA（画面下部に固定表示され、スクロールについてくるバー） ---- */
.sticky-cta { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 8px clamp(14px, 3vw, 28px); padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background: var(--ink); color: var(--bg); border-top: 4px solid var(--accent); }
.sc-text { min-width: 0; line-height: 1.45; }
.sc-text b { display: block; font-size: .95rem; }
.sc-text small { display: block; font-size: .72rem; opacity: .75; letter-spacing: .04em; }
.sc-btn { flex: none; white-space: nowrap; min-height: 50px; }
@media (max-width: 520px) {
  .sc-text b { font-size: .84rem; }
  .sc-text small { font-size: .68rem; }
  .sc-btn { min-height: 48px; padding: .6em 1.05em; font-size: .9rem; }
}

/* ---- トップ／事業者ページ：追加セクション ---- */
.appeal, .benefits { padding-block: clamp(48px, 8vw, 104px); }
.appeal .lead-x { margin-top: 1em; max-width: 38em; font-size: clamp(1rem, 1.5vw, 1.1rem); }
.flow-list li:nth-child(4) { margin-left: clamp(0px, 20vw, 300px); }
.guide-sec { padding-block: clamp(36px, 6vw, 72px); }
.biz-sec-h { font-family: var(--f-head); font-weight: var(--head-w); font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.35; letter-spacing: var(--head-ls); margin-bottom: .5em; }
.biz-lead { max-width: 40em; }