/*
 * face-search.css
 * [avos_face_search] ショートコード専用スタイル
 * SWELL テーマ CSS 変数（--color_main 等）を使用
 * 女優カードは既存の .p-actress-card-list / .p-actress-card を流用
 */

/* ── ルートコンテナ ── */
.avos-fs {
    max-width: 100%;
    margin: 0 auto;
}

/* ======================================================
   女優カード列数 overrides（.avos-fs コンテキスト専用）

   グローバル CSS: PC≥768px → 6列 / SP<768px → 4列
   ここで上書き:
     480px〜767px（サイドバーあり環境含む） → 6列
     〜479px（スマホ縦）                  → 3列
====================================================== */

/* 480px〜767px: サイドバーあり環境でも6列を維持 */
@media (min-width: 480px) and (max-width: 767px) {
    .avos-fs ul.p-actress-card-list > li.p-actress-card {
        flex: 0 0 calc((100% - 5 * 8px) / 6) !important;
        max-width: calc((100% - 5 * 8px) / 6) !important;
    }
}

/* 〜479px: スマホ縦は3列 */
@media (max-width: 479px) {
    .avos-fs ul.p-actress-card-list > li.p-actress-card {
        flex: 0 0 calc((100% - 2 * 8px) / 3) !important;
        max-width: calc((100% - 2 * 8px) / 3) !important;
    }
}

/* ======================================================
   入力エリア
====================================================== */
.avos-fs__input-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

/* ドロップゾーン */
.avos-fs__drop-zone {
    border: 2px dashed var(--color_main, #888);
    border-radius: 8px;
    padding: 36px 24px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    background: var(--color_bg_light, #fafafa);
    outline: none;
    user-select: none;
}
.avos-fs__drop-zone:hover,
.avos-fs__drop-zone:focus,
.avos-fs__drop-zone.is-dragover {
    background: color-mix(in srgb, var(--color_main, #888) 8%, #fff);
    border-color: var(--color_main, #888);
}
.avos-fs__drop-icon {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: 8px;
}
.avos-fs__drop-text {
    margin: 0;
    color: var(--color_text, #333);
    line-height: 1.6;
}
.avos-fs__drop-sub {
    font-size: 0.82rem;
    color: var(--color_text_thin, #888);
}

/* URL 入力行 */
.avos-fs__url-row {
    display: flex;
    gap: 8px;
}
.avos-fs__url-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--color_border, #ddd);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--color_text, #333);
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
}
.avos-fs__url-input:focus {
    border-color: var(--color_main, #888);
}
.avos-fs__url-btn {
    padding: 10px 20px;
    background: var(--color_main, #888);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.avos-fs__url-btn:hover {
    opacity: 0.85;
}

/* プライバシー注記 */
.avos-fs__privacy {
    font-size: 0.78rem;
    color: var(--color_text_thin, #888);
    margin: 0;
    text-align: center;
}

/* ======================================================
   プログレスバー
====================================================== */
.avos-fs__progress {
    margin: 20px 0;
    text-align: center;
}
.avos-fs__progress-bar {
    height: 6px;
    background: var(--color_border, #e5e7eb);
    border-radius: 99px;
    overflow: hidden;
}
.avos-fs__progress-fill {
    height: 100%;
    width: 0;
    background: var(--color_main, #888);
    border-radius: 99px;
    transition: width 0.3s ease;
}
.avos-fs__progress-text {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--color_text_thin, #888);
}

/* ======================================================
   結果エリア
====================================================== */
.avos-fs__result {
    margin-top: 24px;
}

/* canvas ラップ */
.avos-fs__canvas-wrap {
    text-align: center;
    margin-bottom: 16px;
}
.avos-fs__canvas {
    max-width: 100%;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.avos-fs__canvas-caption {
    font-size: 0.78rem;
    color: var(--color_text_thin, #888);
    margin: 6px 0 0;
}

/* ステータス */
.avos-fs__status {
    text-align: center;
    font-size: 0.88rem;
    color: var(--color_text, #333);
    margin: 8px 0;
    min-height: 1.4em;
}

/* 候補タイトル（1顔のとき） */
.avos-fs__candidates-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 20px 0 12px;
    color: var(--color_text, #333);
}

/* 顔ごとの見出し（複数顔のとき） */
.avos-fs__face-heading {
    font-size: 1rem;
    font-weight: 700;
    margin: 24px 0 12px;
    padding-left: 10px;
    border-left: 4px solid #22c55e; /* JSでcolor上書き */
    color: var(--color_text, #333);
}

/* 複数セクション間の区切り */
.avos-fs__face-heading + .p-actress-card-list {
    margin-bottom: 8px;
}