/* 商品マスタ整備（Product Master）— 社内検証ツール
   RiD エディトリアル白黒：マットブラック #181818 × オフホワイト #faf9f7 */

:root{
  --ink:#181818;
  --paper:#faf9f7;
  --line:#e3e0da;
  --muted:#8a857c;
  --accent:#1f7a6b;       /* 新データ＝ティールで「更新」を示す */
  --accent-soft:#e7f3f0;
  --warn:#b4541f;
  --warn-soft:#f6e7dd;
  --old:#9a948a;
  --radius:10px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Zen Kaku Gothic New",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
code{font-family:var(--mono);font-size:.92em;}

/* ── ヘッダ ── */
.pm-header{background:var(--ink);color:var(--paper);position:sticky;top:0;z-index:50;}
.pm-header-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:0 24px;height:62px;}
.pm-brand{display:flex;align-items:center;gap:12px;color:var(--paper);}
.pm-brand:hover{text-decoration:none;}
.pm-brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--paper);color:var(--ink);font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.5px;}
.pm-brand-text{display:flex;flex-direction:column;line-height:1.15;font-weight:700;}
.pm-brand-text small{font-weight:400;font-size:11px;color:#b8b3aa;letter-spacing:.04em;}
.pm-nav{display:flex;gap:18px;margin-left:8px;}
.pm-nav a{color:#d8d4cc;font-size:14px;padding:4px 2px;border-bottom:2px solid transparent;}
.pm-nav a:hover{color:var(--paper);text-decoration:none;border-bottom-color:#555;}
.pm-ver{margin-left:auto;font-family:var(--mono);font-size:12px;color:#7d786f;}

/* ── レイアウト ── */
.pm-main{max-width:1160px;margin:0 auto;padding:28px 24px 60px;}
.pm-page-head h1{font-size:24px;margin:0 0 6px;letter-spacing:.01em;}
.pm-lead{color:var(--muted);margin:0 0 18px;font-size:14px;}
.pm-muted{color:var(--muted);}
.pm-back{margin:0 0 10px;font-size:13px;}

/* ── 検索フォーム ── */
.pm-search{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:18px;}
.pm-search-row{display:flex;gap:10px;}
.pm-search-row input[type=search]{flex:1;font:inherit;padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper);}
.pm-search-row input[type=search]:focus{outline:2px solid var(--accent);border-color:var(--accent);}
.pm-search-row button{font:inherit;font-weight:600;padding:0 22px;border:0;border-radius:8px;background:var(--ink);color:var(--paper);cursor:pointer;}
.pm-search-row button:hover{background:#000;}
.pm-search-filters{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:12px;font-size:13px;color:var(--muted);}
.pm-search-filters select{font:inherit;margin-left:6px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);}
.pm-check{display:flex;align-items:center;gap:6px;}

.pm-result-count{font-size:14px;margin:6px 2px 12px;}

/* ── テーブル ── */
.pm-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;}
.pm-table{width:100%;border-collapse:collapse;font-size:14px;}
.pm-table th,.pm-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
.pm-table th{background:#f3f1ec;font-weight:600;font-size:12.5px;color:#5f5a51;white-space:nowrap;}
.pm-table tbody tr:hover{background:#faf8f4;}
.pm-table tr:last-child td{border-bottom:0;}
.pm-code{font-family:var(--mono);font-size:13px;}
.pm-link{white-space:nowrap;font-size:13px;}

/* ── 差分セル ── */
.pm-old{color:var(--old);}
.pm-struck{text-decoration:line-through;text-decoration-color:#c9c4bb;}
.pm-arrow{margin:0 7px;color:var(--muted);}
.pm-new{color:var(--accent);font-weight:600;}
.pm-same{color:var(--ink);}

/* ── 別名チップ ── */
.pm-aliases{display:flex;flex-wrap:wrap;gap:5px;}
.pm-chip{display:inline-block;background:#f0eee8;border:1px solid var(--line);border-radius:999px;padding:1px 10px;font-size:12px;color:#5f5a51;}

/* ── バッジ ── */
.pm-badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;white-space:nowrap;}
.pm-badge.is-todo{background:#eee;color:#666;}
.pm-badge.is-doing{background:#e5eef6;color:#2a5f86;}
.pm-badge.is-done{background:var(--accent-soft);color:var(--accent);}
.pm-badge.is-warn{background:var(--warn-soft);color:var(--warn);}

/* ── 詳細：見比べ ── */
.pm-detail-title{display:flex;align-items:center;gap:12px;}
.pm-detail-title h1{margin:0;}
.pm-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;margin:18px 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;}
.pm-compare-col{padding:18px 20px;}
.pm-col-old{background:#f7f5f1;}
.pm-col-new{background:var(--accent-soft);}
.pm-compare-col h2{font-size:13px;letter-spacing:.04em;margin:0 0 12px;color:#5f5a51;text-transform:none;}
.pm-col-new h2{color:var(--accent);}
.pm-compare-col dl{margin:0;display:grid;grid-template-columns:64px 1fr;row-gap:10px;column-gap:8px;}
.pm-compare-col dt{color:var(--muted);font-size:12px;padding-top:2px;}
.pm-compare-col dd{margin:0;font-size:15px;font-weight:500;}
.pm-compare-arrow{display:grid;place-items:center;padding:0 8px;background:#fff;color:var(--muted);font-size:20px;}

.pm-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0;}
.pm-meta-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:0 0 16px;}
.pm-meta-box h3{margin:0 0 10px;font-size:13px;color:#5f5a51;letter-spacing:.03em;}
.pm-relations{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.pm-relations li{display:flex;align-items:center;gap:10px;}
.pm-rel-type{display:inline-block;min-width:48px;font-size:12px;color:#fff;background:var(--ink);border-radius:6px;padding:1px 8px;text-align:center;}
.pm-reason{margin:0;white-space:normal;}

/* ── ダッシュボード ── */
.pm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:6px 0 22px;}
.pm-stat{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;color:var(--ink);}
.pm-stat:hover{text-decoration:none;border-color:var(--ink);}
.pm-stat-num{font-size:30px;font-weight:700;line-height:1;font-family:var(--mono);}
.pm-stat-label{font-size:12.5px;color:var(--muted);}
.pm-stat-warn .pm-stat-num{color:var(--warn);}

.pm-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.pm-bars a{display:grid;grid-template-columns:64px 1fr 36px;align-items:center;gap:10px;color:var(--ink);}
.pm-bars a:hover{text-decoration:none;}
.pm-bar-label{font-size:13px;}
.pm-bar{height:9px;background:#efece6;border-radius:999px;overflow:hidden;}
.pm-bar-fill{display:block;height:100%;background:var(--ink);border-radius:999px;}
.pm-bar-num{font-family:var(--mono);font-size:13px;text-align:right;color:var(--muted);}

.pm-catlist{list-style:none;margin:0;padding:0;}
.pm-catlist li{border-bottom:1px solid var(--line);}
.pm-catlist li:last-child{border-bottom:0;}
.pm-catlist a{display:flex;justify-content:space-between;padding:8px 2px;color:var(--ink);}
.pm-catlist a:hover{text-decoration:none;color:var(--accent);}
.pm-catnum{font-family:var(--mono);color:var(--muted);}

.pm-empty{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:40px;text-align:center;color:var(--muted);}

/* ── フッタ ── */
.pm-footer{border-top:1px solid var(--line);margin-top:40px;}
.pm-footer-inner{max-width:1160px;margin:0 auto;padding:18px 24px;display:flex;justify-content:space-between;font-size:12px;color:var(--muted);}

/* ── レスポンシブ ── */
@media (max-width:760px){
  .pm-header-inner{gap:14px;padding:0 16px;}
  .pm-brand-text small{display:none;}
  .pm-main{padding:20px 16px 50px;}
  .pm-compare{grid-template-columns:1fr;}
  .pm-compare-arrow{transform:none;background:transparent;height:auto;padding:2px 0;font-size:0;}
  .pm-compare-arrow::after{content:"↓";font-size:20px;color:var(--muted);}
  .pm-meta-grid{grid-template-columns:1fr;}
  .pm-stats{grid-template-columns:1fr 1fr;}
  .pm-search-row{flex-direction:column;}
  .pm-search-row button{padding:11px;}
}