/* ============================================================
   AucKit start LP — 操作できる Before/After モック
   index.html のインラインCSSと同じ :root 変数を使用
   ============================================================ */

/* ---- 共通: ブラウザ枠 ---- */
.mock-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.mock-col{min-width:0;}
.mock-col-label{
  font-weight:700;font-size:13.5px;margin-bottom:8px;
  display:flex;align-items:center;gap:7px;
}
.mock-col-label.is-before{color:#b23a2a;}
.mock-col-label.is-after{color:var(--blue-dark);}
.mock-col-label::before{
  font-weight:900;width:20px;height:20px;border-radius:6px;
  display:grid;place-items:center;font-size:11px;flex:none;
}
.mock-col-label.is-before::before{content:"\2715";background:#fbeceb;color:#b23a2a;}
.mock-col-label.is-after::before{content:"\2713";background:var(--blue-soft);color:var(--blue-dark);}

.browser{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-sm);background:#fff;
}
.browser-bar{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;background:#f4f5f7;border-bottom:1px solid var(--line);
}
.browser-dots{display:flex;gap:5px;flex:none;}
.browser-dots i{width:9px;height:9px;border-radius:50%;display:block;}
.browser-dots i:nth-child(1){background:#ff5f57;}
.browser-dots i:nth-child(2){background:#febc2e;}
.browser-dots i:nth-child(3){background:#28c840;}
.browser-url{
  flex:1;background:#fff;border:1px solid #e3ddd1;border-radius:7px;
  font-size:11px;color:#9b958c;padding:4px 10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* スクロールする画面領域 */
.screen{
  height:340px;overflow-y:auto;background:#fff;
  -webkit-overflow-scrolling:touch;
}
.screen::-webkit-scrollbar{width:10px;}
.screen::-webkit-scrollbar-thumb{
  background:#d7d2c7;border-radius:6px;border:3px solid #fff;
}
.screen-pad{padding:12px;}

/* スクロールできることを示すヒント */
.scroll-hint{
  text-align:center;font-size:11.5px;color:var(--muted);
  margin-top:7px;
}
.scroll-hint b{color:var(--ink);}

/* ============================================================
   ① ② 出品リスト(出品中 / 終了分)
   ============================================================ */
.yj-toolbar{
  display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px;
  background:#fbfaf7;border-bottom:1px solid var(--line);
  font-size:11px;color:var(--muted);
}
.yj-toolbar span{
  background:#fff;border:1px solid var(--line);border-radius:5px;
  padding:3px 8px;
}
.yj-toolbar span.on{background:var(--blue);color:#fff;border-color:var(--blue);}

/* --- Before: ヤフオク純正風カード --- */
.lst-card{
  display:flex;gap:12px;padding:14px 6px;
  border-bottom:1px solid var(--line);
}
.lst-card .thumb{
  width:96px;height:96px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,#eef0f3,#dfe3e8);
  display:grid;place-items:center;color:#aab0b8;font-size:26px;
}
.lst-card .body{min-width:0;flex:1;}
.lst-card .ttl{
  font-size:13px;font-weight:500;color:#1f1f1c;line-height:1.5;
  margin-bottom:7px;
}
.lst-card .meta{font-size:12px;color:#6f6a62;line-height:1.9;}
.lst-card .meta b{color:#c0392b;font-weight:700;}
.lst-card .meta .id{color:#9b958c;font-size:11px;}

/* --- After: AucKit コンパクト行 --- */
.lst-compact{width:100%;border-collapse:collapse;font-size:11.5px;}
.lst-compact thead th{
  position:sticky;top:0;background:#f1efe9;color:#5f5b53;
  font-weight:700;padding:6px 6px;text-align:left;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.lst-compact tbody td{
  padding:6px 6px;border-bottom:1px solid #f0ece2;
  color:#2c2722;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lst-compact tbody td.ttl{max-width:150px;}
.lst-compact tbody tr:hover{background:var(--blue-soft);}
.lst-compact .num{text-align:right;font-variant-numeric:tabular-nums;}
.lst-compact .price{color:#c0392b;font-weight:700;}
/* 取引状態の行色 */
.lst-compact tr.st-need td:first-child{box-shadow:inset 3px 0 0 var(--coral);}
.lst-compact tr.st-done td:first-child{box-shadow:inset 3px 0 0 var(--green);}
.lst-compact tr.st-nobid td:first-child{box-shadow:inset 3px 0 0 #c9c3b6;}
.pill{
  display:inline-block;font-size:10px;font-weight:700;
  padding:1px 7px;border-radius:999px;
}
.pill.need{background:var(--coral-soft);color:var(--coral-dark);}
.pill.done{background:var(--green-soft);color:var(--green);}
.pill.nobid{background:#f0ece2;color:#8c8579;}
.pill.live{background:var(--blue-soft);color:var(--blue-dark);}
.pill.soon{background:#fde7d8;color:#b9651b;}

/* ============================================================
   ③ 取引メッセージ
   ============================================================ */
.tn-panel{padding:14px 12px;}
.tn-head{
  font-weight:700;font-size:13px;color:#2c2722;
  padding:7px 10px;background:#f1efe9;border-radius:6px;margin-bottom:12px;
}
.tn-tplrow{
  display:flex;gap:8px;align-items:flex-start;
  font-size:11.5px;margin-bottom:9px;
}
.tn-tplrow .lab{color:#6f6a62;flex:none;width:62px;padding-top:5px;}
.tn-tplrow .btns{display:flex;gap:6px;flex-wrap:wrap;}
.tpl-btn{
  font-size:11.5px;border:1px solid #c9c3b6;background:#fff;
  border-radius:7px;padding:5px 11px;cursor:pointer;color:#2c2722;
  transition:background .12s,border-color .12s;
}
.tpl-btn:hover{background:var(--cream);border-color:var(--blue);}
.tpl-btn:active{background:var(--blue-soft);}
.var-btn{
  font-size:11px;border:1px dashed #b9a9d6;background:#f6f3fb;
  border-radius:7px;padding:5px 10px;cursor:pointer;color:#6a4ea3;
  font-weight:700;transition:background .12s;
}
.var-btn:hover{background:#ece5f7;}
.tn-textarea{
  width:100%;min-height:120px;resize:vertical;margin-top:4px;
  border:1px solid #c9c3b6;border-radius:8px;padding:10px 11px;
  font:inherit;font-size:12.5px;line-height:1.7;color:#1f1f1c;
  box-sizing:border-box;
}
.tn-textarea:focus{outline:2px solid var(--blue-soft);border-color:var(--blue);}
.tn-textarea::placeholder{color:#b3ada3;}
.tn-foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;gap:10px;
}
.tn-hint{font-size:11px;color:var(--muted);}
.tn-send{
  font-size:12px;font-weight:700;color:#5f5b53;
  background:#f1efe9;border:1px solid #d7d2c7;border-radius:7px;
  padding:7px 16px;cursor:default;flex:none;
}

/* ============================================================
   ④ 送り状コピー
   ============================================================ */
.sh-panel{padding:14px 12px;font-size:12px;}
.sh-section-ttl{
  font-weight:700;color:#2c2722;padding:6px 10px;
  background:#f1efe9;border-radius:6px;margin-bottom:10px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.sh-row{display:flex;gap:8px;padding:5px 4px;line-height:1.7;}
.sh-row .k{color:#6f6a62;width:62px;flex:none;}
.sh-row .v{color:#1f1f1c;min-width:0;}
.copy-all-btn{
  font-size:11.5px;font-weight:700;cursor:pointer;
  border:1px solid #1d9e75;background:#e1f5ee;color:#0f6e56;
  border-radius:7px;padding:5px 12px;flex:none;
  transition:background .12s;
}
.copy-all-btn:hover{background:#d0efe3;}
.copy-all-btn.copied{background:#0f6e56;color:#fff;border-color:#0f6e56;}

/* 送り状フォーム側 */
.sh-paste-btn{
  font-size:12px;font-weight:700;cursor:pointer;color:#fff;
  background:var(--coral);border:none;border-radius:8px;padding:7px 14px;
  transition:background .12s,opacity .12s;
}
.sh-paste-btn:hover{background:var(--coral-dark);}
.sh-paste-btn:disabled{background:#d8b3a4;cursor:not-allowed;}
.sh-form-row{
  display:flex;gap:8px;align-items:center;padding:5px 4px;
}
.sh-form-row .k{color:#6f6a62;width:74px;flex:none;font-size:11.5px;}
.sh-field{
  flex:1;min-width:0;border:1px solid #d9d3c7;border-radius:6px;
  padding:6px 9px;font-size:12px;color:#1f1f1c;background:#fff;
  transition:background .25s,border-color .25s;
}
.sh-field.filled{background:var(--blue-soft);border-color:var(--blue);}
.sh-field.empty{color:#b3ada3;}
.sh-note{
  font-size:11px;border-radius:8px;padding:8px 10px;margin-top:10px;
  line-height:1.6;
}
.sh-note.before{background:#fbeceb;color:#8a4034;}
.sh-note.after{background:var(--green-soft);color:#3f7a55;}

/* ============================================================
   操作リセット & サンプル注記
   ============================================================ */
.mock-actions{
  display:flex;justify-content:center;align-items:center;gap:14px;
  margin-top:14px;flex-wrap:wrap;
}
.mock-reset{
  font-size:11.5px;color:var(--muted);background:none;border:none;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.mock-reset:hover{color:var(--ink);}
.mock-sample-note{font-size:11px;color:#9b958c;}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media(max-width:760px){
  .mock-pair{grid-template-columns:1fr;gap:22px;}
  .screen{height:300px;}
  .lst-compact{font-size:11px;}
  .tn-tplrow{flex-direction:column;gap:5px;}
  .tn-tplrow .lab{width:auto;padding-top:0;}
}