/* au PAY マーケット出品ツール — 画面の見た目
 *
 * 🔴 新しい配色を考えない。makad_tool の style.css から写す
 *    （.claude\rules\rules_画面の見た目.md）。食い違ったら向こうの実物が正。
 *    写し元 = D:\Work\02_自動化\01_Amazon\makad_tool\src\web\static\style.css
 */
* { box-sizing: border-box; }
body { font-family:"Yu Gothic UI","Meiryo",system-ui,sans-serif; margin:0;
       background:#f4f6f8; color:#222; font-size:13px; }
a { color:#2f5751; }

/* ----- 上の帯 ----- */
.topbar { display:flex; align-items:center; gap:24px; padding:14px 24px;
          background:#48b3a8; color:#fff; box-shadow:0 1px 0 rgba(0,0,0,.1);
          flex-wrap:wrap; }
.topbar .logo { font-weight:700; font-size:20px; letter-spacing:.5px; }
.topbar .logo span { font-weight:400; font-size:12px; margin-left:6px; opacity:.85; }
.topbar nav { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.topbar nav a { color:#fff; text-decoration:none; padding:6px 16px;
                background:rgba(255,255,255,.15); border-radius:6px; font-weight:500; }
.topbar nav a:hover { background:rgba(255,255,255,.28); }
.topbar nav a.active { background:#fff; color:#1f7a72; }
.topbar .right { font-size:12px; opacity:.9; text-align:right; }
.topbar .right .exp-soon { color:#ffe08a; font-weight:700; }

/* ---- まとめメニュー（makad_tool の写し） ---- */
.topbar nav .menu { position:relative; }
.topbar nav .menu .menu-trig { color:#fff; padding:6px 16px; background:rgba(255,255,255,.15);
  border-radius:6px; font-weight:500; cursor:pointer; user-select:none; display:inline-block; }
.topbar nav .menu:hover .menu-trig,
.topbar nav .menu:focus-within .menu-trig,
.topbar nav .menu.active-group .menu-trig { background:rgba(255,255,255,.35); }
.topbar nav .menu .dropdown { display:none; position:absolute; top:100%; left:0; margin-top:6px;
  background:#3c9d93; border-radius:8px; min-width:190px; padding:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.18); z-index:200; flex-direction:column; gap:4px; }
/* トリガとdropdownの隙間を埋めて :hover を維持する */
.topbar nav .menu .dropdown::before { content:''; position:absolute; top:-10px; left:0; right:0; height:10px; }
.topbar nav .menu .dropdown.right { left:auto; right:0; }
.topbar nav .menu:hover .dropdown,
.topbar nav .menu:focus-within .dropdown { display:flex; }
.topbar nav .menu .dropdown a { background:transparent; padding:8px 12px; border-radius:4px;
  white-space:nowrap; color:#fff; text-decoration:none; }
.topbar nav .menu .dropdown a:hover { background:rgba(255,255,255,.22); }
.topbar nav .menu .dropdown a.active { background:rgba(255,255,255,.35); }
.topbar nav .menu .dropdown .dd-row { display:flex; align-items:stretch; gap:2px; }
.topbar nav .menu .dropdown .dd-row a { flex:1; }
.topbar nav .menu .dropdown .pin-star { background:transparent; color:rgba(255,255,255,.55);
  border:none; cursor:pointer; padding:0 8px; border-radius:4px; font-size:16px; line-height:1; }
.topbar nav .menu .dropdown .pin-star:hover { background:rgba(255,255,255,.18); color:#fff; }
.topbar nav .menu .dropdown .pin-star.on { color:#ffd24d; }

/* ---- お気に入り（★で留めたもの） ---- */
.topbar .pins { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.topbar .pins .pin-link { color:#fff; text-decoration:none; padding:6px 14px;
  background:rgba(255,255,255,.22); border-radius:6px; font-weight:500; font-size:12px;
  cursor:grab; }
.topbar .pins .pin-link:hover { background:rgba(255,255,255,.35); }
.topbar .pins .pin-link.active { background:#fff; color:#1f7a72; }
.pin-link.dragging { opacity:.4; }
.pin-link.drag-over { box-shadow: inset 3px 0 0 0 #fff; }

/* ---- 文字サイズ ---- */
.fontscale { margin-left:auto; display:flex; align-items:center; gap:4px; }
.fontscale .fs-label { color:#fff; opacity:.85; font-size:11px; margin-right:2px; }
.fontscale button { background:rgba(255,255,255,.18); color:#fff; border:none; border-radius:5px;
  cursor:pointer; font-weight:600; padding:4px 9px; line-height:1; }
.fontscale button[data-fs="s"] { font-size:11px; }
.fontscale button[data-fs="m"] { font-size:13px; }
.fontscale button[data-fs="l"] { font-size:16px; }
.fontscale button:hover { background:rgba(255,255,255,.32); }
.fontscale button.on { background:#fff; color:#1f7a72; }

/* ---- ワンクリックコピー ---- */
.copy-btn { display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #cfd8dc; background:#fff; color:#546e7a; cursor:pointer;
  border-radius:4px; padding:0 4px; margin-left:4px; font-size:11px; line-height:1.4;
  vertical-align:middle; height:18px; }
.copy-btn:hover { background:#eceff1; color:#1565c0; border-color:#90caf9; }
.copy-btn.copied { background:#2e7d32; color:#fff; border-color:#2e7d32; }

/* ---- 行アクション（控えめなグレーピル。hoverで主色） ---- */
.row-actions { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.row-actions a, .row-actions button, .row-actions span { display:inline-block; padding:2px 7px;
  background:#f4f5f7; color:#6a737d; text-decoration:none; border:1px solid #dde1e5;
  border-radius:3px; font-size:10.5px; font-weight:500; line-height:1.4; cursor:pointer; }
.row-actions a:hover, .row-actions button:hover { background:#e8edf2; color:#1565c0; border-color:#c5ced7; }

/* ----- 要約カード ----- */
.today-widget { padding:16px 24px 0; }
.today-card { background:linear-gradient(135deg,#3c9d93 0%,#54c4b9 100%); color:#fff;
              border-radius:8px; padding:14px 20px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.today-label { font-size:12px; opacity:.85; margin-bottom:6px; }
.today-stats { display:flex; gap:32px; flex-wrap:wrap; }
.today-stats > div { display:flex; flex-direction:column; }
.today-stats .k { font-size:11px; opacity:.85; }
.today-stats .v { font-size:18px; font-weight:700; }

/* ----- 面 ----- */
.wrap { padding:18px 24px; }
.card { background:#fff; border:1px solid #cfdfdb; border-radius:4px; padding:16px 18px;
        margin-bottom:16px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.card h2 { margin:0 0 12px; font-size:15px; color:#2f5751; }
.card h3 { margin:14px 0 8px; font-size:13px; color:#2f5751; }
.muted { color:#6a737d; font-size:12px; }
.weakest { color:#9099a4; font-size:11px; }

/* ----- 表 ----- */
table.grid { background:#fff; border-collapse:collapse; width:100%; }
table.grid th, table.grid td { padding:10px; border:1px solid #cfdfdb; text-align:left;
                               vertical-align:top; font-size:12.5px; }
table.grid th { background:#dbece9; font-weight:600; color:#2f5751; white-space:nowrap; }
table.grid td.num { text-align:right; white-space:nowrap;
                    font-variant-numeric:tabular-nums; }
table.grid tr:hover td { background:#f7fbfa; }
.thumb { width:100px; height:100px; object-fit:contain; background:#fff;
         border:1px solid #e3eae8; }
.scroll-x { overflow-x:auto; }

/* ----- 入力 ----- */
label.f { display:block; font-weight:600; color:#3b5750; margin:12px 0 4px; }
input[type=text], input[type=password], input[type=number], select {
  padding:6px 10px; border:1px solid #bbb; border-radius:4px; background:#fff;
  font-family:inherit; font-size:13px; min-width:280px; }
input[readonly] { background:#f4f5f7; color:#6a737d; }
button, .btn { padding:6px 18px; background:#48b3a8; color:#fff; border:0;
               border-radius:4px; cursor:pointer; font-weight:600; font-size:13px;
               text-decoration:none; display:inline-block; }
button:hover, .btn:hover { background:#3c9d93; }
button.sub, .btn.sub { background:#f4f5f7; color:#3b5750; border:1px solid #dde1e5; }
button.sub:hover, .btn.sub:hover { background:#e8edf2; color:#1565c0; }
button.danger { background:#a92620; }
button.danger:hover { background:#8e1f1a; }
button[disabled] { background:#c8d2d0; cursor:not-allowed; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px; }

/* ----- 状態（色だけで表さない: 文字＋色＋形） ----- */
.tag { display:inline-block; padding:2px 10px; border-radius:10px; font-size:11px;
       font-weight:600; border:1px solid; white-space:nowrap; }
.tag.ok   { background:#e4f2ea; color:#166f4a; border-color:#9ecfb6; }
.tag.warn { background:#fbf0df; color:#95591a; border-color:#e0bd85; }
.tag.bad  { background:#fdecea; color:#a92620; border-color:#e8a7a2; }
.tag.off  { background:#f4f5f7; color:#6a737d; border-color:#dde1e5; }

.note { padding:10px 14px; border-radius:4px; margin-bottom:14px; font-size:12.5px;
        border:1px solid; }
.note.ok   { background:#e4f2ea; color:#166f4a; border-color:#9ecfb6; }
.note.warn { background:#fbf0df; color:#95591a; border-color:#e0bd85; }
.note.bad  { background:#fdecea; color:#a92620; border-color:#e8a7a2; }
.note pre { margin:6px 0 0; white-space:pre-wrap; font-size:11.5px; }

/* ----- 読み取り専用の帯 ----- */
.ro-banner { background:#fbf0df; color:#95591a; border-bottom:1px solid #e0bd85;
             padding:8px 24px; font-size:12px; font-weight:600; }

code, pre { font-family:Consolas,"Courier New",monospace; }
code { background:#f4f5f7; padding:1px 5px; border-radius:3px; font-size:11.5px; }