/* =====================================================
   Moi-Moi Library — library.css
   ブランドカラー: --primary #2A7D6E / --accent #E8845C
   ===================================================== */

:root {
  --mml-primary:       #2A7D6E;
  --mml-primary-dark:  #1d5c51;
  --mml-primary-light: #3AAFA9;
  --mml-primary-bg:    #e0f2f0;
  --mml-accent:        #E8845C;
  --mml-accent-dark:   #d4714a;
  --mml-warm:          #F5EDE3;
  --mml-gray-100:      #F9FAFB;
  --mml-gray-200:      #E8ECEF;
  --mml-gray-500:      #636E72;
  --mml-gray-800:      #2D3436;
  --mml-white:         #FFFFFF;
  --mml-shadow-sm:     0 1px 4px rgba(0,0,0,.05);
  --mml-shadow-md:     0 2px 16px rgba(0,0,0,.08);
  --mml-shadow-lg:     0 6px 28px rgba(0,0,0,.12);
  --mml-r-md:          8px;
  --mml-r-lg:          14px;
  --mml-r-xl:          20px;
  --mml-ease:          .3s ease;
  --mml-max:           1160px;
  --mml-font:          'Noto Sans JP','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
}

/* ===== ベース ===== */
.mml-main { font-family: var(--mml-font); color: var(--mml-gray-800); line-height: 1.8; }
.mml-wrap { max-width: var(--mml-max); margin: 0 auto; padding: 0 24px; }

/* ===== ボタン ===== */
.mml-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 28px; border-radius: var(--mml-r-md);
  font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: var(--mml-ease); border: 2px solid transparent;
  text-decoration: none; line-height: 1;
}
.mml-btn-primary          { background: var(--mml-accent);   color: var(--mml-white); border-color: var(--mml-accent); }
.mml-btn-primary:hover    { background: var(--mml-accent-dark); border-color: var(--mml-accent-dark); transform: translateY(-2px); box-shadow: var(--mml-shadow-lg); }
.mml-btn-green            { background: var(--mml-primary);  color: var(--mml-white); border-color: var(--mml-primary); }
.mml-btn-green:hover      { background: var(--mml-primary-dark); border-color: var(--mml-primary-dark); transform: translateY(-2px); }
.mml-btn-green-outline    { background: transparent; color: var(--mml-primary); border-color: var(--mml-primary); }
.mml-btn-green-outline:hover { background: var(--mml-primary); color: var(--mml-white); }
.mml-btn-outline-white    { background: transparent; color: var(--mml-white); border-color: rgba(255,255,255,.8); }
.mml-btn-outline-white:hover { background: var(--mml-white); color: var(--mml-primary); }
.mml-btn-full             { width: 100%; text-align: center; }
.mml-btn:focus-visible    { outline: 3px solid var(--mml-primary); outline-offset: 2px; }

/* ===== ヒーロー ===== */
.mml-hero {
  background: linear-gradient(135deg, var(--mml-primary-dark) 0%, var(--mml-primary) 55%, var(--mml-primary-light) 100%);
  padding: 72px 0 60px; position: relative; overflow: hidden;
}
.mml-hero::before {
  content: ''; position: absolute; top: -20%; right: -5%;
  width: 480px; height: 480px; background: rgba(255,255,255,.06);
  border-radius: 50%; pointer-events: none;
}
.mml-hero-inner    { position: relative; z-index: 1; max-width: 680px; }
.mml-hero-label    { display: inline-block; background: rgba(255,255,255,.18); color: var(--mml-white); font-size: .72rem; font-weight: 600; padding: 3px 12px; border-radius: 20px; margin-bottom: 16px; letter-spacing: .08em; border: 1px solid rgba(255,255,255,.3); }
.mml-hero-title    { font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 700; color: var(--mml-white); margin-bottom: 16px; line-height: 1.3; }
.mml-hero-desc     { font-size: clamp(.9rem, 2vw, 1rem); color: rgba(255,255,255,.88); line-height: 2; margin-bottom: 28px; }

/* ===== 検索フォーム ===== */
.mml-search-form   { width: 100%; max-width: 560px; }
.mml-search-wrap   { display: flex; align-items: center; background: var(--mml-white); border-radius: var(--mml-r-md); padding: 6px 6px 6px 14px; box-shadow: var(--mml-shadow-lg); gap: 8px; }
.mml-search-icon   { color: var(--mml-gray-500); flex-shrink: 0; }
.mml-search-input  { flex: 1; border: none; outline: none; font-size: .95rem; font-family: var(--mml-font); color: var(--mml-gray-800); background: transparent; min-width: 0; }
.mml-search-input::placeholder { color: var(--mml-gray-500); }
.mml-search-btn    { background: var(--mml-primary); color: var(--mml-white); border: none; border-radius: 6px; padding: 8px 18px; font-weight: 700; font-size: .88rem; cursor: pointer; white-space: nowrap; transition: var(--mml-ease); font-family: var(--mml-font); }
.mml-search-btn:hover { background: var(--mml-primary-dark); }

/* ===== 統計バー ===== */
.mml-stats-bar      { background: var(--mml-primary-dark); padding: 20px 0; }
.mml-stats-grid     { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.mml-stat           { text-align: center; }
.mml-stat-num       { display: block; font-size: 1.8rem; font-weight: 700; color: var(--mml-white); line-height: 1; }
.mml-stat-label     { font-size: .75rem; color: rgba(255,255,255,.7); margin-top: 4px; }

/* ===== セクション共通 ===== */
.mml-section        { padding: 72px 0; }
.mml-section-alt    { background: var(--mml-gray-100); }
.mml-section-head   { text-align: center; margin-bottom: 44px; }
.mml-s-label        { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--mml-primary); text-transform: uppercase; margin-bottom: 8px; }
.mml-s-title        { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: var(--mml-gray-800); position: relative; display: inline-block; }
.mml-s-title::after { content: ''; display: block; width: 40px; height: 3px; background: var(--mml-accent); border-radius: 2px; margin: 10px auto 0; }
.mml-section-foot   { text-align: center; margin-top: 36px; }

/* ===== カテゴリグリッド ===== */
.mml-cat-grid       { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mml-cat-card       { display: flex; flex-direction: column; gap: 6px; background: var(--mml-white); border-radius: var(--mml-r-lg); padding: 24px 20px; border: 2px solid var(--mml-gray-200); text-decoration: none; transition: var(--mml-ease); }
.mml-cat-card:hover { border-color: var(--mml-primary); box-shadow: var(--mml-shadow-md); transform: translateY(-3px); }
.mml-cat-name       { font-size: 1rem; font-weight: 700; color: var(--mml-primary-dark); }
.mml-cat-count      { font-size: .8rem; color: var(--mml-gray-500); }
.mml-cat-desc       { font-size: .82rem; color: var(--mml-gray-500); line-height: 1.7; }

/* ===== 技法グリッド（一覧・新着共通） ===== */
.mml-tech-grid         { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mml-tech-card         { display: flex; flex-direction: column; gap: 10px; background: var(--mml-white); border-radius: var(--mml-r-lg); padding: 24px 20px 20px; border: 1.5px solid var(--mml-gray-200); text-decoration: none; transition: var(--mml-ease); }
.mml-tech-card:hover   { border-color: var(--mml-primary); box-shadow: var(--mml-shadow-md); transform: translateY(-3px); }
.mml-tech-cat-badge    { display: inline-block; background: var(--mml-primary-bg); color: var(--mml-primary); font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-decoration: none; }
.mml-tech-title        { font-size: 1rem; font-weight: 700; color: var(--mml-gray-800); line-height: 1.4; }
.mml-tech-excerpt      { font-size: .83rem; color: var(--mml-gray-500); line-height: 1.75; flex: 1; }
.mml-tech-foot         { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; }
.mml-confirmed-date    { font-size: .72rem; color: var(--mml-gray-500); margin-left: auto; }

/* ===== バッジ・タグ ===== */
.mml-badge             { display: inline-block; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.mml-badge-初級        { background: #e0f2f0; color: #1d5c51; }
.mml-badge-中級        { background: #fff3e0; color: #e65100; }
.mml-badge-上級        { background: #fce4ec; color: #c62828; }
.mml-tag               { display: inline-block; background: var(--mml-gray-200); color: var(--mml-gray-500); font-size: .72rem; padding: 2px 8px; border-radius: 4px; }

/* ===== CTAセクション ===== */
.mml-cta-section    { background: linear-gradient(135deg, var(--mml-primary-dark), var(--mml-primary)); padding: 72px 0; text-align: center; }
.mml-cta-title      { font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 700; color: var(--mml-white); margin-bottom: 14px; }
.mml-cta-desc       { font-size: .93rem; color: rgba(255,255,255,.85); line-height: 2; margin-bottom: 32px; }
.mml-cta-btns       { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ===== アーカイブヘッダー ===== */
.mml-archive-header  { background: var(--mml-primary-bg); padding: 40px 0 32px; border-bottom: 1px solid var(--mml-gray-200); }
.mml-archive-title   { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--mml-primary-dark); margin: 12px 0 20px; }
.mml-archive-body    { padding: 36px 24px; }

/* ===== パンくず ===== */
.mml-breadcrumb      { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: .8rem; color: var(--mml-gray-500); }
.mml-breadcrumb a    { color: var(--mml-primary); text-decoration: none; }
.mml-breadcrumb a:hover { text-decoration: underline; }
.mml-breadcrumb span { color: var(--mml-gray-500); }

/* ===== フィルターバー ===== */
.mml-filter-bar      { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.mml-filter-btn      { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 20px; background: var(--mml-white); border: 1.5px solid var(--mml-gray-200); font-size: .83rem; font-weight: 500; color: var(--mml-gray-800); text-decoration: none; transition: var(--mml-ease); }
.mml-filter-btn:hover, .mml-filter-btn.is-active { background: var(--mml-primary); color: var(--mml-white); border-color: var(--mml-primary); }
.mml-filter-count    { background: rgba(0,0,0,.1); border-radius: 10px; padding: 1px 6px; font-size: .7rem; }
.mml-filter-btn.is-active .mml-filter-count { background: rgba(255,255,255,.25); }

/* ===== 件数表示 ===== */
.mml-result-count    { font-size: .88rem; color: var(--mml-gray-500); margin-bottom: 20px; }
.mml-result-count strong { color: var(--mml-gray-800); font-weight: 700; }

/* ===== ページネーション ===== */
.mml-pagination      { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 40px; }
.mml-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--mml-r-md); font-size: .88rem; border: 1.5px solid var(--mml-gray-200); color: var(--mml-gray-800); text-decoration: none; transition: var(--mml-ease); }
.mml-pagination .page-numbers:hover { border-color: var(--mml-primary); color: var(--mml-primary); }
.mml-pagination .page-numbers.current { background: var(--mml-primary); color: var(--mml-white); border-color: var(--mml-primary); }
.mml-pagination .prev, .mml-pagination .next { width: auto; padding: 0 12px; }

/* ===== 空状態 ===== */
.mml-empty-state     { text-align: center; padding: 60px 0; color: var(--mml-gray-500); }
.mml-empty-state p   { margin-bottom: 20px; }

/* ===== 詳細ページレイアウト ===== */
.mml-single-layout   { display: grid; grid-template-columns: 1fr 300px; gap: 40px; margin-top: 28px; }
.mml-single-main     { min-width: 0; }

/* 詳細ヘッダー */
.mml-single-header   { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--mml-gray-200); }
.mml-single-title    { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; color: var(--mml-gray-800); margin: 10px 0 14px; line-height: 1.35; }
.mml-single-badges   { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mml-single-date     { font-size: .78rem; color: var(--mml-gray-500); }

/* 本文 */
.mml-single-content               { font-size: .95rem; line-height: 2; }
.mml-single-content h2            { font-size: 1.3rem; font-weight: 700; color: var(--mml-primary-dark); margin: 40px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--mml-primary-bg); }
.mml-single-content h3            { font-size: 1.1rem; font-weight: 700; color: var(--mml-gray-800); margin: 30px 0 12px; }
.mml-single-content p             { margin-bottom: 18px; }
.mml-single-content ul, .mml-single-content ol { padding-left: 20px; margin-bottom: 18px; }
.mml-single-content li            { margin-bottom: 6px; }
.mml-single-content blockquote    { border-left: 4px solid var(--mml-primary-light); padding: 12px 20px; background: var(--mml-primary-bg); border-radius: 0 var(--mml-r-md) var(--mml-r-md) 0; margin: 20px 0; color: var(--mml-gray-800); }
.mml-single-content a             { color: var(--mml-primary); text-decoration: underline; }

/* タグ */
.mml-single-tags     { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 28px 0; }
.mml-tags-label      { font-size: .82rem; color: var(--mml-gray-500); }
.mml-tag-link        { display: inline-block; color: var(--mml-primary); font-size: .82rem; background: var(--mml-primary-bg); padding: 4px 10px; border-radius: 20px; text-decoration: none; transition: var(--mml-ease); }
.mml-tag-link:hover  { background: var(--mml-primary); color: var(--mml-white); }

/* 情報ソースボックス */
.mml-source-box         { background: var(--mml-gray-100); border: 1px solid var(--mml-gray-200); border-radius: var(--mml-r-lg); padding: 24px; margin: 32px 0; }
.mml-source-box-title   { display: flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 700; color: var(--mml-primary-dark); margin-bottom: 14px; }
.mml-source-dl          { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; font-size: .85rem; }
.mml-source-dl dt       { color: var(--mml-gray-500); font-weight: 500; }
.mml-source-dl dd       { color: var(--mml-gray-800); }
.mml-source-note        { font-size: .78rem; color: var(--mml-gray-500); margin-top: 12px; }
.mml-source-note a      { color: var(--mml-primary); }

/* 記事前後ナビ */
.mml-post-nav           { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--mml-gray-200); }
.mml-post-nav-link      { display: flex; flex-direction: column; gap: 4px; text-decoration: none; padding: 12px; border: 1.5px solid var(--mml-gray-200); border-radius: var(--mml-r-md); transition: var(--mml-ease); }
.mml-post-nav-link:hover { border-color: var(--mml-primary); background: var(--mml-primary-bg); }
.mml-post-nav-dir       { font-size: .72rem; color: var(--mml-gray-500); }
.mml-post-nav-title     { font-size: .85rem; font-weight: 700; color: var(--mml-primary-dark); }
.mml-post-nav-link--next { text-align: right; }

/* ===== サイドバー ===== */
.mml-sidebar-card        { background: var(--mml-white); border: 1.5px solid var(--mml-gray-200); border-radius: var(--mml-r-lg); padding: 20px; margin-bottom: 20px; }
.mml-sidebar-card-title  { font-size: .88rem; font-weight: 700; color: var(--mml-primary-dark); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--mml-gray-200); }
.mml-sidebar-list        { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.mml-sidebar-item        { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 6px; text-decoration: none; transition: var(--mml-ease); }
.mml-sidebar-item:hover  { background: var(--mml-primary-bg); }
.mml-sidebar-item-title  { font-size: .85rem; font-weight: 500; color: var(--mml-gray-800); line-height: 1.4; }
.mml-sidebar-item-cat    { font-size: .72rem; color: var(--mml-primary); }
.mml-sidebar-cta         { background: var(--mml-primary-bg); border: 1.5px solid var(--mml-primary-light); border-radius: var(--mml-r-lg); padding: 20px; }
.mml-sidebar-cta-title   { font-size: .88rem; font-weight: 700; color: var(--mml-primary-dark); margin-bottom: 8px; }
.mml-sidebar-cta-text    { font-size: .82rem; color: var(--mml-gray-500); line-height: 1.75; margin-bottom: 14px; }

/* ===== レスポンシブ ===== */
@media (max-width: 1023px) {
  .mml-cat-grid  { grid-template-columns: repeat(2, 1fr); }
  .mml-tech-grid { grid-template-columns: repeat(2, 1fr); }
  .mml-single-layout { grid-template-columns: 1fr; }
  .mml-single-sidebar { order: -1; }
  .mml-sidebar-cta, .mml-sidebar-card { margin-bottom: 16px; }
}
@media (max-width: 767px) {
  .mml-hero { padding: 48px 0 40px; }
  .mml-stats-grid { gap: 24px; justify-content: center; }
  .mml-section { padding: 48px 0; }
  .mml-cat-grid  { grid-template-columns: 1fr 1fr; }
  .mml-tech-grid { grid-template-columns: 1fr; }
  .mml-cta-btns  { flex-direction: column; align-items: center; }
  .mml-post-nav  { grid-template-columns: 1fr; }
  .mml-source-dl { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .mml-cat-grid { grid-template-columns: 1fr; }
  .mml-filter-bar { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}