/* public/css/index-additions.css
   index-redesign.css の「後」に読み込む
   1. Step1 医療系資格カード内の対象資格一覧（内部スクロール + 展開）
   2. 進捗HUD: 必須項目の充足バッジ
*/

/* ==================== 1. 医療系資格の一覧（カード内） ==================== */
.membership-card[data-type="medical"] .card-desc { margin-bottom: 8px; }

.qual-preview {
    margin: 6px 0 14px; text-align: left;
    border: 1px solid #d3e5db; border-radius: 14px; background: var(--mint);
    overflow: hidden;
}
.qual-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px 7px; }
.qual-preview-title { font-size: .8rem; font-weight: 700; color: var(--primary-dark); display: inline-flex; align-items: center; gap: 6px; }
.qual-preview-title b { font-size: .7rem; font-weight: 800; color: #fff; background: var(--primary); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.qual-preview-toggle {
    font: inherit; font-size: .72rem; font-weight: 600; color: var(--primary);
    background: #fff; border: 1px solid #c8e6c9; border-radius: 999px; padding: 4px 11px; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.qual-preview-toggle:hover { background: var(--mint-2); border-color: var(--primary-light); }
.qual-preview-toggle:focus-visible { outline: 2px solid rgba(26,95,74,.4); outline-offset: 2px; }

/* スクロール領域 + 上下のフェード（端に着いたら消える） */
.qual-scroll-wrap { position: relative; }
.qual-scroll {
    max-height: 132px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 2px 12px 10px; scrollbar-width: thin; scrollbar-color: rgba(26,95,74,.35) transparent;
    scroll-behavior: smooth;
}
.qual-scroll::-webkit-scrollbar { width: 6px; }
.qual-scroll::-webkit-scrollbar-thumb { background: rgba(26,95,74,.35); border-radius: 999px; }
.qual-scroll::-webkit-scrollbar-track { background: transparent; }
.qual-scroll:focus-visible { outline: 2px solid rgba(26,95,74,.4); outline-offset: -2px; border-radius: 8px; }
.qual-scroll-wrap::before, .qual-scroll-wrap::after {
    content: ''; position: absolute; left: 0; right: 8px; height: 22px; pointer-events: none; z-index: 1;
    transition: opacity .2s ease;
}
.qual-scroll-wrap::before { top: 0; background: linear-gradient(to bottom, var(--mint), rgba(240,247,244,0)); }
.qual-scroll-wrap::after  { bottom: 0; background: linear-gradient(to top, var(--mint), rgba(240,247,244,0)); }
.qual-scroll-wrap.is-top::before, .qual-scroll-wrap.is-bottom::after, .qual-scroll-wrap.no-scroll::before, .qual-scroll-wrap.no-scroll::after { opacity: 0; }

/* 分野ごとの見出しは、スクロール中も上に貼り付く */
.qual-group + .qual-group { margin-top: 8px; }
.qual-group-name {
    position: sticky; top: 0; z-index: 1;
    font-size: .68rem; font-weight: 700; color: var(--gray-500); letter-spacing: .04em;
    padding: 4px 0 3px; margin-bottom: 4px; background: var(--mint);
}
.qual-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.qual-chip {
    font-size: .74rem; line-height: 1.4; color: var(--primary-dark);
    background: #fff; border: 1px solid #cfe2da; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.qual-chip small { font-size: .66rem; color: var(--gray-500); margin-left: 2px; }
.membership-card.selected .qual-chip { border-color: #b5d6c6; }

.qual-preview-hint { margin: 0; padding: 6px 12px 8px; font-size: .68rem; color: var(--gray-500); text-align: center; border-top: 1px dashed #cfe2da; }
.qual-preview-hint::before { content: '↕ '; }

/* 展開時: カード内スクロールをやめて全部見せる（カードの高さが伸びる） */
.qual-preview.is-expanded .qual-scroll { max-height: none; overflow: visible; }
.qual-preview.is-expanded .qual-scroll-wrap::before, .qual-preview.is-expanded .qual-scroll-wrap::after { opacity: 0; }
.qual-preview.is-expanded .qual-preview-hint { display: none; }
.qual-preview.is-expanded .qual-group-name { position: static; }

@media (max-width: 768px) {
    .qual-scroll { max-height: 150px; }          /* タッチ端末は少し広めに */
    .qual-chip { font-size: .78rem; padding: 4px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .qual-scroll { scroll-behavior: auto; }
    .qual-scroll-wrap::before, .qual-scroll-wrap::after, .qual-preview-toggle { transition: none; }
}

/* ==================== 2. 進捗HUD: 必須項目の充足 ==================== */
.progress-remaining { transition: background .3s ease, border-color .3s ease, color .3s ease; }
.progress-remaining.is-ready { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ==================== 3. 右上に固定するミニ進捗（アニメーションのみ） ==================== */
.progress-mini {
    --mini-size: 52px;
    position: fixed; top: 12px; right: 12px; z-index: 1500;   /* 固定ヘッダーより上。モーダル表示中は .is-muted で隠す */
    width: var(--mini-size); height: var(--mini-size); padding: 0;
    border: none; border-radius: 50%; background: #fff; cursor: pointer;
    box-shadow: 0 6px 18px rgba(26,95,74,.18), 0 0 0 1px rgba(26,95,74,.10);
    opacity: 0; transform: translateY(-8px) scale(.85); pointer-events: none;
    transition: opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
}
.progress-mini.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.progress-mini.is-muted { opacity: 0; pointer-events: none; }
.progress-mini:hover { box-shadow: 0 8px 22px rgba(26,95,74,.26), 0 0 0 1px rgba(26,95,74,.14); }
.progress-mini:focus-visible { outline: 3px solid rgba(26,95,74,.35); outline-offset: 3px; }
.progress-mini-slot { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.progress-mini-slot canvas { display: block; border-radius: 50%; }

@media (max-width: 768px) {
    .progress-mini { --mini-size: 44px; top: 10px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .progress-mini { transition: none; }
}

/* ==================== 4. 重複メール警告: スマホでは「ログインはこちら」を改行 ==================== */
@media (max-width: 640px) {
    #form-message .inline-message-text a { display: block; margin: .45em 0 0 !important; }
}

/* ===== Step4 LINE照合ガイド (js/line-verification-guide.js) ===== */
.lvg-notice { padding:.75rem 1rem; border-radius:10px; font-size:.88rem; margin-bottom:1rem; line-height:1.7; }
.lvg-notice.is-ready { background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.lvg-notice.is-pending { background:#fffbeb; color:#92400e; border:1px solid #fcd34d; }
.lvg-notice small { display:block; font-size:.78rem; opacity:.85; }
.lvg-steps { margin:0; padding-left:1.4rem; }
.lvg-steps > li { margin-bottom:1rem; font-size:.9rem; line-height:1.7; }
.lvg-steps > li > strong { display:block; color:#1e293b; margin-bottom:.25rem; }
.lvg-row { margin:.2rem 0; color:#424242; }
.lvg-friend { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.35rem; }
.lvg-add { display:inline-flex !important; width:auto !important; }
.lvg-qr { border:1px solid #e2e8f0; border-radius:8px; padding:4px; background:#fff; }
.lvg-value { display:inline-flex; align-items:center; gap:.4rem; }
.lvg-value code { background:#f0f7f4; color:#1a5f4a; padding:.15rem .55rem; border-radius:6px; font-size:.95rem; font-weight:700; letter-spacing:.03em; }
.lvg-copy { font:inherit; font-size:.72rem; padding:.1rem .5rem; border:1px solid #c8e6c9; background:#fff; color:#1a5f4a; border-radius:100px; cursor:pointer; }
.lvg-copy:hover { background:#e2f1ea; }
.lvg-hint { display:block; font-size:.76rem; color:#64748b; }
.lvg-muted { color:#94a3b8; font-size:.85rem; }
.lvg-done { margin:.75rem 0 0; font-size:.82rem; color:#64748b; }

.lvg-buttons-row { padding: 0; background: none; }
.lvg-buttons { display: block; width: 100%; max-width: 300px; height: auto; border: 1px solid #e2e8f0; border-radius: 12px; margin: .35rem 0 0; }

.lvg-add { background: #06C755 !important; color: #fff !important; border: none; font-weight: 700; }
.lvg-add:hover { background: #05b34c !important; }

/* 医療系: 「すべて表示」で資格一覧を展開したときは高さ固定を解除 */
.membership-card:has(.qual-preview.is-expanded) { height: auto; }
.membership-card:has(.qual-preview.is-expanded) .card-benefits { flex: 0 0 auto; }
.membership-card:has(.qual-preview.is-expanded) .card-benefits-scroll { max-height: 13rem; }