/* =========================================
   component.css  |  共通UI (c-*)
   ========================================= */

/* ボタン */
.c-button{
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-text);
  display:inline-flex;align-items:center;gap:.6em;
  padding:.72em 1.1em;border-radius: var(--radius-md);
  border:1px solid var(--color-line);background:var(--btn-bg);color:var(--btn-fg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur);
  box-shadow: var(--shadow-sm);
}
.c-button:hover{transform:translateY(-1px);text-decoration:none;box-shadow: var(--shadow-md)}
.c-button--primary{--btn-bg: var(--color-main); --btn-fg: #fff; border-color: transparent}
.c-button--secondary{--btn-bg:#0d0d0d0d; --btn-fg: var(--color-text)}
.c-button--ghost{background:transparent;border-color:var(--color-main);color:var(--color-main)}
.c-button--block{display:flex;justify-content:center;width:100%}
.c-button--lg{padding:.9em 1.4em;border-radius: var(--radius-lg);font-weight:700}

/* リンク装飾 */
.c-link{position:relative}
.c-link--arrow::after{
  content:"→"; margin-left:.4em; transition:transform var(--dur) var(--ease)
}
.c-link--arrow:hover::after{transform:translateX(2px)}

/* ナビゲーション */
.c-nav{}
.c-nav__list{display:flex;gap: clamp(var(--space-4),2vw,var(--space-6))}
.c-nav__link{
  display:block;padding:.5rem .75rem;border-radius:10px;
}
.c-nav__link[aria-current="page"], .c-nav__link.is-active{
  background: color-mix(in oklab, var(--color-main) 15%, white);
}

/* パンくず */
.c-breadcrumb{font-size:.9rem;color:var(--color-muted)}
.c-breadcrumb__list{display:flex;gap:.5rem;flex-wrap:wrap}
.c-breadcrumb__sep{opacity:.6}

/* セクション見出し */
.c-section-title{display:grid;gap: var(--space-2)}
.c-section-title__eyebrow{font-size:.9rem;letter-spacing:.08em;color:var(--color-main);text-transform:uppercase}
.c-section-title__title{font-size: var(--fs-h2)}
.c-section-title__lead{color:var(--color-muted);max-width:70ch}

/* カード（基底） */
.c-card{
  background: var(--color-surface);
  border:1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  display:flex;flex-direction:column;min-height:0;
}
.c-card__thumb{width:100%;aspect-ratio: 3/2;object-fit:cover}
.c-card__head{padding: var(--space-5) var(--space-5) 0}
.c-card__title{font-size: var(--fs-h3)}
.c-card__meta{color:var(--color-muted);margin-top: var(--space-2)}
.c-card__desc{padding: var(--space-4) var(--space-5); color:#222}
.c-card__footer{margin-top:auto;padding: var(--space-4) var(--space-5); border-top:1px solid var(--color-line)}
.c-card--flat{box-shadow:none}
.c-card--shadow{box-shadow: var(--shadow-md)}
.c-card--border{border:2px solid color-mix(in oklab, var(--color-main) 35%, white)}

/* バリエーション */
.c-card--news .c-card__meta{color:var(--color-main)}
.c-card--case .c-card__thumb{aspect-ratio:16/9}
.c-card--engineer .c-card__meta{display:flex;gap:8px;flex-wrap:wrap}

/* タグ/バッジ */
.c-tag{
  display:inline-flex;align-items:center;gap:.4em;
  border:1px solid var(--color-line);border-radius:999px;
  padding:.25em .7em;font-size:.85rem;background:#fff
}
.c-tag--category{border-color: color-mix(in oklab, var(--color-main) 40%, white)}
.c-tag--skill{background: color-mix(in oklab, var(--color-main) 8%, white)}
.c-badge{display:inline-flex;align-items:center;border-radius:999px;padding:.2em .6em;font-size:.75rem;background:#eee}
.c-badge--new{background: color-mix(in oklab, var(--color-main) 25%, white);color:#073036}
.c-badge--hot{background:#ffefe6;color:#a84200}

/* 表 */
.c-table{width:100%;border:1px solid var(--color-line);border-radius: var(--radius-md);overflow:hidden;background:#fff}
.c-table th,.c-table td{padding:12px 16px;border-bottom:1px solid var(--color-line);text-align:left;vertical-align:top}
.c-table thead th{background: #fafbfc;font-weight:700}
.c-table--striped tbody tr:nth-child(odd){background:#fafafa}

/* FAQ（ディスクロージャ） */
.c-faq{}
.c-faq__item{border-top:1px solid var(--color-line)}
.c-faq__q{display:flex;justify-content:space-between;gap:16px;padding:16px;cursor:pointer}
.c-faq__a{padding:0 16px 16px;color:#222;display:none}
.c-faq__item[open] .c-faq__a{display:block}

/* ページネーション */
.c-pagination__list{display:flex;gap:8px;flex-wrap:wrap}
.c-pagination__link{
  display:inline-flex;min-width:36px;height:36px;align-items:center;justify-content:center;
  border:1px solid var(--color-line);border-radius:10px;background:#fff
}
.c-pagination__link[aria-current="page"]{background:var(--color-main);color:#fff;border-color:transparent}