/* Jev ミニアプリ(サンプル)の見た目。構成はデザイン担当の v5、配色は天秤AI */
/* 構成はデザイン担当の v5(デザインテンプレート_Jevミニアプリ_v5.html)、配色は天秤AI(白地 + 天秤ブルー #005BAC + 灰色)。
     数字だけ Barlow Condensed、文字は Noto Sans JP。 */
  :root {
    --brand: #005BAC; --brand-d: #004A8C; --brand-dd: #003A6E; --brand-s: #E8F1FA; --brand-s2: #F4F8FC;
    --bg: #FFFFFF; --bg2: #F4F4F5; --line: #E4E4E7; --line2: #D4D4D8;
    --text: #18181B; --t2: #52525B; --t3: #71717A; --t4: #A1A1AA;
    --ok: #1F7A4D; --ok-s: #E6F4EC; --ng: #B42318; --ng-s: #FDECEA; --amber: #8A5A0B; --amber-s: #FFF4E0;
    --num: "Barlow Condensed", "Noto Sans JP", system-ui, sans-serif;
    --r: 10px; --shadow: 0 1px 2px rgba(24,24,27,.06), 0 4px 16px rgba(24,24,27,.06); --shadow-l: 0 12px 40px rgba(24,24,27,.14);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; }
  body { background: var(--bg2); color: var(--text); font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 14px; line-height: 1.7; }
  body.lock { overflow: hidden; }
  button, input, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

  /* ヘッダー */
  .hdr { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  .hdr .wrap { display: flex; align-items: center; gap: 10px; height: 60px; }
  .logo { display: flex; align-items: center; } .logo img { height: 20px; width: auto; display: block; }
  .grow { flex: 1; }
  .meters { display: flex; align-items: stretch; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; }
  .meters .pill + .pill:not([hidden]) { border-left: 1px solid var(--line); }
  .pill { display: flex; align-items: baseline; gap: 6px; height: 38px; padding: 0 14px; font-size: 11.5px; color: var(--t3); white-space: nowrap; align-items: center; }
  .pill b { font-family: var(--num); font-weight: 600; font-size: 19px; color: var(--text); font-variant-numeric: tabular-nums; }
  /* 回転カウンター: 桁ごとに 0〜9 の帯を縦に動かす */
  .odo { display: inline-flex; height: 1.15em; line-height: 1.15em; overflow: hidden; }
  .od { display: inline-block; height: 1.15em; overflow: hidden; }
  .odc { display: flex; flex-direction: column; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
  .odc i { font-style: normal; height: 1.15em; text-align: center; }
  @media (prefers-reduced-motion: reduce) { .odc { transition: none; } }
  .credit b { color: var(--brand); } .credit.low b { color: var(--amber); } .credit.empty b { color: var(--ng); }
  .note { max-width: 1120px; margin: 12px auto 0; padding: 9px 14px; font-size: 12.5px; border-radius: 8px; background: var(--brand-s); color: var(--brand-dd); }
  .note.bad { background: var(--ng-s); color: var(--ng); }

  /* ボタン */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-weight: 700; font-size: 14px; line-height: 1.2;
    border: 1px solid var(--line2); background: var(--bg); padding: 10px 18px; border-radius: 8px; text-decoration: none; color: var(--text); white-space: nowrap; transition: background .15s, box-shadow .15s; }
  .btn:hover { background: var(--bg2); }
  .btn:disabled { opacity: .45; cursor: not-allowed; }
  .btn.pri { background: var(--brand); border-color: var(--brand); color: #fff; } .btn.pri:hover { background: var(--brand-d); }
  .btn.dark { background: var(--text); border-color: var(--text); color: #fff; } .btn.dark:hover { background: #27272A; }
  .btn.ghost { border-color: transparent; background: none; color: var(--brand); padding: 2px 6px; font-size: 12.5px; } .btn.ghost:hover { background: var(--brand-s); }
  .btn.lg { padding: 13px 24px; font-size: 15px; }

  /* トップ: 左に「Jevって何？」、右にまとまりごとのアプリカード(デザイン: Jev Mini App.html。配色は天秤AI) */
  .top { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 28px; padding-bottom: 8px; max-width: 1240px; }
  .side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 84px; }
  .about {  background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 2px rgba(24,24,27,.08); padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 10px; }
  .eyebrow { font-size: 11px; letter-spacing: .14em; color: var(--brand); font-weight: 700; }
  .about h1 { margin: -6px 0 0; font-size: 28px; font-weight: 900; line-height: 1.2; }
  .about .lead { margin: 0; font-size: 14px; line-height: 1.7; color: var(--t2); }
  .speedbig { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .speedbig b { font-family: var(--num); font-weight: 600; font-size: 38px; line-height: 1; color: var(--brand); } .speedbig b small { font-size: 24px; }
  .speedbig span { font-size: 12px; color: var(--t3); }
  .kinds { display: flex; flex-direction: column; gap: 6px; }
  .kind { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 1px 10px; align-items: start; text-align: left; padding: 7px 10px; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; }
  .kind svg { grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--kc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .kind b { font-size: 14px; font-weight: 700; } .kind small { grid-column: 2; font-size: 12px; line-height: 1.55; color: var(--t3); }
  .kind:hover { border-color: var(--kc); } .kind.on { background: var(--ks); border-color: var(--kc); box-shadow: 0 0 0 1px var(--kc) inset; } .kind.on b { color: var(--kc); }
  .kinds-hint { margin: -4px 0 0; font-size: 11px; color: var(--t4); }
  .list-side h2 { margin: 0 0 14px; font-size: 22px; font-weight: 900; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
  .list-side h2 small { font-size: 13px; font-weight: 500; color: var(--t3); }
  .grp { margin-bottom: 22px; }
  .grp h3 { margin: 0 0 10px; font-size: 14px; font-weight: 900; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
  .grp h3 small { font-size: 12px; font-weight: 500; color: var(--t3); }
  .apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - 32px) / 3)), 1fr)); gap: 16px; }
  .jevlink { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--t3); }
  .jevlink a { color: var(--brand); font-weight: 700; text-decoration: none; margin-left: 4px; } .jevlink a:hover { text-decoration: underline; }
  .acard { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 2px rgba(24,24,27,.08); display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px; min-height: 140px; cursor: pointer; transition: opacity .2s, box-shadow .15s, border-color .15s, transform .15s; }
  .acard:hover { border-color: #94BCE3; box-shadow: 0 3px 10px rgba(24,24,27,.14); transform: translateY(-1px); }
  .acard.hit { border-color: var(--kc); box-shadow: 0 0 0 2px var(--kc); }
  /* 自分で作る: 点線のカード */
  .mwrap { position: relative; display: flex; } .mwrap .acard { flex: 1; }
  .mx { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: var(--t4); font-size: 16px; line-height: 1; cursor: pointer; }
  .mx:hover { background: var(--ng-s); color: var(--ng); }
  .acard.make { align-items: center; justify-content: center; text-align: center; background: transparent; border: 1px dashed #94BCE3; box-shadow: none; gap: 8px; }
  .acard.make:hover { background: #fff; border-style: solid; border-color: var(--brand); }
  .acard.make .plus { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-s); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; }
  .acard.make .ad { flex: 0; }
  .tag.mine { background: var(--text); color: #fff; }
  /* 長文が入る欄は、パネルの空いている高さいっぱいまで広げる(スクロールを出さずに、できるだけ大きく) */
  .bform { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
  .field.grow { flex: 1; min-height: 88px; } .field.grow textarea { flex: 1; min-height: 64px; }
  .bform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .kpick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .kpick .kind { padding: 6px 8px; } .kpick .kind small { display: none; }
  .chk-ng { background: var(--ng-s); color: var(--ng); border-radius: 8px; padding: 10px 12px; font-size: 13px; } .chk-ng b { display: block; margin-bottom: 2px; }
  .chk-out .chk-ng, .chk-out .err { padding: 7px 12px; font-size: 12.5px; line-height: 1.5; } .chk-out .chk-ng b { display: inline; margin: 0 6px 0 0; }
  .chk-warn { background: var(--amber-s); color: var(--amber); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; }
  /* 自分で作ったアプリの中身(読むだけ)。作る画面と同じ欄の形で、追加・削除は出さない */
  .ro { display: flex; flex-direction: column; gap: 12px; }
  .ro [data-add], .ro .rm { display: none; }
  .ro .in { background: #fff; border-color: var(--line); cursor: default; } .ro .in:hover { border-color: var(--line); }
  .rotext { padding: 7px 11px; font-size: 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; white-space: pre-wrap; word-break: break-word; }
  .saved { font-size: 11.5px; font-weight: 700; color: var(--ok); background: var(--ok-s); border-radius: 999px; padding: 2px 10px; }
  .acard .at { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .acard .no { font-family: var(--num); font-weight: 600; font-size: 13px; letter-spacing: .08em; color: var(--t4); margin-right: 2px; }
  .acard .an { font-size: 16px; font-weight: 900; line-height: 1.35; } .acard .ad { flex: 1; font-size: 12.5px; line-height: 1.6; color: var(--t2); }
  .acard .go { align-self: flex-end; font-size: 13px; font-weight: 700; color: var(--brand); }
  .tags { display: flex; gap: 5px; flex-wrap: wrap; }
  .tag { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--bg2); color: var(--t2); white-space: nowrap; }
  /* 答え方の色。どの画面でも同じ色にする */
  .k-noul { --kc: #1F7A4D; --ks: #E3F3EA; } .k-choice { --kc: #005BAC; --ks: #E6F0FA; } .k-score { --kc: #A15C00; --ks: #FFF0D9; }
  .tag[class*="k-"] { background: var(--ks); color: var(--kc); display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 10px; }
  .tag[class*="k-"] svg { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  .recent { background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 2px rgba(24,24,27,.08); padding: 12px 14px 10px; }
  .recent .rh { display: flex; align-items: center; } .recent h2 { font-size: 13px; font-weight: 900; margin: 0; }
  .recent .rh .btn { margin-left: auto; color: var(--t3); font-size: 11.5px; }
  .hlist { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
  .hlist .none { font-size: 12px; color: var(--t3); padding: 4px 0; }
  .hc { text-align: left; background: var(--bg2); border: 1px solid transparent; border-radius: 6px; padding: 5px 9px; cursor: pointer; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .hc:hover { border-color: var(--brand); }
  .hc b { flex: 0 0 auto; font-size: 12.5px; font-weight: 900; white-space: nowrap; }
  .hc span { flex: 1 1 0; min-width: 0; font-size: 11px; color: var(--t3); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hnote { margin: 6px 0 0; font-size: 10.5px; color: var(--t4); display: flex; align-items: center; gap: 8px; } .hnote .btn { padding: 0 4px; font-size: 11px; }
  .hall { display: flex; flex-direction: column; gap: 6px; padding: 14px; max-width: 720px; margin: 0 auto; width: 100%; } .hall .hc { padding: 9px 12px; } .hall .hc small { flex: 0 0 auto; font-size: 11px; color: var(--t4); }
  .foot p { margin: 0 0 6px; } .foot b { color: var(--t2); }
  .foot { max-width: 1120px; margin: 24px auto 0; padding: 18px 24px 40px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--t3); }

  /* アプリを開いた時のダイアログ */
  .modal { position: fixed; inset: 0; z-index: 50; }
  .modal[hidden] { display: none; }
  .scrim { position: absolute; inset: 0; background: rgba(24,24,27,.5); animation: fadein .2s ease both; }
  @keyframes fadein { from { opacity: 0; } }
  .dialog { position: absolute; inset: 16px 24px; max-width: 1440px; margin: 0 auto; background: var(--bg2); border-radius: 14px; box-shadow: var(--shadow-l); display: flex; flex-direction: column; overflow: hidden; animation: pop .25s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.99); } }
  .mh { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .mi { width: 38px; height: 38px; border-radius: 9px; background: var(--brand-s); color: var(--brand); font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .mt { min-width: 0; flex: 1 1 240px; } .mt .mtt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mt b { font-size: 17px; font-weight: 900; } .mt p { margin: 0; font-size: 12.5px; color: var(--t2); }
  .mr { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .mr .btn { padding: 7px 12px; font-size: 12.5px; }
  .sharebtn .li-ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--bg2); cursor: pointer; font-size: 18px; color: var(--t2); flex-shrink: 0; } .x:hover { background: var(--line); }
  .mb { flex: 1; min-height: 0; overflow: auto; }

  .stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 12px; min-height: 100%; align-items: stretch; }
  .panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; min-width: 0; }
  .ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px 2px; font-size: 13px; font-weight: 900; }
  .ph .sub { font-size: 11.5px; font-weight: 500; color: var(--t3); }
  .pills { display: flex; gap: 6px; } .pills[hidden] { display: none; } .mp { font-size: 11.5px; font-weight: 700; background: var(--brand-s); color: var(--brand-dd); border-radius: 999px; padding: 2px 10px; }
  .mp b { font-family: var(--num); font-size: 15px; margin-right: 2px; }
  .pb { padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
  .pf { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--line); }
  .pf .warn { flex: 1; font-size: 11px; line-height: 1.5; color: var(--t3); }
  .try { padding: 10px 30px; font-size: 15px; flex: 0 0 auto; } .try { min-width: 120px; } .try.cool { opacity: .6; }

  .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .lab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 700; }
  .lab small { font-weight: 400; color: var(--t3); margin-left: 8px; font-size: 11.5px; }
  .in, textarea { width: 100%; min-height: 36px; padding: 7px 11px; font-size: 14px; color: var(--text); background: var(--bg2); border: 1px solid transparent; border-radius: 8px; }
  .in:hover, textarea:hover { border-color: var(--line2); } .in:focus, textarea:focus { outline: none; border-color: var(--brand); background: #fff; }
  textarea { line-height: 1.6; resize: vertical; padding: 6px 10px; }
  .rows { display: flex; flex-direction: column; gap: 4px; }
  .rows.cols2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .line { display: flex; gap: 6px; align-items: center; }
  .line .no { width: 18px; flex: 0 0 auto; font-family: var(--num); font-size: 13px; color: var(--brand); text-align: center; }
  .line .in { min-height: 30px; padding: 4px 10px; font-size: 13px; flex: 1; min-width: 0; }
  .line .in.nm { flex: 0 0 120px; font-weight: 700; }
  .rm { width: 26px; height: 26px; flex: 0 0 auto; border: 0; background: none; color: var(--t4); font-size: 16px; cursor: pointer; border-radius: 6px; } .rm:hover { background: var(--bg2); color: var(--t2); }
  .rm:disabled { opacity: .3; cursor: default; }

  /* 判定の表示 */
  .standby { margin: auto; text-align: center; display: flex; flex-direction: column; gap: 8px; max-width: 360px; padding: 20px 0; }
  .standby .k0 { font-size: 11.5px; font-weight: 700; color: var(--t3); }
  .standby .rt { font-size: 22px; font-weight: 900; color: var(--t4); line-height: 1.4; }
  .standby .kw { font-size: 12.5px; color: var(--t3); }
  .about2 { text-align: left; font-size: 12.5px; color: var(--t2); background: var(--bg2); border-radius: 8px; padding: 10px 14px; }
  .about2 p { margin: 0 0 4px; font-weight: 700; } .about2 ol { margin: 0; padding-left: 20px; line-height: 1.7; }
  .res { display: flex; flex-direction: column; animation: fade .4s ease both; }
  .speed { display: none; }
  .res > .k { background: var(--brand-s); border-radius: 10px 10px 0 0; padding: 12px 16px 0; font-size: 11.5px; font-weight: 700; color: var(--brand); }
  .res > .big { background: var(--brand-s); border-radius: 0 0 10px 10px; padding: 0 16px 14px; margin-bottom: 14px; font-size: 32px; font-weight: 900; line-height: 1.3; word-break: break-word; }
  .res > .big small { display: block; font-size: 13px; font-weight: 700; color: var(--t2); }
  .res > .big.ok { color: var(--ok); } .res > .big.ng { color: var(--ng); }
  /* 自動か人の確認か */
  .gate { display: flex; flex-direction: column; margin-bottom: 14px; } .gh { display: flex; flex-direction: column; }
  .gate .k { background: var(--brand-s); border-radius: 10px 10px 0 0; padding: 12px 16px 0; font-size: 11.5px; font-weight: 700; color: var(--brand); }
  .gate .big { background: var(--brand-s); padding: 0 16px 12px; font-size: 30px; font-weight: 900; line-height: 1.3; word-break: break-word; }
  .gate .big.ok { color: var(--ok); } .gate .big.amber { color: var(--amber); }
  .gate .big small { display: block; font-size: 12.5px; font-weight: 700; color: var(--t2); }
  .th { display: grid; grid-template-columns: auto minmax(0, 1fr) 44px; align-items: center; gap: 12px; background: var(--brand-s); border-radius: 0 0 10px 10px; padding: 8px 16px 12px; font-size: 12px; color: var(--t2); }
  .th input { width: 100%; accent-color: var(--brand); } .th b { font-family: var(--num); font-size: 18px; font-weight: 600; color: var(--text); text-align: right; }
  .bars { display: grid; gap: 10px; margin-bottom: 6px; }
  .bar { display: grid; grid-template-columns: minmax(0, 1fr) 48px; grid-template-rows: auto 6px; column-gap: 12px; font-size: 12.5px; color: var(--t2); }
  .bar > span:first-child { grid-column: 1; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar .meter { grid-column: 1; grid-row: 2; height: 6px; border-radius: 9px; background: var(--bg2); overflow: hidden; }
  .bar .meter i { display: block; height: 100%; border-radius: 9px; background: var(--line2); transform-origin: left; animation: grow .6s ease both; }
  .bar > span:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; text-align: right; font-family: var(--num); font-weight: 600; font-size: 19px; font-variant-numeric: tabular-nums; }
  .bar.on { color: var(--text); font-weight: 700; } .bar.on .meter i { background: var(--brand); }
  .bar > span:first-child small { margin-left: 8px; font-weight: 500; color: var(--t3); }
  @keyframes grow { from { transform: scaleX(0); } }
  /* 文章タイプ診断: 4つの軸。点が寄っている側の言葉を太くする */
  .note2 { margin: -6px 0 14px; font-size: 13px; color: var(--t2); }
  .axes { display: grid; gap: 12px; margin-bottom: 6px; }
  .axis { display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px; gap: 10px; align-items: center; font-size: 12px; color: var(--t3); }
  .axis span:last-child { text-align: right; } .axis span.on { color: var(--text); font-weight: 700; }
  .meter.two { position: relative; height: 6px; border-radius: 9px; background: linear-gradient(90deg, var(--bg2), var(--brand-s)); }
  .meter.two i { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px #fff; }
  .list { display: grid; margin-bottom: 6px; }
  .li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
  .li.low { background: var(--amber-s); }
  .li .tag.ok { background: var(--ok-s); color: var(--ok); } .li .tag.ng { background: var(--ng-s); color: var(--ng); }
  .li .tag.mid { background: var(--amber-s); color: var(--amber); } .li .tag.cat { background: var(--brand-s); color: var(--brand-dd); }
  .err { color: var(--ng); font-size: 13px; }

  .share { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .share .btn { padding: 9px 16px; font-size: 13px; }

  /* スマホ: 縦に並べ、判定を入力の下に出す。ダイアログは全画面 */
  @media (max-width: 860px) {
    .wrap { padding: 0 16px; }
    .dialog { inset: 0; border-radius: 0; }
    .stage { grid-template-columns: minmax(0, 1fr); }
      .hdr .wrap { height: auto; min-height: 56px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
    .hdr .wrap { flex-wrap: nowrap; } .logo img { height: 15px; }
    /* スマホ: 見出しの文字(「利用回数」「共有クレジット」)だけ隠し、数字は残す。数字の桁も span なので、直下の最初の span だけを隠す */
    .pill { padding: 0 8px; gap: 3px; height: 34px; } .pill > span:first-child { display: none; } .pill b { font-size: 16px; }
    /* 名前とどんな時の組は、スマホでは2段に(名前が切れないように) */
    .line:has(.nm) { display: grid; grid-template-columns: 18px minmax(0, 1fr) 28px; gap: 4px 6px; padding: 6px 0; border-bottom: 1px solid var(--line); }
    .line:has(.nm) .no { grid-row: 1 / 3; align-self: start; padding-top: 8px; }
    .line:has(.nm) .in.nm { grid-column: 2; } .line:has(.nm) .in:not(.nm) { grid-column: 2; }
    .line:has(.nm) .rm { grid-column: 3; grid-row: 1 / 3; }
    .lab small { display: block; margin: 2px 0 0; } .pf { flex-wrap: wrap; } .pf .try { flex: 1; } .pf .warn { flex-basis: 100%; }
    /* ダイアログの見出し: 閉じるボタンを右上に固定し、アイコンは省く */
    .mh { flex-wrap: nowrap; align-items: flex-start; padding: 12px 14px; gap: 10px; } .mi { display: none; }
    .mt { flex: 1 1 0; } .mt b { font-size: 16px; } .mr .btn { padding: 6px 10px; } .sharebtn span { display: none; }
    .stage { padding: 10px; gap: 10px; }
    /* スマホ: 説明パネルは上に小さく。3つの答え方は1行ずつにして、最初の画面でアプリカードに届くようにする */
    .top { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 16px; }
    /* スマホは「Jevって何？」→ アプリ → 最近の判定 の順(アプリを先に見せる) */
    .side { display: contents; } .about { order: 1; padding: 14px 14px 12px; gap: 8px; } .list-side { order: 2; } .recent { order: 3; }
    .eyebrow, .speedbig, .kinds-hint { display: none; }
    .about h1 { margin: 0; font-size: 22px; } .about .lead { font-size: 13px; }
    .kind { grid-template-columns: 20px minmax(0, 1fr); padding: 7px 9px; gap: 0 8px; }
    .kind svg { width: 18px; height: 18px; } .kind b { font-size: 13px; } .kind small { font-size: 11.5px; line-height: 1.45; }
    .list-side h2 { font-size: 18px; margin-bottom: 10px; } .grp h3 small { display: none; }
    .apps { grid-template-columns: minmax(0, 1fr); gap: 10px; } .acard { min-height: 0; } .kpick, .bform .two { grid-template-columns: 1fr; }
    .axis { grid-template-columns: 76px minmax(0, 1fr) 76px; }
        }

  /* 仕事タイプ診断: 質問(1問ずつタップ) */
  .quiz { display: flex; flex-direction: column; gap: 14px; flex: 1; }
  .qprog { display: flex; align-items: center; gap: 12px; font-family: var(--num); font-weight: 600; font-size: 16px; color: var(--t3); }
  .qbar { flex: 1; height: 6px; border-radius: 9px; background: var(--bg2); overflow: hidden; }
  .qbar i { display: block; height: 100%; background: var(--brand); border-radius: 9px; transition: width .3s ease; }
  .qask { font-size: 20px; font-weight: 900; line-height: 1.45; }
  .qask small { display: block; font-size: 12px; font-weight: 500; color: var(--t3); margin-top: 2px; }
  .qopts { display: flex; flex-direction: column; gap: 8px; }
  .qopt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; font-size: 14.5px; font-weight: 500; line-height: 1.5;
    background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
  .qopt:hover { border-color: var(--brand); background: var(--brand-s2); }
  .qopt:active { transform: scale(.99); }
  .qopt.on { border-color: var(--brand); background: var(--brand-s); font-weight: 700; }
  .qk { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--num); font-weight: 600; font-size: 14px; background: var(--bg2); color: var(--t3); }
  .qopt.on .qk, .qopt:hover .qk { background: var(--brand); color: #fff; }
  .qnav { display: flex; align-items: center; gap: 10px; } .qnav .qhint { flex: 1; }
  .qhint { font-size: 11.5px; color: var(--t4); }
  .qnote { min-height: 60px; }
  .qsum { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .qrow { display: flex; gap: 8px; align-items: baseline; text-align: left; padding: 5px 8px; font-size: 12px; line-height: 1.45; color: var(--t2); background: var(--bg2); border: 0; border-radius: 6px; cursor: pointer; }
  .qrow:hover { background: var(--brand-s); color: var(--text); }
  .qrow span { font-weight: 700; font-size: 11px; color: var(--brand); flex: 0 0 auto; }

  /* 仕事タイプ診断: 結果カード(色はタイプごと --tc) */
  .tcard { display: flex; flex-direction: column; gap: 12px; }
  .thead { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--tc) 9%, #fff); }
  .tmark { flex: 0 0 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--tc); color: #fff; font-size: 32px; font-weight: 900; line-height: 1; }
  .tmark.s { flex-basis: 26px; height: 26px; font-size: 14px; }
  .tname { min-width: 0; } .tname small { display: block; font-size: 11.5px; font-weight: 700; color: var(--tc); }
  .tname .big { display: block; font-size: 26px; font-weight: 900; line-height: 1.3; color: var(--text); }
  .tname p { margin: 2px 0 0; font-size: 13px; color: var(--t2); }
  .tcard .axes { display: flex; flex-direction: column; gap: 6px; }
  .tcard .meter.two { background: linear-gradient(90deg, var(--bg2), color-mix(in srgb, var(--tc) 18%, #fff)); } .tcard .meter.two i { background: var(--tc); }
  /* 解説: あるあるを横に3つ、その下に 強み・伸ばすヒント・活きる場面・組むと強いタイプ を2列×2段 */
  .tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tsec { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 13px; line-height: 1.6; }
  .tsec > b { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--tc); }
  .tsec > b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tc); }
  .tsec p { margin: 0; color: var(--t2); }
  .aru { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .aru span { padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--tc) 7%, #fff); color: var(--text); font-size: 12.5px; line-height: 1.5; }
  .tsec .tlink { align-self: flex-start; }
  .tlink { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; font-size: 12.5px; font-weight: 700; text-align: left; line-height: 1.35;
    background: #fff; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
  .tlink:hover { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 7%, #fff); }
  .tshare { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .tshare .btn:not(.ghost) { padding: 9px 14px; font-size: 13px; }
  .tshare .li-ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .xbtn { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #000; color: #fff; transition: transform .15s, background .15s; }
  .xbtn:hover { background: #27272A; transform: scale(1.06); } .xbtn svg { width: 17px; height: 17px; fill: currentColor; }
  .tdisc { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: var(--t4); }
  .tnote { margin: 0 0 10px; font-size: 12.5px; color: var(--brand); font-weight: 700; }
  .tback { align-self: flex-start; margin-bottom: 8px; }
  .tlisth { font-size: 13px; font-weight: 900; margin-bottom: 8px; }
  .tall { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .tall .tlink { border-radius: 10px; padding: 6px 10px 6px 6px; }
  @media (max-width: 860px) {
    .tgrid, .aru { grid-template-columns: minmax(0, 1fr); } .qsum, .tall { grid-template-columns: minmax(0, 1fr); }
    .typefirst .outp { order: -1; }
    .qnav .qhint { display: none; }
    .th { grid-template-columns: minmax(0, 1fr) 44px; row-gap: 2px; } .th span { grid-column: 1 / -1; }
    .qask { font-size: 18px; } .tmark { flex-basis: 52px; height: 52px; font-size: 26px; } .tname .big { font-size: 22px; }
  }
  /* 上限(10件)まで増やしても上の資料欄の高さが変わらないよう、10行分の場所を先に取っておく */
  .rows.reserve { gap: 2px; min-height: calc(10 * 28px + 9 * 2px); justify-content: flex-start; }
  .rows.reserve .line .in { min-height: 28px; padding: 2px 10px; }
  .field.grow textarea[data-k="doc"] { min-height: 150px; }
  .res > .k2 { font-size: 12px; font-weight: 900; margin: 2px 0 6px; } .res > .k2 small { margin-left: 8px; font-weight: 500; color: var(--t3); }

  /* 受信箱の仕分け: 入力は受信箱の形 */
  .field.grow > .rows.inbox { flex: 1; min-height: 160px; max-height: calc(100dvh - 440px); overflow: auto; }
  .field.grow:has(> .rows.inbox) { flex: 0 1 auto; }   /* 受信箱のすぐ下に条件の欄を続ける(間に空きを作らない) */   /* 25通でも、下の条件の欄まで含めてモーダルに収め、欄の中でスクロール */
  @media (max-width: 860px) { .field.grow > .rows.inbox { max-height: 60dvh; } }
  .rows.inbox { gap: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
  .line.mail { display: grid; grid-template-columns: 28px minmax(0, 1fr) 24px; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-bottom: 1px solid var(--line); }
  .line.mail:last-child { border-bottom: 0; }
  .mico svg { width: 20px; height: 20px; fill: none; stroke: var(--brand); stroke-width: 1.7; stroke-linejoin: round; display: block; }
  .mf { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .line.mail .in { min-height: 0; padding: 1px 6px; background: transparent; border-color: transparent; }
  .line.mail .in:hover { border-color: var(--line2); } .line.mail .in:focus { background: #fff; border-color: var(--brand); }
  .line.mail .in.nm { font-size: 13px; font-weight: 700; flex: none; }
  .line.mail .in:not(.nm) { font-size: 12px; color: var(--t3); }

  /* 受信箱の仕分け: 結果 */
  .bins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bin { border: 1px solid var(--line); border-radius: 10px; background: #fff; display: flex; flex-direction: column; min-width: 0; }
  .bh { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 10px; border-radius: 10px 10px 0 0; font-size: 13px; }
  .bh span { font-family: var(--num); font-weight: 600; font-size: 24px; line-height: 1; }
  .b-urgent .bh { background: var(--ng-s); color: var(--ng); } .b-later .bh { background: var(--brand-s); color: var(--brand); } .b-junk .bh { background: var(--bg2); color: var(--t3); }
  .bl { display: flex; flex-direction: column; gap: 4px; padding: 8px; max-height: 30vh; overflow: auto; }
  .mc { font-size: 11.5px; line-height: 1.4; padding: 5px 8px; border-radius: 6px; background: var(--bg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mc small { margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--amber); }
  @media (max-width: 860px) { .bins { grid-template-columns: minmax(0, 1fr); } }
  /* 一括仕分けの結果: 件数のタイル → 仕分け先ごとのかたまり */
  .gtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 16px; }
  .gt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
  .gt b { font-family: var(--num); font-weight: 600; font-size: 28px; line-height: 1; color: var(--brand); } .gt b small { font-family: inherit; font-size: 12px; margin-left: 2px; color: var(--t3); }
  .gt span { font-size: 12px; font-weight: 700; color: var(--t2); } .gt.zero b { color: var(--t4); }
  .gdetail { display: flex; flex-direction: column; gap: 14px; max-height: 42vh; overflow: auto; padding-right: 4px; }
  .gg h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 13px; }
  .gg h4 span { font-size: 12px; font-weight: 500; color: var(--t3); }
  .gg ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
  .gg li { padding: 6px 10px; border-radius: 6px; background: var(--bg2); font-size: 12.5px; line-height: 1.5; }
  .gg li small { margin-left: 8px; font-size: 10.5px; font-weight: 700; color: var(--amber); }