/* Tapri — スマホ優先のスタイル
   雰囲気: 紙の名刺と朱肉。生成りの紙（背景）・墨（文字・主ボタン）・朱（印・差し色）。
   飾りは最小限に、線と余白と明朝体で見せる。絵文字やグラデーションは使わない。 */
:root {
  --bg: #f4f1ea;            /* 名刺の紙のような生成り */
  --bg-deep: #ebe6da;
  --panel: #ffffff;
  --ink: #1f1d1a;           /* 墨 */
  --navy: #2a2d31;          /* 墨色（名前は濃紺ではなく墨）: 主ボタン・強い見出し */
  --navy-2: #3b3f45;
  --brass: #b89b5a;         /* 真鍮色: ICチップなど、ごく一部だけ */
  --brass-soft: #efe6cf;
  --muted: #6f6a62;
  --line: #e3ddd0;
  --line-strong: #cfc7b7;
  --accent: #b2382a;        /* 朱: リンク・印・フォーカス（朱肉の色） */
  --danger: #a8322c;
  --ok: #2f6b4f;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(31, 29, 26, .05);
  --shadow-card: 0 1px 2px rgba(31, 29, 26, .08), 0 10px 28px rgba(31, 29, 26, .08);
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Yu Gothic", Meiryo, sans-serif;
  --serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho,
           "Noto Serif JP", "BIZ UDPMincho", "MS PMincho", Georgia, serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink);
  line-height: 1.7; font-size: 16px; letter-spacing: .01em;
  /* 紙の質感: ごく薄い斜めの織り目と、上部の明るみ */
  background: linear-gradient(180deg, #f9f7f2 0, var(--bg) 240px);
  background-color: var(--bg);
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.4; letter-spacing: .005em; }
[hidden] { display: none !important; }

/* --- 枠 --- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
  background: #fbfaf6; color: var(--ink); position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--line); box-shadow: inset 0 3px 0 var(--accent);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--ink);
  font-family: var(--serif); font-size: 19px; letter-spacing: .12em; }
.brand:hover { text-decoration: none; }
.logo {
  width: 28px; height: 28px; border-radius: 50%; color: #fff;
  background: var(--accent); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4);   /* 朱印 */
  display: grid; place-items: center; font-size: 13.5px; font-family: var(--serif);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.25);
}
.topact { font-size: 13.5px; font-weight: 700; color: var(--ink); padding: 6px 12px;
  border: 1px solid var(--line-strong); border-radius: 999px; white-space: nowrap; background: #fff; }
.topact:hover { background: var(--bg); text-decoration: none; }
.topacts { display: flex; align-items: center; gap: 12px; flex: none; }
.toplink { font-size: 13px; color: var(--muted); white-space: nowrap; }
.toplink:hover { color: var(--ink); }
.wrap { max-width: 720px; margin: 0 auto; padding: 18px 16px 100px;
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right)); }
body.bare .wrap { padding-bottom: 24px; max-width: 520px; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: #fff;
  border-top: 1px solid var(--line); z-index: 30;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 18px rgba(27, 42, 65, .06);
}
/* タブは7つ並ぶ。iPhoneの狭い画面(375px)でも文字が折り返さない幅に収める */
.tabbar a {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 9px 1px 7px; font-size: 10px; color: var(--muted);
  font-weight: 600; white-space: nowrap; position: relative;
}
.tabbar a svg { width: 19px; height: 19px; }
.tabbar a:hover { text-decoration: none; }
.tabbar a.on { color: var(--navy); }
.tabbar a.on::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%;
  height: 3px; background: var(--accent); border-radius: 0 0 3px 3px; }

/* --- 部品 --- */
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.panel.narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
.ph { margin: 0 0 16px; font-size: 21px; font-family: var(--serif); letter-spacing: .04em; }
.pagehead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 14px;
}
.pagehead h1 { margin: 0; font-size: 23px; font-family: var(--serif); letter-spacing: .04em;
  padding-left: 12px; border-left: 3px solid var(--accent); line-height: 1.3; }
.section {
  font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: .14em;
  margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
}
.section::before { content: ""; width: 14px; height: 2px; background: var(--accent); flex: none; }
.panel > .section:first-child { margin-top: 0; }
.lead { color: #4b5563; font-size: 14.5px; margin: 0 0 14px; }
.lead.big { font-size: 17px; color: #374151; }
.fineprint { color: var(--muted); font-size: 12.5px; line-height: 1.65; }
.divider {
  text-align: center; color: var(--muted); font-size: 12.5px; font-weight: 700;
  margin: 22px 0 12px; position: relative; letter-spacing: .06em;
}
.divider::before, .divider::after {
  content: ""; position: absolute; top: 50%; width: calc(50% - 5.5em); height: 1px;
  background: var(--line-strong);
}
.divider::before { left: 0; } .divider::after { right: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 16px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: #fff; color: var(--ink); font-weight: 700; font-size: 14.5px;
  cursor: pointer; font-family: inherit; text-align: center;
}
.btn:hover { text-decoration: none; background: #faf8f3; }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--navy-2); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.wide { width: 100%; margin-top: 10px; }
.btn:disabled, .btn[disabled] {
  background: #efece5; border-color: #e1dccf; color: #9a968d;
  cursor: not-allowed; filter: none; box-shadow: none;
}
.btn.small { padding: 8px 12px; font-size: 13.5px; }
.btn.tiny { padding: 5px 10px; font-size: 12px; font-weight: 600; }
.inline { display: inline; }
.lc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.lc-acts .btn.ghost { color: #3f3b35; }
/* はじめの設定などの「済み／未」の印。絵文字ではなく描いた丸 */
.tick { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  margin-right: 9px; vertical-align: -3px; position: relative; background: #fff; }
.tick.on { background: var(--accent); border-color: var(--accent); }
.tick.on::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.row.done .rmain b { color: var(--muted); font-weight: 600; }

.err {
  background: #fdf1f2; border: 1px solid #f0c3ca; color: #8a1c2e;
  padding: 10px 12px; border-radius: 10px; font-size: 14px; margin-bottom: 14px;
}
.flash {
  background: #eef7f0; border: 1px solid #bfe0c9; color: #175a39;
  padding: 10px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 14px;
}

/* --- フォーム --- */
.f { display: block; margin-bottom: 14px; }
.lbl { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; color: #374151; }
.req {
  font-style: normal; font-size: 10.5px; background: #fde4e7; color: #a11a30;
  padding: 1px 5px; border-radius: 4px; margin-left: 6px; font-weight: 700;
}
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=date], input[type=search], input[type=url], textarea, select {
  width: 100%; padding: 11px 12px; border: 1px solid #d3cbb9; border-radius: 8px;
  font-size: 16px; font-family: inherit; background: #fffdf9; color: var(--ink);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent);
  background: #fff;
}
textarea { resize: vertical; line-height: 1.6; }
.f small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }

/* パスワードの表示/非表示 */
.pwwrap { position: relative; display: block; }
.pwwrap input { padding-right: 62px; }
.pwtoggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  border: 1px solid var(--line); background: #f6f3ec; color: #475569;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 6px 10px; border-radius: 8px; cursor: pointer; line-height: 1;
}
.pwtoggle:hover { background: #ece7dc; }
.pwtoggle[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px) { .grid2 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0; font-size: 14px; }
.check input { margin-top: 4px; flex: none; width: 17px; height: 17px; accent-color: var(--navy); }
/* チェックの意味を補う説明。見出しと続けて読まれないよう行を分ける */
.check small { display: block; margin-top: 3px; color: #64748b; font-size: 12.5px;
  line-height: 1.55; }
.consent {
  background: #faf8f2; border: 1px solid var(--line); border-radius: 10px;
  padding: 4px 12px; margin: 14px 0;
}
.alt { text-align: center; font-size: 14px; color: var(--muted); margin: 14px 0 0; }
.swatches { display: flex; gap: 9px; flex-wrap: wrap; }
.sw input { position: absolute; opacity: 0; }
.sw span {
  display: block; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 3px solid transparent; box-shadow: 0 0 0 1px var(--line-strong);
}
.sw input:checked + span { border-color: #fff; box-shadow: 0 0 0 2px var(--navy); }
input[type=file] { font-size: 14px; }

/* --- 名刺プレビュー（本物の名刺のように見せる） --- */
.mcard {
  border-radius: 10px; padding: 16px 18px 15px 22px; color: var(--ink); position: relative;
  overflow: hidden; background: #fffefb; border: 1px solid #e8e2d4;
  box-shadow: var(--shadow-card);
  background-image: repeating-linear-gradient(135deg, rgba(27,42,65,.02) 0 2px, transparent 2px 8px);
}
/* 左端の色の帯（名刺の差し色） */
.mcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #000)); }
/* 右上のICチップ（NFC名刺の印） */
.mcard::after {
  content: ""; position: absolute; right: 14px; top: 13px; width: 26px; height: 20px;
  border-radius: 5px; border: 1px solid #c8a94a;
  background:
    linear-gradient(90deg, transparent 48%, #c8a94a 48% 52%, transparent 52%),
    linear-gradient(0deg, transparent 48%, #c8a94a 48% 52%, transparent 52%),
    linear-gradient(145deg, #f2dc8f, #d4b455 60%, #b8942f);
  opacity: .9;
}
.mcard-name { font-size: 21px; font-weight: 700; font-family: var(--serif); letter-spacing: .08em;
  line-height: 1.3; }
.mcard-sub { font-size: 12.5px; color: #4b5563; margin-top: 2px; }
.mcard-org { font-size: 13.5px; margin-top: 8px; font-weight: 700; color: #2b3445;
  padding-right: 40px; }
.mcard-foot { font-size: 12px; color: #6b7280; margin-top: 10px; word-break: break-all;
  padding-top: 8px; border-top: 1px dashed var(--line-strong); }
.mini .mcard { margin-bottom: 14px; }
.hero { margin-bottom: 16px; }

.listcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.lc-meta { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14.5px; }
.badge {
  font-size: 11px; background: #eef2f8; color: var(--navy); padding: 2px 8px;
  border-radius: 999px; font-weight: 700;
}
.badge.stop { background: #fdf1f2; color: #8a1c2e; }
.urlrow {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  background: #faf8f2; border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px;
}
.urlrow code {
  flex: 1; font-size: 12.5px; word-break: break-all; color: #334155;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.urlrow.big code { font-size: 14px; }

/* --- 一覧（名刺ホルダーのポケット） --- */
.row {
  display: flex; align-items: center; gap: 12px; background: #fff; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; color: var(--ink);
  box-shadow: 0 1px 2px rgba(27,42,65,.05); position: relative;
}
.row:hover { text-decoration: none; background: #fdfbf6; border-color: var(--line-strong); }
.ravatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%; background: #eef1f6;
  color: var(--navy); display: grid; place-items: center; font-weight: 700; font-size: 17px;
  font-family: var(--serif); border: 1px solid #dfe4ec;
}
.rmain { flex: 1 1 auto; min-width: 0; }
.rmain b { display: block; font-size: 15.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rmain i { display: block; font-style: normal; color: var(--muted); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rmain i.met { font-size: 11.5px; opacity: .85; }
/* 出会った場所が長くても氏名を潰さないよう、右側は幅を絞る */
.rside { text-align: right; font-size: 11px; color: var(--muted);
  flex: 0 0 auto; max-width: 30%; white-space: nowrap; }
.rside em { display: block; font-style: normal; opacity: .8;
  overflow: hidden; text-overflow: ellipsis; }
.tag {
  display: inline-block; font-size: 11px; background: var(--brass-soft); color: #6b5314;
  padding: 1px 7px; border-radius: 999px; margin: 3px 3px 0 0; font-weight: 600;
}
.searchbar { display: flex; gap: 8px; margin-bottom: 12px; }
.searchbar input { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line-strong); font-size: 13px; color: #334155;
  white-space: nowrap; font-weight: 600;
}
.chip:hover { text-decoration: none; }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip i { font-style: normal; opacity: .6; font-size: 11px; }
.countline {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--muted); margin: 6px 2px 10px;
}
.exports { display: flex; gap: 12px; }
.empty {
  text-align: center; padding: 36px 20px; background: #fff; border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.empty h3 { margin: 0 0 6px; font-size: 16px; }
.empty p { color: var(--muted); font-size: 14px; margin: 0 0 14px; }

.dl { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f1ede4; font-size: 14.5px; }
.dl:last-child { border-bottom: 0; }
.dl span { flex: none; width: 6.5em; color: var(--muted); font-size: 13px; }
.dl div { flex: 1; word-break: break-word; }
.memo { background: #fffaea; border: 1px solid #f1dfa0; border-radius: 10px; padding: 12px; margin: 14px 0; }
.memo b { font-size: 12px; color: #8a6a12; }
.memo p { margin: 4px 0 0; font-size: 14.5px; }
.shot { max-width: 100%; border-radius: 10px; border: 1px solid var(--line); margin: 10px 0; }

/* --- 公開名刺ページ --- */
.pubcard {
  background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card);
  border: 1px solid var(--line); margin-top: 8px;
}
/* 名刺そのものに見せる: 白い紙・左に名刺の色の帯・明朝の名前。グラデーションと絵文字は使わない */
.pubhead {
  background: #fff; color: var(--ink); padding: 26px 22px 20px 24px; text-align: left; position: relative;
  border-bottom: 1px solid var(--line); box-shadow: inset 6px 0 0 var(--accent);
}
.pubhead::after { display: none; }
.avatar {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 0 14px;
  display: block; border: 1px solid var(--line); background: #fff;
}
.avatar.ph { display: grid; place-items: center; font-size: 26px; font-weight: 700; border-radius: 10px;
  background: var(--bg); color: var(--ink); font-family: var(--serif); }
.avatar.sm { width: 56px; height: 56px; border-color: var(--line); margin: 0 0 8px; box-shadow: none; }
.pubhead h1 { margin: 0; font-size: 28px; font-family: var(--serif); letter-spacing: .08em; line-height: 1.3; }
.kana { font-size: 12px; color: var(--muted); letter-spacing: .12em; }
.prole { font-size: 14px; color: #4b463f; margin-top: 10px; }
.porg { font-size: 15.5px; font-weight: 700; }
.tagline { font-size: 14px; color: #4b463f; margin: 14px 0 0; padding-left: 10px; border-left: 2px solid var(--accent); }
.pubbody { padding: 18px; }
.ci { display: none; }                       /* 絵文字のアイコンは使わない（見出しの文字で十分） */
.cv { flex: 1; min-width: 0; }
.cv b { display: block; font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .08em; }
.cv i { font-style: normal; font-size: 15px; word-break: break-all; }
.bio { font-size: 14.5px; color: #374151; margin: 16px 0; white-space: normal; }
/* 自分の名刺を自分で開いたときの断り書き。数字が信用できることを伝える */
.ownnote { margin-top: 16px; padding: 10px 12px; border-radius: 10px;
  background: #faf8f2; border: 1px solid var(--line); color: #475569;
  font-size: 13px; line-height: 1.6; }

.pubacts { margin-top: 18px; }
.poweredby { text-align: center; font-size: 11px; color: #9aa3af; margin: 20px 0 4px;
  letter-spacing: .08em; }

/* --- 効果測定 --- */
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 10px; text-align: center;
}
.stat b { display: block; font-size: 24px; font-family: var(--serif); color: var(--ink); }
.stat span { font-size: 11px; color: var(--muted); line-height: 1.4; display: block; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 130px; overflow-x: auto; }
/* 1日分しかなくても1本が横いっぱいに伸びないよう上限を付ける */
.bar { flex: 1 1 0; min-width: 15px; max-width: 30px; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; height: 100%; }
.bar i { display: block; width: 100%; height: var(--h); min-height: 2px;
  background: linear-gradient(180deg, var(--brass), var(--navy)); border-radius: 3px 3px 0 0; opacity: .9; }
.bar span { font-size: 8.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.tablewrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th, .tbl td {
  padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap;
}
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl td:first-child { white-space: normal; min-width: 7em; }
.tbl th { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.tbl small { display: block; color: var(--muted); font-size: 11px; }

/* --- ランディング --- */
.landing h1 { font-size: 32px; margin: 10px 0 14px; line-height: 1.35; font-family: var(--serif);
  letter-spacing: .04em; }
.eyebrow { font-size: 12px; letter-spacing: .2em; color: var(--accent); font-weight: 700; margin: 12px 0 0; }
.feat { display: grid; gap: 18px 28px; margin-top: 30px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feat > div { padding: 2px 0 2px 14px; border-left: 2px solid var(--accent); }
.feat b { font-size: 15px; }
.feat p { margin: 4px 0 0; font-size: 14px; color: #4b463f; }

/* --- NFC・QR --- */
.qrbox { display: grid; place-items: center; padding: 14px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; }
.qrbox svg { max-width: 200px; height: auto; }
.howto { margin-top: 14px; font-size: 14px; }
.howto summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--accent); }
.howto ul, .tips { padding-left: 1.15em; }
.howto li, .tips li { margin: 9px 0; color: #4b5563; font-size: 14px; }
.nfcnote, .scanstate { font-size: 13px; color: var(--muted); margin: 9px 0 0; }
.danger-zone { border-color: #f0c3ca; }
.danger-zone .section { color: var(--danger); border-color: #f0c3ca; }
.danger-zone .section::before { background: var(--danger); }
.doc h3 { font-size: 15.5px; margin: 22px 0 6px; }
.doc ul { padding-left: 1.15em; }
.doc li, .doc p { font-size: 14.5px; color: #374151; }

/* --- アプリ共有画面の「渡らないもの／できること」 --- */
.cmp { display: grid; gap: 12px; margin: 6px 0 12px; }
@media (min-width: 560px) { .cmp { grid-template-columns: 1fr 1fr; } }
.cmp > div { border-radius: 12px; padding: 13px 15px; border: 1px solid var(--line); }
.cmp b { display: block; font-size: 13.5px; margin-bottom: 6px; }
.cmp ul { margin: 0; padding-left: 1.15em; }
.cmp li { font-size: 13.5px; margin: 5px 0; color: #374151; }
.cmp-no { background: #fdf1f2; border-color: #f0c3ca; }
.cmp-no b { color: #8a1c2e; }
.cmp-yes { background: #eef7f0; border-color: #bfe0c9; }
.cmp-yes b { color: #175a39; }

/* --- カード発行（ICチップ入りカードの製造管理） --- */
.stats3.wrap4 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 520px) { .stats3.wrap4 { grid-template-columns: repeat(6, 1fr); } }
.badge.ok { background: #eef7f0; color: #175a39; }
code.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em;
  background: #f3efe6; padding: 1px 6px; border-radius: 5px; font-size: 12px;
}
.tbl select { padding: 4px 6px; font-size: 12.5px; border-radius: 7px; }
/* 在庫一覧はスマホでも潰れないようリスト形式にする */
.pcrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.pcrow:last-child { border-bottom: 0; }
.pc-main { min-width: 0; flex: 1 1 55%; }
.pc-main b { font-size: 13px; color: var(--muted); margin-right: 6px; }
.pc-main code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px;
}
.pc-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.pc-act { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pc-act select { width: auto; padding: 5px 8px; font-size: 12.5px; border-radius: 8px;
  font-weight: 700; }
/* 状態がひと目で分かるよう、プルダウン自体を色分けする */
.pc-act select.st-new      { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.pc-act select.st-written  { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.pc-act select.st-verified { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
.pc-act select.st-shipped  { background: #f8fafc; border-color: #cbd5e1; color: #334155; }
.pc-act select.st-active   { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.pc-act select.st-disabled { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.writenow {
  font-size: 19px; font-weight: 700; text-align: center; padding: 22px 12px; margin: 12px 0;
  background: #faf8f2; border: 2px dashed var(--line-strong); border-radius: 12px; word-break: break-all;
}
/* ボタンの中の補足文。見出しと同じ行に並ばないよう改行する
   （.btn.small は大きさの指定なので別物。こちらは <small> 要素） */
.btn > small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600;
  opacity: .85; line-height: 1.4; }

/* フォロー。最後に関わってからの間隔を、色だけで一目で分かるようにする */
.fresh { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--line); background: #faf8f2; }
.fresh b { font-size: 19px; }
.fresh span { font-size: 12px; color: #64748b; }
.fresh.ok { background: #eef7f0; border-color: #bfe0c9; }
.fresh.ok b { color: #175a39; }
.fresh.warm { background: #fffaea; border-color: #f1dfa0; }
.fresh.warm b { color: #8a6a12; }
.fresh.cold { background: #fdf1f2; border-color: #f0c3ca; }
.fresh.cold b { color: #8a1c2e; }

/* 次にやること */
.turow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--line); }
.turow:first-of-type { border-top: 0; }
.turow.done { opacity: .5; }
.turow.done b { text-decoration: line-through; }
.tumain { flex: 1 1 200px; min-width: 0; }
.tumain b { font-size: 15px; }
.tumain i { display: block; font-style: normal; font-size: 12.5px; color: #64748b;
  margin-top: 2px; }
.tuacts { display: flex; gap: 6px; flex: none; }
.due { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; background: #eef1f6; color: #475569; }
.due.over { background: #fde4e7; color: #a11a30; }
.due.today { background: #dbeafe; color: #1d4ed8; }
.due.future { background: #f1f5f9; color: #64748b; }

/* 発注の進み具合。いまどこまで進んだかを1目盛りずつ示す */
.steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 4px; }
.steps li { flex: 1; min-width: 0; padding-top: 16px; position: relative;
  font-size: 11.5px; color: #94a3b8; text-align: center; }
.steps li::before { content: ""; position: absolute; top: 4px; left: 0; right: 0;
  height: 4px; background: #e6e0d4; border-radius: 2px; }
.steps li.done::before { background: #b9c6d8; }
.steps li.now::before { background: var(--brass); }
.steps li b { display: block; font-size: 12px; color: #64748b; font-weight: 700; }
.steps li i { display: block; font-style: normal; font-size: 10px; }
.steps li.now b { color: var(--navy); }
.steps li.done b { color: #475569; }

/* 発注のやり取りの記録 */
.events .ev { border-left: 3px solid #e6e0d4; padding: 4px 0 10px 12px; margin-left: 4px; }
.events .ev.admin { border-left-color: var(--brass); }
.events .ev b { font-size: 13.5px; }
.events .ev i { font-style: normal; font-size: 11.5px; color: #94a3b8; margin-left: 8px; }
.events .ev p { margin: 4px 0 0; font-size: 13.5px; color: #475569;
  white-space: pre-wrap; }

/* 連絡先欄。スマホで見て、その場でかける・コピーするための行 */
.crow { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  padding: 11px 4px; color: var(--ink); }
.crow:hover { text-decoration: none; background: #fdfbf6; }
/* 区切り線は行と行のあいだだけ。見出し直下に線が出ないようにする */
.crow + .crow { border-top: 1px solid var(--line); }
.cmain { flex: 1 1 190px; min-width: 0; }
.clabel { display: block; font-size: 11.5px; color: #64748b; margin-bottom: 2px; }
.cval { display: block; font-size: 17px; font-weight: 700; color: var(--ink);
  word-break: break-all; line-height: 1.35; }
.cmain small { display: block; margin-top: 2px; font-size: 12px; color: #64748b; }
.cacts { display: flex; gap: 6px; flex: none; }
.cacts .btn { white-space: nowrap; }
/* 選択してコピーしてもらう最終手段のとき、値が見やすいように */
.cval::selection { background: #bfdbfe; }

.wqueue { margin: 14px 0 0; padding-left: 1.4em; max-height: 260px; overflow-y: auto; }
.wqueue li { font-size: 13px; color: #475569; padding: 3px 0; }
.wqueue li b { margin-right: 8px; }
.wqueue li code { font-size: 12px; color: #64748b; }
.wqueue li.done { opacity: .4; text-decoration: line-through; }
/* 読み取ったURLが想定と違ったタグ。取り除けるよう目立たせる */
.wqueue li.warn { color: #b91c1c; font-weight: 700; }
.wqueue li.warn code { color: #b91c1c; }

/* 同梱する「有効化のご案内」カード */
.labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6mm; }
.label {
  border: 1px dashed #bbb; border-radius: 2mm; padding: 4mm; text-align: center;
  background: #fff; break-inside: avoid;
}
.lb-head { font-size: 2.7mm; font-weight: 700; margin-bottom: 2mm; }
.lb-qr svg { width: 26mm; height: 26mm; }
.lb-code { margin-top: 2mm; }
.lb-code span { display: block; font-size: 2.2mm; color: #6b7280; }
.lb-code b { font-size: 4mm; letter-spacing: .1em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.lb-note { font-size: 2.1mm; color: #6b7280; margin-top: 2mm; line-height: 1.5; }

/* --- 名刺の印刷イメージ --- */
.printwrap { max-width: 420px; margin: 0 auto; }
.meishi {
  width: 91mm; height: 55mm; background: #fff; border: 1px solid var(--line);
  border-radius: 3mm; padding: 6mm; margin: 0 auto 6mm; position: relative;
  box-shadow: var(--shadow-card); overflow: hidden;
}
.meishi.front::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2.5mm; background: var(--accent);
}
.m-name { font-size: 6mm; font-weight: 700; letter-spacing: .08em; font-family: var(--serif); }
.m-kana { font-size: 2.4mm; color: #6b7280; }
.m-role { font-size: 2.8mm; margin-top: 2mm; color: #374151; }
.m-org { font-size: 3.4mm; font-weight: 700; }
.m-contact { position: absolute; left: 6mm; bottom: 5mm; font-size: 2.6mm; color: #4b5563; line-height: 1.6; }
.meishi.back { display: flex; align-items: center; gap: 5mm; background: var(--accent); color: #fff; }
.m-qr { background: #fff; padding: 1.5mm; border-radius: 1.5mm; line-height: 0; }
.m-qr svg { width: 22mm; height: 22mm; }
.m-back-text b { display: block; font-size: 4.2mm; }
.m-back-text span { display: block; font-size: 2.6mm; opacity: .9; }
.m-back-text small { display: block; font-size: 2.1mm; opacity: .75; margin-top: 2mm; word-break: break-all; }
@media print {
  .noprint, .top, .tabbar { display: none !important; }
  body { background: #fff; }
  .meishi { box-shadow: none; border: 1px dashed #bbb; }
}

/* 会社名のふりがな（公開名刺） */
.porg-kana { display: block; font-size: .68em; font-weight: 500; opacity: .75; letter-spacing: .08em; }

/* かざして読み取る画面の手順 */
.stepbox { display: grid; gap: 10px; margin: 14px 0; }
.stepbox .step { background: #faf8f2; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; line-height: 1.55; }
.stepbox .step b:first-child { color: var(--navy); margin-right: 6px; }
.stepbox .step small { display: block; color: var(--muted); margin-top: 3px; }

/* 取り込み先の選択（かざして読む・貼り付け取り込み） */
label.radio { display: flex; gap: 8px; align-items: center; padding: 6px 0; font-size: 14.5px; }
label.radio input { width: auto; accent-color: var(--navy); }

/* 前の画面に戻るボタン（ヘッダー左） */
.topback {
  display: inline-flex; align-items: center; gap: 2px; margin-right: 10px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  padding: 6px 10px 6px 6px; margin-left: -6px; border-radius: 8px;
  flex: none; -webkit-tap-highlight-color: transparent;
}
.topback:hover { background: rgba(0,0,0,.05); text-decoration: none; }
.topback:active { background: rgba(0,0,0,.1); }
.top .brand { flex: 1; min-width: 0; }
.top .brand span:not(.logo), .top .brand { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) {
  .topback span { display: none; }     /* 幅が狭いときは矢印だけ */
}

/* ページ下の規約リンク（法律上、いつでも辿れる場所に置く） */
.pagefoot {
  margin: 32px 0 8px; padding-top: 16px; border-top: 1px solid var(--line-strong);
  font-size: 12.5px; color: var(--muted); text-align: center; line-height: 2;
}
.pagefoot a { color: var(--muted); }

/* 特商法の表記の表 */
.ltable { margin: 16px 0; border-top: 1px solid var(--line); }
.lrow { display: flex; gap: 16px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.lkey { flex: 0 0 34%; font-weight: 600; color: var(--ink); }
.lval { flex: 1; min-width: 0; color: var(--ink); line-height: 1.7; word-break: break-word; }
@media (max-width: 480px) { .lrow { display: block; } .lkey { margin-bottom: 4px; } }

/* 持っているICカードの一覧 */
.pcard {
  display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px;
}
.pcard.off { background: var(--bg); opacity: .75; }
.pcmain { flex: 1; min-width: 200px; line-height: 1.7; }
.pcmain b { display: block; font-size: 15.5px; }
.pcmain i { display: block; font-style: normal; font-size: 13px; color: var(--muted); }
.pcnote { font-size: 13px; color: var(--danger); font-weight: 600; }
.pclink { font-size: 13px; }
.pcacts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pcacts select { width: auto; min-width: 130px; padding: 6px 8px; font-size: 13px; }
.inline { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; max-width: 100%; }

/* --- 行の中の小さなフォーム（一覧の各行に置く操作）---
   入力欄の共通スタイルは「幅100%・16px」なので、行の中に <select> や <input> をそのまま置くと
   ボタンより大きく出て行が崩れる。置き場所（.inline / .cacts / .ckact / .lc-acts / .ckrow）で
   大きさを決めておき、新しい画面で行の中に部品を置いても自動で小さくなるようにする。
   この決まりは app/uilint.py が自動反映の前に確かめる（守られていないと反映しない） */
.inline select, .inline input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]), .inline textarea,
.cacts select, .cacts input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]), .cacts textarea,
.ckact select, .ckact input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]), .ckact textarea,
.lc-acts select, .lc-acts input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]), .lc-acts textarea,
.ckrow select, .ckrow input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]), .ckrow textarea {
  width: auto; min-width: 0; max-width: 100%; padding: 5px 8px; font-size: 12.5px; border-radius: 8px; line-height: 1.3;
}
.inline .btn, .cacts .btn, .ckact .btn { white-space: nowrap; }
.rowlabel { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
/* 行の中の操作は折り返して、本文（名前・メールなど）の幅を確保する */
.ckrow .cacts, .listcard .cacts { flex-wrap: wrap; justify-content: flex-end; align-items: center; max-width: 62%; }
@media (max-width: 560px) {
  .ckrow { flex-wrap: wrap; }
  .ckrow .cacts { max-width: none; width: 100%; justify-content: flex-start; }
}
.hint { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.inqform { margin-top: 12px; }

/* 公開までの確認リスト・自己点検の一覧 */
.ckrow {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 8px;
}
.ckrow.done { background: #f7fbf7; }
.ckmark {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid;
  place-items: center; font-size: 14px; font-weight: 700; color: #fff;
}
.ckrow.done .ckmark { background: #1f7a4d; }
.ckrow.todo .ckmark { background: var(--danger); }
.ckmain { flex: 1; min-width: 0; line-height: 1.6; }
.ckmain b { display: block; font-size: 15px; }
.ckmain i { display: block; font-style: normal; font-size: 13px; color: var(--muted); }
.ckwarn { display: block; font-size: 13px; color: var(--danger); margin-top: 4px; }
.ckfix { display: block; font-size: 12.5px; color: #175a39; margin-top: 4px; }
.ckact { flex: none; }
.cklist { margin-top: 14px; }
.logbox { font-size: 11.5px; line-height: 1.5; background: #1b2a41; color: #e6ebf2;
  padding: 12px; border-radius: 10px; overflow-x: auto; white-space: pre; }

/* リンクが誰に届くかの表示 */
.reach {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  border-radius: 12px; padding: 10px 14px; margin: 10px 0;
  font-size: 13.5px; line-height: 1.6;
}
.reach b { flex: none; font-size: 14px; }
.reach span { flex: 1; min-width: 200px; }
.reach.all { background: #eef7f0; border: 1px solid #bfe0c9; color: #14532d; }
.reach.lan { background: #fff8e6; border: 1px solid #f0d48a; color: #713f12; }
.reach.self { background: #fdf0f0; border: 1px solid #ecbcbc; color: #7f1d1d; }

/* 読み仮名のルビ（漢字の上にひらがな）。名刺の見出し・一覧・詳細で共通 */
ruby { ruby-position: over; ruby-align: space-around; }
ruby rt { font-size: 0.5em; font-weight: 400; opacity: .78; letter-spacing: .08em; }
.pubhead h1 ruby rt { font-size: 0.45em; }

/* Safariから戻ってきたときに「コピーしたURLで自動登録」を目立たせる */
.btn.pulse { animation: tapri-pulse 1.2s ease-in-out 4; }
@keyframes tapri-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, .6); }
  50% { box-shadow: 0 0 0 12px rgba(201, 162, 39, 0); }
}

/* 名刺のアイコン（写真から選ぶ・丸く表示） */
.mcard-top { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.mcard-top > div { min-width: 0; overflow-wrap: anywhere; }
.mcard-ava { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-strong), 0 2px 6px rgba(27,42,65,.15); }
.mcard-ava.ph { display: grid; place-items: center; background: #eef1f6;
  color: var(--navy); font-weight: 700; font-size: 18px; font-family: var(--serif); }
.iconrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.iconform { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; }
.iconpick { display: flex; align-items: center; gap: 10px; cursor: pointer; border-radius: 10px; }
.iconpick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.iconpick input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.iconpick span { font-size: 13px; color: var(--accent); text-decoration: underline; }
.iconpick .avatar.sm { margin: 0; }
.iconnote { font-size: 12.5px; color: #555; }

/* 箇条書き（通知メールの出来事など）: 余白を詰めて読みやすく */
ul.plain { margin: 8px 0; padding-left: 20px; font-size: 14px; line-height: 1.7; }

/* --- 名刺ページの追加コンテンツ（セクション） --- */
.sec { margin: 18px 0; padding-top: 14px; border-top: 1px solid #efe9dc; }
.sec-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.linklist { display: flex; flex-direction: column; gap: 8px; }
.linkbtn { display: block; padding: 11px 14px; border: 1px solid #e3dccb; border-radius: 12px; background: #fff;
  color: var(--navy); font-weight: 600; text-decoration: none; text-align: center; }
.linkbtn:hover { border-color: var(--accent, var(--navy)); text-decoration: none; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block; }
.gallery figcaption { font-size: 11px; color: var(--muted); margin-top: 3px; }
.videowrap, .mapwrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #f3efe6; margin: 8px 0; }
.videowrap iframe, .mapwrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sectext { font-size: 14.5px; color: #374151; line-height: 1.75; }
.itemlist { list-style: none; padding: 0; margin: 0; }
.itemlist li { padding: 9px 0; border-bottom: 1px dashed #ebe5d8; font-size: 14.5px; }
.itemlist li b { display: inline-block; margin-right: 8px; }
.itemlist li .price { float: right; color: var(--navy); font-weight: 700; }
.itemlist li small { display: block; color: var(--muted); font-size: 12.5px; }
.review { margin: 10px 0; padding: 10px 12px; background: #faf7f0; border-left: 3px solid var(--accent, var(--navy)); border-radius: 0 10px 10px 0; }
.review .stars { color: #d49a1c; letter-spacing: 2px; font-size: 13px; }
.review p { margin: 4px 0; font-size: 14px; }
.review cite { font-style: normal; font-size: 12px; color: var(--muted); }
.hpf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; vertical-align: middle; margin: 0 6px; }

/* --- 料金表・書類（見積書／請求書／領収書／納品書）・SKUラベル --- */
.price-big { font-size: 22px; font-weight: 800; color: var(--navy); margin: 6px 0; }
.price-big small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.prodimg { width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px; margin-bottom: 8px; }
.doc { max-width: 760px; margin: 0 auto; padding: 28px 24px; background: #fff; color: #111; font-size: 14px; line-height: 1.6; }
.doc-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #111; padding-bottom: 8px; }
.doc-head h1 { font-size: 26px; letter-spacing: .3em; margin: 0; }
.doc-meta { text-align: right; font-size: 13px; }
.doc-parties { display: flex; justify-content: space-between; gap: 24px; margin: 22px 0; }
.doc-to { font-size: 16px; } .doc-to b { font-size: 18px; border-bottom: 1px solid #111; }
.doc-addr { font-size: 13px; margin-top: 6px; }
.doc-from { text-align: right; font-size: 13px; }
.doc-total { font-size: 16px; padding: 10px 0; border-bottom: 1px solid #111; margin-bottom: 14px; }
.doc-total b { font-size: 22px; margin: 0 6px; }
.doc-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
.doc-table th, .doc-table td { border: 1px solid #999; padding: 7px 9px; text-align: left; }
.doc-table .num { text-align: right; white-space: nowrap; }
.doc-table tfoot th { background: #f3f3f3; }
.doc-note { margin: 12px 0; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; }
.label-card { display: flex; align-items: center; gap: 16px; width: 90mm; padding: 6mm; border: 1px dashed #999; }
.label-card .qrbox { width: 30mm; }
.label-text b { display: block; font-size: 18px; } .label-text span { display: block; } .label-text small { color: #666; }
@media print { .doc { padding: 0; } .noprint { display: none !important; } body { background: #fff; } }
.prodpick { padding: 10px 12px; border: 1px solid #e3dccb; border-radius: 12px; margin: 8px 0; background: #fff; }
.prodpick.off { opacity: .55; }
.prodpick .opts { margin: 4px 0 0 26px; }
.prodpick .opts .check { margin: 6px 0; font-size: 13.5px; }

.codes { background: #faf7f0; border: 1px solid #e3dccb; border-radius: 10px; padding: 12px; font-size: 13px; white-space: pre-wrap; word-break: break-all; }
.listcard.on { border-color: var(--navy); }

/* --- 見た目の番人（static/app.js）が付ける印。はみ出した行を折り返して収める --- */
.fit { flex-wrap: wrap !important; max-width: 100% !important; min-width: 0 !important; overflow-wrap: anywhere; }
.fit > * { min-width: 0; max-width: 100%; }
/* はみ出した部品そのもの: 折り返せるものは折り返し、折り返せないものは「…」で省略する */
.fit-leaf { white-space: normal !important; overflow-wrap: anywhere; max-width: 100% !important; min-width: 0 !important;
  overflow: hidden; text-overflow: ellipsis; }
img, video, canvas { max-width: 100%; }
/* 長いメールアドレス・URL は行の中で折り返す（はみ出しの主な原因） */
.ckmain i, .lc-sub, .cval, .ckwarn, .ckfix, .fineprint { overflow-wrap: anywhere; }

/* --- 指で使う端末（スマホ・タブレット）: 小さなボタンは押しやすい大きさに、入力欄は 16px に ---
   iPhone は文字が 16px より小さい入力欄を触ると画面を勝手に拡大し、そのまま戻らないことがある
   （「スマホだけ表示の大きさが変」の原因になる）。行の中の小さな部品も、指で使う端末では 16px にする */
@media (pointer: coarse) {
  .btn.tiny { padding: 7px 11px; font-size: 13px; }
  select, textarea, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) { font-size: 16px !important; }
  .inline select, .cacts select, .ckact select, .lc-acts select, .ckrow select,
  .inline input, .cacts input, .ckact input, .lc-acts input, .ckrow input { padding: 6px 8px; }
}
/* 一覧の行（.row）は折り返さず、本文を「…」で省略する方針。flex の子が縮めるよう min-width: 0 を明示する */
.row .rmain { min-width: 0; overflow: hidden; }