/* ===========================
   Group wrapper（.eqp-pollと同じ見た目のカード）
=========================== */
.eqp-group {
    background: #ffffff;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 20px;
    margin: 24px 0;
}

.eqp-group-title {
    font-size: 16px;
    font-weight: 700;
    color: #1C2B4A;
    margin-bottom: 8px;
}

.eqp-group-description {
    font-size: 13px;
    color: #888888;
    margin-bottom: 16px;
}

.eqp-group-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #888888;
    margin-bottom: 16px;
}

.eqp-group-meta span {
    background: #F5F5F0;
    border-radius: 4px;
    padding: 4px 10px;
}

/* 回答済みで押せない状態でも、ボタンとしての見た目は保つ */
.eqp-group-start:disabled {
    opacity: 0.6;
    cursor: default;
}

.eqp-group-start:disabled:hover {
    background: #1C2B4A;
    color: #ffffff;
}

/* ===========================
   進捗・タイマー・戻る
=========================== */
.eqp-group-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #888888;
}

.eqp-group-timers {
    display: flex;
    gap: 12px;
}

.eqp-group-timer-question,
.eqp-group-timer-total {
    font-variant-numeric: tabular-nums;
    color: #1C2B4A;
    font-weight: 700;
}

/* 設問文：日本語訳+外国語文のように改行(\n)を含む場合、そのまま行送りとして表示する
   （.text()でセットするため、white-space指定が無いと折り返し時に単なる空白へ潰れてしまう） */
.eqp-question {
    white-space: pre-line;
}

/* ===========================
   設問下部の操作ボタン（戻る・次へ）
=========================== */
/* 自由入力(text)設問の回答欄 */
.eqp-text-answer-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    margin-top: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
}

.eqp-text-answer-input:focus {
    outline: none;
    border-color: #1C2B4A;
}

.eqp-group-buttons {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 16px;
}

.eqp-group-buttons .eqp-submit {
    flex: 2;
    margin-top: 0;
}

.eqp-group-back {
    flex: 1;
    background: #ffffff;
    color: #1C2B4A;
    border: 1px solid #1C2B4A;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 10px;
    transition: background 0.2s;
}

.eqp-group-back:hover {
    background: #F5F5F0;
}

/* ===========================
   完了・ブロック表示
=========================== */
.eqp-group-completed,
.eqp-group-blocked {
    font-size: 14px;
    color: #1C2B4A;
}

.eqp-group-duration {
    font-size: 13px;
    color: #888888;
}

.eqp-result-title {
    font-size: 16px;
    font-weight: 700;
    color: #1C2B4A;
    margin: 12px 0 4px;
}

.eqp-result-description {
    font-size: 14px;
    color: #1C2B4A;
    line-height: 1.6;
}

.eqp-result-link a {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #F5A623;
    text-decoration: none;
}

.eqp-result-link a:hover {
    text-decoration: underline;
}

/* display_mode=score・retry_score：得点/総合スコアを説明文より目立たせて表示 */
.eqp-result-score {
    font-size: 22px;
    font-weight: 700;
    color: #1C2B4A;
    margin: 4px 0 8px;
}

/* display_mode=retry_score：内訳（100点−ミス×減点）の補足 */
.eqp-result-score-detail {
    font-size: 13px;
    color: #666;
    margin: 0 0 8px;
}

/* ===========================
   1問ごとの正誤フィードバックパネル（正解=緑系／不正解=赤系）
=========================== */
.eqp-feedback-panel {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.eqp-feedback-panel.is-correct {
    background: #EAF6EC;
    border: 1px solid #2E7D32;
}

.eqp-feedback-panel.is-incorrect {
    background: #FBEAEA;
    border: 1px solid #C62828;
}

.eqp-feedback-question {
    font-size: 14px;
    color: #1C2B4A;
    line-height: 1.6;
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(28, 43, 74, 0.15);
}

.eqp-feedback-mark {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
}

.eqp-feedback-panel.is-correct .eqp-feedback-mark {
    color: #2E7D32;
}

.eqp-feedback-panel.is-incorrect .eqp-feedback-mark {
    color: #C62828;
}

.eqp-feedback-correct {
    font-size: 14px;
    font-weight: 700;
    color: #1C2B4A;
    margin: 0 0 6px;
}

.eqp-feedback-explanation {
    font-size: 14px;
    color: #1C2B4A;
    line-height: 1.6;
    margin: 0;
}

.eqp-feedback-wrap .eqp-feedback-next {
    display: block;
    width: 100%;
}

/* ===========================
   完了画面「全問の振り返り」
=========================== */
.eqp-review-block {
    margin-top: 20px;
    text-align: left;
}

.eqp-review-heading {
    font-size: 16px;
    font-weight: 700;
    color: #1C2B4A;
    margin: 0 0 12px;
}

.eqp-review-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eqp-review-item {
    padding: 12px 0;
    border-top: 1px solid #E5E5E0;
}

.eqp-review-item:first-child {
    border-top: none;
}

.eqp-review-q {
    font-size: 14px;
    font-weight: 700;
    color: #1C2B4A;
    white-space: pre-line;
    margin: 0 0 6px;
}

.eqp-review-a,
.eqp-review-correct {
    font-size: 13px;
    color: #1C2B4A;
    margin: 0 0 4px;
}

.eqp-review-explanation {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.eqp-review-attempts {
    font-size: 12px;
    color: #888;
    margin: 0 0 4px;
}

.eqp-review-hint-used {
    font-size: 12px;
    color: #B8860B;
    margin: 0 0 4px;
}

/* ヒント機能 */
.eqp-hint-wrap {
    margin: 8px 0 16px;
}

.eqp-hint-button {
    background: none;
    border: 1px solid #B8860B;
    color: #B8860B;
    border-radius: 6px;
    font-size: 13px;
    padding: 6px 12px;
    cursor: pointer;
}

.eqp-hint-button:hover {
    background: #FFF8E6;
}

.eqp-hint-button:disabled {
    opacity: 0.6;
    cursor: default;
}

.eqp-hint-text {
    background: #FFF8E6;
    border: 1px solid #F0D999;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    color: #6B5A1E;
    margin: 8px 0 0;
}

.eqp-review-mark.is-correct {
    color: #2E7D32;
    font-weight: 700;
}

.eqp-review-mark.is-incorrect {
    color: #C62828;
    font-weight: 700;
}

/* 結果タイプの表示方式が「結果ページ」のとき、その本文をその場に埋め込む
   （結果ページ側は見出しにh2を使う想定のため、ここでのサイズだけ軽く合わせる） */
.eqp-result-page-content {
    font-size: 14px;
    color: #1C2B4A;
    line-height: 1.7;
    margin-top: 8px;
}

.eqp-result-page-content h2 {
    font-size: 15px;
    font-weight: 700;
    color: #1C2B4A;
    border-left: 3px solid #F5A623;
    padding-left: 8px;
    margin: 16px 0 8px;
}

.eqp-result-page-content h2:first-child {
    margin-top: 0;
}

.eqp-result-page-content p {
    margin: 0 0 12px;
}

/* ===========================
   group/{slug}/result/{key}/ 単独ページ
   （display_mode=pageの結果タイプ限定で有効になる公開URL）
=========================== */
.eqp-group-result-eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: #888888;
    letter-spacing: 0.05em;
}

/* 結果ページのプレビュー画面であることを示すバッジ（管理者以外は到達しない想定だが念のため目立たせる） */
.eqp-preview-badge {
    display: inline-block;
    background: #FFF3D6;
    color: #A5690A;
    padding: 4px 10px;
    border-radius: 100px;
    letter-spacing: 0;
}

.eqp-group-result-title {
    margin-top: 4px;
}

.eqp-group-result-content {
    font-size: 15px;
    color: #1C2B4A;
    line-height: 1.8;
    margin-top: 16px;
}

.eqp-group-result-content h2 {
    font-size: 17px;
    font-weight: 700;
    color: #1C2B4A;
    border-left: 3px solid #F5A623;
    padding-left: 10px;
    margin: 24px 0 10px;
}

.eqp-group-result-content h2:first-child {
    margin-top: 0;
}

.eqp-group-result-content p {
    margin: 0 0 14px;
}

/* SCORE診断など、結果ページの本文を「人生／活躍の機会／直面する課題／盟友／天敵・宿敵」の
   5パートで書く場合の色分けカード表示（金・銀・銅・青・赤）。結果ページ側のHTMLで
   .eqp-score-topic .eqp-score-topic-lifeのようにクラスを付けて使う想定（必須ではない）。
   .eqp-group-result-content（単独ページ）／.eqp-result-page-content（診断結果へのその場埋め込み）
   の両方で使われるため、h2の基本装飾を打ち消せるよう文脈込みで詳細度を上げてセレクタを書く。 */
.eqp-group-result-content .eqp-score-topic,
.eqp-result-page-content .eqp-score-topic {
    border-radius: 10px;
    padding: 14px 18px;
    margin: 0 0 14px;
}

.eqp-group-result-content .eqp-score-topic h2,
.eqp-result-page-content .eqp-score-topic h2 {
    border-left: none;
    padding-left: 0;
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.08em;
}

.eqp-group-result-content p.eqp-score-subheading,
.eqp-result-page-content p.eqp-score-subheading {
    font-size: 17px;
    font-weight: 700;
    color: #1C2B4A;
    margin: 8px 0 10px;
}

.eqp-group-result-content p.eqp-score-example,
.eqp-result-page-content p.eqp-score-example {
    font-size: 13px;
    color: #888888;
    padding-left: 12px;
    border-left: 2px solid rgba(0, 0, 0, 0.08);
}

.eqp-score-topic-life     { background: linear-gradient(90deg, #F7EBCC, transparent 60%); }
.eqp-score-topic-life h2       { color: #A6791A; }
.eqp-score-topic-strength { background: linear-gradient(90deg, #E9EAEC, transparent 60%); }
.eqp-score-topic-strength h2   { color: #6E7580; }
.eqp-score-topic-challenge{ background: linear-gradient(90deg, #F1E0CF, transparent 60%); }
.eqp-score-topic-challenge h2  { color: #9C5A2E; }
.eqp-score-topic-ally     { background: linear-gradient(90deg, #DCE6EF, transparent 60%); }
.eqp-score-topic-ally h2       { color: #34618C; }
.eqp-score-topic-nemesis  { background: linear-gradient(90deg, #F6E4DE, transparent 60%); }
.eqp-score-topic-nemesis h2    { color: #8A3324; }

/* 相性診断ブロック専用の色（緑＝良い相性／オレンジ＝難しい相性）。
   同じページ内にある④盟友（青）・⑤天敵・宿敵（赤）とは意図的に別の色にして区別している */
.eqp-score-topic-compat-good { background: linear-gradient(90deg, #DCEEDF, transparent 60%); }
.eqp-score-topic-compat-good h2 { color: #3F7D4F; }
.eqp-score-topic-compat-bad  { background: linear-gradient(90deg, #FBE3C7, transparent 60%); }
.eqp-score-topic-compat-bad h2  { color: #C2650E; }

.eqp-score-compat-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.eqp-score-compat-list li a {
    display: inline-block;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 100px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #1C2B4A;
    text-decoration: none;
}

.eqp-score-compat-list li a:hover {
    text-decoration: underline;
}

.eqp-score-compat-tool-link {
    text-align: center;
    margin-top: 20px;
}

.eqp-score-compat-tool-link a {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #F5A623;
    text-decoration: none;
}

.eqp-score-compat-tool-link a:hover {
    text-decoration: underline;
}

.eqp-group-result-back {
    margin-top: 24px;
}

.eqp-group-result-back a {
    font-size: 13px;
    color: #888888;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===========================
   [eqp_result] 単体埋め込み
=========================== */
.eqp-result-block {
    background: #ffffff;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 20px;
    margin: 24px 0;
}

.eqp-result-block .eqp-result-title {
    margin-top: 0;
}

/* 「結果をみる」「診断を受ける」リンクは<a>タグで.eqp-submitを流用するため下線・左寄せを打ち消す */
.eqp-group-completed .eqp-submit,
.eqp-result-block .eqp-submit {
    text-decoration: none;
    text-align: center;
}