/* ============================================================
   セラポケ — フリマ販売の道具箱
   デザインシステム
============================================================ */

:root{
  --bg: #fff7f3;
  --bg-deep: #ffefe9;
  --card: #ffffff;
  --ink: #3a2331;
  --ink-2: #5d4a55;
  --muted: #a08b98;
  --line: #f7e7ea;
  --line-2: #eed9df;

  --brand: #f83b6e;
  --brand-2: #ff9457;
  --brand-3: #ee2f8a;
  --brand-ink: #d42557;
  --grad: linear-gradient(135deg, #ffa25c 0%, #ff4d6d 52%, #f0327f 100%);
  --grad-soft: linear-gradient(135deg, #fff4e8 0%, #ffe9f0 100%);
  --grad-deep: linear-gradient(140deg, #ff8360 0%, #ff4d6d 55%, #ec3a86 120%);

  --ok: #0d9f68;
  --ok-bg: #e4f7ee;
  --warn: #c77800;
  --warn-bg: #fdf3df;
  --bad: #dd3344;
  --bad-bg: #fdeaec;
  --info: #3c6fe0;
  --info-bg: #e9effc;

  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;

  --shadow-sm: 0 2px 10px rgba(150, 50, 90, .07);
  --shadow-md: 0 10px 32px rgba(150, 50, 90, .12);
  --shadow-brand: 0 10px 26px rgba(248, 59, 110, .30);

  --sidebar-w: 264px;
  --topbar-h: 64px;
  --font: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(255, 170, 100, .20), transparent 60%),
    radial-gradient(700px 460px at -10% 30%, rgba(255, 90, 130, .10), transparent 60%),
    var(--bg);
  min-height: 100vh;
  line-height: 1.65;
}
h1,h2,h3,h4{ margin: 0; line-height: 1.4; }
p{ margin: 0; }
button{ font-family: inherit; }
input, select, textarea{ font-family: inherit; font-size: 15px; color: var(--ink); }
a{ color: var(--brand); }
::selection{ background: rgba(244, 59, 99, .22); }

/* ---------- レイアウト ---------- */
.app{ display: flex; min-height: 100vh; }
.main{
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
}
.view{
  flex: 1;
  padding: 26px clamp(16px, 3.4vw, 44px) 70px;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  animation: viewIn .28s ease both;
}
@keyframes viewIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: none; }
}

/* ---------- サイドバー ---------- */
.sidebar{
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  z-index: 60;
  transition: transform .28s ease;
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 6px 8px 18px;
}
.brand-mark{
  width: 44px; height: 44px; flex: none;
  border-radius: 14px;
  background: var(--grad);
  box-shadow: var(--shadow-brand);
  position: relative;
}
.brand-mark::after{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.95) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 62% 60%, rgba(255,255,255,.95) 0 5px, transparent 6px),
    radial-gradient(circle at 34% 72%, rgba(255,255,255,.8) 0 2.5px, transparent 3.5px);
}
.brand-name{
  display: block;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .02em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-tag{ display: block; font-size: 11px; color: var(--muted); font-weight: 500; }

.nav{ display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.nav-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 13px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nav-item svg{ flex: none; opacity: .75; }
.nav-item:hover{ background: rgba(248, 59, 110, .07); color: var(--brand-ink); }
.nav-item.active{
  background: var(--grad);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.nav-item.active svg{ opacity: 1; }
.nav-sep{
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .14em;
  padding: 16px 13px 6px;
}

.sidebar-foot{ margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px 4px 2px; }
.sidebar-note{
  border-radius: var(--r-sm);
  background: var(--grad-soft);
  border: 1px solid #ffd9d1;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.55;
}
.sidebar-note b{ color: var(--brand-ink); }
.sidebar-fineprint{ font-size: 10.5px; color: var(--muted); line-height: 1.6; padding: 0 4px; }

.sidebar-backdrop{
  display: none;
  position: fixed; inset: 0;
  background: rgba(30, 15, 40, .45);
  backdrop-filter: blur(2px);
  z-index: 55;
}

/* ---------- トップバー ---------- */
.topbar{
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(14px, 3vw, 32px);
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 247, 243, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-title{ font-size: 17px; font-weight: 800; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right{ display: flex; align-items: center; gap: 10px; }

.menu-btn{ display: none; }

.user-chip{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--card);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.user-chip img{ width: 28px; height: 28px; border-radius: 50%; }
.user-chip:hover{ border-color: var(--brand); }
.cloud-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
}
.cloud-pill.on{ background: var(--ok-bg); color: var(--ok); }
.cloud-pill.off{ background: #f8edf0; color: var(--muted); }

/* ---------- ボタン ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 13px;
  padding: 11px 20px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: scale(.97); }
.btn-primary{
  background: var(--grad);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover{ box-shadow: 0 14px 30px rgba(248, 59, 110, .38); transform: translateY(-1px); }
.btn-ghost{
  background: var(--card);
  color: var(--ink-2);
  border: 1.5px solid var(--line-2);
}
.btn-ghost:hover{ border-color: var(--brand); color: var(--brand-ink); }
.btn-soft{
  background: rgba(248, 59, 110, .09);
  color: var(--brand-ink);
}
.btn-soft:hover{ background: rgba(248, 59, 110, .15); }
.btn-danger{ background: var(--bad-bg); color: var(--bad); }
.btn-danger:hover{ background: #fbdce0; }
.btn-sm{ padding: 7px 14px; font-size: 13px; border-radius: 10px; }
.btn-lg{ padding: 14px 28px; font-size: 16px; border-radius: 15px; }
.btn-block{ width: 100%; }
.btn:disabled{ opacity: .5; cursor: not-allowed; }

.btn-google{
  background: #fff;
  border: 1.5px solid var(--line-2);
  color: var(--ink);
  font-weight: 700;
}
.btn-google:hover{ border-color: #b9b5c9; background: #fafafa; }

.icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.icon-btn:hover{ background: rgba(248, 59, 110, .08); color: var(--brand-ink); }
.icon-btn.danger:hover{ background: var(--bad-bg); color: var(--bad); }

/* ---------- カード ---------- */
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-pad{ padding: clamp(18px, 2.6vw, 28px); }
.card-title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 16px;
}
.card-title .t-icon{
  width: 34px; height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-soft);
  color: var(--brand);
  flex: none;
}

/* ---------- フォーム ---------- */
.field{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label{
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.req{
  font-size: 10px;
  background: var(--bad-bg);
  color: var(--bad);
  border-radius: 6px;
  padding: 1px 6px;
  font-weight: 700;
}
.opt{
  font-size: 10px;
  background: #efedf5;
  color: var(--muted);
  border-radius: 6px;
  padding: 1px 6px;
  font-weight: 700;
}
.input, .select, .textarea{
  width: 100%;
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  background: #fff;
  padding: 11px 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea{ resize: vertical; min-height: 90px; line-height: 1.7; }
.input:focus, .select:focus, .textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(248, 59, 110, .12);
}
.select{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b88a0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 38px;
}
.input-yen{ position: relative; }
.input-yen .input{ padding-left: 30px; }
.input-yen::before{
  content: "¥";
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 700;
  pointer-events: none;
}
.hint{ font-size: 11.5px; color: var(--muted); }
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid .span2{ grid-column: 1 / -1; }

.check-row{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .15s ease;
}
.check-row:hover{ background: rgba(248, 59, 110, .05); }
.check-row input{
  width: 18px; height: 18px;
  accent-color: var(--brand);
  flex: none;
}

/* ---------- チップ・バッジ ---------- */
.chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.chip{
  border: 1.5px solid var(--line-2);
  background: #fff;
  color: var(--ink-2);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.chip:hover{ border-color: var(--brand); color: var(--brand-ink); }
.chip.active{
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(248, 59, 110, .3);
}
.badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}
.badge-stock{ background: var(--info-bg); color: var(--info); }
.badge-listed{ background: var(--warn-bg); color: var(--warn); }
.badge-sold{ background: var(--ok-bg); color: var(--ok); }

/* ---------- テーブル ---------- */
.table-scroll{ overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); }
.table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 780px;
  background: #fff;
}
.table th{
  text-align: left;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .04em;
  padding: 12px 14px;
  background: #fefaf8;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr:last-child td{ border-bottom: none; }
.table tbody tr{ transition: background .12s ease; }
.table tbody tr:hover{ background: #fdf7f8; }
.td-num{ text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.td-actions{ white-space: nowrap; text-align: right; }
.profit-plus{ color: var(--ok); font-weight: 800; }
.profit-minus{ color: var(--bad); font-weight: 800; }

/* ---------- 統計カード ---------- */
.stat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.stat-card::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--grad);
  border-radius: 4px 0 0 4px;
}
.stat-label{ font-size: 12px; color: var(--muted); font-weight: 700; }
.stat-value{ font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat-sub{ font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.stat-value.plus{ color: var(--ok); }
.stat-value.minus{ color: var(--bad); }

/* ---------- 結果パネル(利益計算など) ---------- */
.result-hero{
  background: var(--grad-deep);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 30px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.result-hero::before{
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 120, .5), transparent 70%);
  top: -110px; right: -70px;
}
.result-hero::after{
  content: "";
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 70%);
  bottom: -90px; left: -50px;
}
.result-hero > *{ position: relative; z-index: 1; }
.result-label{ font-size: 13px; font-weight: 700; opacity: .85; }
.result-amount{
  font-size: clamp(38px, 5.4vw, 52px);
  font-weight: 900;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.result-amount small{ font-size: .45em; font-weight: 800; margin-left: 3px; }
.result-amount.minus{ color: #ffd2d9; }
.result-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.result-meta .pill{
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.breakdown{ margin-top: 18px; display: flex; flex-direction: column; gap: 7px; }
.break-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(255,255,255,.35);
}
.break-row:last-child{ border-bottom: none; }
.break-row .bl{ opacity: .85; font-weight: 500; }
.break-row .bv{ font-weight: 800; font-variant-numeric: tabular-nums; }
.stackbar{
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 16px;
  background: rgba(255,255,255,.14);
}
.stackbar > div{ height: 100%; transition: width .35s ease; }
.stackbar .sb-profit{ background: #3ddc97; }
.stackbar .sb-cost{ background: rgba(255,255,255,.55); }
.stackbar .sb-fee{ background: #ffb45c; }
.stackbar .sb-ship{ background: #7fb2ff; }
.stack-legend{
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 9px;
  font-size: 11px; font-weight: 700; opacity: .9;
}
.stack-legend span{ display: inline-flex; align-items: center; gap: 5px; }
.stack-legend i{ width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* ---------- スライダー ---------- */
.range{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand) var(--fill, 50%), #e8e5f0 var(--fill, 50%));
  outline: none;
  cursor: pointer;
}
.range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--grad);
  border: 3px solid #fff;
  box-shadow: 0 3px 12px rgba(248, 59, 110, .45);
  cursor: grab;
}
.range::-moz-range-thumb{
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--grad);
  border: 3px solid #fff;
  box-shadow: 0 3px 12px rgba(248, 59, 110, .45);
  cursor: grab;
}

/* ---------- タブ ---------- */
.seg{
  display: inline-flex;
  background: #f8e9ec;
  border-radius: 13px;
  padding: 4px;
  gap: 3px;
}
.seg button{
  border: none;
  background: transparent;
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all .18s ease;
}
.seg button.active{
  background: #fff;
  color: var(--brand-ink);
  box-shadow: 0 2px 8px rgba(43, 16, 48, .12);
}

/* ---------- モーダル ---------- */
.modal-overlay{
  position: fixed; inset: 0;
  background: rgba(28, 14, 38, .5);
  backdrop-filter: blur(3px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  animation: fadeIn .18s ease both;
}
@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
.modal{
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 70px rgba(28, 14, 38, .35);
  width: 100%;
  max-width: 520px;
  max-height: min(86vh, 780px);
  display: flex;
  flex-direction: column;
  animation: popIn .22s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes popIn{
  from{ opacity: 0; transform: translateY(14px) scale(.97); }
  to{ opacity: 1; transform: none; }
}
.modal-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px 0;
}
.modal-head h3{ font-size: 17px; font-weight: 800; flex: 1; }
.modal-body{ padding: 16px 22px; overflow-y: auto; }
.modal-foot{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 4px 22px 20px;
}
.modal.wide{ max-width: 640px; }

/* ---------- トースト ---------- */
#toast-root{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast{
  background: #26212f;
  color: #fff;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(28, 14, 38, .4);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: toastIn .25s ease both;
  max-width: min(90vw, 480px);
}
.toast.out{ animation: toastOut .3s ease both; }
@keyframes toastIn{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
@keyframes toastOut{ from{ opacity: 1; } to{ opacity: 0; transform: translateY(8px); } }
.toast.ok svg{ color: #3ddc97; }
.toast.err svg{ color: #ff8896; }

/* ---------- ホーム(ダッシュボード) ---------- */
.dash-date{
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 14px;
}
.quick-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 10px;
}
.app-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.app-tile{
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 15px 18px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.app-tile:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #ffc9d6;
}
.app-tile-icon{
  width: 44px; height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: none;
  box-shadow: 0 6px 16px rgba(248, 59, 110, .22);
}
.app-tile-body{ min-width: 0; }
.app-tile-body h3{ font-size: 14.5px; font-weight: 800; }
.app-tile-body p{ font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.55; }
.app-tile-arrow{ margin-left: auto; color: var(--line-2); flex: none; }
.app-tile:hover .app-tile-arrow{ color: var(--brand); }

.recent-list{ overflow: hidden; }
.recent-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-size: 13.5px;
  transition: background .12s ease;
}
.recent-row:hover{ background: #fdf5f6; }
.recent-name{
  flex: 1;
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-price{ font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-2); }
.recent-more{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--brand);
  text-decoration: none;
}
.recent-more:hover{ background: #fdf5f6; }

.home-notice{
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin-top: 30px;
}
.home-notice h3{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 8px;
}
.home-notice ul{
  margin: 0;
  padding-left: 18px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.9;
}

.section-title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 900;
  margin: 34px 0 16px;
}
.section-title::before{
  content: "";
  width: 6px; height: 22px;
  border-radius: 4px;
  background: var(--grad);
}

/* ---------- ツール共通レイアウト ---------- */
.tool-head{ margin-bottom: 20px; }
.tool-head h2{
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tool-head .th-icon{
  width: 44px; height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--grad);
  box-shadow: var(--shadow-brand);
  flex: none;
}
.tool-head p{ font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.tool-note{
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  color: #9a6a00;
  background: #fffaf0;
  border: 1px solid #f5e3bd;
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-top: 12px;
  line-height: 1.65;
}
.tool-note svg{ flex: none; margin-top: 2px; }

.cols-2{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.cols-2 .sticky-col{ position: sticky; top: calc(var(--topbar-h) + 18px); }

.toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.toolbar .spacer{ flex: 1; }
.search-box{ position: relative; min-width: 200px; }
.search-box .input{ padding-left: 38px; }
.search-box svg{
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.empty-state{
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}
.empty-state .e-icon{
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 20px;
  background: var(--grad-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-state h4{ font-size: 15px; font-weight: 800; color: var(--ink-2); }
.empty-state p{ font-size: 12.5px; margin-top: 5px; line-height: 1.7; }

/* ---------- 定型文カード ---------- */
.msg-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.msg-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 17px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.msg-card:hover{ border-color: #ffd0dc; box-shadow: var(--shadow-md); }
.msg-card-head{ display: flex; align-items: center; gap: 8px; }
.msg-card-head h4{ font-size: 13.5px; font-weight: 800; flex: 1; min-width: 0; }
.msg-body{
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.8;
  white-space: pre-wrap;
  background: #fefaf8;
  border-radius: 10px;
  padding: 12px 14px;
  flex: 1;
}
.msg-actions{ display: flex; gap: 8px; align-items: center; }
.star-btn{ color: #cdc9dc; }
.star-btn.on{ color: #f7b500; }
.star-btn.on:hover{ background: #fdf3df; color: #f7b500; }

/* ---------- プレビュー(出品文) ---------- */
.preview-pane{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.preview-head{
  background: var(--grad);
  color: #fff;
  padding: 13px 20px;
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.preview-block{ padding: 16px 20px; border-bottom: 1px solid var(--line); }
.preview-block:last-child{ border-bottom: none; }
.preview-label{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 8px;
}
.char-count{ font-variant-numeric: tabular-nums; font-weight: 700; }
.char-count.over{ color: var(--bad); }
.preview-text{
  font-size: 13.5px;
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
}
.preview-title-text{ font-size: 15px; font-weight: 800; line-height: 1.6; word-break: break-word; }

/* ---------- 判定表示(値下げ) ---------- */
.verdict{
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--r-md);
  padding: 15px 18px;
  font-weight: 800;
  font-size: 14.5px;
}
.verdict .v-mark{ font-size: 24px; }
.verdict.v-ok{ background: var(--ok-bg); color: var(--ok); }
.verdict.v-warn{ background: var(--warn-bg); color: var(--warn); }
.verdict.v-bad{ background: var(--bad-bg); color: var(--bad); }
.quick-prices{ display: flex; flex-wrap: wrap; gap: 8px; }
.qp{
  border: 1.5px solid var(--line-2);
  background: #fff;
  border-radius: 12px;
  padding: 8px 13px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all .15s ease;
  line-height: 1.4;
}
.qp:hover{ border-color: var(--brand); }
.qp b{ display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.qp .qp-profit{ font-size: 11px; }
.qp.good .qp-profit{ color: var(--ok); }
.qp.risky .qp-profit{ color: var(--warn); }
.qp.loss .qp-profit{ color: var(--bad); }

/* ---------- チャート ---------- */
.chart-wrap{ width: 100%; overflow-x: auto; }
.bar-chart{ width: 100%; min-width: 420px; height: auto; }
.bar-chart .bar{ fill: url(#barGrad); rx: 6; transition: opacity .15s ease; }
.bar-chart .bar:hover{ opacity: .8; }
.bar-chart .bar.neg{ fill: #f2b8c1; }
.bar-chart text{ font-family: var(--font); }

/* ---------- テンプレ保存リスト ---------- */
.saved-list{ display: flex; flex-direction: column; gap: 8px; }
.saved-item{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.saved-item .si-name{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.saved-item .si-name:hover{ color: var(--brand-ink); }
.saved-item .si-date{ font-size: 11px; color: var(--muted); font-weight: 500; }

/* ---------- ログインモーダル ---------- */
.login-hero{
  text-align: center;
  padding: 8px 0 4px;
}
.login-hero .brand-mark{ margin: 0 auto 14px; width: 56px; height: 56px; border-radius: 18px; }
.login-hero h4{ font-size: 17px; font-weight: 900; }
.login-hero p{ font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.8; }
.login-benefits{
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.login-benefits .lb{
  display: flex;
  gap: 10px;
  align-items: center;
  background: #faf9fc;
  border-radius: 11px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.login-benefits .lb svg{ color: var(--ok); flex: none; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1020px){
  .cols-2{ grid-template-columns: 1fr; }
  .cols-2 .sticky-col{ position: static; }
}
@media (max-width: 900px){
  .main{ margin-left: 0; }
  .sidebar{ transform: translateX(-105%); box-shadow: 0 0 60px rgba(28,14,38,.3); }
  .sidebar.open{ transform: none; }
  .sidebar-backdrop.show{ display: block; animation: fadeIn .2s ease both; }
  .menu-btn{ display: inline-flex; }
}
@media (max-width: 640px){
  .view{ padding: 18px 14px 60px; }
  .form-grid{ grid-template-columns: 1fr; }
  .modal-foot{ flex-wrap: wrap; }
  .modal-foot .btn{ flex: 1; }
  .topbar-title{ font-size: 15px; }
  .result-amount{ font-size: 36px; }
}

/* スクロールバー */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{ background: #eed5db; border-radius: 999px; border: 2.5px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background: #e0bfc9; }

/* ---------- サイト(プラットフォーム)表示 ---------- */
.pf-chips{ margin-bottom: 2px; }
.pf-fee{ font-size: 10.5px; opacity: .75; font-weight: 700; }
.pf-badge{ margin-top: 3px; }
.pf-mercari{ background: #ffe3e8; color: #d63954; }
.pf-rakuma{ background: #f1e4ff; color: #8d4bd6; }
.pf-yahoo-flea{ background: #e0f5ea; color: #0d9f68; }
.pf-yahoo-auc{ background: #fdeedd; color: #c77800; }
.qty-tag{
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--brand-ink);
  background: rgba(248, 59, 110, .1);
  border-radius: 6px;
  padding: 1px 7px;
  margin-left: 4px;
  vertical-align: 1px;
}

/* ---------- 初回セットアップウィザード ---------- */
.ob-modal{ max-width: 560px; }
.ob-modal .modal-body{ padding: 26px 26px 24px; }
.ob-welcome{ text-align: center; }
.ob-mark{
  display: block;
  width: 60px; height: 60px;
  border-radius: 19px;
  margin: 4px auto 16px;
  background: var(--grad);
  box-shadow: var(--shadow-brand);
  position: relative;
}
.ob-mark::after{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.95) 0 4.5px, transparent 5.5px),
    radial-gradient(circle at 62% 60%, rgba(255,255,255,.95) 0 6.5px, transparent 7.5px),
    radial-gradient(circle at 34% 72%, rgba(255,255,255,.8) 0 3.5px, transparent 4.5px);
}
.ob-progress{
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 18px;
}
.ob-progress i{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--line-2);
  transition: all .25s ease;
}
.ob-progress i.on{ background: var(--brand); width: 24px; }
.ob-step-label{
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--brand);
  margin-bottom: 6px;
}
.ob-title{
  font-size: 19px;
  font-weight: 900;
  text-align: center;
  line-height: 1.5;
}
.ob-sub{
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
  line-height: 1.9;
}
.ob-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.ob-cards.cols1{ grid-template-columns: 1fr; }
.ob-card{
  position: relative;
  border: 2px solid var(--line-2);
  border-radius: var(--r-md);
  background: #fff;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ob-card:hover{ border-color: #ffb9c9; }
.ob-card.on{
  border-color: var(--brand);
  background: #fff5f7;
  box-shadow: 0 4px 16px rgba(248, 59, 110, .16);
}
.ob-card h4{
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 7px;
  padding-right: 22px;
}
.ob-card p{
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.65;
}
.ob-card .ob-check{
  position: absolute;
  top: 10px; right: 10px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
}
.ob-card.on .ob-check{ display: flex; }
.ob-sample{
  display: block;
  margin-top: 8px;
  background: #faf6f7;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
.ob-foot{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.ob-skip{
  display: block;
  margin: 14px auto 0;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}
.ob-skip:hover{ color: var(--brand-ink); }
.ob-done-icon, .tut-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 20px;
  margin: 4px auto 14px;
  background: var(--grad);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.ob-done-icon{ background: linear-gradient(135deg, #34d399, #0d9f68); box-shadow: 0 10px 26px rgba(13, 159, 104, .3); }
.ob-summary{
  margin: 16px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.ob-summary > div{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #faf6f7;
  border-radius: 11px;
  padding: 11px 15px;
  font-size: 13px;
}
.ob-summary span{ color: var(--muted); font-weight: 700; font-size: 12px; flex: none; }
.ob-summary b{ font-weight: 800; text-align: right; }
.tut-points{
  margin: 14px 0 4px;
  padding: 0;
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.tut-points li{
  position: relative;
  background: #faf6f7;
  border-radius: 11px;
  padding: 11px 15px 11px 38px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.75;
}
.tut-points li::before{
  content: "✓";
  position: absolute;
  left: 15px;
  color: var(--ok);
  font-weight: 900;
}
@media (max-width: 640px){
  .ob-cards{ grid-template-columns: 1fr; }
}

/* ウィザード最上部のひとこと */
.ob-lead{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  margin: 0 auto 16px;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--grad-soft);
  border: 1px solid #ffd9e0;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--brand-ink);
}

/* ---------- スポットライト式ツアー ---------- */
.tour-backdrop{
  position: fixed; inset: 0;
  z-index: 88;
  background: transparent;
}
.tour-hole{
  position: fixed;
  z-index: 89;
  border-radius: 16px;
  box-shadow: 0 0 0 99999px rgba(26, 10, 30, .55);
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.tour-tip{
  position: fixed;
  z-index: 91;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(26, 10, 30, .4);
  padding: 16px 18px 12px;
  transition: top .3s ease, left .3s ease;
}
.tour-count{
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--brand);
}
.tour-tip h4{ font-size: 15.5px; font-weight: 900; margin-top: 2px; }
.tour-tip > p:not(.tour-count){
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.8;
  margin-top: 6px;
}
.tour-btns{ display: flex; gap: 8px; margin-top: 12px; }
.tour-skip{
  display: block;
  margin: 8px auto 0;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}
.tour-skip:hover{ color: var(--brand-ink); }

/* ---------- ベース選択リスト(出品作成) ---------- */
.pick-list{ display: flex; flex-direction: column; gap: 8px; }
.pick-item{
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: 1.5px solid var(--line-2);
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.pick-item:hover{ border-color: var(--brand); background: #fff7f9; color: var(--brand-ink); }
.pick-item .pick-name{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-item .pick-sub{ font-size: 11px; color: var(--muted); font-weight: 500; flex: none; }
.pick-thumb{
  width: 34px; height: 34px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
}

/* ---------- 画像アップロード ---------- */
.img-thumbs{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 10px;
}
.img-thumb{
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.img-thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.img-del{
  position: absolute;
  top: 5px; right: 5px;
  width: 22px; height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(26, 10, 30, .65);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-del:hover{ background: var(--bad); }
.img-add{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 1;
  border: 2px dashed var(--line-2);
  border-radius: 12px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.img-add:hover{ border-color: var(--brand); color: var(--brand-ink); background: #fff7f9; }

/* ---------- 在庫テーブルのサムネイル ---------- */
.item-cell{ display: flex; align-items: center; gap: 10px; min-width: 0; }
.item-thumb{
  width: 42px; height: 42px;
  border-radius: 9px;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--line);
}
.view-imgs{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}
.view-img{
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
}

/* ---------- 出品作成(縦1列・フリマアプリ風) ---------- */
.create-col{
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.base-row{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.base-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--grad-soft);
  border: 1px solid #ffd9e0;
  color: var(--brand-ink);
  border-radius: 999px;
  padding: 5px 8px 5px 13px;
  font-size: 12px;
  font-weight: 700;
  max-width: 100%;
}
.base-chip button{
  border: none;
  background: rgba(248, 59, 110, .12);
  color: var(--brand-ink);
  width: 20px; height: 20px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.base-chip button:hover{ background: rgba(248, 59, 110, .25); }
.field-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.field-head .char-count{ font-size: 11.5px; color: var(--muted); }

.fee-panel{
  margin-top: 6px;
  background: #fdf8f8;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px 16px;
}
.fee-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  font-size: 13px;
  color: var(--ink-2);
  border-bottom: 1px dashed var(--line-2);
}
.fee-row:last-child{ border-bottom: none; }
.fee-row b{ font-variant-numeric: tabular-nums; font-weight: 800; }
.fee-row.total{ font-weight: 800; color: var(--ink); }
.fee-row.total b{ font-size: 16px; }
.fee-row b.plus{ color: var(--ok); }
.fee-row b.minus{ color: var(--bad); }

/* ---------- 登録直後のハイライト ---------- */
@keyframes rowFlash{
  0%, 60%{ background: #ffe4ec; }
  100%{ background: transparent; }
}
tr.row-flash > td{ animation: rowFlash 2.4s ease 1; }

/* 集計カードのリンク版 */
.stat-link{
  text-decoration: none;
  color: var(--brand-ink);
  display: block;
  transition: transform .15s ease, box-shadow .15s ease;
}
.stat-link:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-link .stat-value{ display: flex; align-items: center; gap: 6px; color: var(--brand-ink); }

/* ---------- 作成方法の3ボタン(出品作成) ---------- */
.make-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.make-btn{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px 14px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all .15s ease;
}
.make-btn svg{ color: var(--brand); }
.make-btn:hover{
  border-color: var(--brand);
  color: var(--brand-ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.soon-badge{
  position: absolute;
  top: -8px; right: -4px;
  background: #6b6478;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 9px;
}

/* ---------- 売却入力モーダル ---------- */
.sell-q{ font-size: 14px !important; color: var(--ink) !important; }
.sell-pf{ font-size: 14px; padding: 9px 18px; }
.input-big .input{ font-size: 19px; font-weight: 800; padding: 13px 14px 13px 30px; }
.sell-preview{
  text-align: center;
  font-weight: 800;
  font-size: 15px;
  padding: 13px 14px;
  background: var(--grad-soft);
  border: 1px solid #ffd9e0;
  border-radius: 12px;
  margin-top: 4px;
}
.sell-preview-sub{ font-size: 11px; color: var(--muted); font-weight: 500; margin-top: 3px; }

/* くわしく入力(折りたたみ) */
.more-box{
  border: 1.5px dashed var(--line-2);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 4px 0 12px;
}
.more-box summary{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.more-box summary::-webkit-details-marker{ display: none; }
.more-box summary:hover{ color: var(--brand-ink); }
.more-box[open]{ border-style: solid; background: #fdf8f8; }
.more-box[open] summary{ margin-bottom: 4px; }

/* ---------- 売却入力ページ ---------- */
.sell-list{ display: flex; flex-direction: column; gap: 10px; }
.sell-item{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 1.5px solid var(--line-2);
  background: var(--card);
  border-radius: var(--r-md);
  padding: 13px 16px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sell-item:hover{
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.sell-item-thumb{
  width: 52px; height: 52px;
  border-radius: 11px;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--line);
}
.sell-item-noimg{
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-soft);
  color: var(--brand);
}
.sell-item-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sell-item-name{
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sell-item-sub{ font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- 送料確認ページ ---------- */
.ship-row{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
.ship-row:last-child{ border-bottom: none; }
.ship-row.cheapest{ background: #f0fbf5; }
.ship-price{
  font-size: 17px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  min-width: 96px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}
.ship-best{
  font-size: 10px;
  font-weight: 800;
  background: var(--ok);
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
}
.ship-body{ display: flex; flex-direction: column; min-width: 0; }
.ship-body b{ font-size: 13.5px; }
.ship-body small{ font-size: 11px; color: var(--muted); margin-top: 1px; }

/* ---------- 販路設定 ---------- */
.pf-custom{ background: #efe9f2; color: #6b5f75; }
.fee-card{
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #fff;
}
.fee-card-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14.5px;
}
.fee-inputs{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  flex-wrap: wrap;
}
.fee-inputs .input{ width: 92px; text-align: right; }
.tier-list{ display: flex; flex-direction: column; gap: 8px; }
.tier-row{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  flex-wrap: wrap;
}
.tier-row .input{ width: 82px; text-align: right; }
.fee-applied{ margin-top: 10px; font-size: 12px; color: var(--muted); }
.fee-applied b{ color: var(--brand-ink); }

/* ---------- 送料検索フォーム ---------- */
.finder-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0 12px;
}

/* ---------- 封筒サイズの選択カード ---------- */
.env-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.env-card{
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.env-card:hover{ border-color: #ffb9c9; }
.env-card.on{
  border-color: var(--brand);
  background: #fff5f7;
}
.env-card b{ font-size: 13.5px; color: var(--ink); }
.env-card .env-size{ font-size: 11.5px; font-weight: 800; color: var(--brand-ink); }
.env-card small{ font-size: 10.5px; color: var(--muted); line-height: 1.5; }

/* ---------- メッセージ作成(場面えらび→文例) ---------- */
.msg-step-label{
  font-size: 15px;
  font-weight: 900;
  margin: 4px 0 14px;
}
.cat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.cat-card{
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  padding: 15px 18px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cat-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #ffc9d6;
}
.cat-icon{
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: none;
  box-shadow: 0 6px 16px rgba(120, 60, 90, .18);
}
.cat-body{ min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cat-body b{ font-size: 15px; color: var(--ink); }
.cat-body small{ font-size: 12px; color: var(--muted); line-height: 1.5; }
.cat-card .app-tile-arrow{ margin-left: auto; }

.back-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 0;
}
.back-link:hover{ color: var(--brand-ink); }
.back-link svg{ transform: rotate(180deg); }

.msg-rows{ display: flex; flex-direction: column; gap: 10px; }
.msg-row{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 15px;
  box-shadow: var(--shadow-sm);
}
.msg-row-main{
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.msg-row-main b{
  display: block;
  font-size: 13.5px;
  color: var(--ink);
}
.msg-row-main:hover b{ color: var(--brand-ink); }
.msg-row-preview{
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 640px){
  .msg-row{ flex-wrap: wrap; }
  .msg-row-main{ flex: 1 1 100%; }
}

/* ---------- お気に入りボタン(文字つき) ---------- */
.fav-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1.5px solid var(--line-2);
  background: #fff;
  color: #c3bdd2;
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
  flex: none;
}
.fav-chip span{ color: var(--ink-2); }
.fav-chip:hover{ border-color: #f2cf7c; color: #f7b500; }
.fav-chip.on{
  background: #fdf3df;
  border-color: #f2cf7c;
  color: #f7b500;
}
.fav-chip.on span{ color: #b07a00; }

/* ---------- マイ定型文を登録ボタン(場面カードと区別) ---------- */
.my-tpl-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  border: 2px dashed #c3a6ee;
  background: #faf6ff;
  color: #7048e8;
  border-radius: var(--r-md);
  padding: 15px;
  font-size: 14.5px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s ease;
}
.my-tpl-btn:hover{
  background: #f3ebff;
  border-color: #7048e8;
  transform: translateY(-1px);
}

/* ---------- 初回セットアップのクラウド案内 ---------- */
.ob-cloud{
  margin: 16px 0 4px;
  padding: 16px;
  border: 1px solid #d9e7ff;
  background: #f4f8ff;
  border-radius: var(--r-md);
  text-align: center;
}
.ob-cloud-title{
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.7;
}