/* ============================================
   real.css

   【役割】わんREAL の区画（land/real/ と、ランドのトップの導線）の見た目
   【依存】../base.css（骨格）・../theme.css（色のトークン）
   【対応仕様】docs/superpowers/specs/2026-10-03-wanreal-design.md §2.1・§4.1
               docs/superpowers/specs/2026-10-04-wanreal-card-redesign-design.md §2・§4
               docs/superpowers/specs/2026-10-18-wanreal-article-share-design.md §6.1（確定記事のシェアの帯）
   ============================================

   色は theme.css のトークンと、下の :root のテープ・ボタンの色だけを使う。Web フォントは land と共用（追加で読み込まない）。
   自分の選択肢の棒はピンク（--accent）。アプリのダイアログと同じ。
*/

/* カードのテープ（緑は背景にとけ込むので使わない。ピンク→黄→青→紫を並び順でくり返す。2026-10-13 ユーザー判断＝案 A のパステル）
   とボタンの浮いたときの色（ホームの --accent-light と同じ役） */
:root{--tape-pink:#F96268;--tape-yellow:#F2B93B;--tape-blue:#5B9BD5;--tape-purple:#9B7FD1;--accent-light:#FEECEC;
  /* 記事の強調（原稿の **…**）。--accent のままだとカードの地の上でコントラスト 2.9 で読みにくいので、深い赤（4.5） */
  --emph:#D23F46}

.real-hero{text-align:center;padding:36px 0 8px}
/* 見出しが 2 行になるとき（幅 320〜348px の iPhone）、2 行目に「た」だけ残らないよう、行の長さをそろえて折り返す */
.real-hero__title{font-size:clamp(22px,1.3rem + 1.4vw,34px);margin:0 0 6px;overflow-wrap:anywhere;text-wrap:balance}
/* スマホでは小さめ（幅 375px で約 14px。2026-10-13 ユーザー判断＝大きくて 2 行に折れていた） */
.real-hero__lead{margin:0;color:var(--text-sub);font-size:clamp(13.5px, .78rem + .35vw, 16px)}
/* 区画トップのヘッダー。背景の絵（ランドのトップと同じ扱い）がはみ出さないように切る */
.real-header{overflow:hidden}
/* 犬たちを説明文の下にはっきり見せる（2026-10-13 ユーザー判断）。ランドのトップの扱い（薄く敷いて全体にグラデーション）から変え、
   ヘッダーを下へ広げて絵の下側（犬たち）を見せ、重ねるミントは上（文字の後ろ）ほど濃く・下ほど薄くする。
   いちばん下だけ次の段のミントへなじませる（切れ目に線が出ないように） */
.real-header .real-hero{padding-bottom:clamp(200px, 10vw + 160px, 300px)}
.real-header .site-header__scene{opacity:.9;filter:saturate(.95)}
.real-header .site-header__scene img{object-position:50% 100%}
.real-header .site-header__scene::after{background:linear-gradient(180deg, rgba(200,224,204,.94) 0%, rgba(200,224,204,.86) 28%, rgba(200,224,204,.45) 50%, rgba(200,224,204,.08) 68%, rgba(200,224,204,0) 88%, var(--mint) 100%)}
/* 折り返すなら文の切れ目だけ（スマホで「見／えます。」の途中で折れていた） */
.real-keep{display:inline-block}

/* 区画の名前（わんREAL を主役に。2026-10-13 ユーザー判断）。記事の見出しの上と、区画トップの h1。
   下線のテープは文字の後ろ（isolation で、テープが親の背景の下に潜らないようにする） */
.real-brand{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 0 14px;font-size:1rem;line-height:1.3}
.real-brand__mark{position:relative;isolation:isolate;display:inline-block;padding:0 .2em;font-weight:800;font-size:clamp(26px, 1.4rem + 1.2vw, 36px);letter-spacing:.06em;color:var(--primary-dark)}
.real-brand__mark::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:.1em;height:.42em;background:var(--accent);opacity:.3;border-radius:2px;transform:rotate(-1.5deg)}
.real-brand__sub{font-size:.85em;font-weight:600;letter-spacing:.08em;color:var(--text-sub)}
.real-brand--hero .real-brand__mark{font-size:clamp(34px, 1.8rem + 2vw, 52px)}
.real-brand--hero .real-brand__sub{font-size:clamp(15px, .9rem + .3vw, 18px)}

.real-card{background:var(--cream);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card);padding:22px 18px 20px;margin:0 0 16px}
/* 問いのページの中身（問い・プロフィール・結果）は、PC でも 640px の幅で中央に置く（画面いっぱいだと選択肢が横に長い帯になり、
   「›」が文字から遠く離れる。2026-10-04 ユーザー判断）。スマホはこれより狭いので変わらない */
#real-q{max-width:640px;margin-left:auto;margin-right:auto}
/* 問いの文が 2 行になるとき、2 行目に 1〜2 文字だけ残らないよう、行の長さをそろえて折り返す（PC の 640px 幅で「む？」だけが残った） */
.real-q__title{font-size:clamp(18px,1.05rem + .6vw,23px);line-height:1.6;margin:0 0 6px;color:var(--text);overflow-wrap:anywhere;text-wrap:balance}
.real-q__hint{font-size:.82em;color:var(--text-hint);margin:0 0 14px;overflow-wrap:anywhere}
.real-meta{font-size:.82em;color:var(--text-hint);margin:14px 0 0}
.real-note{font-size:.82em;color:var(--text-sub);margin:6px 0 0}
.real-notice{text-align:center;color:var(--text-sub);margin:8px 0;text-wrap:balance}

/* 選択肢・ボタン */
.real-options{display:grid;gap:10px;margin-top:14px}
.real-btn,.real-chip{font:inherit;cursor:pointer;border-radius:12px;border:2px solid var(--primary-dark);background:var(--cream);color:var(--primary-dark);transition:background .18s,color .18s,transform .18s}
.real-btn:hover{background:var(--primary-dark);color:#fff}
/* チップは乗せても塗りつぶさない（プロフィールの段が変わったとき、マウスの下に来たチップが押したあとに見える） */
.real-chip:hover{background:var(--mint-paper)}
.real-btn:focus-visible,.real-chip:focus-visible{outline:2px solid var(--primary-dark);outline-offset:3px}

/* 浮き上がったボタン（問いの選択肢・トップの「結果を見る」）。平たい塗りつぶしは押された状態に見えるので、
   白地に下辺だけ厚い枠で浮かせ、押すと沈める（設計 2026-10-04 §2.3） */
.real-option{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px 14px;font:inherit;letter-spacing:inherit;font-weight:400;font-size:1em;line-height:1.5;text-align:left;text-decoration:none;color:var(--text);background:#fff;border:1.5px solid var(--mint-deep);border-bottom-width:4px;border-radius:12px;cursor:pointer;transition:transform .12s,border-bottom-width .12s,margin-bottom .12s,background .18s}
.real-option:hover{background:var(--mint-paper);color:var(--text)}
.real-option:active{transform:translateY(3px);border-bottom-width:1px;margin-bottom:3px}
.real-option:disabled{opacity:.5;cursor:default;transform:none;border-bottom-width:4px;margin-bottom:0;background:#fff}
.real-option:focus-visible{outline:2px solid var(--primary-dark);outline-offset:3px}
.real-option__label{min-width:0;overflow-wrap:anywhere}
.real-option__chev{color:var(--text-hint);font-size:1.2em;line-height:1}

.real-btn{display:inline-block;letter-spacing:inherit;padding:10px 20px;font-weight:600;font-size:.92em;text-decoration:none;text-align:center}
.real-btn--primary{background:var(--primary-dark);color:#fff}
.real-btn--primary:hover{background:var(--text);color:#fff}
.real-btn--quiet{border-color:var(--line);color:var(--text-sub);font-weight:500}
/* カードの外の主ボタン（次の問いへ・みんなの答えを見る・ほかの問いを見る）。濃い緑に白い文字＋下辺の厚み
   （ナビの「アプリをはじめる」と同じ色。明るい緑 --primary に白い文字は読みにくい） */
.real-btn--raised{position:relative;background:var(--primary-dark);color:#fff;border:none;border-bottom:4px solid var(--text);border-radius:999px;padding:12px 26px;font-weight:700;transition:transform .12s,border-bottom-width .12s,margin-bottom .12s,background .18s}
/* 乗せたとき、面を下辺と同じ色にすると厚みが消えて平たく見えるので、少し明るくするだけ */
.real-btn--raised:hover{background:var(--primary-dark);color:#fff;filter:brightness(1.12)}
.real-btn--raised:active{transform:translateY(3px);border-bottom-width:1px;margin-bottom:3px}
/* 押すと 3px 沈む。沈んでも並びが動かないよう、細くした下辺の分を外側の余白で足す（margin-bottom。並べる入れ物が
   grid か flex のときだけ効く＝ふつうの縦積みでは上下の余白が重なって効かない）。
   上の端を押したとき、沈んだボタンが指の下から外れて押したことにならないよう、押せる範囲を上に足す
   （::after は枠の内側から測るので、枠の太さの分も見込んで 6px） */
.real-option::after,.real-btn--raised::after{content:"";position:absolute;left:0;right:0;top:-6px;height:6px}
/* iPhone の Safari が押したときに重ねる灰色を消す（沈む見た目で押したことが分かる） */
.real-option,.real-btn--raised{-webkit-tap-highlight-color:transparent}
.real-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.real-actions--center{justify-content:center}
/* カードの外に出した主ボタンの段（ほかの問い・結果へ移るボタンは、問い・結果のカードの中に置かない） */
.real-actions--outside{margin:0 0 16px}

/* 初回のプロフィール */
.real-profile__q{font-weight:600;margin:14px 0 10px}
/* プロフィールの画面の先頭に出す「押した答え」（トップで押して来た人にも、押したことが伝わるように） */
.real-profile__picked{font-size:.85em;font-weight:700;color:var(--primary-dark);margin:0 0 6px;overflow-wrap:anywhere;text-wrap:balance}
.real-chips{display:grid;grid-template-columns:1fr;gap:8px}
.real-chips--breeds{grid-template-columns:1fr 1fr}
/* 長い犬種名が 2 行になるとき、2 行目に 1〜2 文字だけ残らないよう、行の長さをそろえて折り返す */
.real-chip{padding:11px 8px;font-size:.88em;line-height:1.4;text-wrap:balance}

/* 棒グラフ */
.real-badge{display:inline-block;font-size:.72em;font-weight:700;letter-spacing:.08em;padding:3px 10px;border-radius:999px;margin-bottom:10px;background:var(--mint-pale);color:var(--text-sub)}
.real-badge--confirmed{background:var(--primary-dark);color:#fff}
.real-bars{display:grid;gap:12px;margin-top:14px}
.real-bar__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:.9em}
.real-bar__label{color:var(--text)}
.real-you{font-size:.78em;font-weight:700;color:var(--accent);white-space:nowrap}
.real-bar__line{display:flex;align-items:center;gap:10px;margin-top:4px}
.real-bar__track{flex:1;height:14px;border-radius:7px;background:var(--mint-paper);overflow:hidden}
.real-bar__fill{height:100%;border-radius:7px;background:var(--mint-deep);transition:width .5s ease-out}
.real-bar--mine .real-bar__fill{background:var(--accent)}
.real-bar--mine .real-bar__label{font-weight:700}
.real-bar__pct{width:3.2em;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--text-sub)}
.real-line{margin:10px 0 0;font-weight:600;color:var(--text)}
.real-line--seq{font-family:"Yomogi",cursive;font-weight:400;font-size:1.05em;margin-top:14px}

/* ひとこと */
.real-comment{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.real-comment__label{display:block;font-size:.82em;color:var(--text-sub);margin-bottom:6px}
.real-comment__row{display:flex;gap:8px}
.real-comment__input{flex:1;min-width:0;font:inherit;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text)}
/* 同意の注意書きが 2 行以上になるとき、最後の行に 1〜2 文字だけ残らないよう、行の長さをそろえて折り返す（PC の 640px 幅で「い。」だけが残った） */
.real-comment .real-note{text-wrap:balance}

/* 一覧（区画トップ）。募集中も結果もカードをマス目に並べる（スマホ 1 列・760px で 2 列・1100px で 3 列。
   2026-10-13 ユーザー判断＝横に長い帯をやめた）。行の間はカードの上のテープ（-9px）が前のカードに重ならない幅 */
.real-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:26px 20px;padding-top:10px}
.real-grid > .notice{grid-column:1 / -1}
/* 結果カード（記事のある問いは functions/src/real/realArticle.ts、記事がまだ無い問いは real.js の resultCard が作る） */
.real-rcard{position:relative;display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit;background:var(--cream);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card);padding:22px 16px 16px;transition:transform .18s}
/* テープ（.real-tcard の ::before と同じ。色と傾きは下のテープの段で並び順に決める） */
.real-rcard::before{content:"";position:absolute;top:-9px;left:50%;width:84px;height:18px;transform:translateX(-50%) rotate(var(--tape-tilt, -2deg));background:var(--tape, var(--tape-pink));opacity:var(--tape-alpha, .35);border-radius:2px}
.real-rcard:hover{transform:translateY(-2px);color:inherit}
.real-rcard:hover .real-pill{background:var(--accent-light)}
.real-rcard:focus-visible{outline:2px solid var(--primary-dark);outline-offset:3px}
.real-rcard__lead{font-size:.78em;color:var(--text-hint);margin:0 0 4px}
.real-rcard__title{font-weight:700;font-size:1.05em;line-height:1.6;margin:0;color:var(--text);overflow-wrap:anywhere}
.real-rbars{display:grid;gap:8px;margin:12px 0 0}
.real-rbar{display:grid;grid-template-columns:minmax(0, 38%) minmax(0, 1fr) 2.8em;align-items:center;gap:8px;font-size:.82em}
.real-rbar__label{color:var(--text-sub);line-height:1.4;overflow-wrap:anywhere}
.real-rbar__track{display:block;height:10px;border-radius:5px;background:var(--mint-paper);overflow:hidden}
.real-rbar__fill{display:block;height:100%;border-radius:5px;background:var(--mint-deep)}
.real-rbar__pct{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--text-hint)}
.real-rbar--top .real-rbar__label{font-weight:700;color:var(--text)}
.real-rbar--top .real-rbar__fill{background:var(--primary-dark)}
.real-rbar--top .real-rbar__pct{color:var(--primary-dark)}
.real-rcard__cta{margin:auto 0 0;padding-top:16px;text-align:center}

/* ボタン（ホームの「るびたんちの日記帳」.diary-post-btn と同じ形。2026-10-13 ユーザー判断）。
   答えの選択肢（.real-option）は押すと答えになる部品なので、この形にしない */
.real-pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;padding:11px 22px;background:#fff;border:2px dashed var(--accent);border-radius:100px;box-shadow:0 2px 8px rgba(60,50,30,.08),0 .5px 2px rgba(60,50,30,.05);font-family:"Yomogi",cursive;font-size:15px;line-height:1.4;letter-spacing:.01em;color:var(--text);text-decoration:none;text-align:center;text-wrap:balance;transition:transform .2s,box-shadow .2s,background .2s}
.real-pill__paw{flex:none;font-size:18px;line-height:1;transform:rotate(-12deg)}
a.real-pill:hover{transform:translateY(-2px) rotate(-.6deg);background:var(--accent-light);box-shadow:0 6px 18px rgba(249,98,104,.22);color:var(--text)}
a.real-pill:focus-visible{outline:2px solid var(--primary-dark);outline-offset:3px}
/* 大きいほう（ランドのトップの「わんREAL｜ほかの問いと結果を見る」）。幅 375px で 1 行に収まる大きさ（16px）から始める。
   それより狭い端末で折り返しても 🐾 が文字から離れないよう、横並び（flex）をやめて 🐾 を文字の頭に付ける */
.real-pill--lg{display:inline-block;padding:15px 18px;font-size:clamp(16px, .8rem + .8vw, 21px)}
.real-pill--lg .real-pill__paw{display:inline-block;margin-right:10px;font-size:22px;vertical-align:-3px}
/* 折り返すなら「わんREAL｜」の直後だけ（「ほか／の」の途中や、「｜」の前で折れない） */
.real-pill__keep{white-space:nowrap}

/* テープの色と傾き。区画トップのマス目（問い・結果）と、ランドのトップのめくるカード。並び順で 4 色をくり返す */
.real-grid > :nth-child(4n + 1),.real-carousel__slide:nth-child(4n + 1) > .real-tcard{--tape:var(--tape-pink);--tape-alpha:.35;--tape-tilt:-2deg}
.real-grid > :nth-child(4n + 2),.real-carousel__slide:nth-child(4n + 2) > .real-tcard{--tape:var(--tape-yellow);--tape-alpha:.5;--tape-tilt:2deg}
.real-grid > :nth-child(4n + 3),.real-carousel__slide:nth-child(4n + 3) > .real-tcard{--tape:var(--tape-blue);--tape-alpha:.4;--tape-tilt:-1deg}
.real-grid > :nth-child(4n + 4),.real-carousel__slide:nth-child(4n + 4) > .real-tcard{--tape:var(--tape-purple);--tape-alpha:.4;--tape-tilt:1.5deg}
@media (min-width:760px){
  .real-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (min-width:1100px){
  .real-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
}

/* 調査方法 */
.real-doc h2{font-size:1.05em;margin:22px 0 6px}
.real-doc p,.real-doc li{font-size:.92em}
.real-doc ul{padding-left:1.2em;margin:0}

/* 確定記事の表と引用（記事は ./admin.sh real-article が作る。functions/src/real/realArticle.ts） */
.real-table{width:100%;border-collapse:collapse;font-size:.86em;margin:12px 0}
.real-table th,.real-table td{border-bottom:1px solid var(--line);padding:7px 6px;text-align:right;font-variant-numeric:tabular-nums}
.real-table th:first-child{text-align:left;font-weight:600}
.real-table tr:first-child th{color:var(--text-hint);font-weight:500;font-size:.92em}
.real-doc blockquote{margin:12px 0;padding:10px 14px;border-left:3px solid var(--mint-deep);background:var(--mint-paper);border-radius:0 10px 10px 0;font-family:"Yomogi",cursive}
.real-doc .real-bars{margin-bottom:12px}
/* 記事の結果の棒グラフ（2026-10-13 ユーザー判断）。本文と同化しないようミントの囲みに入れ、本文と同じ幅いっぱいに置く
   （620px に絞って中央に置いたら、そこだけ浮いて全体の釣り合いが悪かった）。％は棒の先に付ける（位置は棒の --p）。
   棒は太く（28px）して下地の帯は持たない。長い棒（real-bar--inside）は％を棒の内側に白で入れる。
   最多（単独）は濃い棒と太字（区画トップの結果カードと同じ見せ方）。PC は「名前｜棒」を 1 行に並べる */
.real-bars--article{display:grid;gap:16px;margin:18px 0 28px;padding:26px 20px;background:var(--mint-paper);border:1px solid rgba(168,207,176,.6);border-radius:14px}
.real-bars--article .real-bar__line{margin-top:6px}
.real-bars--article .real-bar__track{position:relative;height:28px;background:transparent;border-radius:8px;overflow:visible}
.real-bars--article .real-bar__fill{border-radius:8px}
.real-bars--article .real-bar__pct{position:absolute;top:50%;left:calc(var(--p) + 8px);width:auto;transform:translateY(-50%);font-size:1.05em;line-height:1;text-align:left;white-space:nowrap}
.real-bars--article .real-bar--inside .real-bar__pct{left:auto;right:calc(100% - var(--p) + 10px);color:#fff}
.real-bars--article .real-bar--top .real-bar__fill{background:var(--primary-dark)}
.real-bars--article .real-bar--top .real-bar__label,.real-bars--article .real-bar--top .real-bar__pct{font-weight:700;color:var(--primary-dark)}
.real-bars--article .real-bar--top.real-bar--inside .real-bar__pct{color:#fff}
@media (min-width:560px){
  .real-bars--article{gap:18px;padding:34px 32px}
  .real-bars--article .real-bar{display:grid;grid-template-columns:minmax(0, 8.5em) minmax(0, 1fr);align-items:center;gap:16px}
  .real-bars--article .real-bar__line{margin-top:0}
}
/* 確定記事（functions/src/real/realArticle.ts）。問いはカードの中の見出し（2 重線の枠で際立たせる）、
   節の見出しはテープの帯＋点線の区切り、次の問いから下はカードの外の薄い帯（本文ではない。2026-10-13 ユーザー判断） */
.real-hero--compact{padding:28px 0 26px}
.real-hero--compact .real-brand{margin-bottom:0}
.real-article__eyebrow{font-size:.8em;font-weight:600;letter-spacing:.08em;color:var(--text-hint);text-align:center;margin:0 0 10px}
/* 問いの枠は「いま聞いている問いに答える」のボタン（.real-pill）と同じピンクの点線（2026-10-13 ユーザー判断＝2 重線より目立たせる）。
   上下の余白は PC で広め（幅に合わせて 18〜34px） */
.real-article__title{position:relative;font-size:clamp(21px, 1.1rem + 1.2vw, 30px);line-height:1.5;font-weight:700;color:var(--text);text-align:center;margin:0 0 20px;padding:clamp(18px, 1rem + 1.6vw, 34px) clamp(16px, .8rem + 1.6vw, 32px);background:#fff;border:2px dashed var(--accent);border-radius:18px;box-shadow:0 2px 8px rgba(60,50,30,.08),0 .5px 2px rgba(60,50,30,.05);overflow-wrap:anywhere;text-wrap:balance}
.real-article .real-lead{font-size:1.02em}
/* 見出しは文字の幅だけ（width:fit-content）にして、テープの帯を背景で文字の下に敷く（帯の色は --tape-yellow の 45%） */
.real-article{position:relative}
.real-article h2{display:block;width:fit-content;font-size:1.22em;margin:30px 0 10px;padding:0 .15em;background:linear-gradient(transparent 58%, rgba(242,185,59,.45) 58%, rgba(242,185,59,.45) 94%, transparent 94%)}
.real-article h2 + *{margin-top:0}
.real-article .real-meta + h2{margin-top:22px}
/* 節の区切りの点線（最初の見出し「結果」の上には出さない）。見出しではなくカードを基準に、カードの端から端まで引く。
   top を指定しない absolute は縦だけ流れの位置（見出しの上端）に置かれるので、そこから margin で 18px 上げる */
.real-article h2:not(:first-of-type){margin-top:40px}
.real-article h2:not(:first-of-type)::before{content:"";position:absolute;left:0;right:0;top:auto;margin-top:-18px;border-top:1px dashed var(--line)}
/* 足元の帯（次の問い・関連する問い・このデータについて） */
.real-article__foot{background:var(--mint-paper);padding:30px 0 36px;border-top:1px solid rgba(168,207,176,.5)}
.real-article__foot h2{font-size:1em;margin:22px 0 6px}
.real-article__foot h2:first-child{margin-top:0}
.real-article__foot p,.real-article__foot li{font-size:.9em;color:var(--text-sub)}
.real-article__foot ul{padding-left:1.2em;margin:0}
.real-article__cta{text-align:center;margin:14px 0 26px}
/* 冒頭の結論（太字の濃い緑）と、本文の強調（赤い太字。2026-10-13 ユーザー判断） */
.real-lead{font-weight:700}
.real-em{font-weight:700;color:var(--emph)}

/* ランドのトップの導線（1 枚＝1 問を横にめくる。設計 2026-10-04 §2）。
   操作はダッシュボードの .stat-carousel にそろえるが、点の色が薄い背景で見えないので専用のクラスにする。
   めくる入れ物は縦にもはみ出しを切るので、余白を持たせてテープ・影・ボタンの厚みを切らない。
   左右はコンテナの余白（20px）の中へ広げ（margin を負に）、その分を padding で戻す＝カードの位置は今のまま、
   影は切れず、ページもはみ出さない。止まる位置の余白（scroll-padding-inline）を padding と同じにしないと、
   最初の止まる位置が 0 にならず「前」の矢印が押せたままになる */
.real-teaser{background:var(--mint-paper)}
.real-carousel{position:relative}
.real-carousel__track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin:0 -20px;padding:14px 20px 26px}
.real-carousel__track::-webkit-scrollbar{display:none}
/* 全部が一度に見えるときだけ（JS が測ってから付ける）。常に付けると、はみ出したとき左側へ戻れなくなる */
.real-carousel--fit .real-carousel__track{justify-content:center}
.real-carousel__slide{flex:0 0 100%;min-width:0;display:flex;scroll-snap-align:start}
.real-carousel--multi .real-carousel__slide{flex-basis:calc(100% - 28px)}
/* 点は入れ物の下の余白に重なるので、前に出す（出さないと入れ物に隠れて押せない） */
.real-carousel__dots{position:relative;z-index:1;display:flex;justify-content:center;gap:8px;margin-top:-8px}
.real-carousel__dots[hidden]{display:none}
.real-carousel__dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--mint-deep);cursor:pointer}
.real-carousel__dot[aria-current=true]{background:var(--primary-dark)}
.real-carousel__dot:focus-visible{outline:2px solid var(--primary-dark);outline-offset:3px}
.real-carousel__arrow{display:none}
/* 長い英数字の 1 語でもカードの幅を押し広げない（押し広げると 1 枚でも「めくれる」扱いになり、効かない点と矢印が出る） */
.real-tcard{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card);padding:22px 16px 16px}
.real-tcard::before{content:"";position:absolute;top:-9px;left:50%;width:84px;height:18px;transform:translateX(-50%) rotate(var(--tape-tilt, -2deg));background:var(--tape, var(--tape-pink));opacity:var(--tape-alpha, .35);border-radius:2px}
.real-tcard__lead{font-size:.78em;color:var(--text-hint);margin:0 0 4px}
.real-tcard__title{font-weight:700;font-size:1.05em;line-height:1.6;margin:0;color:var(--text);overflow-wrap:anywhere}
.real-tcard__hint{font-size:.8em;color:var(--text-sub);margin:4px 0 0;overflow-wrap:anywhere}
.real-tcard__options{display:grid;gap:8px;margin-top:12px}
/* 答えた問い・確定の 1 枚は、ボタン 1 つをカードの下の真ん中に */
.real-tcard__options--more{display:flex;justify-content:center;margin-top:auto;padding-top:16px}
.real-teaser__caption{text-align:center;font-size:.8em;color:var(--text-sub);margin:8px 0 0}
.real-teaser__caption[hidden]{display:none}
.real-teaser__more{text-align:center;margin:18px 0 0}
@media (min-width:760px){
  /* カードの間は、めくる入れ物を横に広げた分（20px）と同じにする。12px のままだと、コンテナが画面より狭い幅
     （900〜1099px・1200px より広い画面）で、隣のカードの端 8px がページの途中で切れて見える。日報の列の間（20px）とも同じ */
  .real-carousel__track{gap:20px}
  .real-carousel__slide,.real-carousel--multi .real-carousel__slide{flex-basis:calc((100% - 20px) / 2)}
  .real-carousel__arrow{display:flex;align-items:center;justify-content:center;position:absolute;top:calc(50% - 18px);z-index:2;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--cream);color:var(--text-sub);font:inherit;font-size:20px;line-height:1;cursor:pointer;box-shadow:var(--shadow-card)}
  .real-carousel__arrow[hidden]{display:none}
  .real-carousel__arrow--prev{left:-18px}
  .real-carousel__arrow--next{right:-18px}
  .real-carousel__arrow:disabled{opacity:.35;cursor:default}
  .real-carousel__arrow:focus-visible{outline:2px solid var(--primary-dark);outline-offset:3px}
}
@media (min-width:1100px){
  .real-carousel__slide,.real-carousel--multi .real-carousel__slide{flex-basis:calc((100% - 40px) / 3)}
}

@media (prefers-reduced-motion:reduce){
  .real-bar__fill,.real-rcard,.real-option,.real-btn--raised,.real-pill{transition:none}
  a.real-pill:hover{transform:none}
  .real-option:active,.real-btn--raised:active{transform:none}
}
@media (min-width:560px){
  .real-pill--lg{padding:16px 28px}
  .real-chips--breeds{grid-template-columns:1fr 1fr 1fr}
  .real-card{padding:26px 26px 24px}
}

/* 確定記事のシェアの帯（2026-10-18・?v=13）。冒頭は小さく 4 つを 1 行に（375px で折り返さない）、本文の終わりは 2×2 */
.real-share-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0 0}
.real-share-row__label{grid-column:1/-1;font-size:.82em;font-weight:700;color:var(--text-hint)}
.real-share-chip{display:flex;justify-content:center;align-items:center;white-space:nowrap;letter-spacing:0;font:inherit;font-size:.76em;font-weight:700;padding:7px 4px;border-radius:999px;border:2px solid var(--primary-dark);color:var(--primary-dark);background:var(--cream);text-decoration:none;cursor:pointer;transition:background .18s,color .18s}
.real-share-chip:hover{background:var(--primary-dark);color:#fff}
.real-share-chip:focus-visible{outline:2px solid var(--primary-dark);outline-offset:3px}
.real-share-band{text-align:center}
.real-share-band__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:420px;margin:12px auto 0}
.real-share-band__grid .real-btn{padding:12px 8px}
.real-share-band__note{font-size:.78em;color:var(--text-hint);margin:10px 0 0}