@layer components {
  /* ========================================
   Unified Card Component
   クリニック・施術・コラム共通カード
   data-post-type属性でテーマカラー自動切り替え
======================================== */

  /* -----------------------------
   カード本体（モバイル基準）
------------------------------ */
  :where(.c-card-unified) {
    position: relative;
    display: flex;
    flex-direction: column;

    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--wp--custom--border--radius--lg);
    overflow: hidden;
    margin-bottom: var(--wp--preset--spacing--base);
    transition: border-color var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease);
  }

  @media (min-width: 768px) {
    :where(.c-card-unified) {
      flex-direction: row;
      margin-bottom: var(--wp--preset--spacing--lg);
    }
  }

  /* -----------------------------
   管理者用ボタンエリア（ホバー時表示）
------------------------------ */
  :where(.c-card-unified__admin-actions) {
    position: absolute;
    top: var(--wp--preset--spacing--sm);
    left: var(--wp--preset--spacing--sm);
    transform: none;
    display: flex;
    flex-direction: row;
    gap: var(--wp--preset--spacing--2-xs);
    opacity: 0;
    transition: opacity var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease);
    z-index: var(--wp--custom--z-index--10);
  }

  @media (min-width: 768px) {
    :where(.c-card-unified__admin-actions) {
      top: 50%;
      left: calc(-1 * (var(--wp--preset--spacing--sm) + 120px));
      transform: translateY(-50%);
      flex-direction: column;
    }
  }

  :where(.c-card-unified:hover .c-card-unified__admin-actions) {
    opacity: 1;
  }

  :where(.c-card-unified__admin-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--2-xs);
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
    min-width: 7.5rem;
    font-size: var(--wp--preset--font-size--sm);
    font-weight: var(--wp--custom--font-weight--medium);
    color: var(--wp--preset--color--white);
    border: none;
    border-radius: var(--wp--custom--border--radius--sm);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--wp--custom--transition--duration--base)
        var(--wp--custom--transition--timing--ease),
      opacity var(--wp--custom--transition--duration--base)
        var(--wp--custom--transition--timing--ease);
  }

  :where(.c-card-unified__admin-btn:hover) {
    opacity: 0.9;
  }

  /* Clinic - ゴールド */
  :where(.c-card-unified[data-post-type="clinic"] .c-card-unified__admin-btn) {
    background: var(--wp--preset--color--tertiary);
  }

  :where(
      .c-card-unified[data-post-type="clinic"] .c-card-unified__admin-btn:hover
    ) {
    background: var(--wp--preset--color--tertiary-dark);
  }

  /* Treatment - ピンク */
  :where(
      .c-card-unified[data-post-type="treatment"] .c-card-unified__admin-btn
    ) {
    background: var(--wp--preset--color--primary);
  }

  :where(
      .c-card-unified[data-post-type="treatment"]
        .c-card-unified__admin-btn:hover
    ) {
    background: var(--wp--preset--color--primary-dark);
  }

  /* Column - 緑 */
  :where(
      .c-card-unified[data-post-type="c-column"] .c-card-unified__admin-btn
    ) {
    background: var(--wp--preset--color--success);
  }

  :where(
      .c-card-unified[data-post-type="c-column"]
        .c-card-unified__admin-btn:hover
    ) {
    background: var(--wp--preset--color--success-dark);
  }

  :where(.c-card-unified__admin-btn--mypage) {
    background: var(--wp--preset--color--success);
  }

  :where(.c-card-unified__admin-btn--mypage:hover) {
    background: var(--wp--preset--color--success-dark);
    opacity: 0.9;
  }

  /* -----------------------------
   サムネイル
------------------------------ */
  :where(.c-card-unified__thumbnail) {
    position: relative;
    width: 100%;
    min-width: auto;
    aspect-ratio: 16 / 9;
    padding: var(--wp--preset--spacing--sm);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (min-width: 768px) {
    :where(.c-card-unified__thumbnail) {
      width: 30rem;
      min-width: 20rem;
      aspect-ratio: 4 / 3;
    }
  }

  :where(.c-card-unified__thumbnail img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--wp--custom--border--radius--md);
    transition: opacity var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease);
  }

  :where(.c-card-unified__thumbnail:hover img) {
    opacity: 0.85;
  }

  /* -----------------------------
   投稿タイプラベル（左上）
------------------------------ */
  :where(.c-card-unified__type-label) {
    position: absolute;
    top: var(--wp--preset--spacing--lg);
    left: var(--wp--preset--spacing--lg);
    padding: var(--wp--preset--spacing--3-xs) var(--wp--preset--spacing--xs);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: var(--wp--custom--font-weight--bold);
    color: var(--wp--preset--color--white);
    border-radius: var(--wp--custom--border--radius--sm);
    z-index: var(--wp--custom--z-index--10);
  }

  /* Clinic - ゴールド */
  :where(.c-card-unified[data-post-type="clinic"] .c-card-unified__type-label) {
    background: var(--wp--preset--color--tertiary);
  }

  /* Treatment - ピンク */
  :where(
      .c-card-unified[data-post-type="treatment"] .c-card-unified__type-label
    ) {
    background: var(--wp--preset--color--primary);
  }

  /* Column - 緑 */
  :where(
      .c-card-unified[data-post-type="c-column"] .c-card-unified__type-label
    ) {
    background: var(--wp--preset--color--success);
  }

  /* -----------------------------
   お気に入りボタンエリア
------------------------------ */
  :where(.c-card-unified__favorite) {
    position: absolute;
    top: var(--wp--preset--spacing--sm);
    right: var(--wp--preset--spacing--sm);
    z-index: var(--wp--custom--z-index--10);
  }

  /* -----------------------------
   お気に入りボタン
------------------------------ */
  :where(.c-card-unified__favorite-btn) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--wp--preset--color--white);
    border: var(--wp--custom--border--width--1) solid
      var(--wp--preset--color--gray-light);
    border-radius: var(--wp--custom--border--radius--full);
    cursor: pointer;
    transition: background var(--wp--custom--transition--duration--base)
        var(--wp--custom--transition--timing--ease),
      border-color var(--wp--custom--transition--duration--base)
        var(--wp--custom--transition--timing--ease),
      opacity var(--wp--custom--transition--duration--base)
        var(--wp--custom--transition--timing--ease);
  }

  :where(.c-card-unified__favorite-btn:hover) {
    background: var(--wp--preset--color--gray-lightest);
    opacity: 0.9;
  }

  /* Clinic - ゴールド */
  :where(
      .c-card-unified[data-post-type="clinic"]
        .c-card-unified__favorite-btn:hover
    ) {
    border-color: var(--wp--preset--color--tertiary);
  }

  :where(
      .c-card-unified[data-post-type="clinic"]
        .c-card-unified__favorite-btn.is-favorited
    ) {
    background: var(--wp--preset--color--tertiary-lightest);
    border-color: var(--wp--preset--color--tertiary);
  }

  /* Treatment - ピンク */
  :where(
      .c-card-unified[data-post-type="treatment"]
        .c-card-unified__favorite-btn:hover
    ) {
    border-color: var(--wp--preset--color--primary);
  }

  :where(
      .c-card-unified[data-post-type="treatment"]
        .c-card-unified__favorite-btn.is-favorited
    ) {
    background: var(--wp--preset--color--primary-lightest);
    border-color: var(--wp--preset--color--primary);
  }

  /* Column - 緑 */
  :where(
      .c-card-unified[data-post-type="c-column"]
        .c-card-unified__favorite-btn:hover
    ) {
    border-color: var(--wp--preset--color--success);
  }

  :where(
      .c-card-unified[data-post-type="c-column"]
        .c-card-unified__favorite-btn.is-favorited
    ) {
    background: var(--wp--preset--color--success-lightest);
    border-color: var(--wp--preset--color--success);
  }

  /* お気に入りアイコン（SVG） */
  :where(.c-card-unified__favorite-btn .c-favorite-btn__icon) {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :where(.c-card-unified__favorite-btn .c-favorite-btn__icon svg) {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease);
  }

  /* デフォルト: アウトラインアイコン表示 */
  :where(.c-card-unified__favorite-btn .c-favorite-btn__icon-outline) {
    opacity: 1;
    color: var(--wp--preset--color--gray);
  }

  :where(.c-card-unified__favorite-btn .c-favorite-btn__icon-filled) {
    opacity: 0;
  }

  /* Clinic - ゴールド */
  :where(
      .c-card-unified[data-post-type="clinic"]
        .c-card-unified__favorite-btn
        .c-favorite-btn__icon-filled
    ) {
    color: var(--wp--preset--color--tertiary);
  }

  /* Treatment - ピンク */
  :where(
      .c-card-unified[data-post-type="treatment"]
        .c-card-unified__favorite-btn
        .c-favorite-btn__icon-filled
    ) {
    color: var(--wp--preset--color--primary);
  }

  /* Column - 緑 */
  :where(
      .c-card-unified[data-post-type="c-column"]
        .c-card-unified__favorite-btn
        .c-favorite-btn__icon-filled
    ) {
    color: var(--wp--preset--color--success);
  }

  /* お気に入り済み: 塗りつぶしアイコン表示 */
  :where(
      .c-card-unified__favorite-btn.is-favorited .c-favorite-btn__icon-outline
    ) {
    opacity: 0;
  }

  :where(
      .c-card-unified__favorite-btn.is-favorited .c-favorite-btn__icon-filled
    ) {
    opacity: 1;
  }

  /* -----------------------------
   コンテンツエリア
------------------------------ */
  :where(.c-card-unified__content) {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--sm);
    padding: var(--wp--preset--spacing--base);
    padding-right: 3.75rem; /* お気に入りボタンとの重なりを防ぐ */
    padding-bottom: calc(
      var(--wp--preset--spacing--base) + 60px
    ); /* 詳細ボタン用のスペース */
    flex: 1;
    min-width: 0;
  }

  @media (min-width: 768px) {
    :where(.c-card-unified__content) {
      padding: var(--wp--preset--spacing--lg);
      padding-right: 3.75rem;
      padding-bottom: calc(var(--wp--preset--spacing--lg) + 60px);
    }
  }

  /* -----------------------------
   コピー（キャッチフレーズ）
------------------------------ */
  :where(.c-card-unified__copy) {
    font-size: var(--wp--preset--font-size--sm);
    font-weight: var(--wp--custom--font-weight--bold);
    line-height: var(--wp--custom--line-height--sm);
    margin: 0;
  }

  /* Clinic - ゴールド */
  :where(.c-card-unified[data-post-type="clinic"] .c-card-unified__copy) {
    color: var(--wp--preset--color--tertiary-dark);
  }

  /* Treatment - ピンク */
  :where(.c-card-unified[data-post-type="treatment"] .c-card-unified__copy) {
    color: var(--wp--preset--color--primary-dark);
  }

  /* Column - 緑 */
  :where(.c-card-unified[data-post-type="c-column"] .c-card-unified__copy) {
    color: var(--wp--preset--color--success-dark);
  }

  /* -----------------------------
   タイトル上のタグ
------------------------------ */
  :where(.c-card-unified__title-tags) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp--preset--spacing--2-xs);
    margin-bottom: var(--wp--preset--spacing--2-xs);
  }

  :where(.c-card-unified__title-tag) {
    display: inline-flex;
    align-items: center;
    padding: var(--wp--preset--spacing--3-xs) var(--wp--preset--spacing--xs);
    font-size: var(--wp--preset--font-size--sm);
    border: var(--wp--custom--border--width--1) solid;
    border-radius: var(--wp--custom--border--radius--sm);
  }

  /* Clinic - ゴールド */
  :where(.c-card-unified[data-post-type="clinic"] .c-card-unified__title-tag) {
    color: var(--wp--preset--color--tertiary-dark);
    background: var(--wp--preset--color--tertiary-lightest);
    border-color: var(--wp--preset--color--tertiary-lighter);
  }

  /* Treatment - ピンク */
  :where(
      .c-card-unified[data-post-type="treatment"] .c-card-unified__title-tag
    ) {
    color: var(--wp--preset--color--primary-dark);
    background: var(--wp--preset--color--primary-lightest);
    border-color: var(--wp--preset--color--primary-lighter);
  }

  /* Column - 緑 */
  :where(
      .c-card-unified[data-post-type="c-column"] .c-card-unified__title-tag
    ) {
    color: var(--wp--preset--color--success-dark);
    background: var(--wp--preset--color--success-lightest);
    border-color: var(--wp--preset--color--success-light);
  }

  :where(.c-card-unified__title-tag-separator) {
    font-size: var(--wp--preset--font-size--base);
    margin: 0;
    padding: 0;
  }

  /* Clinic - ゴールド */
  :where(
      .c-card-unified[data-post-type="clinic"]
        .c-card-unified__title-tag-separator
    ) {
    color: var(--wp--preset--color--tertiary);
  }

  /* Treatment - ピンク */
  :where(
      .c-card-unified[data-post-type="treatment"]
        .c-card-unified__title-tag-separator
    ) {
    color: var(--wp--preset--color--primary);
  }

  /* Column - 緑 */
  :where(
      .c-card-unified[data-post-type="c-column"]
        .c-card-unified__title-tag-separator
    ) {
    color: var(--wp--preset--color--success);
  }

  /* -----------------------------
   タイトル
------------------------------ */
  :where(.c-card-unified__title) {
    font-size: var(--wp--preset--font-size--base);
    font-weight: var(--wp--custom--font-weight--bold);
    line-height: var(--wp--custom--line-height--base);
    margin: var(--wp--preset--spacing--sm) 0;
  }

  @media (min-width: 768px) {
    :where(.c-card-unified__title) {
      font-size: var(--wp--preset--font-size--lg);
    }
  }

  :where(.c-card-unified__title a) {
    color: var(--wp--preset--color--basic-text);
    text-decoration: none;
    transition: color var(--wp--custom--transition--duration--base)
        var(--wp--custom--transition--timing--ease),
      opacity var(--wp--custom--transition--duration--base)
        var(--wp--custom--transition--timing--ease);
  }

  :where(.c-card-unified__title a:hover) {
    opacity: 0.8;
  }

  /* Clinic - ゴールド */
  :where(
      .c-card-unified[data-post-type="clinic"] .c-card-unified__title a:hover
    ) {
    color: var(--wp--preset--color--tertiary);
  }

  /* Treatment - ピンク */
  :where(
      .c-card-unified[data-post-type="treatment"] .c-card-unified__title a:hover
    ) {
    color: var(--wp--preset--color--primary);
  }

  /* Column - 緑 */
  :where(
      .c-card-unified[data-post-type="c-column"] .c-card-unified__title a:hover
    ) {
    color: var(--wp--preset--color--success);
  }

  /* -----------------------------
   概要説明
------------------------------ */
  :where(.c-card-unified__excerpt) {
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--gray-dark);
    line-height: var(--wp--custom--line-height--base);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  @media (min-width: 768px) {
    :where(.c-card-unified__excerpt) {
      -webkit-line-clamp: 3;
    }
  }

  /* -----------------------------
   タグエリア
------------------------------ */
  :where(.c-card-unified__tags) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--2-xs);
  }

  :where(.c-card-unified__tag) {
    display: inline-flex;
    align-items: center;
    padding: var(--wp--preset--spacing--3-xs) var(--wp--preset--spacing--xs);
    font-size: var(--wp--preset--font-size--sm);
    border: var(--wp--custom--border--width--1) solid;
    border-radius: var(--wp--custom--border--radius--sm);
  }

  /* Clinic - ゴールド */
  :where(.c-card-unified[data-post-type="clinic"] .c-card-unified__tag) {
    color: var(--wp--preset--color--tertiary-dark);
    background: var(--wp--preset--color--tertiary-lightest);
    border-color: var(--wp--preset--color--tertiary-lighter);
  }

  /* Treatment - ピンク */
  :where(.c-card-unified[data-post-type="treatment"] .c-card-unified__tag) {
    color: var(--wp--preset--color--primary-dark);
    background: var(--wp--preset--color--primary-lightest);
    border-color: var(--wp--preset--color--primary-lighter);
  }

  /* Column - 緑 */
  :where(.c-card-unified[data-post-type="c-column"] .c-card-unified__tag) {
    color: var(--wp--preset--color--success-dark);
    background: var(--wp--preset--color--success-lightest);
    border-color: var(--wp--preset--color--success-light);
  }

  /* -----------------------------
   詳細へボタン
------------------------------ */
  :where(.c-card-unified__link) {
    position: absolute;
    bottom: var(--wp--preset--spacing--base);
    right: var(--wp--preset--spacing--base);
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--xs);
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: var(--wp--custom--font-weight--bold);
    color: var(--wp--preset--color--white);
    border: none;
    border-radius: var(--wp--custom--border--radius--sm);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background var(--wp--custom--transition--duration--base)
        var(--wp--custom--transition--timing--ease),
      opacity var(--wp--custom--transition--duration--base)
        var(--wp--custom--transition--timing--ease);
  }

  @media (min-width: 768px) {
    :where(.c-card-unified__link) {
      padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--base);
    }
  }

  :where(.c-card-unified__link:hover) {
    opacity: 0.9;
  }

  /* Clinic - ゴールド */
  :where(.c-card-unified[data-post-type="clinic"] .c-card-unified__link) {
    background: var(--wp--preset--color--tertiary);
  }

  :where(.c-card-unified[data-post-type="clinic"] .c-card-unified__link:hover) {
    background: var(--wp--preset--color--tertiary-dark);
  }

  /* Treatment - ピンク */
  :where(.c-card-unified[data-post-type="treatment"] .c-card-unified__link) {
    background: var(--wp--preset--color--primary);
  }

  :where(
      .c-card-unified[data-post-type="treatment"] .c-card-unified__link:hover
    ) {
    background: var(--wp--preset--color--primary-dark);
  }

  /* Column - 緑 */
  :where(.c-card-unified[data-post-type="c-column"] .c-card-unified__link) {
    background: var(--wp--preset--color--success);
  }

  :where(
      .c-card-unified[data-post-type="c-column"] .c-card-unified__link:hover
    ) {
    background: var(--wp--preset--color--success-dark);
  }

  :where(.c-card-unified__link-icon) {
    font-size: var(--wp--preset--font-size--base);
  }

  @media (min-width: 768px) {
    :where(.c-card-unified__link-icon) {
      font-size: var(--wp--preset--font-size--lg);
    }
  }
}