/* ============================================================
   n1a Big Five — 結果画面
   デザイン：Frame 104（結果本体）／ Group 106（「Big Fiveとは」）を踏襲
   すべて .bfr / .bfr-* 配下。
   ============================================================ */

.bfr{
  /* デザインから実測した配色 */
  --bfr-teal:     #25C1B6;   /* 指標の値・レーダーの「あなた」 */
  --bfr-peer:     #B9FEF9;   /* レーダーの「ユーザー平均」塗り */
  --bfr-grid:     #D9D9D9;   /* レーダーのグリッド */
  --bfr-panel:    #F9FAFC;   /* スコア表パネルの地色 */
  --bfr-ink:      #232323;   /* 数値・見出し */
  --bfr-sub:      #6E7180;   /* ラベル・補足 */
  --bfr-line:     #E7E9EE;
  --bfr-hi:       #FD7B7E;   /* 高（38〜） */
  --bfr-lo:       #4475D6;   /* 低（〜26） */

  /* 5因子のドット色（デザイン準拠）。文字色には使わない＝コントラストを落とさない */
  --bfr-E:#FF1317; --bfr-A:#46D27C; --bfr-C:#3D66E8; --bfr-N:#FF874A; --bfr-O:#7041EA;

  color:var(--bfr-ink);
  font-family:inherit;
}

/* ---------- ヘッダー ---------- */
.bfr__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:6px;
}
.bfr__titlerow{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.bfr__title{
  font-size:clamp(26px,4.4vw,38px); font-weight:400; letter-spacing:-.01em;
  line-height:1.2; color:var(--bfr-ink); margin:0;
}
.bfr__about{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--bfr-sub); font-weight:500;
  background:none; border:none; padding:0; cursor:pointer; font-family:inherit;
  text-underline-offset:3px;
}
.bfr__about:hover{ color:var(--bfr-teal); text-decoration:underline; }
.bfr__about i{
  width:16px; height:16px; border-radius:50%; flex-shrink:0;
  border:1px solid currentColor; font-style:normal; font-size:10px; font-weight:700;
  display:grid; place-items:center; line-height:1;
}
.bfr__date{ font-size:13px; color:var(--bfr-sub); white-space:nowrap; padding-top:6px; }
.bfr__note{ font-size:12.5px; color:var(--bfr-sub); line-height:1.8; margin:0 0 clamp(24px,3vw,38px); }

/* ---------- 3つの指標（ELEVATION / SCATTER / Shape） ---------- */
.bfr__stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2.4vw,30px); margin-bottom:clamp(26px,3.4vw,42px);
}
.bfr-stat{ display:flex; align-items:flex-start; gap:clamp(10px,1.6vw,20px); }
.bfr-stat__label{ flex:0 0 auto; }
.bfr-stat__key{ display:block; font-size:12.5px; font-weight:500; color:var(--bfr-ink); line-height:1.5; }
.bfr-stat__sub{ display:block; font-size:11.5px; color:var(--bfr-sub); line-height:1.5; white-space:nowrap; }
.bfr-stat__body{ min-width:0; display:flex; flex-direction:column; }
.bfr-stat__value{
  font-size:clamp(24px,3.4vw,34px); font-weight:700; color:var(--bfr-teal);
  line-height:1.15; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.bfr-stat__value--word{ font-size:clamp(20px,2.8vw,28px); letter-spacing:0; }
.bfr-stat__caption{ font-size:11.5px; color:var(--bfr-sub); margin-top:2px; }

/* ---------- 本体：レーダー ＋ スコア表 ---------- */
.bfr__main{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,3vw,44px); align-items:start;
}

.bfr-chart{ position:relative; }
.bfr-chart__legend{ display:flex; gap:16px; align-items:center; margin-bottom:4px; }
.bfr-chart__legend span{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--bfr-sub); white-space:nowrap; }
/* レーダー本体だけ。凡例のアイコン（入れ子のsvg）まで100%にしないよう直下に限定する */
.bfr-chart > svg{ width:100%; height:auto; display:block; }
.bfr-chart__legend svg{ width:15px; height:15px; flex:0 0 auto; display:block; }
.bfr-axis-label{ font-size:15px; font-weight:600; fill:var(--bfr-ink); }
.bfr-ring-label{ font-size:11px; fill:#B7BAC2; }

/* ---------- スコア表 ---------- */
.bfr-table{
  background:var(--bfr-panel); border-radius:16px;
  padding:clamp(16px,2.2vw,26px) clamp(14px,2vw,24px);
}
.bfr-table table{ width:100%; border-collapse:collapse; }
.bfr-table th{
  font-size:11.5px; font-weight:500; color:var(--bfr-sub);
  text-align:center; padding:0 4px 12px; white-space:nowrap;
}
.bfr-table th:first-child{ text-align:left; }
.bfr-table td{
  padding:16px 4px; border-top:1px solid var(--bfr-line);
  font-size:14px; text-align:center; color:var(--bfr-sub);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.bfr-table tr:first-child td{ border-top:none; }
.bfr-table td:first-child{
  text-align:left; font-size:13px; color:var(--bfr-ink); font-weight:500;
  display:flex; align-items:center; gap:8px;
}
.bfr-table .bfr-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.bfr-table .bfr-you{
  font-size:clamp(19px,2.2vw,24px); font-weight:600; color:var(--bfr-ink);
  letter-spacing:-.01em;
}
.bfr-table .bfr-you.is-hi{ color:var(--bfr-hi); font-weight:700; }
.bfr-table .bfr-you.is-lo{ color:var(--bfr-lo); font-weight:500; }

/* ---------- 「Big Fiveとは」モーダル ---------- */
.bfr-modal{ position:fixed; inset:0; z-index:300; display:none; }
.bfr-modal.is-open{ display:block; }
.bfr-modal__backdrop{ position:absolute; inset:0; background:rgba(24,26,34,.45); }
.bfr-modal__panel{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(860px, calc(100vw - 28px)); height:min(88vh, 1000px);
  background:#fff; border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(24,26,34,.3);
}
.bfr-modal__bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px 16px 26px; border-bottom:1px solid var(--bfr-line); flex-shrink:0;
}
.bfr-modal__bar h2{ font-size:19px; font-weight:600; margin:0; color:var(--bfr-ink); letter-spacing:0; }
.bfr-modal__close{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--bfr-line);
  background:#fff; color:var(--bfr-sub); font-size:15px; cursor:pointer; flex-shrink:0;
  display:grid; place-items:center; transition:background .2s, transform .3s;
}
.bfr-modal__close:hover{ background:#F2F4F7; transform:rotate(90deg); }
.bfr-modal__body{ overflow-y:auto; padding:26px 30px 40px; -webkit-overflow-scrolling:touch; }

.bfr-about__lead{ font-size:13.5px; line-height:2; color:#4A4D5A; margin:0 0 30px; padding-bottom:22px; border-bottom:1px solid var(--bfr-line); }
.bfr-about__sec{ margin-bottom:34px; }
.bfr-about__h{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.bfr-about__n{
  width:26px; height:26px; border-radius:7px; flex-shrink:0;
  background:var(--bfr-teal); color:#fff; font-size:13px; font-weight:600;
  display:grid; place-items:center;
}
.bfr-about__h h3{ font-size:20px; font-weight:500; margin:0; letter-spacing:-.01em; color:var(--bfr-ink); }
.bfr-about__p{ font-size:13px; line-height:2; color:#4A4D5A; margin:0 0 0 38px; }
.bfr-about__ul{ margin:0 0 0 38px; padding:0; list-style:none; display:grid; gap:9px; }
.bfr-about__ul li{ font-size:13px; line-height:1.9; color:#4A4D5A; padding-left:16px; position:relative; }
.bfr-about__ul li::before{ content:"・"; position:absolute; left:0; color:var(--bfr-sub); }

.bfr-about__factors{ margin-left:38px; display:grid; gap:24px; }
.bfr-about__factor{ padding-left:16px; border-left:2px solid var(--bfr-line); }
.bfr-about__fname{ display:flex; align-items:center; gap:9px; margin-bottom:6px; flex-wrap:wrap; }
.bfr-about__fname b{ font-size:17px; font-weight:500; letter-spacing:0; }
.bfr-about__fname em{ font-style:normal; font-size:12px; color:var(--bfr-sub); }
.bfr-about__fdot{ width:13px; height:13px; border-radius:50%; flex-shrink:0; }
.bfr-about__fdesc{ font-size:15px; font-weight:400; color:var(--bfr-ink); margin:0 0 8px; line-height:1.7; }
.bfr-about__ftend{ display:grid; gap:4px; }
.bfr-about__ftend div{ font-size:12px; line-height:1.8; color:#5A5D6A; display:flex; gap:8px; align-items:baseline; }
.bfr-about__ftend span:first-child{ flex:0 0 auto; color:var(--bfr-sub); white-space:nowrap; }
.bfr-about__ftend span:first-child::after{ content:"｜"; margin-left:6px; }
.bfr-about__src{ margin-top:36px; padding-top:20px; border-top:1px solid var(--bfr-line); }
.bfr-about__src b{ display:block; font-size:12px; font-weight:500; color:var(--bfr-sub); margin-bottom:10px; }
.bfr-about__src p{ font-size:11.5px; line-height:1.9; color:var(--bfr-sub); margin:0; }

/* ---------- 狭い画面 ---------- */
@media (max-width:860px){
  .bfr__main{ grid-template-columns:minmax(0,1fr); }
  .bfr__stats{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .bfr-stat{ align-items:baseline; justify-content:space-between; }
  .bfr-stat__sub{ white-space:normal; }
  .bfr-stat__body{ text-align:right; }
}
@media (max-width:560px){
  .bfr__head{ flex-direction:column; gap:4px; }
  .bfr__date{ padding-top:0; }
  .bfr-table{ padding:14px 12px; }
  .bfr-table th{ font-size:10.5px; }
  .bfr-table td{ padding:13px 3px; font-size:13px; }
  .bfr-table td:first-child{ font-size:12.5px; gap:6px; }
  .bfr-modal__panel{ width:100vw; height:100dvh; top:0; left:0; transform:none; border-radius:0; }
  .bfr-modal__body{ padding:20px 18px 40px; }
  .bfr-about__p, .bfr-about__ul, .bfr-about__factors{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){
  .bfr-modal__close:hover{ transform:none; }
}

/* ============================================================
   結果画面の下半分（デザイン：Group 108）
   personality パネル → POINT 01/02/03 ＋ KEYWORDS の2×2
   ============================================================ */

.bfr__rule{ border:none; border-top:1px solid var(--bfr-line); margin:clamp(30px,4.4vw,54px) 0 0; }

/* ---------- personality ---------- */
.bfr-persona{
  background:var(--bfr-peer); border-radius:16px;
  padding:clamp(22px,3vw,38px) clamp(20px,3vw,40px);
  margin:clamp(26px,3.6vw,44px) 0 0;
}
.bfr-persona__label{
  font-size:12px; font-weight:700; color:#3E6F6C; letter-spacing:.02em;
  display:block; margin-bottom:10px;
}
.bfr-persona__title{
  font-size:clamp(20px,2.9vw,29px); font-weight:700; line-height:1.5;
  letter-spacing:-.01em; color:var(--bfr-ink); margin:0 0 clamp(14px,1.8vw,20px);
}
.bfr-persona__body{ margin:0; display:grid; gap:6px; }
.bfr-persona__body p{ font-size:13px; line-height:1.85; color:#3B4A50; margin:0; }

/* ---------- POINT / KEYWORDS の2×2 ---------- */
.bfr__points{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,4vw,56px) clamp(28px,4.4vw,64px);
  margin-top:clamp(34px,4.6vw,58px);
}
/* 角のカギ括弧（左上・右下）はデザインの装飾。中身の幅は食わない */
.bfr-point{ position:relative; padding:clamp(20px,2.4vw,30px) clamp(16px,2vw,26px); }
.bfr-point::before,
.bfr-point::after{
  content:""; position:absolute; width:26px; height:26px; pointer-events:none;
  border-color:var(--bfr-teal); border-style:solid; border-width:0;
}
.bfr-point::before{ top:0; left:0; border-top-width:1.5px; border-left-width:1.5px; }
.bfr-point::after{ bottom:0; right:0; border-bottom-width:1.5px; border-right-width:1.5px; }
/* KEYWORDS はデザイン上カギ括弧を持たない */
.bfr-point--plain::before, .bfr-point--plain::after{ display:none; }

.bfr-point__eyebrow{
  display:block; font-size:10px; font-weight:600; letter-spacing:.12em;
  color:var(--bfr-sub); margin-bottom:2px;
}
/* 番号と見出しは同じ行に置き、見出しだけ折り返す（デザインのベースライン合わせ） */
.bfr-point__head{ display:flex; align-items:baseline; gap:14px; margin-bottom:clamp(14px,1.8vw,20px); }
.bfr-point__no{
  flex:0 0 auto;
  font-size:clamp(26px,3.2vw,34px); font-weight:400; color:var(--bfr-teal);
  line-height:1; letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.bfr-point__head h3{ flex:1 1 auto; min-width:0; font-size:clamp(14px,1.7vw,17px); font-weight:700; margin:0; letter-spacing:0; color:var(--bfr-ink); line-height:1.5; }

.bfr-point__list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(12px,1.5vw,17px); }
.bfr-point__list li{ display:flex; gap:12px; font-size:13px; line-height:1.8; color:#4A4D5A; }
.bfr-point__list li::before{
  content:""; flex:0 0 auto; width:7px; height:7px; border-radius:50%;
  background:var(--bfr-teal); margin-top:.55em;
}

/* ---------- KEYWORDS ---------- */
.bfr-keywords{ display:flex; flex-wrap:wrap; gap:10px; }
.bfr-keywords span{
  background:var(--bfr-teal); color:#fff; border-radius:999px;
  padding:8px 20px; font-size:12.5px; font-weight:600; line-height:1.6;
}
.bfr-point__pending{
  margin:clamp(20px,2.6vw,30px) 0 0; font-size:11px; color:var(--bfr-sub); text-align:center;
}

@media (max-width:860px){
  .bfr__points{ grid-template-columns:minmax(0,1fr); gap:26px; }
}
@media (max-width:560px){
  .bfr-point{ padding:18px 14px; }
  .bfr-point::before, .bfr-point::after{ width:18px; height:18px; }
  .bfr-persona{ padding:20px 18px; }
}

/* ============================================================
   印刷（この結果を保存する → ブラウザの「PDFに保存」）
   既定では背景色が印刷されないので、面と色を明示的に出す。
   ============================================================ */
@page{ size:A4; margin:12mm; }

@media print{
  .bfr{
    /* ティールの面・ピル・因子のドットを印刷にも出す */
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .bfr__head{ margin-bottom:4px; }
  .bfr__title{ font-size:26px; }
  .bfr__about{ display:none; }          /* 押せないボタンは印刷しない */
  .bfr-modal{ display:none !important; }

  /* 1カラムに落とす。ブロック単位でだけ改ページを避ける
     （表全体を avoid にすると入りきらず次ページへ飛んで大きな余白ができるので、
       表は行単位で avoid にして紙をまたげるようにする） */
  .bfr__main, .bfr__points{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .bfr-chart, .bfr-persona, .bfr-point{ break-inside:avoid; page-break-inside:avoid; }
  .bfr-table{ break-inside:auto; padding:8px 10px; }
  .bfr-table tr, .bfr-point__list li{ break-inside:avoid; page-break-inside:avoid; }
  .bfr-table td{ padding:10px 4px; }
  .bfr__stats{ margin-bottom:16px; gap:6px; }
  .bfr__rule{ margin-top:16px; }
  .bfr-persona{ margin-top:14px; padding:16px 18px; }
  .bfr__points{ margin-top:16px; }
  .bfr-point{ padding:14px 12px; }

  /* レーダーは高さで抑える（幅で決めると余白が増える） */
  .bfr-chart{ margin-bottom:4px; }
  .bfr-chart > svg{ max-width:330px; margin:0 auto; }
  .bfr-chart__legend{ justify-content:center; }

  /* 角のカギ括弧は薄いと飛ぶので少し濃く */
  .bfr-point::before, .bfr-point::after{ border-width:0; }
  .bfr-point::before{ border-top-width:1.5px; border-left-width:1.5px; }
  .bfr-point::after{ border-bottom-width:1.5px; border-right-width:1.5px; }
  .bfr-point--plain::before, .bfr-point--plain::after{ display:none; }

  .bfr-point__pending{ display:none; }  /* 仮であることの注記は成果物に残さない */
}

/* 所見の生成待ち */
.bfr-loading{
  margin:clamp(26px,3.6vw,44px) 0 0; padding:22px 0; text-align:center;
  font-size:13px; color:var(--bfr-sub);
}
@media print{ .bfr-loading{ display:none; } }