/*
 * PEACE NET Company Diagnosis — 土台スタイル
 *
 * カード・ボタン・選択肢・ステッパー・レーダー・結果表示など、
 * 診断ウィジェットの基本デザインをこのプラグイン単体で完結させるための
 * 同梱コピー。既存プラグイン（peace-net-diagnosis／集客課題診断）の
 * assets/diagnosis.css を土台に、5カテゴリ診断（[pnd_company_diagnosis]）で
 * 使わない予約フォーム専用パーツ（.rform-*・.rfield・.rradios 等）を除いた
 * サブセット。既存プラグインの有無に関わらずこのプラグイン単体で
 * 同じ見た目になる。
 *
 * 配色は実サイト（peace-web.net）のCSSカスタムプロパティ（--color-primary 等）
 * を var(--サイト側変数, フォールバック値) の形で参照している。これにより、
 * サイト側でブランドカラーを調整した場合、この診断ウィジェットの見た目にも
 * 自動的に反映される（サイト側変数が存在しない環境ではフォールバック値で
 * そのまま動作する）。
 *
 * カテゴリごとの配色（--keiei/--shukyaku/--gyomu/--hito/--jouhou）は
 * assets/company-diagnosis.css 側で追加定義する。
 */

.pnd-app{
  --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);

  --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: 60px 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; flex-wrap:wrap}
.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 .note{
  background:var(--paper); border:1px dashed var(--line); border-radius:10px;
  padding:14px 16px; margin:18px 0 4px;
}
.pnd-app .note p{font-size:12.5px; color:var(--muted); line-height:1.8}
.pnd-app .note a{color:var(--ink-soft); text-decoration:underline}

.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} }