/* ===================================================
   つくりてノート — shared base styles
   =================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&family=Quicksand:wght@500;600;700&display=swap');

/* ── CSS Variables ── */
:root {
  --bg: #fef9f4;
  --text: #5c4a3d;
  --muted: #b0a098;
  --ink-light: #7d6b5d;

  --pink: #e8a0b4;
  --pink-deep: #d4789a;
  --pink-pale: #fbeef2;
  --pink-soft: #f4d2dc;

  --mint: #d4ede3;
  --mint-pale: #f0faf5;

  --card: #fff;
  --divider: #ecdfd5;
  --shadow: 0 14px 40px rgba(92,74,61,.08);
  --shadow-lg: 0 24px 64px rgba(92,74,61,.14);

  --nav-bg: #1a1a2e;
  --nav-surface: #16213e;
  --nav-accent: #e8a0b4;
  --nav-muted: #7a7a9a;
  --nav-border: #2a2a4a;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Base ── */
body {
  font-family: 'Zen Maru Gothic', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Topbar (dark nav for standalone pages) ── */
.topbar {
  background: var(--nav-bg);
  padding: .8rem 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.topbar-logo {
  font-family: Quicksand, sans-serif;
  font-size: .9rem;
  color: var(--nav-accent);
  font-weight: 700;
  text-decoration: none;
}

/* ── Page content wrapper ── */
.page-content {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

/* ── Back link ── */
.back-link {
  display: inline-block;
  font-size: .72rem;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 1rem;
}
.back-link:hover { color: var(--text); }

/* ── Legal / document typography ── */
.page-content h1 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .3rem;
}
.page-content .date {
  font-size: .7rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.page-content h2 {
  font-size: .85rem;
  font-weight: 700;
  margin: 1.4rem 0 .5rem;
  padding-left: .5rem;
  border-left: 3px solid var(--pink);
}
.page-content p {
  font-size: .78rem;
  line-height: 1.8;
  margin-bottom: .6rem;
}
.page-content ul {
  font-size: .78rem;
  line-height: 1.8;
  padding-left: 1.2rem;
  margin-bottom: .6rem;
}
.page-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .75rem;
  margin-bottom: .8rem;
}
.page-content th,
.page-content td {
  border: 1px solid var(--divider);
  padding: .4rem .6rem;
  text-align: left;
  line-height: 1.6;
}
.page-content th {
  background: #fdf4f7;
  font-weight: 700;
}

.link-pink {
  color: var(--pink);
}

.required-mark {
  color: var(--pink);
}

.legal-contact {
  margin-top: 2rem;
  font-size: .72rem;
  color: var(--muted);
}

.legal-contact-link {
  color: var(--pink);
}

.app-footer {
  position: fixed;
  bottom: .5rem;
  right: .6rem;
  pointer-events: none;
}
.app-footer-version {
  font-size: .5rem;
  color: var(--divider);
  font-family: monospace;
  opacity: .5;
}

/* ===== 配送マトリクス共通テーブル ===== */
.sim-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -.1rem;position:relative;}
.sim-tbl{width:100%;min-width:300px;border-collapse:separate;border-spacing:0;font-size:.65rem;}
.sim-th-pf{text-align:left;padding:.3rem .4rem .3rem 0;color:var(--muted);font-weight:500;border-bottom:2px solid var(--divider);white-space:nowrap;}
.sim-th-sticky{position:sticky;left:0;z-index:2;background:var(--surface,#fff);}
.sim-th-col{text-align:center;padding:.3rem .25rem;font-size:.6rem;font-weight:700;color:var(--ink);border-bottom:2px solid var(--divider);min-width:72px;}
.sim-th-sub{font-size:.52rem;font-weight:400;color:var(--muted);margin-top:.1rem;}
/* 2段ヘッダー: 補償行 */
.sim-th-ins-yes{border-bottom:1px solid var(--divider);}
.sim-th-ins-no {color:var(--muted);border-bottom:1px solid var(--divider);}
/* 2段ヘッダー: 追跡行 */
.sim-th-trk-yes{border-bottom:2px solid var(--divider);}
.sim-th-trk-no {color:var(--muted);border-bottom:2px solid var(--divider);}
.sim-tr{border-bottom:1px solid var(--divider);}
.sim-tr:last-child{border-bottom:0;}
.sim-td-pf{padding:.4rem .4rem .4rem 0;font-size:.65rem;font-weight:700;vertical-align:middle;white-space:nowrap;}
.sim-td-sticky{position:sticky;left:0;z-index:1;background:var(--surface,#fff);border-right:1px solid var(--divider);}
.sim-td{padding:.3rem .25rem;text-align:center;vertical-align:middle;}
.sim-td-partner{background:#f3eeff;}
.sim-td-ins-over{background:#fff8f0;}
.sim-td-none{text-align:center;color:#ccc;font-size:.65rem;vertical-align:middle;}
.sim-td-base{text-align:center;font-size:.65rem;color:var(--ink);}
.sim-cell-method{font-size:.58rem;color:var(--muted);margin-bottom:.12rem;white-space:nowrap;}
.sim-cell-method-name{font-size:.65rem;font-weight:700;}
.sim-cell-profit{font-size:.78rem;font-weight:700;}
.sim-cell-profit.pos{color:#5a9a7a;}
.sim-cell-profit.neg{color:#d47979;}
.sim-cell-ship{font-size:.6rem;font-weight:700;color:var(--pink);}
.sim-ins-warn-sm{font-size:.48rem;color:#b07020;margin-top:.1rem;}
.sim-partner-badge{font-size:.44rem;background:#7c3aed;color:#fff;border-radius:100px;padding:.03rem .2rem;font-weight:700;margin-left:.2rem;vertical-align:middle;cursor:default;}
.sim-tr-group td{padding:.3rem .3rem .15rem;background:var(--surface);}
.sim-td-group-label{font-size:.58rem;font-weight:700;color:var(--muted);letter-spacing:.03em;text-align:left !important;}
@media(max-width:560px){
  .sim-tbl{font-size:.6rem;}
  .sim-th-col{font-size:.52rem;min-width:60px;padding:.25rem .15rem;}
  .sim-cell-profit{font-size:.7rem;}
  .sim-cell-method{font-size:.52rem;}
  .sim-cell-ship{font-size:.55rem;}
  .sim-td-pf{font-size:.6rem;}
}

/* ===== 時給換算マトリクス ===== */
.hourly-card{padding:.5rem .7rem;}
.hourly-title{font-size:.65rem;color:var(--pink);font-weight:700;margin-bottom:.5rem;}
.hourly-note{font-size:.55rem;color:var(--muted);margin-top:.4rem;}
/* wire-card-accent内ではstickyセルの背景をカード色に合わせる */
.wire-card-accent .sim-th-sticky{background:var(--pink-pale);}
.wire-card-accent .sim-td-sticky{background:var(--pink-pale);}