/* 宝石性格診断の画面: 入口・答える・結果・友達の部屋（/m/）・印刷の鑑定書
   地はナカミドのまま白っぽく、宝石のところだけ夜の色（#10141f）に光らせる。色の変数は結果の画面で JS が入れる
     --gem / --gem-l / --gem-d = タイプの色（content/hoseki/palette.json）・--glow / --glow2 = 輝きの光の色（gem.js の STRENGTH_LIGHTS）
   押せる高さは 44px 以上。幅320pxで横にはみ出さない。文は文節で折り返す */
.hs-page { --hs-night: #10141f; --hs-night2: #1b2233; --hs-gold: #c9a24a; --hs-agree: #7b5cff; --hs-disagree: #149c93; --gem: #8a93a6; --gem-l: #eef0f4; --gem-d: #2b3140; --glow: #7ff0ff; --glow2: #ffffff; }
.hs-page p, .hs-page li, .hs-page dd, .hs-page summary { word-break: auto-phrase; }
.hs-page .err, .hs-room .err { color: var(--danger); font-size: 14px; }
.print-only { display: none; }
.hs-room { --hs-night: #10141f; --hs-agree: #7b5cff; --hs-disagree: #149c93; }

/* ─── 入口 ─────────────────────────────── */
.hs-intro { padding: 16px 0 6px; display: grid; gap: 14px; }
.hs-hero { position: relative; border-radius: 22px; overflow: hidden; background: var(--hs-night); aspect-ratio: 3 / 2; box-shadow: 0 22px 50px -28px rgba(16, 20, 31, .7); }
.hs-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hs-hero-text { position: absolute; inset: 0; display: grid; align-content: start; justify-items: center; text-align: center; padding: 9% 20% 0; color: #fff; gap: 2px; }
.hs-hero-eb { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: rgba(255, 255, 255, .72); }
.hs-hero h1 { font-size: clamp(26px, 8.4vw, 40px); letter-spacing: .06em; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
/* 下の一言（2026-10-06）: トップの宝石の案内（tools/hoseki-build.mjs の FEATURE・HERO_SUB_PARTS）も同じ文・同じ形・同じ値
   - 「世界に」のあとでだけ折り返す（2つの span を inline-block に）。word-break: auto-phrase を読まない iPhone の Safari で「…世界にひと／つの宝石に」と言葉の途中で割れないように
   - 幅は絵の 52% まで（max-width 87%）: 1行で左右20%の内側いっぱいに広がると、左のアメジストと右の月の先に字がつく（幅340〜390・字の幅のせまい書体）。パソコンの幅は1行のまま
   - 行の間を少し詰める（1.75 → 1.55）: 幅320で2行目がアメジストの先に近い（字の箱から 2.6px → 5px）。宝石との間は tools/test/ui-start-header.mjs の G が測る */
.hs-hero-sub { font-size: clamp(12px, 3.4vw, 15px); color: rgba(255, 255, 255, .86); max-width: 87%; line-height: 1.55; }
.hs-hero-sub span { display: inline-block; }
.hs-lead { font-size: 16px; }
.hs-start { display: grid; gap: 8px; }
/* 「はじめる」: ほかの入口と同じ押せる形（.btn.go・app.css の下に濃い段・白い丸の▶・押すと沈む）を、宝石の夜の色で（朱にはしない・2026-10-06） */
.btn.go.hs-start-btn { --go-step: #261d63; --go-soft: rgba(123, 92, 255, .75); --go-ring: rgba(255, 255, 255, .22); background: linear-gradient(135deg, #2b2f6b, #7b5cff 55%, #c24f9b); }
.hs-resume { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; color: var(--ink2); }
.hs-resume .linklike { min-height: 44px; }
.hs-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hs-points li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 14px; color: var(--ink2); }
.hs-points b { display: block; font-family: var(--f-round); color: var(--ink); font-size: 15.5px; }
.hs-points b::before { content: ""; display: inline-block; width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; background: linear-gradient(135deg, #7ff0ff, #7b5cff); margin-right: 9px; vertical-align: 1px; }
.hs-three-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hs-three-list li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 8px 14px 8px 8px; }
.hs-three-list canvas { width: 92px; height: 92px; display: block; border-radius: 14px; background: radial-gradient(circle at 50% 42%, #2a3350, var(--hs-night) 72%); }
.hs-three-list b { display: block; font-family: var(--f-round); font-size: 16px; }
.hs-three-list span { display: block; font-size: 12.5px; font-weight: 700; color: var(--hs-agree); }
.hs-three-list p { font-size: 14px; color: var(--ink2); }
.hs-flow-list { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink2); }
.hs-flow-list b { display: block; color: var(--ink); font-family: var(--f-round); }

/* ─── 7段階の丸 ───────────────────────────── */
.hs-scale-wrap { display: grid; gap: 2px; }
.hs-scale { display: flex; align-items: center; justify-content: space-between; gap: 0; }
.hs-dot { flex: 1 1 0; min-width: 0; height: 48px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hs-dot i { display: block; width: calc(var(--d) * min(38px, 10.6vw)); height: calc(var(--d) * min(38px, 10.6vw)); border-radius: 50%; border: 2.5px solid var(--c); background: #fff; transition: background .12s, transform .12s, box-shadow .12s; }
.hs-dot-1, .hs-dot-2, .hs-dot-3 { --c: var(--hs-disagree); }
.hs-dot-4 { --c: #a3a8b3; }
.hs-dot-5, .hs-dot-6, .hs-dot-7 { --c: var(--hs-agree); }
.hs-dot:hover i { background: color-mix(in srgb, var(--c) 14%, #fff); }
.hs-dot[aria-checked="true"] i { background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); transform: scale(1.06); }
.hs-scale.answered .hs-dot[aria-checked="false"] i { opacity: .55; }
.hs-ends { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; }
.hs-ends span:first-child { color: var(--hs-disagree); }
.hs-ends span:last-child { color: var(--hs-agree); }

/* ─── 答える画面 ─────────────────────────── */
.hs-test { padding: 6px 0 8px; display: grid; gap: 12px; }
.hs-prog { position: sticky; top: 56px; z-index: 5; margin: 0 -16px; padding: 10px 16px 10px; background: rgba(250, 250, 248, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); display: grid; gap: 7px; }
.hs-prog-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--ink2); }
.hs-prog-ch b { font-family: var(--f-round); color: var(--ink); margin-right: 6px; }
.hs-prog-n { font-weight: 700; color: var(--muted); }
.hs-segs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.hs-seg { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.hs-seg i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #4cc9f0, #7b5cff 60%, #c24f9b); transition: width .25s ease; }
.hs-how { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.hs-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hs-q { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 10px 8px; display: grid; gap: 8px; transition: opacity .2s, border-color .2s; scroll-margin-top: 130px; }
.hs-qtext { font-size: 16.5px; font-weight: 700; line-height: 1.6; padding: 0 4px; display: flex; gap: 8px; align-items: baseline; }
.hs-qn { flex: none; font-family: var(--f-round); font-size: 12.5px; font-weight: 800; color: var(--muted); min-width: 1.6em; }
.hs-q.done { opacity: .62; border-color: transparent; background: #f6f6f3; }
.hs-q.done:focus-within, .hs-q.done:hover { opacity: 1; }
.hs-next { margin-top: 4px; }
.hs-next[disabled] { opacity: .3; }
.hs-test-foot { display: grid; gap: 6px; justify-items: start; }
.hs-test-foot .linklike { min-height: 44px; }

/* 章のおわり: 途中の宝石が育つ */
.hs-chap { margin: 14px -4px 0; padding: 22px 18px 20px; border-radius: 24px; color: #fff; text-align: center; display: grid; gap: 10px; justify-items: center;
  background: radial-gradient(120% 70% at 50% 34%, color-mix(in srgb, var(--gem) 34%, transparent), transparent 62%), linear-gradient(180deg, #161c2b, var(--hs-night)); box-shadow: 0 24px 60px -30px rgba(16, 20, 31, .9); }
.hs-chap-eb { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: rgba(255, 255, 255, .66); }
.hs-chap h1 { font-size: clamp(22px, 6.6vw, 28px); }
.hs-chap-stage { width: min(78vw, 300px); aspect-ratio: 1; display: grid; place-items: center; }
.hs-chap-gem { width: 100%; height: 100%; display: block; animation: hs-grow .9s cubic-bezier(.2, .9, .3, 1.2) both; }
.hs-chap-1 { filter: saturate(.35) brightness(.82) contrast(.9) blur(.7px); }
.hs-chap-2 { filter: saturate(.6) brightness(.9) blur(.35px); }
.hs-chap-3 { filter: saturate(.85); }
.hs-chap-4 { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--glow) 55%, transparent)); }
@keyframes hs-grow { from { transform: scale(.62); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
.hs-chap-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; justify-content: center; align-items: center; }
.hs-chap-dots li { width: 26px; height: 26px; display: grid; place-items: center; transform: rotate(45deg); border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .55); font-family: var(--f-round); font-size: 12px; font-weight: 800; }
.hs-chap-dots li span { transform: rotate(-45deg); line-height: 1; }
.hs-chap-dots li.on { background: linear-gradient(135deg, color-mix(in srgb, var(--glow) 60%, #fff), var(--gem)); border-color: color-mix(in srgb, var(--glow) 70%, #fff); color: var(--hs-night); box-shadow: 0 0 10px color-mix(in srgb, var(--glow) 50%, transparent); }
.hs-chap-text { font-size: 14.5px; color: rgba(255, 255, 255, .84); }
.hs-chap-hint { font-size: 14px; color: rgba(255, 255, 255, .78); }
.hs-chap-hint b { color: var(--glow); }
.hs-chap .btn.hs-go { background: #fff; color: var(--hs-night); margin-top: 4px; }
.hs-chap .linklike.hs-rest { color: rgba(255, 255, 255, .78); min-height: 44px; justify-self: center; }
.hs-finish { padding: 80px 0; display: grid; justify-items: center; gap: 18px; color: var(--ink2); }
.hs-finish-gem { width: 54px; height: 54px; transform: rotate(45deg); border-radius: 10px; background: linear-gradient(135deg, #7ff0ff, #7b5cff 50%, #c24f9b); animation: hs-pulse 1s ease-in-out infinite alternate; }
@keyframes hs-pulse { from { transform: rotate(45deg) scale(.86); filter: brightness(.9); } to { transform: rotate(45deg) scale(1.08); filter: brightness(1.25); } }

/* ─── 結果: スクショ用まとめ ─────────────────────
   スマホの1画面（ヘッダーの下・ブラウザの帯を引いた高さ）に収まるように、宝石の大きさを画面の高さで決める
   目安: 390×664（iPhone の Safari）・360×640（Android の Chrome）まで。tools/test/hoseki-flow.mjs が測る */
.hs-result { padding-top: 10px; }
.hs-result .section, .hs-room .section { grid-template-columns: minmax(0, 1fr); } /* 中の長い部品で、箱の幅が画面より広がらないように */
.hs-sum { --sum-gem: clamp(132px, calc(100svh - 456px), 236px); position: relative; margin: 0 -6px; border-radius: 22px; overflow: hidden; color: #fff; padding: 12px 14px 10px; display: grid; gap: 6px; justify-items: center; text-align: center;
  background: radial-gradient(70% 38% at 50% 27%, color-mix(in srgb, var(--gem) 46%, transparent), transparent 70%), var(--bg-img, none) center top / cover no-repeat, var(--hs-night);
  box-shadow: 0 26px 60px -32px rgba(16, 20, 31, .95); isolation: isolate; }
.hs-sum::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 38%, rgba(10, 13, 22, .55) 62%, rgba(10, 13, 22, .78)); pointer-events: none; }
.hs-sum-top { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .78); letter-spacing: .04em; }
.hs-sum-no { font-family: var(--f-round); }
.hs-sum-stage { width: var(--sum-gem); height: var(--sum-gem); margin: -2px 0 -6px; }
.hs-sum-gem { width: 100%; height: 100%; display: block; cursor: grab; }
.hs-sum-code { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; align-items: baseline; font-size: 13px; color: rgba(255, 255, 255, .84); line-height: 1.4; }
.hs-sum-code b { font-family: var(--f-round); font-size: 16px; font-weight: 800; letter-spacing: .04em; color: #fff; }
.hs-sum-gemname { font-size: clamp(28px, 8.6vw, 36px); line-height: 1.15; letter-spacing: .04em; text-shadow: 0 2px 16px rgba(0, 0, 0, .4); }
.hs-sum-chip span { display: inline-block; font-size: 13px; font-weight: 800; padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--glow) 22%, transparent); border: 1.5px solid color-mix(in srgb, var(--glow) 80%, #fff); }
.hs-sum-title { font-family: var(--f-round); font-weight: 800; font-size: clamp(16px, 4.8vw, 19px); line-height: 1.35; }
.hs-mini { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.hs-mini-top { display: flex; justify-content: space-between; align-items: baseline; gap: 2px; font-size: 11.5px; line-height: 1.3; }
.hs-mini-top span { color: var(--muted); font-weight: 700; white-space: nowrap; }
/* 点の数字は割らない（app.css の body の overflow-wrap: anywhere で、幅320の 48px の列に「100」が「10／0」と割れて、まとめが1画面からはみ出した・2026-10-05 レビューの指摘）
   同じ部品（hoseki-lib.js の miniBars）を、まとめ・友達に聞くの箱・作った人の部屋の画面・友達の画面で使う。列の幅は「外向」23px＋すき間2px＋「100」25px＝50px ほど要る
   - まとめ（幅320で列 48px・高さを増やせない）: 3けた（100）だけ、幅340px以下で字を少し小さく（22px）して1行に収める
   - 友達に聞くの箱（幅320で列 40px・360で 48px）と作った人の部屋の画面（幅320で 43px）: せまい画面では、物差しの字と点を2段に（友達の画面と同じ・下の 359.98px） */
.hs-mini-top b { font-family: var(--f-round); font-size: 14px; white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 340px) {
  .hs-sum .hs-mini-top b.hs-n3 { font-size: 12.5px; }
}
@media (max-width: 379.98px) {
  .hs-ask-bars .hs-mini-top, .hs-room-res .hs-mini-top { flex-direction: column; align-items: flex-start; gap: 0; }
}
.hs-mini-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 3px; }
.hs-mini-bar i { display: block; height: 100%; border-radius: 3px; background: var(--c); }
.hs-sum .hs-mini-top span { color: rgba(255, 255, 255, .7); }
.hs-sum .hs-mini-bar { background: rgba(255, 255, 255, .16); }
.hs-sum-fx { width: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 10px; align-items: end; text-align: left; margin-top: 2px; }
.hs-sum-lab { display: block; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .62); margin-bottom: 3px; }
.hs-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.hs-strip-bars { height: 46px; display: flex; align-items: flex-end; gap: 1.5px; border-bottom: 2px solid var(--c); }
.hs-strip-bars i { flex: 1; border-radius: 2px 2px 0 0; background: var(--c); }
.hs-strip-g span { display: block; text-align: center; font-family: var(--f-round); font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, .58); line-height: 1.5; }
.hs-sum-top3 ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hs-sum-top3 li { display: flex; justify-content: space-between; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 700; line-height: 1.3; background: rgba(255, 255, 255, .1); border-left: 3px solid var(--c); border-radius: 8px; padding: 4px 8px; }
.hs-sum-top3 li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-sum-top3 li b { font-family: var(--f-round); }
/* 幅320px前後: とくに高い面の名前（いちばん長い「人目の気にならなさ」9字）が…で切れないように、右の列を広く・字を少し小さく
   （折り返すと高さが増えて、320×568 の1画面からはみ出すため。tools/test/hoseki-flow.mjs の 7b が測る） */
@media (max-width: 340px) {
  .hs-sum-fx { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; }
  .hs-sum-top3 li { font-size: 11.5px; padding: 4px 6px; gap: 4px; }
}
/* 高さが 520px 未満の画面だけ詰める（いちばん小さいスマホ 320×568 の Safari で帯を引いた 320×460 でも、まとめを1画面に・2026-10-05 ユーザーの決めごと10 案B）
   宝石を 104px に・小さな見出し（30の面／とくに高い面）と物差しの字を省く・30の面の棒を低く・すき間を少しずつ詰める
   520px 以上（390×664・360×640・320×568 など）は何も変えない。幅も 520px 未満の縦長の画面だけ（横向きのスマホ 844×390 や低いパソコンの窓 1280×500 は、
   詰めても1画面に収まらないので詰めない・2026-10-05 レビューの指摘）。tools/test/hoseki-small-height.mjs が測る */
@media (max-height: 519.98px) and (max-width: 519.98px) {
  .hs-sum { --sum-gem: 104px; gap: 4px; padding-top: 8px; padding-bottom: 8px; }
  .hs-sum-gemname { font-size: 26px; }
  .hs-sum-fx { align-items: center; }
  .hs-sum-lab { display: none; }
  .hs-strip-bars { height: 28px; }
  .hs-strip-g span { display: none; }
  .hs-sum-top3 ol { gap: 3px; }
  .hs-sum-top3 li { padding-top: 2px; padding-bottom: 2px; font-size: 11.5px; }
}
.hs-sum-foot { width: 100%; display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 6px; margin-top: 2px; font-size: 10.5px; color: rgba(255, 255, 255, .62); }
.hs-sum-foot .mono { font-family: var(--f-round); font-weight: 700; color: rgba(255, 255, 255, .86); }
/* 明るい地の案（比べる用・?sum=day） */
.hs-sum[data-theme="day"] { color: var(--ink); background: radial-gradient(70% 40% at 50% 28%, color-mix(in srgb, var(--gem) 30%, transparent), transparent 72%), linear-gradient(180deg, #fff, color-mix(in srgb, var(--gem-l) 70%, #fff)); border: 1px solid var(--line); box-shadow: 0 20px 44px -30px rgba(16, 20, 31, .45); }
.hs-sum[data-theme="day"]::after { display: none; }
.hs-sum[data-theme="day"] .hs-sum-top, .hs-sum[data-theme="day"] .hs-sum-code, .hs-sum[data-theme="day"] .hs-sum-foot, .hs-sum[data-theme="day"] .hs-sum-lab, .hs-sum[data-theme="day"] .hs-strip-g span { color: var(--muted); }
.hs-sum[data-theme="day"] .hs-sum-code b, .hs-sum[data-theme="day"] .hs-sum-foot .mono { color: var(--ink); }
.hs-sum[data-theme="day"] .hs-sum-gemname { text-shadow: none; }
.hs-sum[data-theme="day"] .hs-sum-chip span { background: color-mix(in srgb, var(--gem) 16%, #fff); border-color: var(--gem); color: var(--ink); }
.hs-sum[data-theme="day"] .hs-mini-top span { color: var(--muted); }
.hs-sum[data-theme="day"] .hs-mini-bar { background: var(--line); }
.hs-sum[data-theme="day"] .hs-sum-top3 li { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--c); }
.hs-sum[data-theme="day"] .hs-sum-foot { border-color: var(--line); }

/* ─── 結果: 共有・友達に聞く ─────────────────── */
.hs-share { margin-top: 18px; }
.hs-share > h2 { font-size: 18px; }
.hs-share-preview { grid-template-columns: 96px 1fr; }
.hs-share-preview img { width: 96px; border-radius: 10px; display: block; background: var(--hs-night); }
.hs-share-main { background: linear-gradient(135deg, #1b2233, #3b2f7a 60%, #8e3b8f); }
.hs-share { grid-template-columns: minmax(0, 1fr); }
.hs-share-preview .seg.hs-seg-pick { justify-self: stretch; display: flex; }
.hs-seg-pick button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 5px 8px; }
.hs-share-sub { display: grid; gap: 2px; }
.hs-share-sub .linklike { min-height: 44px; }
.hs-share-sub .note { overflow-wrap: anywhere; }
.hs-ask { margin-top: 18px; position: relative; border-radius: 22px; padding: 18px 16px 14px; display: grid; gap: 12px; color: #fff;
  background: radial-gradient(80% 90% at 0% 0%, color-mix(in srgb, var(--glow) 26%, transparent), transparent 60%), linear-gradient(160deg, #222a40, var(--hs-night)); box-shadow: 0 22px 50px -30px rgba(16, 20, 31, .9); scroll-margin-top: 70px; }
.hs-ask h2 { font-size: clamp(18px, 5.4vw, 21px); }
.hs-ask p { font-size: 14.5px; color: rgba(255, 255, 255, .86); }
.hs-ask .note { color: rgba(255, 255, 255, .62); font-size: 12.5px; }
.hs-ask-head { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; }
.hs-ask-need { font-family: var(--f-round); font-weight: 800; color: var(--glow) !important; margin-top: 2px; }
.hs-ask .btn { background: #fff; color: var(--hs-night); }
.hs-ask .btn.hs-ask-btn { min-height: 58px; font-size: 18px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--glow) 30%, transparent); }
.hs-ask .btn.line { background: var(--line-green); color: #fff; }
.hs-ask .btn.x { background: #000; color: #fff; }
.hs-ask .btn.sub { background: rgba(255, 255, 255, .1); color: #fff; border: 1.5px solid rgba(255, 255, 255, .3); }
.hs-ask-form { display: grid; gap: 8px; background: rgba(255, 255, 255, .06); border-radius: 16px; padding: 12px; }
.hs-ask-form label { color: #fff; }
.hs-ask-form input { color: var(--ink); }
.hs-ask .err { color: #ffb3c1; }
.hs-invite { display: grid; gap: 8px; }
.hs-invite .share-url { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.hs-invite .share-url code { color: rgba(255, 255, 255, .8); }
.hs-invite .share-url button { background: #fff; color: var(--hs-night); }
.hs-ask-res { display: grid; gap: 8px; background: rgba(255, 255, 255, .07); border-radius: 16px; padding: 12px; }
.hs-ask-res b { font-family: var(--f-round); }
.hs-ask .hs-mini-top span { color: rgba(255, 255, 255, .7); }
.hs-ask .hs-mini-bar { background: rgba(255, 255, 255, .16); }
.hs-ask .linklike { color: rgba(255, 255, 255, .82); min-height: 44px; }
.hs-ask-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14px; font-weight: 700; }
.hs-ask-more[open] summary { margin-bottom: 8px; }
.hs-ask-tools { display: flex; flex-wrap: wrap; gap: 0 16px; }
.hs-ask-warn { display: grid; gap: 8px; background: rgba(255, 179, 193, .12); border: 1px solid rgba(255, 179, 193, .5); border-radius: 14px; padding: 10px 12px; }
.hs-ask-warn .share-url { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.hs-ask-warn .share-url code { color: rgba(255, 255, 255, .8); }
.hs-ask-warn .share-url button { background: #fff; color: var(--hs-night); }
.hs-load-err { border-color: #f1c5cf; }
.hs-load-err p { color: var(--danger); font-size: 14.5px; }
/* 友達の殻のメーター（芯と、3つのかけら） */
.hs-shell { position: relative; width: 76px; height: 76px; }
.hs-shell-core { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%) rotate(45deg); border-radius: 6px; background: linear-gradient(135deg, var(--gem-l), var(--gem) 55%, var(--gem-d)); box-shadow: 0 0 18px color-mix(in srgb, var(--glow) 60%, transparent); }
.hs-shell-p { position: absolute; inset: 4px; border-radius: 50%; border: 4px dashed rgba(255, 255, 255, .26); clip-path: polygon(50% 50%, 50% -10%, 110% -10%, 110% 40%); }
.hs-shell-p1 { transform: rotate(120deg); }
.hs-shell-p2 { transform: rotate(240deg); }
.hs-shell-p.on { border-style: solid; border-color: color-mix(in srgb, var(--glow) 85%, #fff); filter: drop-shadow(0 0 6px var(--glow)); }

/* 目次（上に貼りつく） */
.hs-toc { position: sticky; top: 56px; z-index: 6; margin: 20px -16px 0; padding: 8px 16px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; background: rgba(250, 250, 248, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.hs-toc::-webkit-scrollbar { display: none; }
.hs-toc a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--ink2); }
.hs-result .section { scroll-margin-top: 120px; } /* 上の帯 56px ＋ 目次（8＋44＋8＋線） */

/* ─── 結果: 256の説明・宝石のつくり ─────────────── */
.hs-about h2 { font-size: clamp(22px, 6.4vw, 27px); }
.hs-about-text { font-size: 16px; line-height: 1.9; }
.hs-about-light { font-size: 14.5px; color: var(--ink2); background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gem); border-radius: 12px; padding: 10px 12px; }
.hs-about-light b { display: block; color: var(--ink); font-family: var(--f-round); }
.hs-make { background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--gem-l) 60%, #fff)); }
.hs-make h3 { font-size: 17px; }
.hs-make p { font-size: 14.5px; color: var(--ink2); }
.hs-make-no b { font-family: var(--f-round); color: var(--ink); letter-spacing: .04em; }
.hs-rarity { font-size: 13.5px !important; }
.hs-rarity:empty { display: none; }
.hs-make-list summary, .hs-pdf-how summary, .hs-ask-more summary { list-style: none; }
.hs-make-list summary::-webkit-details-marker, .hs-pdf-how summary::-webkit-details-marker, .hs-ask-more summary::-webkit-details-marker, .hs-tsec summary::-webkit-details-marker { display: none; }
.hs-make-list summary::after, .hs-pdf-how summary::after, .hs-ask-more summary::after, .hs-tsec summary::after { content: "＋"; margin-left: auto; padding-left: 10px; font-weight: 800; color: var(--muted); }
.hs-make-list[open] summary::after, .hs-pdf-how[open] summary::after, .hs-ask-more[open] summary::after, .hs-tsec[open] summary::after { content: "−"; }
.hs-tsec summary { list-style: none; }
.hs-make-list summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.hs-make-list dl { margin: 6px 0 0; display: grid; gap: 8px; }
.hs-make-list dt { font-weight: 700; display: flex; justify-content: space-between; gap: 10px; }
.hs-make-list dt b { color: var(--gem-d); }
.hs-make-list dd { margin: 0; font-size: 13.5px; color: var(--ink2); }

/* ─── 結果: 30の面の評価 ─────────────────────── */
.hs-track { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.hs-track i { display: block; height: 100%; border-radius: 4px; background: var(--c, var(--gem)); }
.hs-dom { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 16px; padding: 0 14px; }
.hs-dom summary { list-style: none; cursor: pointer; padding: 12px 0 10px; display: grid; gap: 8px; }
.hs-dom summary::-webkit-details-marker { display: none; }
.hs-dom-head { display: flex; align-items: baseline; gap: 10px; }
.hs-dom-name { font-family: var(--f-round); font-size: 18px; }
.hs-dom-num { font-family: var(--f-round); font-size: 22px; font-weight: 800; color: var(--ci); margin-left: auto; }
.hs-lv { font-size: 12px; font-weight: 800; padding: 1px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink2); white-space: nowrap; }
.hs-lv-high { background: color-mix(in srgb, var(--c, var(--gem)) 16%, #fff); border-color: color-mix(in srgb, var(--c, var(--gem)) 50%, #fff); color: var(--ci, var(--ink)); }
.hs-lv-low { background: #f2f3f6; }
.hs-dom-bar { height: 10px; }
.hs-dom-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.hs-dom-list li { display: grid; grid-template-columns: minmax(5.5em, 8.2em) 1fr 2.2em; gap: 8px; align-items: center; font-size: 13.5px; }
.hs-dom-list .n { color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-dom-list .hs-track { height: 6px; }
.hs-dom-list b { font-family: var(--f-round); text-align: right; }
.hs-dom-more { justify-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; font-size: 13px; font-weight: 700; color: var(--ci); }
.hs-dom-more::before { content: "説明を開く"; }
.hs-dom-more::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.hs-dom[open] .hs-dom-more::before { content: "説明をとじる"; }
.hs-dom[open] .hs-dom-more::after { transform: rotate(-135deg) translateY(-2px); }
.hs-dom-body { display: grid; gap: 10px; padding: 4px 0 14px; border-top: 1px dashed var(--line); }
.hs-dom-desc { font-size: 14.5px; color: var(--ink2); padding-top: 10px; }
.hs-dom-place { font-size: 13.5px; font-weight: 700; color: var(--ci); }
.hs-fc { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 6px; }
.hs-fc-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hs-fc-head b { font-family: var(--f-round); font-size: 16px; }
.hs-fc-short { font-size: 12.5px; color: var(--muted); }
.hs-fc-num { margin-left: auto; font-family: var(--f-round); font-size: 20px; font-weight: 800; color: var(--ci); }
.hs-fc-bar { height: 10px; }
.hs-tick { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .9); }
.hs-tick.t1 { left: 37.5%; }
.hs-tick.t2 { left: 62.5%; }
.hs-fc-ends { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); }
.hs-fc-lv { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hs-fc-lv b { font-size: 14.5px; }
.hs-fc p:not(.hs-fc-lv) { font-size: 14.5px; }
.hs-fc-hint { font-size: 13.5px !important; color: var(--ink2); background: var(--bg); border-radius: 10px; padding: 8px 10px; }
.hs-fc-hint::before { content: "活かし方 "; font-weight: 800; color: var(--ci); }

/* 宝石の「回転を止める／回す」（まとめの枠の外のすぐ下・3つの私の宝石の下）。押せる高さ 44px */
.hs-spin-row { display: flex; justify-content: flex-end; margin: 2px 0 -6px; }
.hs-spin { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink2); font-size: 13px; font-weight: 700; cursor: pointer; }
.hs-spin::before { content: ""; width: 10px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.hs-spin[aria-pressed="true"]::before { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.hs-spin-dark { color: rgba(255, 255, 255, .8); }

/* ─── 結果: 3つの私 ─────────────────────────── */
.hs-mirror-stage { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px; border-radius: 20px; padding: 10px 12px 14px; color: #fff;
  background: radial-gradient(70% 55% at 50% 40%, color-mix(in srgb, var(--gem) 34%, transparent), transparent 72%), linear-gradient(180deg, #1a2133, var(--hs-night)); }
.hs-mirror-gem { width: min(72vw, 280px); height: min(72vw, 280px); display: block; cursor: grab; }
.hs-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; color: rgba(255, 255, 255, .5); }
.hs-legend li { display: flex; align-items: center; gap: 8px; }
.hs-legend li.on { color: #fff; font-weight: 700; }
.hs-legend i { width: 14px; height: 14px; flex: none; border-radius: 4px; }
.hs-legend .k-core { background: linear-gradient(135deg, var(--gem-l), var(--gem) 55%, var(--gem-d)); transform: rotate(45deg); }
.hs-legend .k-shell { border: 2px solid #9aa6c8; border-radius: 50%; }
.hs-legend .k-halo { border: 2px solid var(--glow); border-radius: 50%; box-shadow: 0 0 6px var(--glow); }
.hs-gaps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hs-gaps li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 14.5px; }
.hs-gaps b { display: block; font-family: var(--f-round); margin-bottom: 2px; }
.hs-gap-blind { border-left: 4px solid #5bb8f0 !important; }
.hs-gap-growth { border-left: 4px solid var(--hs-agree) !important; }
.hs-gap-reached { border-left: 4px solid var(--hs-gold) !important; }
.hs-mtable { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border-radius: 12px; overflow: hidden; }
.hs-mtable th, .hs-mtable td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: right; }
.hs-mtable th:first-child { text-align: left; font-weight: 700; white-space: nowrap; }
.hs-mtable thead th { font-size: 12.5px; color: var(--muted); }
.hs-mtable td { font-family: var(--f-round); font-weight: 700; }
.hs-mirror-cards { display: grid; gap: 10px; }
.hs-mcard h3 { font-size: 17px; }
.hs-mcard p { font-size: 14.5px; color: var(--ink2); }
.hs-ideal .hs-qs { gap: 8px; }
.hs-ideal .hs-q { border-color: var(--line); }
.hs-ideal .linklike { min-height: 44px; }

/* ─── 結果: タイプの説明 ─────────────────────── */
.hs-type-head { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; }
.hs-type-head img { width: 112px; height: 112px; border-radius: 18px; display: block; background: var(--hs-night); }
.hs-type-head h2 { font-size: clamp(22px, 6.4vw, 26px); }
.hs-type-head h2 .mono { font-size: 15px; color: var(--muted); font-family: var(--f-round); }
.hs-type-name { font-weight: 700; color: var(--ink2); }
.hs-type-catch { font-family: var(--f-round); font-weight: 800; font-size: 18px; color: var(--gem-d); }
.hs-aru { background: color-mix(in srgb, var(--gem-l) 70%, #fff); border-radius: 16px; padding: 12px 14px; display: grid; gap: 6px; }
.hs-aru h3 { font-size: 16px; }
.hs-aru ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: 14.5px; }
.hs-tsec { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; }
.hs-tsec summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-family: var(--f-round); font-weight: 700; font-size: 16px; }
.hs-tsec p { padding-bottom: 12px; font-size: 15px; }
.hs-compat h3 { font-size: 17px; margin-bottom: 8px; }
.hs-compat-list { display: grid; gap: 8px; }
.hs-compat-card { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.hs-compat-card img { width: 64px; height: 64px; border-radius: 12px; background: var(--hs-night); }
.hs-compat-card small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.hs-compat-card b { font-family: var(--f-round); font-size: 16px; margin-right: 6px; }
.hs-compat-card .mono { font-size: 12.5px; color: var(--muted); }
.hs-compat-note { display: block; font-size: 13.5px; color: var(--ink2); margin-top: 2px; }
.hs-why b { margin-right: 6px; color: var(--ink2); }

/* ─── 結果: 保存 ─────────────────────────────── */
.hs-save-imgs { display: grid; gap: 8px; }
.hs-save-img { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px; }
.hs-save-img img { width: 90px; border-radius: 8px; display: block; background: var(--hs-night); }
.hs-save-img > div { display: grid; gap: 4px; justify-items: start; }
.hs-save-img .btn { width: auto; padding: 0 18px; }
.hs-pdf { background: linear-gradient(180deg, #fffdf6, #fbf6e8); border-color: #ecdfbd; }
.hs-pdf h3 { font-size: 17px; }
.hs-pdf p { font-size: 14.5px; color: var(--ink2); }
.hs-pdf .btn { background: linear-gradient(135deg, #8a6a1f, #c9a24a); }
.hs-pdf-how summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; font-size: 14px; }
.hs-pdf-how ul { margin: 0; padding-left: 1.2em; font-size: 13.5px; color: var(--ink2); display: grid; gap: 4px; }
.hs-end { gap: 10px; }

/* ─── 下に固定の帯 ─────────────────────────── */
.hs-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(250, 250, 248, .95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--line); max-width: 560px; margin: 0 auto; }
.hs-bar .btn { min-height: 46px; font-size: 15px; gap: 6px; white-space: nowrap; }
.hs-bar .btn small { font-size: 12px; font-weight: 800; color: var(--hs-agree); }
/* 「友達に聞く」と人数（あと3人・そろいました）は2段に（1行に並べると、幅320〜360で「友達に聞 / く」「そろいまし / た」と語の途中で割れた・2026-10-06）。
   上下の余白を詰めて、となりの「画像をシェア」より高くしない（帯の高さは前のまま） */
.hs-bar a.btn { flex-direction: column; gap: 0; line-height: 1.25; padding: 7px 8px; }
.hs-page-result .site-footer { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
/* パソコン幅の2カラム（1024〜1279px・app.css の .pc-cols）: 本体が画面の真ん中から左へずれる（--pc-shift）ので、帯も本体の位置にそろえる。
   帯は left:0・margin:auto で [0, 画面の幅 − right] の真ん中に来るので、right を「ずれ × −2」にする（3カラムと答える画面は 0 で今までどおり） */
@media screen and (min-width: 1024px) { .pc-cols .hs-bar { right: calc(var(--pc-shift, 0px) * -2); } }

/* ─── 結果が出た瞬間の演出 ────────────────────── */
.hs-reveal { position: fixed; inset: 0; z-index: 80; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center; color: #fff;
  background: radial-gradient(60% 45% at 50% 42%, color-mix(in srgb, var(--gem) 40%, transparent), transparent 70%), var(--hs-night); animation: hs-fadein .3s ease both; }
.hs-reveal.out { animation: hs-fadeout .38s ease both; }
.hs-reveal-eb { font-size: 14px; color: rgba(255, 255, 255, .72); animation: hs-up .6s .1s ease both; }
.hs-reveal-stage { position: relative; width: min(74vw, 300px); aspect-ratio: 1; }
.hs-reveal-gem { width: 100%; height: 100%; display: block; animation: hs-born 1.4s cubic-bezier(.2, .9, .25, 1.15) both; }
.hs-reveal-flash { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, #fff, color-mix(in srgb, var(--glow) 70%, transparent) 40%, transparent 70%); animation: hs-flash 1.2s .45s ease-out both; pointer-events: none; }
.hs-reveal-name { font-family: var(--f-round); font-weight: 800; font-size: clamp(34px, 10vw, 44px); letter-spacing: .06em; animation: hs-up .6s 1s ease both; }
.hs-reveal-title { font-size: 17px; font-weight: 700; color: rgba(255, 255, 255, .86); animation: hs-up .6s 1.2s ease both; }
.hs-reveal-skip { margin-top: 14px; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .36); background: rgba(255, 255, 255, .08); color: #fff; font-weight: 700; cursor: pointer; }
@keyframes hs-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes hs-fadeout { from { opacity: 1; } to { opacity: 0; } }
@keyframes hs-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hs-born { 0% { transform: scale(.3) rotate(-20deg); filter: saturate(.2) brightness(.6) blur(3px); opacity: 0; } 35% { opacity: 1; } 55% { filter: saturate(.4) brightness(.8) blur(1px); } 100% { transform: scale(1) rotate(0); filter: none; opacity: 1; } }
@keyframes hs-flash { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .95; } 100% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) {
  .hs-chap-gem, .hs-reveal, .hs-reveal *, .hs-finish-gem { animation: none !important; }
}

/* ─── 友達の部屋（/m/<id>）────────────────────── */
.hs-room-intro { padding: 22px 0 6px; display: grid; gap: 12px; }
.hs-room-intro h1 { font-size: clamp(23px, 6.6vw, 30px); }
.hs-room-q { width: 96px; height: 96px; justify-self: center; display: grid; place-items: center; border-radius: 24px; transform: rotate(45deg); background: radial-gradient(circle at 35% 30%, #3a4566, var(--hs-night)); box-shadow: 0 0 0 3px rgba(123, 92, 255, .3), 0 18px 40px -18px rgba(16, 20, 31, .9); }
.hs-room-q span { transform: rotate(-45deg); color: #fff; font-family: var(--f-round); font-size: 46px; font-weight: 300; }
.hs-room-promise { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: 14px; color: var(--ink2); }
.hs-room-quiz-h { font-size: clamp(22px, 6.4vw, 28px); }
.hs-room-view { gap: 10px; }
.hs-room-type { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; }
.hs-room-type img { width: 88px; height: 88px; border-radius: 16px; background: var(--hs-night); }
.hs-room-code { font-family: var(--f-round); font-weight: 800; font-size: 26px; color: #6544cf; line-height: 1.2; }
.hs-room-gem { font-family: var(--f-round); font-weight: 800; font-size: 20px; }
.hs-peek h2 { font-size: 17px; }
.hs-peek-num b { font-family: var(--f-round); font-size: 46px; color: #137a4c; }
.hs-peek-num span { font-size: 18px; color: var(--muted); }
.hs-peek-dir { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.hs-peek-dir li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; border-bottom: 1px solid var(--line); padding: 5px 0; }
/* 物差しごとの比べの札（2026-10-05 決めごと19 案C の見本どおり: 近い＝緑・高め＝だいだい・控えめ＝むらさき）。幅が足りないときは札だけ次の行の右へ */
.hs-dir { margin-left: auto; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.hs-dir-near { background: #e1f3ea; color: #126b43; }
.hs-dir-high { background: #fdebd3; color: #8a4b00; }
.hs-dir-low { background: #e7e6fb; color: #4840b0; }
.hs-room-cta { margin-top: 18px; background: linear-gradient(135deg, #2b2f6b, #7b5cff 55%, #c24f9b); }
.hs-room-cta-note { text-align: center; }
/* 幅320: 「（90問・約10分）」を「約10／分）」で割らない・友達の見方の小さな棒は物差しの字と点を2段に（2026-10-05 統合で見つけた。
   「100」を割らないのは、まとめなどと同じ .hs-mini-top b の決まり） */
.hs-nobr { white-space: nowrap; }
.hs-room-cta > span { text-align: center; }
@media (max-width: 359.98px) {
  .hs-room-view .hs-mini-top { flex-direction: column; align-items: flex-start; gap: 0; }
}
/* 作った人の部屋の画面: 答えた友達に見せる比べの切りかえ（決めごと19・既定は物差しごと）。押せる高さ 44px */
.hs-peek-opts { display: grid; gap: 8px; }
.hs-peek-opt { min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.hs-peek-opt[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.hs-peek-opt[aria-pressed="true"]::before { content: "✓ "; }
.hs-peek-opt:disabled { opacity: .6; cursor: default; }
.hs-room-res { gap: 10px; }
.hs-room-res b { font-family: var(--f-round); }
.hs-room-invite .share-url { margin-top: 2px; }
/* 宝石の画面の「コピー」（ナカミド共通の .share-url）と、友達の画面の「はじめに戻る」: 押せる高さ 44px（2026-10-05 レビューの指摘） */
.hs-invite .share-url, .hs-ask-warn .share-url, .hs-room-invite .share-url { padding: 4px 4px 4px 12px; }
.hs-invite .share-url button, .hs-ask-warn .share-url button, .hs-room-invite .share-url button { min-height: 44px; }
.hs-room .linklike { min-height: 44px; }
.hs-room .hs-room-head { padding-top: 22px; }

/* ─── 印刷: A4 の鑑定書（画面の要素は消して、.hs-report だけを出す）──────────────
   Chromium の PDF で漢字が化けない書体（BIZ UDPゴシック）を先に（メモ: Chromium PDF の日本語テキスト層） */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #fff !important; }
  body.hs-page-result { font-family: "BIZ UDPGothic", "BIZ UDPゴシック", var(--f-body); font-size: 10pt; line-height: 1.55; color: #15171c; }
  body.hs-page-result .site-header, body.hs-page-result .site-footer, body.hs-page-result #app > :not(#hs-report-slot), .hs-bar, .toast, .share-sheet, .hs-reveal, .ad-wrap { display: none !important; }
  body.hs-page-result .wrap { max-width: none !important; padding: 0 !important; }
  .print-only { display: block !important; }
  .hs-report h1, .hs-report h2, .hs-report h3 { font-family: "BIZ UDPGothic", "BIZ UDPゴシック", var(--f-body); }
  .hs-rp { position: relative; break-after: page; page-break-after: always; min-height: 262mm; padding: 0 2mm 12mm; display: flow-root; }
  .hs-rp:last-child { break-after: auto; page-break-after: auto; }
  .hs-rp-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 8pt; color: #6b717b; border-top: .5pt solid #d8d3c4; padding-top: 2mm; }
  .hs-rp h2 { font-size: 13pt; margin: 4mm 0 2mm; padding-bottom: 1mm; border-bottom: 1pt solid #c9a24a; }
  .hs-rp h3 { font-size: 11pt; margin: 3mm 0 1mm; }
  .hs-rp p { margin: 0 0 1.6mm; }
  .hs-rp .num { font-family: "Inter", sans-serif; font-weight: 800; }
  .hs-rp-bar { display: inline-block; width: 100%; height: 2.4mm; border-radius: 1.2mm; background: #ebe8df; overflow: hidden; vertical-align: middle; }
  .hs-rp-bar i { display: block; height: 100%; border-radius: 1.2mm; }
  /* 1. 鑑定書の表紙（Codex で描いた枠 /img/hoseki/card/certificate.webp） */
  .hs-rp-cover { min-height: 0; height: 262mm; overflow: hidden; background: url("/img/hoseki/card/certificate.webp") center / 100% 100% no-repeat; text-align: center; padding: 20mm 22mm 14mm; }
  .hs-rp-eb { font-size: 8pt; letter-spacing: .3em; color: #8a6a1f; margin-top: 2mm !important; }
  .hs-rp-cover h1 { font-size: 24pt; letter-spacing: .3em; margin: 1mm 0 0; color: #3b2f1a; }
  .hs-rp-sub { font-size: 9pt; color: #6b5a33; }
  .hs-rp-gem { display: block; width: 58mm; height: 58mm; margin: 3mm auto 1mm; }
  .hs-rp-code { font-size: 11pt; color: #4a4f5c; }
  .hs-rp-code b { font-family: "Inter", sans-serif; font-size: 14pt; letter-spacing: .06em; color: #15171c; }
  .hs-rp-gemname { font-size: 24pt; font-weight: 800; letter-spacing: .1em; margin: 1mm 0 !important; }
  .hs-rp-title { font-size: 13pt; font-weight: 700; }
  .hs-rp-4c { margin: 5mm auto 3mm; max-width: 120mm; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5mm 6mm; text-align: left; }
  .hs-rp-4c div { border-bottom: .5pt solid #d8c99d; padding: 1mm 0; }
  .hs-rp-4c dt { font-size: 7.5pt; color: #8a6a1f; }
  .hs-rp-4c dd { margin: 0; font-size: 10pt; font-weight: 700; }
  .hs-rp-note { font-size: 7.5pt; color: #6b717b; max-width: 130mm; margin: 2mm auto 0 !important; }
  .hs-rp-cover .hs-rp-foot { left: 22mm; right: 22mm; bottom: 14mm; border-color: #d8c99d; }
  /* 2. 全部の点 */
  .hs-rp-domains { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 6mm; }
  .hs-rp-dom { break-inside: avoid; }
  .hs-rp-dom-head { display: flex; gap: 2mm; align-items: baseline; margin: 0 0 1mm !important; }
  .hs-rp-dom-head b { font-size: 11pt; }
  .hs-rp-dom-head .num { font-size: 13pt; margin-left: auto; }
  .hs-rp-dom-head span:last-child { font-size: 8pt; color: #6b717b; }
  .hs-rp-place { font-size: 7.5pt; color: #6b717b; margin: 1mm 0 !important; }
  .hs-rp-facets { list-style: none; margin: 1mm 0 0; padding: 0; display: grid; gap: .8mm; }
  .hs-rp-facets li { display: grid; grid-template-columns: 22mm 1fr 7mm 20mm; gap: 2mm; align-items: center; font-size: 8pt; }
  .hs-rp-facets .num { text-align: right; }
  .hs-rp-facets .lv { font-size: 7pt; color: #6b717b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hs-rp-str { margin: 0; padding-left: 5mm; display: grid; grid-template-columns: 1fr 1fr; gap: 1mm 8mm; }
  .hs-rp-str li { display: grid; grid-template-columns: 30mm 1fr 7mm; gap: 2mm; align-items: center; font-size: 8.5pt; }
  .hs-rp-str .num { text-align: right; }
  /* 3〜5 */
  .hs-rp-lead { font-size: 10.5pt; line-height: 1.75; }
  .hs-rp-fb { break-inside: avoid; border: .5pt solid #e1dccd; border-radius: 2mm; padding: 2mm 3mm; margin-bottom: 2mm; }
  .hs-rp-fb-head { display: flex; gap: 3mm; align-items: baseline; }
  .hs-rp-fb-head b { font-size: 10.5pt; }
  .hs-rp-fb-head span:last-child { font-size: 8pt; color: #6b717b; }
  .hs-rp-hint { font-size: 8.5pt; color: #4a4f5c; }
  .hs-rp-aru ul, .hs-rp-gaps, .hs-rp-method { margin: 0; padding-left: 5mm; display: grid; gap: 1mm; }
  .hs-rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm 4mm; }
  .hs-rp-grid .hs-rp-fb { margin: 0; font-size: 8.8pt; }
  .hs-rp-cols { column-count: 2; column-gap: 6mm; font-size: 8.8pt; }
  .hs-rp-sec { break-inside: avoid; margin-bottom: 2mm; }
  .hs-rp-sec h3 { margin-top: 0; }
  .hs-rp-sec p, .hs-rp-aru li { font-size: 8.8pt; line-height: 1.55; }
  .hs-rp-gaps b { margin-right: 1mm; }
}