/* 他己分析シート（就活 shukatsu・恋活 koikatsu）。1つのシートに1色（--sh）。色の上の文字は --sh-on、白い地の上の色の文字は --sh-ink
   就活 #1f58a8（白い文字 6.95:1）／恋活 #e76f51（濃い文字 #15171c 5.80:1・白い地の文字は #b3432a 5.60:1）。値は <kind>-data.js の COLOR が正
   ボタンはどれも 44px 以上。320px の幅でも横にはみ出さない。印刷は A4 縦（@media print） */
.sh { --sh: #1f58a8; --sh-on: #fff; --sh-ink: #1f58a8; --sh-t: #e9f0fa; }
.sh-koikatsu { --sh: #e76f51; --sh-on: #15171c; --sh-ink: #b3432a; --sh-t: #fdeee9; }
.print-only { display: none; }

.sh .btn.sh-btn:not(.go) { background: var(--sh); color: var(--sh-on); } /* 入口の「シートをつくる」は .btn.go（朱か黒・app.css） */
.sh .eyebrow.sh-eyebrow, .sh .sh-q .eyebrow { color: var(--sh-ink); }
.sh .field input:focus { border-color: var(--sh); }
.sh .callout.sh-callout { border-color: var(--sh); }

/* 入口 */
.sh-intro { padding: 22px 0 6px; display: grid; gap: 14px; }
.sh-intro h1 { font-size: clamp(26px, 7.4vw, 36px); }
/* 背の低いスマホ（320×568 など・横向き）: 「シートをつくる」がなるべく上に来るように、見本のカードと間を少し詰める（app.css の .sn-intro と同じ条件） */
@media (max-height: 640px) and (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .sh-intro { padding-top: 14px; gap: 10px; }
  .sh-intro .rcard.sh-card .eb { margin-top: 8px; }
  .sh .sh-intro .rcard.sh-card .num { font-size: clamp(52px, 16vw, 76px); }
}
.sh-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sh-points li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 14px; color: var(--ink2); }
.sh-points b { display: block; font-family: var(--f-round); color: var(--ink); font-size: 15.5px; }
.sh-points b::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--sh); margin-right: 8px; vertical-align: 1px; }
.sh-steps li::before { background: var(--sh); color: var(--sh-on); }
.sh-mine-list { display: grid; gap: 8px; }
.sh-mine-list a { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; }
.sh-mine-list a b { font-family: var(--f-round); color: var(--sh-ink); white-space: nowrap; }
.sh-promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sh-promises li { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--sh); border-radius: 12px; padding: 10px 14px; font-size: 14.5px; color: var(--ink2); }
.sh-sees { background: var(--sh-t); border-radius: 16px; padding: 14px 16px; display: grid; gap: 6px; }
.sh-sees h2, .sh-sees h3 { font-size: 16px; }
.sh-sees ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: 14px; color: var(--ink2); }
.sh-report { margin-top: 18px; }
.sh-report a { color: var(--ink2); font-weight: 700; }

/* 問いの画面 */
.sh-q { padding: 18px 0 8px; display: grid; gap: 12px; }
.sh-qtext { font-size: clamp(20px, 5.6vw, 25px); }
.sh-progress { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; font-size: 13px; font-weight: 700; color: var(--muted); }
.sh-progress .bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.sh-progress .bar i { display: block; height: 100%; background: var(--sh); border-radius: 4px; transition: width .25s ease; }
.sh-back { margin-top: 6px; min-height: 44px; }
.sh-opts { display: grid; gap: 8px; }
.sh-opt { min-height: 48px; width: 100%; text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 10px 14px; font: inherit; font-size: 15.5px; font-weight: 700; line-height: 1.45; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s, color .12s, border-color .12s; }
.sh-opt.zero { font-weight: 500; color: var(--ink2); border-style: dashed; }
.sh-opt[aria-pressed="true"] { background: var(--sh); border-color: var(--sh); color: var(--sh-on); }
.sh-opt[disabled] { cursor: default; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 15px; line-height: 1.3; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sh-chip[aria-pressed="true"] { background: var(--sh); border-color: var(--sh); color: var(--sh-on); font-weight: 700; }
.sh-rank:empty { display: none; }
.sh-rank { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sh-on); color: var(--sh); font: 800 13px/1 var(--f-round); }
.sh-chips.full .sh-chip[aria-pressed="false"] { opacity: .45; }
.sh-many .sticky-bar .count b { font-size: 18px; }
.sh-group { display: grid; gap: 14px; }
.sh-scale { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px; display: grid; gap: 8px; }
.sh-scale-q { font-weight: 700; font-size: 15px; }
.sh-end { background: var(--sh-t); border-radius: 12px; padding: 10px 12px; font-size: 15px; font-weight: 700; line-height: 1.5; }
.sh-lvs { display: grid; gap: 6px; }
.sh-lv { min-height: 44px; width: 100%; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sh-lv[aria-pressed="true"] { background: var(--sh); border-color: var(--sh); color: var(--sh-on); }
.sh-lv.zero { margin-top: 4px; font-weight: 500; color: var(--ink2); border-style: dashed; }
.sh-one-scale { display: grid; gap: 8px; }
.sh-foot { display: grid; gap: 8px; }

/* 本人のシート: まだ3人そろっていない */
.sh-dots { display: flex; gap: 12px; justify-content: center; padding: 8px 0; }
.sh-dots i { width: 46px; height: 46px; border-radius: 50%; border: 2px dashed var(--line); background: #fff; display: grid; place-items: center; font-style: normal; font-family: var(--f-round); font-weight: 700; color: var(--muted); }
.sh-dots i.on { border: 0; background: var(--sh); color: var(--sh-on); }
.sh-notes { margin: 14px 0 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink2); }
.sh-closed { margin-top: 10px; font-size: 14px; font-weight: 700; background: var(--sh-t); border-radius: 12px; padding: 10px 12px; }
.sh-template { display: grid; gap: 6px; }
.sh-template h3 { font-size: 15px; }

/* コピーのボタンつきの文 */
.sh-copy { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; }
.sh-copy p { font-size: 15px; line-height: 1.7; white-space: pre-line; }
.sh-copy small { font-size: 12.5px; color: var(--muted); }
.sh-copy-btn { justify-self: start; min-height: 44px; border: 0; border-radius: 10px; background: var(--frame); color: #fff; font-weight: 700; font-size: 14px; padding: 0 18px; cursor: pointer; }

/* シートの中身 */
.sh-card-wrap { margin-top: 12px; display: grid; gap: 10px; }
.sh .rcard.sh-card { --tc: var(--sh); color: var(--sh-on); }
.sh .rcard.sh-card .num { font-size: clamp(64px, 20vw, 104px); }
.sh .rcard.sh-card .label { font-size: clamp(18px, 5vw, 22px); }
.sh-sec { margin-top: 30px; }
.sh-meta { font-size: 13.5px; color: var(--ink2); }
.sh-meta.muted { color: var(--muted); }
.sh-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sh-tag { display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.4; padding: 2px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink2); }
.sh-tag.on { background: var(--sh-t); border-color: transparent; color: var(--sh-ink); }
.sh-tag.soft { font-weight: 500; }
.sh-tag.warn { background: #fff4e0; border-color: #f1d6a6; color: #7a4b00; }
.sh-sec > .sh-tag, .sh-box > .sh-tag { justify-self: start; }
.sh-top3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sh-top3 li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.sh-no { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--sh); color: var(--sh-on); font: 800 17px/1 var(--f-round); }
.sh-top-name { font-family: var(--f-round); font-size: 18px; }
.sh-panes { display: grid; gap: 10px; }
.sh-pane { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; gap: 8px; }
.sh-pane h3 { font-size: 15.5px; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sh-pane h3 small { font-family: var(--f-body); font-weight: 500; font-size: 12px; color: var(--muted); }
.sh-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-pill { display: inline-flex; align-items: baseline; gap: 4px; font-size: 14px; line-height: 1.35; background: var(--sh-t); border-radius: 999px; padding: 5px 11px; }
.sh-pill b { font-size: 12px; color: var(--ink2); }
.sh-pill em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--sh-ink); }
.sh-h3 { font-size: 16px; margin-top: 8px; }
.sh-powers { display: grid; gap: 8px; }
.sh-power > b { font-family: var(--f-round); font-size: 14.5px; }
.sh-bar { display: grid; gap: 4px; }
.sh-bar-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.sh-bar-top b { font-weight: 700; }
.sh-bar-num { margin-left: auto; font-family: var(--f-round); font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-track { height: 10px; border-radius: 5px; background: #ecece7; overflow: hidden; }
.sh-track i { display: block; height: 100%; border-radius: 5px; background: var(--sh); }
.sh-power { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.sh-pbars { display: grid; gap: 4px; }
.sh-pbar { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 3.2em; gap: 8px; align-items: center; font-size: 13px; color: var(--ink2); }
.sh-pbar b { text-align: right; font-family: var(--f-round); color: var(--ink); font-variant-numeric: tabular-nums; }
.sh-pbar.self .sh-track i { background: color-mix(in srgb, var(--sh) 40%, #fff); }
.sh-box { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 6px; justify-items: start; }
.sh-big-line { font-size: 16px; line-height: 1.6; }
.sh-big-line b { font-family: var(--f-round); font-size: 18px; color: var(--sh-ink); }
.sh-legend { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); }
.sh-legend i, .sh-sc-track i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--sh); background: var(--sh); }
.sh-legend i.s, .sh-sc-track i.s { background: #fff; }
.sh-sc { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; gap: 6px; }
.sh-sc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sh-sc-head b { font-family: var(--f-round); }
.sh-sc-ends { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; color: var(--ink2); }
.sh-sc-ends span:last-child { text-align: right; }
.sh-sc-track { position: relative; height: 10px; margin: 8px 8px; border-radius: 5px; background: #ecece7; }
.sh-sc-track i { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; }
.sh-sc-track i.f { z-index: 1; }
.sh-sc-cap { font-size: 14px; font-weight: 700; color: var(--sh-ink); }
.sh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sh-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.sh-list li b { font-family: var(--f-round); }
.sh-es { display: grid; gap: 6px; }
.sh-es h3 { font-size: 15px; }
.sh-es h3 small { font-family: var(--f-body); font-weight: 500; font-size: 12px; color: var(--muted); margin-left: 4px; }
.sh-warn { background: #fff4e0; border-radius: 12px; padding: 10px 12px; color: #6b4a12; }
.sh-overlap { font-family: var(--f-round); font-size: 22px; font-weight: 700; }
.sh-overlap b { font-size: 56px; line-height: 1; color: var(--sh-ink); }

/* 持ち出す・設定・管理 */
.sh-export .btn { max-width: 100%; }
.sh-link { display: grid; gap: 6px; margin-top: 6px; }
.sh-link h3 { font-size: 15px; }
.sh-settings { gap: 12px; }
.sh-setrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.sh-setrow b { font-family: var(--f-round); }
.sh-setrow .btn { justify-self: start; width: auto; }
.sh-seg { justify-self: start; }
.sh-seg button { min-height: 44px; padding: 6px 18px; font-size: 14px; }
.sh-seg button[aria-pressed="true"] { background: var(--sh); color: var(--sh-on); }
.sh-other { display: grid; gap: 8px; }
.sh-other a { margin-left: 6px; font-weight: 700; }
.sh .linklike { min-height: 44px; }
.sh .share-url button { min-height: 44px; padding: 0 14px; }
.sh .seg button { min-height: 44px; }
.sh-disclaimer { margin-top: 18px; }

/* 友達: 送ったあと */
.sh-cta { margin-top: 26px; background: var(--sh-t); border-radius: 18px; padding: 16px; display: grid; gap: 10px; }
.sh-cta h2 { font-size: 19px; }
.sh-sub-link { font-size: 14px; font-weight: 700; color: var(--ink2); }
.sh-foot-note { margin-top: 14px; }
.sh-own { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px; }
.sh-own h2 { font-size: 17px; }
.sh-own dl { margin: 0; display: grid; grid-template-columns: minmax(6.5em, auto) minmax(0, 1fr); gap: 6px 12px; font-size: 14px; }
.sh-own dt { color: var(--muted); font-weight: 700; }
.sh-own dd { margin: 0; }
.sh-cmp { display: grid; gap: 8px; }
.sh-cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.sh-cmp-row.hit { border-color: var(--sh); }
.sh-cmp-row.skip { opacity: .7; }
.sh-cmp-q { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sh-cmp-q b { font-family: var(--f-round); font-size: 14.5px; }
.sh-cmp-a span { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.sh-cmp-a p { font-size: 13.5px; line-height: 1.5; }

@media (min-width: 560px) {
  .sh-panes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-power { grid-template-columns: 9em minmax(0, 1fr); align-items: center; }
  .sh-setrow { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .sh-setrow .btn { justify-self: end; }
}

/* 印刷・PDF（A4 縦。1枚目にシート、2枚目に言い回しの例など。ボタン・広告・ヘッダーは出さない）
   Chrome の PDF で漢字が化けない書体を先頭に（BIZ UDPゴシック） */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #fff !important; }
  body { font-family: "BIZ UDPGothic", "BIZ UDPゴシック", var(--f-body); font-size: 9.5pt; line-height: 1.45; }
  .sh h1, .sh h2, .sh h3 { font-family: "BIZ UDPGothic", "BIZ UDPゴシック", var(--f-body); }
  .site-header, .site-footer, .corner-bar, .no-print, .ad-wrap, .toast, .share-sheet, .sh-copy-btn, .danger-zone, .callout, .sh .btn, .linklike { display: none !important; }
  .print-only { display: block !important; }
  .wrap { max-width: none !important; padding: 0 !important; }
  .sh .res-head { display: none; }
  .sh-print-head { border-bottom: 1.5px solid #15171c; padding-bottom: 4px; margin-bottom: 6px; }
  .sh-print-head b { display: block; font-size: 15pt; }
  .sh-print-head span { font-size: 8.5pt; color: #4a4f5c; }
  .sh-card-wrap { margin-top: 6px; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 10px; break-inside: avoid; }
  .sh .rcard.sh-card { padding: 8px 12px; border-radius: 12px; box-shadow: none; }
  .sh .rcard.sh-card .eb { margin-top: 4px; font-size: 8.5pt; }
  .sh .rcard.sh-card .num { font-size: 30pt; }
  .sh .rcard.sh-card .label { font-size: 11pt; margin-top: 2px; }
  .sh .rcard .cmp { font-size: 9pt; }
  .band-text { font-size: 9pt; }
  .sh-page1 { columns: 2; column-gap: 7mm; margin-top: 6px; }
  .sh-page1 > .section, .sh-page2 > .section { margin-top: 0; margin-bottom: 8px; gap: 5px; break-inside: avoid; }
  .sh-page2 { break-before: page; }
  .sh .section > h2 { font-size: 11pt; border-left: 4px solid var(--sh); padding-left: 6px; }
  .sh-top3 { gap: 4px; }
  .sh-top3 li { padding: 5px 8px; gap: 8px; grid-template-columns: 22px 1fr; border-radius: 8px; }
  .sh-no { width: 22px; height: 22px; font-size: 10pt; }
  .sh-top-name { font-size: 10.5pt; }
  .sh-meta, .note, .sh-legend, .sh-sc-cap, .sh-bar-top { font-size: 8.5pt; }
  .sh-tag { font-size: 7.5pt; padding: 0 5px; }
  .sh-tags { gap: 3px; margin-top: 2px; }
  .sh-pane, .sh-sc, .sh-box, .sh-list li, .sh-copy { padding: 5px 8px; border-radius: 8px; }
  .sh-panes, .sh-powers, .sh-list, .sh-cmp { gap: 4px; }
  .sh-panes { grid-template-columns: minmax(0, 1fr) !important; }
  .sh-pane h3 small { font-size: 7.5pt; }
  .sh-power { grid-template-columns: 7.2em minmax(0, 1fr) !important; padding: 3px 8px; border-radius: 8px; gap: 2px 6px; align-items: center; }
  .sh-power > b { font-size: 8.5pt; }
  .sh-pbar { font-size: 7.5pt; grid-template-columns: 2.2em minmax(0, 1fr) 2.6em; gap: 4px; }
  .sh-pbars { gap: 1px; }
  .sh-pane h3, .sh-h3, .sh-es h3 { font-size: 9.5pt; }
  .sh-pill { font-size: 8.5pt; padding: 1px 7px; }
  .sh-track { height: 6px; }
  .sh-sc { grid-template-columns: 6.2em minmax(0, 1fr); column-gap: 6px; row-gap: 0; align-items: center; }
  .sh-sc-head { grid-row: 1 / span 2; font-size: 8.5pt; }
  .sh-sc-ends, .sh-sc-track { grid-column: 2; }
  .sh-sc-cap { grid-column: 1 / -1; }
  .sh-sc-ends { font-size: 8pt; }
  .sh-sc-track { height: 6px; margin: 5px 6px; }
  .sh-sc-track i { width: 12px; height: 12px; border-width: 2px; }
  .sh-legend i { width: 10px; height: 10px; border-width: 2px; }
  .sh-big-line { font-size: 9.5pt; }
  .sh-big-line b { font-size: 10.5pt; }
  .sh-overlap b { font-size: 24pt; }
  .sh-copy p { font-size: 9.5pt; line-height: 1.6; }
  .sh-es { gap: 3px; break-inside: avoid; }
  .sh-warn { padding: 5px 8px; }
  .sh-print-foot { margin-top: 8px; font-size: 8pt; color: #4a4f5c; border-top: 1px solid #e7e7e3; padding-top: 4px; }
  .sh-disclaimer, .sh-pnote { display: none; }
}