/* =========================================================
   Works Filter (modal) — Solid / Monotone / theme.json-driven
   blocks/works-filter/style.css
   ========================================================= */

   :root{
    --wf-overlay: color-mix(in srgb, var(--wp--preset--color--black) 55%, transparent);
    --wf-shadow: 0 0 0 rgba(0,0,0,0);
  }
  
  /* ===== open button: アイコン＋文字だけ（背景・枠なし） ===== */
  .works-filter__open{
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
    border:0;
    background:transparent;
    color: var(--wp--preset--color--black);
    padding:0;
    margin:0;
    line-height:1;
    border-radius:0;
    display:-webkit-inline-box;
    display:-moz-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
       -moz-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    gap:12px;                         /* 指定：アイコンと文字の間隔 12px */
    text-decoration:none;
    letter-spacing:0.6px;             /* 指定：字間 0.6px */
    font-size:13px;                   /* 指定：サイズ 13px */
    cursor:pointer;
  }
  .works-filter__open:hover{ opacity:.85; }
  .works-filter__open:focus-visible{
    outline:2px solid var(--wp--preset--color--black);
    outline-offset:2px;
  }
  
  /* アイコン（縦に2本のフェーダー）— 色は currentColor を適用 */
  /* URL はこのCSSファイルからの相対パス（/blocks/works-filter/works-filter_icon.svg） */
  .works-filter__open::before{
    content:"";
    inline-size:13px;                      /* 実寸 13px */
    block-size:13px;
    background-color: currentColor;
    -webkit-mask: url("works-filter_icon.svg") no-repeat center / contain;
            mask: url("works-filter_icon.svg") no-repeat center / contain;
  }
  
  /* ===== overlay ===== */
  .works-filter__dialog{
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    background:var(--wf-overlay);
    z-index:1000;
  }
  .works-filter__dialog[hidden]{ display:none !important; }
  
  /* ===== panel ===== */
  .works-filter__panel{
    inline-size:min(760px, calc(100vw - 32px));
    background:var(--wp--preset--color--white);
    border:1px solid var(--wp--preset--color--black);
    border-radius:0;
    -webkit-box-shadow:var(--wf-shadow);
            box-shadow:var(--wf-shadow);
    overflow:hidden;
  }
  
  /* header */
  .works-filter__header{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
       -moz-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack:justify;
       -moz-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
    padding:16px 18px;
    border-bottom:1px solid var(--wp--preset--color--black);
    background:var(--wp--preset--color--white);
  }
  .works-filter__header h3{
    margin:0;
    font-size:1rem;
    letter-spacing:.06em;
    color:var(--wp--preset--color--black);
  }
  .works-filter__close{
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
    border:0;
    background:transparent;
    color:var(--wp--preset--color--black);
    font-size:18px;
    line-height:1;
    cursor:pointer;
    padding:6px;
    border-radius:0;
  }
  .works-filter__close:hover{ background:var(--wp--preset--color--gray-100); }
  .works-filter__close:focus-visible{
    outline:2px solid var(--wp--preset--color--black);
    outline-offset:2px;
  }
  
  /* body */
  .works-filter__body{ padding:18px; }
  
  /* fieldset */
  .works-filter__form fieldset{
    margin:0;
    padding:14px;
    border:1px solid var(--wp--preset--color--border);
    border-radius:0;
  }
  .works-filter__form legend{
    margin:0 0 10px;
    font-size:.9rem;
    color:var(--wp--preset--color--muted);
  }
  
  /* list：PC3列 / SP2列 */
  .works-filter__list{
    list-style:none;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 24px;
    margin:0;
    padding:0;
  }
  .works-filter__list label{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
       -moz-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    gap:.55rem;
    font-size:.95rem;
    color:var(--wp--preset--color--black);
  }
  .works-filter__list input[type="checkbox"]{
    inline-size:16px;
    block-size:16px;
    accent-color: var(--wp--preset--color--black);
  }
  
  /* actions */
  .works-filter__actions{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:end;
       -moz-box-pack:end;
        -ms-flex-pack:end;
            justify-content:flex-end;
    gap:10px;
    margin-top:16px;
  }
  .works-filter__actions .button{
    padding:.55rem 1rem;
    border-radius:0;
    line-height:1;
    background:var(--wp--preset--color--white);
    color:var(--wp--preset--color--black);
    border:1px solid var(--wp--preset--color--black);
  }
  .works-filter__actions .button-primary{
    background:var(--wp--preset--color--black);
    color:var(--wp--preset--color--white);
    border:1px solid var(--wp--preset--color--black);
  }
  .works-filter__actions .button-primary:hover{
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
  
  /* 配置を右寄せにしたい場合（PC）
     ※ 現在のマークアップは data-works-filter-root の素置きなので、こちらをターゲットにする */
  @media (min-width: calc(var(--wp--custom--bp_sp, 768px) + 1px)){
    [data-works-filter-root] { display:block; text-align:right; }
  }
  
/* SPレスポンシブ */
@media (max-width: 768px){
  /* Overlay para alinear modal a la derecha */
  .works-filter__dialog {
    -webkit-box-pack: end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: stretch;
       -moz-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }

  /* --------------------------------------------------
     モーダル全体枠 (318px幅、全画面高さ、右寄せ)
  -------------------------------------------------- */
  .works-filter__panel {
    width: 318px !important;
    inline-size: 318px !important;
    max-inline-size: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    background: #ffffff;
    margin: 0 !important;
    margin-left: auto !important;
    border: none !important;
    border-radius: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-box-shadow: -2px 0 10px rgba(0,0,0,0.1);
            box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  /* --------------------------------------------------
     ヘッダー (高さ54px)
  -------------------------------------------------- */
  .works-filter__header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 54px;
    padding: 0 20px;
    border-bottom: 1px solid #eeeeee;
    background: #fff;
  }

  .works-filter__header h3 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 0;
  }

  /* 閉じるボタン */
  .works-filter__close {
    background: none;
    border: none;
    font-size: 28px;
    color: #333;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    position: static;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }

  /* ヘッダーのクリアボタン */
  .works-filter__clear-header {
    background: none;
    border: none;
    font-size: 14px;
    color: #888;
    cursor: pointer;
    padding: 0;
    position: static;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }

  /* --------------------------------------------------
     コンテンツエリア (タグ選択)
  -------------------------------------------------- */
  .works-filter__body {
    padding: 24px 20px 0;
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    overflow-y: auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  /* Form ocupa todo el espacio disponible */
  .works-filter__form {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }

  /* 「全てのタグ」見出し */
  .works-filter__body fieldset,
  .works-filter__form fieldset {
    border: none;
    padding: 0;
    margin: 0;
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .works-filter__body legend,
  .works-filter__form legend {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 16px;
    width: 100%;
    float: none;
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }

  /* タグリスト（グリッドレイアウト） */
  .works-filter__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }

  .works-filter__list li {
    margin: 0;
  }

  /* --------------------------------------------------
     タグボタン（チェックボックスの装飾）
  -------------------------------------------------- */
  /* 元のチェックボックスは隠す */
  .works-filter__list input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* ラベル（span）をボタンに見立てる */
  .works-filter__list label {
    display: block;
    margin: 0;
    cursor: pointer;
  }

  .works-filter__list label span {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    height: 44px;
    background: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 0;
    color: #333;
    font-size: 14px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
  }

  /* チェックされた時のスタイル */
  .works-filter__list input[type="checkbox"]:checked + span {
    background-color: #f0f0f0;
    border-color: #dddddd;
  }

  /* チェックマークを擬似要素で追加 */
  .works-filter__list input[type="checkbox"]:checked + span::before {
    content: "✓";
    display: inline-block;
    margin-right: 6px;
    font-weight: bold;
  }

  /* --------------------------------------------------
     SEARCHエリア
  -------------------------------------------------- */
  .works-filter__actions {
    margin: 0;
    padding: 20px;
    gap: 0;
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }

  /* 下にある不要な「クリア」ボタンを消す */
  .works-filter__actions .works-filter__clear {
    display: none;
  }

  /* SEARCHボタンのスタイル */
  .works-filter__actions .button-primary {
    width: 100%;
    height: 56px;
    background-color: #000000;
    color: #ffffff;
    font-size: 14px;
    font-family: var(--wp--preset--font-family--en-serif); /* Adobe Jenson */
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    cursor: pointer;
    position: relative;
  }

  /* 虫眼鏡アイコン（CSSで簡易作成） - レンズ部分 */
  .works-filter__actions .button-primary::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  /* 虫眼鏡アイコン - マンゴ（持ち手）部分 */
  .works-filter__actions .button-primary::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 7px;
    background: #fff;
    left: 39%;
    top: 55%;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}
  
  /* 装飾ダミー（将来の拡張余白） */
  .works-filter__panel::after{
    content:"";
    display:block;
    height:0;
  }
  
  /* 「絞り込み」テキストを ja-serif に */
  .works-filter__open .label{
    font-family: var(--wp--preset--font-family--ja-serif);
  }
  
  /* 「絞り込む」の位置調整（既存テンプレの構造に合わせて維持） */
  @media (min-width: 769px){
    .filter-bar .filter-bar__inner{
      padding-right: calc(var(--wp--custom--layout--gutter, 24px) + 145px); /* 必要に応じて微調整 */
    }
  }
  
  /* アクセシビリティ追加: 高コントラスト / リデュースドモーション */
  @media (prefers-reduced-motion: reduce){
    .works-filter__open,
    .works-filter__close { -webkit-transition: none !important; -o-transition: none !important; transition: none !important; }
  }
  @media (forced-colors: active){
    .works-filter__open,
    .works-filter__close {
      border: 1px solid ButtonText;
    }
    .works-filter__dialog { background: rgba(0,0,0,.6); }
  }