/* =====================================================================
 * career-match-gate.css
 * career-match 全ツール共有の LINE ゲート CSS（spi-mini 準拠・スコープなし）
 * 対象: [career_match] [diagnosis_tree] [egogram] [strength_finder] [johari_window]
 * ===================================================================== */

.spi-mini-gate { display: flex; justify-content: center; padding: 1em 0 .5em; }
.spi-mini-gate[hidden] { display: none; }

.spi-mini-gate-card {
    width: 100%;
    max-width: 430px;
    background: #fbfffe url('../gate-bg-celebrate.svg?v=4') no-repeat top center;
    background-size: 100% auto;
    border: 1px solid #b6e9e4;
    border-radius: 20px;
    padding: 32px 26px 34px;
    text-align: center;
    box-shadow: 0 10px 28px rgba(38, 166, 154, .12);
    box-sizing: border-box;
    line-height: 1.75;
}

/* ねぎらい */
.spi-mini-gate .spi-mini-gate-eyebrow {
    margin: 0 0 1.5em;
    font-size: 20px;
    font-weight: 700;
    color: #18afa3;
    letter-spacing: .02em;
}

/* 見出し */
.spi-mini-gate-title { margin: 0; padding: 0; border: 0; background: none; text-align: center; }
.spi-mini-gate-title::before,
.spi-mini-gate-title::after { content: none; display: none; }
.spi-mini-gate-title br { display: inline; }
.spi-mini-gate-title-main {
    display: block;
    color: #12a99d;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: .01em;
    text-shadow: 0 3px 0 rgba(0,0,0,.04);
    word-break: break-all;
    overflow-wrap: anywhere;
}
.spi-mini-gate-title-sub {
    display: block;
    margin-top: 16px;
    color: #818181;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    text-shadow: 0 3px 0 rgba(0,0,0,.04);
}

/* 無料・登録完了コピー */
.spi-mini-gate .spi-mini-gate-minute { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: #12a99d; line-height: 20px; }

/* LINE CTA */
.spi-mini-gate-line {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 340px;
    min-height: 52px;
    margin: 0 auto;
    padding: 10px 16px;
    background: #06c755;
    color: #fff !important;
    border-radius: 24px;
    text-decoration: none !important;
    box-shadow: 0 12px 22px rgba(3,140,56,.38), 0 5px 0 rgba(3,102,41,.55);
    box-sizing: border-box;
    transition: transform .08s ease;
}
.spi-mini-gate-line:hover { color: #fff; }
.spi-mini-gate-line:active { transform: translateY(2px); }
.spi-mini-gate-line-primary { min-height: 60px; }

/* バッジ（LINE アイコン） */
.spi-mini-gate-badge {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none !important;
    flex-shrink: 0;
    box-shadow: none !important;
}
.spi-mini-gate-badge-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}
.spi-mini-gate-line img.spi-line-mark {
    display: block;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    object-fit: contain;
    flex: none;
}
.spi-mini-gate-line-label { position: absolute; left: 0; right: 0; color: #fff !important; font-weight: 700; font-size: 14px; text-align: center; line-height: 1.5; }

/* 下向き三角矢印 */
.spi-mini-gate-arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 13px solid #12a99d;
    margin: 10px auto 0;
}

/* キーワード入力フォーム */
.spi-mini-gate-form { margin: 18px 0 0; }
.spi-mini-gate-field {
    position: relative;
    width: 100%;
    max-width: 291px;
    height: 60px;
    margin: 0 auto;
    background: #eff5f7;
    border: 2px solid #b6e9e4;
    border-radius: 22px;
    box-sizing: border-box;
}
.spi-mini-gate-field:focus-within { border-color: #12a99c; }
.spi-mini-gate-input.is-error { color: #e04e4e; }
.spi-mini-gate-field:has(.spi-mini-gate-input.is-error) { border-color: #e04e4e; }
.spi-mini-gate-lock { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; }
.spi-mini-gate-lock-body { position: absolute; left: 2px; top: 9px; width: 16px; height: 11px; background: #949aa0; border-radius: 2px; }
.spi-mini-gate-lock-shackle { position: absolute; left: 5px; top: 2px; width: 10px; height: 10px; border: 2px solid #949aa0; border-bottom: 0; border-radius: 5px 5px 0 0; }

/* 詳細度を上げてテーマの input 上書きに勝つ */
.jo-app .spi-mini-gate-field .spi-mini-gate-input,
.eg-app .spi-mini-gate-field .spi-mini-gate-input,
.sf-app .spi-mini-gate-field .spi-mini-gate-input,
.dt-app .spi-mini-gate-field .spi-mini-gate-input,
#cm-gate-wrap .spi-mini-gate-field .spi-mini-gate-input {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    padding: 0 46px 0 48px;
    margin: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
}
.spi-mini-gate-input::placeholder { color: #949aa0; font-weight: 500; }

.spi-mini-gate-go {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    background: #12a99d;
    color: #fff;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, transform .08s ease;
}
.spi-mini-gate-go:hover { background: #0e8e84; }
.spi-mini-gate-go:active { transform: translateY(-50%) scale(.94); }
.spi-mini-gate .spi-mini-gate-error { margin: 8px 0 0; color: #e04e4e; font-size: 13px; }
.spi-mini-gate-error[hidden] { display: none; }

/* 注記 */
.spi-mini-gate-note { display: block !important; margin: 10px 0 20px !important; font-size: 11px; font-weight: 700; color: #ff7a00; }

/* 解説ティーザーカード：ぼかしプレビュー */
.spi-mini-gate-blur-card {
    position: relative;
    background: #fff;
    border: 1.5px solid #b6e9e4;
    border-radius: 14px;
    margin: 20px auto 4px;
    max-width: 330px;
    overflow: hidden;
    text-align: left;
}
.spi-mini-gate-blur-accent {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #12a99c;
    border-radius: 14px 0 0 14px;
    display: block;
}
.spi-mini-gate-blur-body {
    padding: 13px 14px 14px 20px;
    filter: blur(3.5px);
    pointer-events: none;
    user-select: none;
}
.spi-mini-gate-blur-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.spi-mini-gate-blur-qno { display: inline-block; background: #e9f1f1; border-radius: 4px; padding: 1px 8px; font-size: 11px; font-weight: 700; color: #484a4d; }
.spi-mini-gate-blur-verdict { font-size: 12px; font-weight: 700; color: #12a99c; }
.spi-mini-gate .spi-mini-gate-blur-text { margin: 0 0 10px; font-size: 12px; line-height: 1.7; color: #222831; }
.spi-mini-gate-blur-sep { height: 1px; background: #edf3f3; margin: 0 0 10px; }
.spi-mini-gate-blur-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; margin: 0; font-size: 11px; }
.spi-mini-gate-blur-dt { color: #949aa0; font-weight: 700; }
.spi-mini-gate-blur-dd { color: #222831; }
.spi-mini-gate-blur-dd-ok { color: #12a99c; font-weight: 700; }
.spi-mini-gate-blur-overlay { position: absolute; inset: 10px 8px; background: rgba(255,255,255,.62); border-radius: 10px; }
.spi-mini-gate-blur-pill {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid #12a99c;
    border-radius: 999px;
    padding: 8px 14px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    color: #12a99c !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(18,169,156,.18);
    cursor: pointer;
    transition: box-shadow .15s ease, transform .1s ease;
}
.spi-mini-gate-blur-pill:hover { box-shadow: 0 4px 12px rgba(18,169,156,.3); transform: translate(-50%, -52%); color: #12a99c !important; }
.spi-mini-gate-blur-lock-icon { flex-shrink: 0; display: block; }

/* 社会的証明 */
.spi-mini-gate-proof { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px 0 16px; }
.spi-mini-gate-proof svg { width: 32px; height: 32px; display: block; flex-shrink: 0; }
.spi-mini-gate-proof-num { color: #f56e05; font-weight: 900; font-size: 20px; letter-spacing: .6px; }
.spi-mini-gate-proof-suf { color: #818181; font-weight: 700; font-size: 14px; }

/* セクション見出し */
.spi-mini-gate .spi-mini-gate-section-title { margin: 24px 0 12px; font-size: 15px; font-weight: 700; color: #16a99d; line-height: 22px; text-align: center; }

/* ベネフィット */
.spi-mini-gate-benefits { display: flex; flex-direction: column; gap: 6px; max-width: 270px; margin: 0 auto; }
.spi-mini-gate-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    background: #fff;
    border: 1px solid #b6e9e4;
    border-radius: 18px;
    padding: 9px 14px;
    box-shadow: 0 10px 24px rgba(20,153,141,.10);
    text-align: left;
}
.spi-mini-gate-benefit-icon { flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: #ddf4ef; border: 1px solid #d9f3ef; border-radius: 26px; }
.spi-mini-gate-benefit-icon svg { width: 27px; height: 27px; display: block; }
.spi-mini-gate .spi-mini-gate-benefit-title { margin: 0; color: #14998d !important; font-weight: 900; font-size: 14px; line-height: 1.3; }

/* 下部 CTA */
.spi-mini-gate-line-bottom { margin-top: 20px; max-width: 298px; }

/* SR only */
.spi-mini-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* モバイル */
@media (max-width: 620px) {
    .spi-mini-gate-card { padding: 28px 18px 26px; }
    .spi-mini-gate-title-main { font-size: 19px; word-break: keep-all; overflow-wrap: anywhere; }
    .spi-mini-gate-field { max-width: 92%; }
    .spi-mini-gate-blur-card { max-width: 100%; }
    .spi-mini-gate-blur-pill { font-size: 11px; padding: 7px 11px; }
    .spi-mini-gate-line-primary { max-width: none; }
}