/*
 * PEACE NET Diagnosis — スタイル
 *
 * 試作 peacenet_diagnosis_prototype.html の <style> ブロックをベースに、
 * 実サイト（peace-web.net）の配色・書体・角丸（css/base.css 等の
 * デザイントークン）に合わせて配色・形状のみを調整したもの。
 * 構造・レイアウトの骨格・文言・診断ロジックは変えていない。
 *
 * 配色は極力サイト側のCSSカスタムプロパティ（--color-primary 等）を
 * var(--サイト側変数, フォールバック値) の形で参照している。これにより、
 * 実サイトのテーマ側でブランドカラーを調整した場合、このプラグインの
 * 見た目にも自動的に反映される（サイト側変数が存在しない環境では
 * フォールバック値でそのまま動作する）。
 *
 * ファイル末尾に、試作にはなかった予約フォーム（[pnd_reservation]）用の
 * 最小限のスタイルを追加している（既存カードデザインの流用）。
 */

.pnd-app{
  /* サイトの --color-primary-dark / --color-primary を踏襲 */
  --ink:var(--color-primary-dark, #1B2E3F);
  --ink-soft:var(--color-primary, #2C5273);
  --paper:var(--color-bg, #F7F8FA);
  --card:var(--color-bg-white, #FFFFFF);
  --line:var(--color-accent-3, #DCE6EE);
  --muted:var(--color-text-sub, #5C616A);
  --muted-2:var(--color-accent-text, #8FA9BF);
  --tint:var(--color-accent-2, #EEF2F6);
  --required:#E8574A;

  /* レーダー・3層スコアの配色。サイトのパレットに実在する色のみ使用
     （表面=ブランド紺、成果=導線バーのグレージュ、土台=淡青） */
  --surface:var(--color-primary, #2C5273);
  --result:var(--color-taupe, #8A8577);
  --foundation:var(--color-accent-text, #8FA9BF);

  --shadow:0 1px 2px rgba(27,46,63,.05), 0 8px 30px rgba(27,46,63,.08);
  --serif:var(--font-heading, "Noto Serif JP", serif);
  --sans:var(--font-body, "Noto Sans JP", sans-serif);

  font-family:var(--sans); color:var(--ink); background:var(--paper);
  line-height:1.75; font-weight:400; letter-spacing:.01em;
  display:flex; justify-content:center; padding:24px 16px 64px;
}
.pnd-app, .pnd-app *{box-sizing:border-box;margin:0;padding:0}
.pnd-app .wrap{width:100%; max-width:1200px; margin:3rem auto}
.pnd-app .eyebrow{font-size:12.5px; letter-spacing:.22em; color:var(--muted); font-weight:500}
.pnd-app .brand{font-size:11.5px; letter-spacing:.16em; color:var(--muted-2); margin-bottom:26px}
.pnd-app h1{font-family:var(--serif); font-weight:700; font-size:27px; line-height:1.45; margin:10px 0 16px; letter-spacing:.01em; color:var(--ink)}
.pnd-app h2{font-family:var(--serif); font-weight:700; font-size:21px; line-height:1.5; letter-spacing:.01em; color:var(--ink)}
.pnd-app p{font-size:15px; color:var(--color-text, #454B52)}
.pnd-app .lead{color:var(--muted); font-size:15px; margin-bottom:8px}
.pnd-app .card{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow)}

/* intro */
.pnd-app .intro{padding:34px 30px 30px}
.pnd-app .intro .meta{display:flex; gap:18px; color:var(--muted); font-size:13px; margin:20px 0 26px; padding-top:18px; border-top:1px solid var(--line)}
.pnd-app .intro .meta b{color:var(--ink); font-weight:500}
.pnd-app .btn{
  font-family:var(--sans); font-size:15.5px; font-weight:700; cursor:pointer;
  border:none; border-radius:var(--radius-pill, 26px); padding:15px 26px; transition:transform .15s ease, background .2s ease;
  background:var(--ink-soft); color:#fff; width:100%;
}
.pnd-app .btn:hover{background:var(--ink)}
.pnd-app .btn:active{transform:translateY(1px)}
.pnd-app .btn:focus-visible{outline:3px solid rgba(44,82,115,.4); outline-offset:2px}

/* question */
.pnd-app .qcard{padding:26px 26px 24px}
.pnd-app .topline{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px}
.pnd-app .count{font-size:12.5px; color:var(--muted); letter-spacing:.06em}
.pnd-app .rail{display:flex; gap:6px; align-items:center}
.pnd-app .seg{display:flex; flex-direction:column; align-items:center; gap:5px}
.pnd-app .seg .bar{width:34px; height:4px; border-radius:2px; background:var(--line)}
.pnd-app .seg .lb{font-size:10.5px; color:var(--muted-2); letter-spacing:.04em}
.pnd-app .seg.on .bar{background:var(--seg-color,var(--ink))}
.pnd-app .seg.on .lb{color:var(--ink); font-weight:500}
.pnd-app .progress{height:3px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:24px}
.pnd-app .progress > i{display:block; height:100%; background:var(--ink-soft); width:0; transition:width .35s ease}
.pnd-app .qtext{font-family:var(--serif); font-weight:600; font-size:19.5px; line-height:1.65; min-height:96px; margin-bottom:22px; color:var(--ink)}
.pnd-app .opts{display:flex; flex-direction:column; gap:10px}
.pnd-app .opt{
  font-family:var(--sans); text-align:left; font-size:15px; color:var(--ink);
  background:var(--tint); border:1px solid var(--line); border-radius:10px;
  padding:15px 18px; cursor:pointer; transition:border-color .15s, background .15s, transform .12s;
  display:flex; align-items:center; gap:13px;
}
.pnd-app .opt .dot{width:15px; height:15px; border-radius:50%; border:1.5px solid var(--muted-2); flex:0 0 auto}
.pnd-app .opt:hover{border-color:var(--ink-soft); background:var(--card)}
.pnd-app .opt:active{transform:translateY(1px)}
.pnd-app .opt:focus-visible{outline:3px solid rgba(44,82,115,.35); outline-offset:1px}
.pnd-app .opt.sel{border-color:var(--ink-soft); background:var(--card)}
.pnd-app .opt.sel .dot{border-color:var(--ink-soft); background:var(--ink-soft); box-shadow:inset 0 0 0 3px #fff}
.pnd-app .back{margin-top:20px; background:none; border:none; color:var(--muted); font-size:13.5px; cursor:pointer; font-family:var(--sans); padding:4px 0}
.pnd-app .back:hover{color:var(--ink)}
.pnd-app .back:disabled{opacity:0; pointer-events:none}

/* result */
.pnd-app .rcard{padding:30px 28px 28px}
.pnd-app .r-eyebrow{font-size:12px; letter-spacing:.2em; color:var(--muted); font-weight:500; margin-bottom:8px}
.pnd-app .radar-wrap{display:flex; justify-content:center; margin:14px 0 8px}
.pnd-app .scores{display:flex; justify-content:center; gap:22px; margin:6px 0 24px; flex-wrap:wrap}
.pnd-app .score{display:flex; flex-direction:column; align-items:center; gap:2px}
.pnd-app .score .v{font-family:var(--serif); font-size:20px; font-weight:700}
.pnd-app .score .n{font-size:12px; color:var(--muted)}
.pnd-app .finding{background:var(--tint); border:1px solid var(--line); border-left:3px solid var(--ink-soft); border-radius:0 12px 12px 0; padding:20px 22px; margin:6px 0 22px}
.pnd-app .finding h2{margin-bottom:10px}
.pnd-app .finding p{color:var(--color-text, #454B52); font-size:14.5px}
.pnd-app .hyp{font-size:12.5px; color:var(--muted); margin-top:12px}
.pnd-app .cta{background:var(--ink); color:#fff; border-radius:16px; padding:24px 24px}
.pnd-app .cta h2{color:#fff; font-size:18px; margin-bottom:10px; font-family:var(--serif)}
.pnd-app .cta p{color:var(--color-text-on-dark, #DCE6EE); font-size:14px; margin-bottom:18px}
.pnd-app .cta .btn{background:#fff; color:var(--ink)}
.pnd-app .cta .btn:hover{background:#fff; opacity:.9}
.pnd-app .restart{display:block; margin:20px auto 0; background:none; border:none; color:var(--muted); font-size:13px; cursor:pointer; font-family:var(--sans)}
.pnd-app .restart:hover{color:var(--ink)}

.pnd-app .hidden{display:none}
@media (max-width:480px){
  .pnd-app .intro,.pnd-app .qcard,.pnd-app .rcard{padding-left:20px; padding-right:20px}
  .pnd-app h1{font-size:23px} .pnd-app .qtext{font-size:18px; min-height:84px}
  .pnd-app .seg .bar{width:26px}
}
@media (prefers-reduced-motion:reduce){ .pnd-app *{transition:none !important} }

/* ============================================================
 * 予約フォーム（[pnd_reservation]）― 試作にはない新規パーツ。
 * 上記の card / btn 系デザイン、および実サイトの
 * .contact-form 系フォームパーツの配色・形状を踏襲する。
 * ============================================================ */
.pnd-app .rform-card{padding:32px 28px}
.pnd-app .rform h2{margin-bottom:8px}
.pnd-app .rform > p.lead{margin-bottom:24px}
.pnd-app .rfield{margin-bottom:18px}
.pnd-app .rfield label{display:block; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:8px}
.pnd-app .rfield .req{color:var(--required); margin-left:2px; font-weight:700}
.pnd-app .rfield .hint{display:block; font-size:12px; color:var(--muted); margin-top:4px}
.pnd-app .rfield input[type="text"],
.pnd-app .rfield input[type="email"],
.pnd-app .rfield input[type="tel"],
.pnd-app .rfield input[type="datetime-local"],
.pnd-app .rfield textarea{
  width:100%; font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; transition:border-color .15s, background .15s;
}
.pnd-app .rfield textarea{min-height:96px; resize:vertical}
.pnd-app .rfield input:focus,
.pnd-app .rfield textarea:focus{outline:none; border-color:var(--ink-soft)}
.pnd-app .rradios{display:flex; flex-wrap:wrap; gap:14px}
.pnd-app .rradios label{display:flex; align-items:center; gap:6px; font-size:14px; font-weight:400; margin-bottom:0}
.pnd-app .rdatetimes{display:flex; flex-direction:column; gap:12px}
.pnd-app .rcheck{display:flex; align-items:flex-start; gap:10px}
.pnd-app .rcheck input{margin-top:3px}
.pnd-app .rcheck label{font-size:13.5px; font-weight:400; margin-bottom:0}
.pnd-app .rcheck a{color:var(--ink-soft); text-decoration:underline}
.pnd-app .rform input[type="checkbox"],
.pnd-app .rform input[type="radio"]{accent-color:var(--ink-soft)}
.pnd-app .rform .btn{margin-top:8px}
.pnd-app .rhoneypot{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}
.pnd-app .rmsg{border-radius:12px; padding:18px 20px; margin-bottom:20px; font-size:14.5px}
.pnd-app .rmsg-success{background:var(--color-accent-1, #E4ECF3); border:1px solid var(--line); color:var(--ink)}
.pnd-app .rmsg-error{background:#FDECEA; border:1px solid rgba(232,87,74,.35); color:#B23A2E}