/**
 * remedy_job_search 求人検索フォーム スタイル
 *
 * remedy HR デザインシステム (`ds:*` Tailwind utility + `--ds-*` CSS tokens) に準拠し、
 * app.remedy-tokyo.co.jp の求人検索フォームと同じ「縦並びロー（行）レイアウト」を再現する。
 *
 * 構造:
 *   <div class="rm-jsf"> (カード)
 *     <form>
 *       <header.rm-jsf__header> (タイトル)
 *       <div.rm-jsf__row × n> (各検索条件)
 *       <p.rm-jsf__notice> (会員登録案内)
 *       <div.rm-jsf__actions> (検索ボタン)
 *     </form>
 *   </div>
 *
 * トークン参照元: app.remedy-tokyo.co.jp/_next/static/chunks/14.zdzv8ok0xt.css
 */

/* =========================================================================
 * SWELL 既存スタイルへの specificity 保険 (最小限)
 *   .rm-jsf__* セレクタの padding / color / font-size を破壊しないよう、
 *   ここでは appearance のみリセット。border 等は class セレクタで個別指定。
 * ========================================================================= */
.rm-jsf select,
.rm-jsf input,
.rm-jsf button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
}

.rm-jsf {
    /* === Raw palette (remedy DS) ============================ */
    --rm-jsf-gold-50:  #fffbe6;
    --rm-jsf-gold-100: #fff7cc;
    --rm-jsf-gold-300: #e8d67d;
    --rm-jsf-gold-400: #ccbb66;
    --rm-jsf-gold-500: #a89b57;
    /* gold-700: 値テキスト用に darken。白背景で 4.7:1 を確保し WCAG AA 適合 */
    --rm-jsf-gold-700: #7a6f3a;

    --rm-jsf-gray-20:  #fafafa;
    --rm-jsf-gray-50:  #f2f2f2;
    --rm-jsf-gray-100: #e6e6e6;
    --rm-jsf-gray-200: #cccccc;
    --rm-jsf-gray-300: #b3b3b3;
    --rm-jsf-gray-600: #666666;
    --rm-jsf-gray-800: #333333;
    --rm-jsf-black:    #1a1a1a;

    /* === Semantic ============================ */
    --rm-jsf-bg:               #ffffff;
    --rm-jsf-fg-default:       var(--rm-jsf-gray-800);
    --rm-jsf-fg-strong:        var(--rm-jsf-black);
    --rm-jsf-fg-secondary:     var(--rm-jsf-gray-600);
    /* v2.3: 値テキストは「文字は黒」(ユーザー指示)。app 表記とは違うがリメディ独自トーン */
    --rm-jsf-fg-primary:       var(--rm-jsf-black);
    /* accent-icon: 件数 28px+700 や ℹ icon 等、装飾的アクセント (gold-500 維持) */
    --rm-jsf-accent-icon:      var(--rm-jsf-gold-500);
    --rm-jsf-placeholder:      var(--rm-jsf-gray-300);
    --rm-jsf-row-divider:      var(--rm-jsf-gray-100);
    --rm-jsf-card-border:      var(--rm-jsf-gray-100);
    --rm-jsf-button-bg:        var(--rm-jsf-gold-300);
    --rm-jsf-button-bg-hover:  var(--rm-jsf-gold-400);
    --rm-jsf-button-fg:        var(--rm-jsf-black);
    --rm-jsf-button-border:    var(--rm-jsf-gold-400);
    --rm-jsf-focus-ring:       var(--rm-jsf-gold-500);

    /* === Typography ============================ */
    --rm-jsf-font-sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN",
        "Yu Gothic", "Meiryo", -apple-system, BlinkMacSystemFont, sans-serif;

    /* === Radii (remedy DS) ============================ */
    --rm-jsf-radius-card:   6px;       /* DS: --ds-spacing-4xs */
    --rm-jsf-radius-button: 0.333em;   /* DS: --ds-radius-button */
    --rm-jsf-radius-focus:  2px;

    /* === Spacing (remedy DS) ============================ */
    --rm-jsf-card-px:  18px;
    --rm-jsf-card-py:  14px;
    --rm-jsf-row-gap:  12px;

    /* === Font sizes ============================ */
    --rm-jsf-fs-count-num:    28px;
    --rm-jsf-fs-count-suffix: 13px;
    --rm-jsf-fs-title:        16px;
    --rm-jsf-fs-row-label:    15px;
    --rm-jsf-fs-row-value:    15px;
    --rm-jsf-fs-notice:       13px;
    --rm-jsf-fs-submit:       16px;

    /* === Container ============================ */
    box-sizing: border-box;
    margin: 1.8em 0;
    background: var(--rm-jsf-bg);
    border: 1px solid var(--rm-jsf-card-border);
    border-radius: var(--rm-jsf-radius-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    font-family: var(--rm-jsf-font-sans);
    color: var(--rm-jsf-fg-default);
    line-height: 1.5;
    overflow: hidden;
}

.rm-jsf *,
.rm-jsf *::before,
.rm-jsf *::after {
    box-sizing: inherit;
}

/* --- header --------------------------------- */
.rm-jsf__header {
    padding: var(--rm-jsf-card-py) var(--rm-jsf-card-px);
    border-bottom: 1px solid var(--rm-jsf-row-divider);
}
.rm-jsf__title {
    margin: 0;
    font-size: var(--rm-jsf-fs-title);
    font-weight: 700;
    color: var(--rm-jsf-fg-strong);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

/* タイトル: 件数表示モード (app の "153 件を表示中" と同じ造形) */
.rm-jsf__title--count {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3em;
    font-weight: 400;
}
.rm-jsf__count-num {
    font-size: var(--rm-jsf-fs-count-num);
    font-weight: 700;
    color: var(--rm-jsf-accent-icon); /* 大文字 (28px+700) なので 3:1 緩和適用、gold-500 を維持 */
    letter-spacing: 0.01em;
    line-height: 1;
}
.rm-jsf__count-suffix {
    font-size: var(--rm-jsf-fs-count-suffix);
    font-weight: 400;
    color: var(--rm-jsf-fg-secondary);
    line-height: 1;
    align-self: baseline;
}
.rm-jsf__count-meta {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--rm-jsf-fg-secondary);
    font-weight: 400;
    letter-spacing: 0.02em;
}
@media (max-width: 640px) {
    .rm-jsf__count-num { font-size: 24px; }
    .rm-jsf__count-suffix { font-size: 12px; }
}

/* --- row ------------------------------------ */
.rm-jsf__row {
    display: flex;
    align-items: center;
    gap: var(--rm-jsf-row-gap);
    padding: var(--rm-jsf-card-py) var(--rm-jsf-card-px);
    border-bottom: 1px solid var(--rm-jsf-row-divider);
    background: var(--rm-jsf-bg);
}
/* 最終行は notice or actions が直後にあるので border を消す (二重線回避) */
.rm-jsf__row:last-of-type {
    border-bottom: 0;
}
@supports (selector(:has(*))) {
    .rm-jsf__row:has(+ .rm-jsf__notice),
    .rm-jsf__row:has(+ .rm-jsf__actions) {
        border-bottom: 1px solid var(--rm-jsf-row-divider);
    }
}
.rm-jsf__row-label {
    flex: 0 0 auto;
    font-size: var(--rm-jsf-fs-row-label);
    font-weight: 700;
    color: var(--rm-jsf-fg-strong);
    min-width: 5em;
    line-height: 1.3;
}
.rm-jsf__row-control {
    flex: 1 1 auto;
    position: relative;
    text-align: right;
    min-width: 0;
}

/* select / input は行内に溶け込ませる (枠なし・透明背景・右寄せ)
   !important は SWELL の .post_content select/input 既定 padding / border / background に対抗 */
.rm-jsf__select,
.rm-jsf__input {
    width: 100%;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: var(--rm-jsf-fs-row-value);
    color: var(--rm-jsf-fg-primary);
    text-align: right;
    padding: 0 22px 0 0 !important; /* 右側 chevron 領域 */
    margin: 0 !important;
    cursor: pointer;
    line-height: 1.4;
    outline: none;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 0;
    min-height: 1.5em;
}
.rm-jsf__input {
    cursor: text;
}

/* select の値が空 (= "指定なし") のときはプレースホルダー色。
   JS (form-tracker.js) が data-empty 属性をトグルしてくれる。
   :has() フォールバックも併設し、JS 無効環境でも初期表示はほぼ正しい色になる。 */
.rm-jsf__select[data-empty] {
    color: var(--rm-jsf-placeholder);
}
@supports (selector(:has(*))) {
    .rm-jsf__row-control--select:has(.rm-jsf__select option[value=""]:checked) .rm-jsf__select:not([data-empty="0"]) {
        color: var(--rm-jsf-placeholder);
    }
}

/* input placeholder */
.rm-jsf__input::placeholder {
    color: var(--rm-jsf-placeholder);
    opacity: 1;
}

/* 右側の chevron アイコン (select だけ表示)
   mask-image + currentColor で受け、row の hover/focus 状態と連動する
   ※ background-image SVG 内の currentColor は効かないため mask 採用 */
.rm-jsf__row-control--select {
    color: var(--rm-jsf-fg-secondary); /* 初期 chevron 色 (gray-600) */
}
.rm-jsf__row-control--select::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 12px;
    height: 8px;
    margin-top: -4px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 12px 8px;
            mask-size: 12px 8px;
    pointer-events: none;
    transition: background-color 0.15s ease;
}
.rm-jsf__row:hover .rm-jsf__row-control--select,
.rm-jsf__row:focus-within .rm-jsf__row-control--select {
    color: var(--rm-jsf-fg-primary); /* value と同じ gold-700 に上がる */
}

.rm-jsf__select:focus,
.rm-jsf__input:focus {
    color: var(--rm-jsf-fg-primary);
}
/* キーボード/スクリーンリーダー優先の focus 可視化 (WCAG 2.4.7) */
.rm-jsf__select:focus-visible,
.rm-jsf__input:focus-visible {
    outline: 2px solid var(--rm-jsf-focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}
.rm-jsf__select:hover,
.rm-jsf__input:hover {
    /* 行全体での hover 表現は親で */
}

.rm-jsf__row:hover,
.rm-jsf__row:focus-within {
    background: var(--rm-jsf-gray-20);
}

/* --- 会員登録案内 (gold-50 背景で「会員特典」感を演出) --- */
.rm-jsf__notice {
    display: flex;
    align-items: flex-start;
    gap: 0.45em;
    margin: 0;
    padding: 13px var(--rm-jsf-card-px);
    font-size: var(--rm-jsf-fs-notice);
    color: var(--rm-jsf-gray-800);    /* gray-600 → gray-800 で読ませる */
    line-height: 1.55;
    background: var(--rm-jsf-gold-50);
    border-top: 1px solid var(--rm-jsf-gold-100);
    border-bottom: 1px solid var(--rm-jsf-row-divider);
}
.rm-jsf__notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-top: 0.15em;
    color: var(--rm-jsf-accent-icon);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

/* --- アクションボタン (検索ボタンのみ) --------- */
.rm-jsf__actions {
    padding: var(--rm-jsf-card-py) var(--rm-jsf-card-px);
    background: var(--rm-jsf-bg);
}

.rm-jsf__submit {
    display: inline-flex !important;
    width: 100% !important;
    align-items: center;
    justify-content: center;
    padding: 10px 16px !important;
    margin: 0 !important;
    border-radius: var(--rm-jsf-radius-button) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    text-align: center;
    line-height: 1.2;
    background: var(--rm-jsf-button-bg) !important;
    color: var(--rm-jsf-button-fg) !important;
    border: 1px solid var(--rm-jsf-button-border) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.rm-jsf__submit:hover {
    background: var(--rm-jsf-button-bg-hover);
}
.rm-jsf__submit:focus-visible {
    outline: 2px solid var(--rm-jsf-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(168, 155, 87, 0.18); /* gold-500 18% halo */
}
.rm-jsf__submit:focus:not(:focus-visible) {
    outline: none;
}
.rm-jsf__submit:active {
    transform: translateY(1px);
}

/* --- 企業名検索モード (P1-5) ------------------ */
/* form に rm-jsf--company-only が付くと、social/keyword 等の他フィルタ行が薄く沈み、
   送信から除外されることを視覚的にユーザーへ伝える。 */
@supports (selector(:has(*))) {
    /* v2.3: 「社名検索時は無効」テキストは行間圧迫の原因。opacity と aria-disabled 風の見せ方だけ残す */
    .rm-jsf--company-only .rm-jsf__row:not(:has([name="companyName"])) {
        opacity: 0.45;
        transition: opacity 0.15s ease;
    }
}

/* --- position variants ------------------ */
.rm-jsf--pos-inline {
    background: var(--rm-jsf-gray-20);
}
.rm-jsf--pos-inline .rm-jsf__row,
.rm-jsf--pos-inline .rm-jsf__header,
.rm-jsf--pos-inline .rm-jsf__actions {
    background: #fff;
}
.rm-jsf--pos-bottom {
    border-color: var(--rm-jsf-button-border);
}

/* --- responsive ------------------------- */
@media (max-width: 640px) {
    .rm-jsf__header,
    .rm-jsf__row,
    .rm-jsf__notice,
    .rm-jsf__actions {
        padding-left: 14px;
        padding-right: 14px;
    }
    .rm-jsf__row-label {
        min-width: 4.5em;
        font-size: 14px;
    }
    .rm-jsf__select,
    .rm-jsf__input {
        font-size: 14px;
    }
}

/* --- a11y -------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .rm-jsf__select,
    .rm-jsf__input,
    .rm-jsf__submit,
    .rm-jsf__row,
    .rm-jsf__row-control--select::after {
        transition: none;
    }
}

/* --- data-ds-tone="white" 実利用 (P2-5) ---
   将来 DS で tone (white/light/dark/black) 切替が来たとき、attr セレクタで切り替えやすい構造にしておく。
   現状は white のみ実装。 */
.rm-jsf[data-ds-tone="white"] {
    color-scheme: light;
}

/* --- dark mode 余地 (P2-4) ---
   SWELL 子テーマ側で prefers-color-scheme を採用していなくても、
   将来 light-dark() を CSS Color 5 ベースで有効化できるように分岐を残す。
   現時点は light のみ確実に当たる。 */
@media (prefers-color-scheme: dark) {
    /* SWELL の記事本体が dark の場合に「ふっと白カードが眩しい」のを避ける */
    .rm-jsf {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }
    /* ※ 全色トークンの dark テーマ化は別チケット (DS 側の dark トークン公開待ち) */
}

/* ==========================================================================
 * v2 visual tuning: 記事に溶け込ませつつ「数字」と「字形」で引く
 *
 * 出典: UX strategist & visual designer subagent 合議 (2026-05-27)
 *  - shadow 削除 + 左 3px gold バーで SWELL capbox 語彙に同化
 *  - 背景を 4% warm tint で「紙的」に
 *  - 区切り線を dotted gray-200 で組版感を演出
 *  - 件数は Noto Serif JP / 600 / gray-800 / 26px に格下げ、色でなく字形で引く
 *  - chevron を「›」character、submit に「→」character の subtle arrow
 *
 * 戦略: 「明朝の見出し × ゴシックの実体」(strategist 案 C)
 *  - header (lead + count) は明朝で記事と地続き化
 *  - 各フィールドの入力 UI はゴシック維持 (操作性)
 *
 * トークンは追記のみ・既存 --rm-jsf-* を破壊しない
 * ========================================================================== */

.rm-jsf {
    /* v2.3: warm tint 撤回、左 gold バー削除。背景白で app トーンに合わせる */
    --rm-jsf-bg: #ffffff;
    /* 行・カードの padding を圧縮 (場所取り軽減) */
    --rm-jsf-card-px: 16px;
    --rm-jsf-card-py: 11px;
    /* 区切り線は薄い gray-100 に戻す (warm 系を撤回) */
    --rm-jsf-row-divider: var(--rm-jsf-gray-100);
    /* 件数を 26px 維持 */
    --rm-jsf-fs-count-num: 26px;
    /* margin も詰める */
    margin: 1.4em 0;

    border: 1px solid var(--rm-jsf-gray-100);
    border-radius: 4px;
    box-shadow: none;
}

/* v2.3: 区切り線を solid gray-100 に統一 (app に揃え、dotted は撤回) */
.rm-jsf__row {
    border-bottom: 1px solid var(--rm-jsf-row-divider);
}
.rm-jsf__row:last-of-type {
    border-bottom: none;
}
.rm-jsf__header {
    border-bottom: 1px solid var(--rm-jsf-row-divider);
}

/* lead: 件数の下、余白を詰める */
.rm-jsf__lead {
    margin: 2px 0 0;
    font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--rm-jsf-fg-secondary);
    letter-spacing: 0.02em;
    line-height: 1.45;
}
/* v2.4: lead 単独 (件数が無いとき) はタイトル相当の格で表示 */
.rm-jsf__lead--solo {
    margin: 0;
    font-size: 14.5px;
    color: var(--rm-jsf-fg-strong);
    font-weight: 500;
    line-height: 1.5;
}

/* 件数を Noto Serif JP / 700 / gray-800 に。色で叫ばず字形で引く
   weight 700: Yu Mincho フォールバック時に痩せ字形になる保険 (reviewer P2-4) */
.rm-jsf__count-num {
    font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
    font-weight: 700;
    color: var(--rm-jsf-gray-800);
    font-feature-settings: "palt" 1, "tnum" 1;
    letter-spacing: 0.005em;
}
.rm-jsf__count-suffix {
    font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
    color: var(--rm-jsf-fg-secondary);
}

/* 行ラベルも明朝に寄せて、本文との繋がりを作る (入力欄はゴシック維持) */
.rm-jsf__row-label {
    font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* chevron を mask-image SVG から「›」character に置換 (組版感 + 実装軽量化) */
.rm-jsf__row-control--select::after {
    content: "›";
    background: none;
    background-color: transparent;
    -webkit-mask-image: none;
            mask-image: none;
    width: auto;
    height: auto;
    margin-top: 0;
    top: 50%;
    transform: translateY(-54%);
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--rm-jsf-fg-secondary);
    line-height: 1;
    speak: never; /* SR 読み上げ抑制 (実装依存) */
}

/* submit に subtle arrow (gradient は不採用、character のみ) */
.rm-jsf__submit {
    gap: 0.4em;
}
.rm-jsf__submit::after {
    content: "→";
    display: inline-block;
    font-size: 0.95em;        /* reviewer P2-2: ボリュームを下げ editorial に */
    font-weight: 400;          /* 500 → 400 */
    line-height: 1;
    transition: transform 0.15s ease;
    speak: never;
}
.rm-jsf__submit:hover::after {
    transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
    .rm-jsf__submit::after { transition: none; }
    .rm-jsf__submit:hover::after { transform: none; }
}

/* v2.3: notice 圧縮。背景透明、上罫線のみ、padding 詰める */
.rm-jsf__notice {
    background: transparent;
    border-top: 1px solid var(--rm-jsf-row-divider);
    border-bottom: none;
    color: var(--rm-jsf-fg-secondary);
    padding: 8px var(--rm-jsf-card-px);
    font-size: 12px;
}
.rm-jsf__notice-icon {
    color: var(--rm-jsf-accent-icon);
}

/* pos-inline variant: 白基調に揃える (warm tint 撤回) */
.rm-jsf--pos-inline {
    background: var(--rm-jsf-gray-20);
}

/* prefers-contrast: more で dotted は視認性低下するので solid + 濃 gray に切替 (reviewer P2-3) */
@media (prefers-contrast: more) {
    .rm-jsf {
        border-color: var(--rm-jsf-gray-300);
    }
    .rm-jsf__row {
        border-bottom-style: solid;
        border-bottom-color: var(--rm-jsf-gray-300);
    }
}