/* あんずちゃんアプリの見た目
   あんず色（オレンジ）とクリーム色を基本に、丸ゴシック（Zen Maru Gothic）でやわらかく */
:root {
  --cream: #fff8ef;       /* 画面の地 */
  --paper: #ffffff;
  --ink: #3a2a1c;         /* 文字（こげ茶） */
  --sub: #8b7763;         /* 補足の文字 */
  --faint: #b9a893;
  --line: #f0e3d2;
  --apricot: #f7a23b;     /* 主役の色 */
  --apricot-d: #e8851a;
  --apricot-l: #ffeacb;
  --apricot-xl: #fff3e1;
  --leaf: #7a9a3a;
  --line-green: #06c755;  /* LINE のボタンだけ */
  --red: #e5484d;
  --talk: #f4ebdf;        /* トークの背景 */
  --mine: #ffd28a;
  --theirs: #ffffff;
  --shadow: 0 2px 0 rgba(122, 82, 36, .06), 0 8px 24px rgba(122, 82, 36, .08);
  --radius: 20px;
  --app-h: 100dvh;
  --fz: 1;                /* 文字の倍率（ふつうの字） */
  --fzl: 1;               /* 文字の倍率（見出しなど大きい字。控えめに大きくする） */
}
/* 文字の大きさ 3 段階（common.js が html に data-fz を付ける） */
html[data-fz="1"] { --fz: 1.12; --fzl: 1.06; }
html[data-fz="2"] { --fz: 1.25; --fzl: 1.12; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
/* 画面ごと引っ張れてバウンドすると、チカチカして見える（トークの発言が少なくてスクロールしないとき、指の動きがページ全体に伝わる）。
   ページ全体のバウンドは一番外側の html で止めないと iPhone では効かない（10/10 のっくり「下に引っ張ったらチカチカ」） */
html { overscroll-behavior: none; }
body {
  font-family: "Zen Maru Gothic", -apple-system, BlinkMacSystemFont, "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  font-weight: 500; color: var(--ink); background: var(--cream); font-size: calc(16px * var(--fz)); line-height: 1.6;
  overscroll-behavior: none; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea { font: inherit; font-size: calc(16px * var(--fz)); color: var(--ink); } /* 16px 未満だと iPhone が勝手に拡大する */
a { color: var(--apricot-d); }
.hidden { display: none !important; }
b, strong { font-weight: 700; }

/* ---------- 共通の部品 ---------- */
.page { max-width: 520px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom)); }
.card { background: var(--paper); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card h2 { margin: 0 0 6px; font-size: calc(21px * var(--fzl)); line-height: 1.4; font-weight: 900; }
.card .row { color: var(--ink); margin: 4px 0; white-space: pre-wrap; word-break: break-word; }
label { display: block; font-weight: 700; margin: 16px 0 8px; font-size: calc(15px * var(--fz)); }
label small { font-weight: 500; color: var(--sub); }
.field {
  width: 100%; padding: 14px 16px; border: 2px solid var(--line); border-radius: 16px; background: var(--paper);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.field:focus { border-color: var(--apricot); box-shadow: 0 0 0 4px var(--apricot-l); }
textarea.field { min-height: 96px; resize: vertical; line-height: 1.6; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; padding: 12px 18px;
  border: none; border-radius: 999px; font-weight: 700; font-size: calc(17px * var(--fz)); margin-top: 14px; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #ffb24f, var(--apricot-d)); box-shadow: 0 4px 0 #c96a0c, 0 8px 18px rgba(232, 133, 26, .3);
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #c96a0c, 0 3px 8px rgba(232, 133, 26, .3); }
.btn:disabled { opacity: .45; }
/* ボタンの下に小さな説明を付けるとき（機種変更の「送る・受け取る」など） */
.btn:has(small) { flex-direction: column; gap: 0; line-height: 1.3; }
.btn small { font-size: calc(12px * var(--fz)); font-weight: 700; opacity: .9; }
.btn.sub { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2px var(--line) inset, 0 3px 0 var(--line); }
.btn.sub:active { box-shadow: 0 0 0 2px var(--line) inset; }
.btn.line { background: var(--line-green); box-shadow: 0 4px 0 #04963f, 0 8px 18px rgba(6, 199, 85, .25); }
.btn.ghost { background: none; box-shadow: none; color: var(--sub); min-height: 44px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.btn.danger { background: var(--paper); color: var(--red); box-shadow: 0 0 0 2px #f6c9ca inset; }
.sectitle { font-weight: 900; font-size: calc(17px * var(--fz)); margin: 28px 4px 12px; display: flex; align-items: center; gap: 8px; }
.tapnote { text-align: center; font-weight: 900; color: var(--apricot-d); font-size: calc(15px * var(--fz)); margin: -4px 0 10px; animation: hop 1.4s ease-in-out infinite; }
#hello.tap { cursor: pointer; }
#hello.tap small b { color: var(--apricot-d); }
#hello .go { display: inline-block; margin-top: 6px; font-weight: 900; color: var(--apricot-d); }
.sectitle .count { font-size: calc(14px * var(--fz)); color: var(--sub); font-weight: 700; }
.note { color: var(--sub); font-size: calc(15px * var(--fz)); line-height: 1.7; }
.err { color: var(--red); font-size: calc(15px * var(--fz)); margin-top: 8px; min-height: 1em; font-weight: 700; }
.copybox { display: flex; gap: 8px; margin-top: 6px; }
.copybox input { flex: 1; min-width: 0; }
.copybox button { padding: 0 18px; border: none; border-radius: 16px; background: var(--ink); color: #fff; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  border: 2px solid var(--line); background: var(--paper); border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: calc(15px * var(--fz));
  transition: all .12s;
}
.chip.on { border-color: var(--apricot); background: var(--apricot-l); color: #9a4f00; }
.chip:active { transform: scale(.96); }

/* ロゴ（あんずの顔＋文字） */
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo img { width: 44px; height: 44px; }
.logo .word { display: flex; flex-direction: column; line-height: 1.05; }
.logo .word b { font-size: 22px; font-weight: 900; letter-spacing: .02em; }
.logo .word small { font-size: 12px; font-weight: 700; color: var(--apricot-d); letter-spacing: .32em; margin-top: 3px; }

/* あんずちゃんの案内（キャラ＋ふきだし） */
.guide { display: flex; align-items: flex-end; gap: 6px; margin: 8px 0 18px; }
.guide img { width: 104px; height: 104px; flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(122, 82, 36, .15)); }
.guide .say {
  position: relative; flex: 1; background: var(--paper); border-radius: 22px; padding: 14px 16px; font-weight: 700; font-size: calc(17px * var(--fz));
  line-height: 1.55; box-shadow: var(--shadow); margin-bottom: 26px;
}
.guide .say::before {
  content: ""; position: absolute; left: -9px; bottom: 18px; width: 18px; height: 18px; background: var(--paper);
  transform: rotate(45deg); border-radius: 3px;
}
.guide .say small { display: block; font-weight: 500; font-size: calc(15px * var(--fz)); color: var(--sub); margin-top: 4px; line-height: 1.6; }
.guide.big { flex-direction: column; align-items: center; text-align: center; }
.guide.big img { width: 168px; height: 168px; }
.guide.big .say { margin: 6px 0 0; }
.guide.big .say::before { left: 50%; top: -8px; bottom: auto; margin-left: -9px; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.guide img.hop { animation: hop 2.4s ease-in-out infinite; }

/* 日付のタイル（カレンダーの切れ端風） */
.dtile {
  width: 56px; flex-shrink: 0; border-radius: 14px; overflow: hidden; text-align: center; background: var(--paper);
  box-shadow: 0 0 0 2px var(--line) inset; line-height: 1.1;
}
.dtile .m { display: block; background: var(--apricot); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 0; }
.dtile .m .y { display: block; font-style: normal; font-size: 10px; opacity: .85; line-height: 1.2; }  /* 西暦（あとで見返したときに分かるように） */
.dtile .d { display: block; font-size: 22px; font-weight: 900; padding-top: 4px; }
.dtile .w { display: block; font-size: 12px; color: var(--sub); padding-bottom: 5px; font-weight: 700; }
.dtile.tbd .d { font-size: 13px; padding: 9px 0 3px; }

/* ---------- トップ ---------- */
.top-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.panels { display: grid; gap: 14px; }
.panel {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 128px; padding: 20px 18px; border: none;
  border-radius: 26px; text-align: left; text-decoration: none; color: var(--ink); background: var(--paper); box-shadow: var(--shadow);
  overflow: hidden; transition: transform .1s;
}
.panel:active { transform: scale(.98); }
.panel .txt { flex: 1; z-index: 1; }
.panel .txt b { display: block; font-size: 22px; font-weight: 900; line-height: 1.35; }
.panel .txt span { display: block; font-size: calc(15px * var(--fz)); color: var(--sub); margin-top: 4px; line-height: 1.6; }
.panel img { width: 112px; height: 112px; margin: -10px -8px -14px 0; flex-shrink: 0; }
.panel.main { background: linear-gradient(135deg, #ffbe5c 0%, #f7a23b 55%, #ee8a24 100%); color: #fff; min-height: 150px; }
.panel.main .txt span { color: rgba(255, 255, 255, .92); }
.panel.main::after {
  content: ""; position: absolute; right: -40px; top: -50px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, .14);
}
.panel .go { position: absolute; right: 16px; bottom: 14px; font-size: calc(14px * var(--fz)); font-weight: 700; opacity: .9; }
.evlist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.evcard {
  display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow);
  color: inherit; text-decoration: none;
}
.evcard:active { transform: scale(.985); }
.evcard .mid { flex: 1; min-width: 0; }
.evcard .name { font-weight: 900; font-size: calc(17px * var(--fz)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evcard .last { color: var(--sub); font-size: calc(14px * var(--fz)); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evcard .chev { color: var(--faint); font-size: 22px; }
.newtag { background: var(--apricot); color: #fff; font-size: calc(14px * var(--fz)); font-weight: 700; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
/* はじめての人への「使いかた」 */
.howto { display: grid; gap: 10px; }
.howto .h { display: flex; gap: 12px; align-items: center; background: var(--paper); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); }
.howto .h .n { width: 34px; height: 34px; border-radius: 50%; background: var(--apricot-xl); color: var(--apricot-d); font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 17px; }
.howto .h b { display: block; font-size: calc(16px * var(--fz)); }
.howto .h span { display: block; font-size: calc(14px * var(--fz)); color: var(--sub); line-height: 1.6; }
.more { display: block; width: 100%; margin-top: 4px; border: none; background: none; color: var(--apricot-d); font-weight: 700; padding: 10px; }
.foot { text-align: center; color: var(--faint); font-size: calc(13px * var(--fz)); margin-top: 36px; }
.foot img { width: 28px; opacity: .7; display: block; margin: 0 auto 4px; }

/* ---------- 一問ずつの案内（会をつくる・参加する） ---------- */
.wiz { position: fixed; inset: 0; z-index: 40; background: var(--cream); display: flex; flex-direction: column; }
.wiz-top { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 8px; max-width: 520px; width: 100%; margin: 0 auto; }
.wiz-top .back { width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--paper); box-shadow: var(--shadow); padding: 0; color: var(--apricot-d); display: flex; align-items: center; justify-content: center; }
.progress { flex: 1; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #ffbe5c, var(--apricot-d)); transition: width .35s; }
.wiz-top .stepno { font-size: calc(14px * var(--fz)); color: var(--sub); font-weight: 700; min-width: 40px; text-align: right; }
.wiz-body { flex: 1; overflow-y: auto; padding: 8px 16px 24px; max-width: 520px; width: 100%; margin: 0 auto; }
.wiz-foot { padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); max-width: 520px; width: 100%; margin: 0 auto; }
.wiz-foot .btn { margin-top: 0; }
/* 文字を打つ段: 中身の高さだけにして、「次へ」を入力欄のすぐ下に出す */
.wiz.inline .wiz-body { flex: 0 1 auto; padding-bottom: 6px; }
.wiz-foot .btn.ghost { margin-top: 4px; }
.step { animation: stepin .35s ease both; }
@keyframes stepin { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.step.backward { animation-name: stepback; }
@keyframes stepback { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.bigfield { font-size: calc(20px * var(--fzl)); font-weight: 700; padding: 16px 18px; }
.summary { padding: 6px 18px; }
.summary .sumrow { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); align-items: flex-start; }
.summary .sumrow:last-child { border-bottom: none; }
.summary .k { width: 5em; flex-shrink: 0; color: var(--sub); font-size: calc(15px * var(--fz)); font-weight: 700; padding-top: 1px; }
.summary .v { flex: 1; white-space: pre-wrap; word-break: break-word; font-weight: 700; }
.summary .v.none { color: var(--faint); font-weight: 500; }
.summary .fix { border: none; background: none; color: var(--apricot-d); font-weight: 700; font-size: calc(15px * var(--fz)); padding: 0 0 0 6px; }

/* カレンダー */
.cal { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 12px 10px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; }
.cal-head b { font-size: calc(18px * var(--fz)); font-weight: 900; }
.cal-head button { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--apricot-xl); font-size: 18px; color: var(--apricot-d); font-weight: 900; }
.cal-head button:disabled { opacity: .3; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-grid .wd { font-size: calc(13px * var(--fz)); color: var(--sub); font-weight: 700; padding: 4px 0; }
.cal-grid .wd.su, .cal-grid .day.su { color: #d9534f; }
.cal-grid .wd.sa, .cal-grid .day.sa { color: #3b7dd8; }
.cal-grid .day { width: 42px; height: 42px; margin: 1px auto; border: none; background: none; border-radius: 50%; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.cal-grid .day:disabled { color: #d9cdbd; }
.cal-grid .day.today { box-shadow: 0 0 0 2px var(--apricot-l) inset; }
.cal-grid .day.on { background: var(--apricot); color: #fff; box-shadow: 0 3px 8px rgba(232, 133, 26, .35); }
.timegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.timegrid .chip { padding: 14px 0; font-size: 17px; }

/* できあがり */
.done-hero { text-align: center; padding-top: 6px; }
.done-hero img { width: 180px; height: 180px; animation: hop 1.6s ease-in-out infinite; }
.done-hero h1 { font-size: calc(26px * var(--fzl)); font-weight: 900; margin: 6px 0 4px; }
/* 会を作るのスタート画面: 絵は少し小さく（下の 3 つの流れまで 1 画面に収める）。上の段は「く」だけ */
.wiz-hero { margin-bottom: 18px; }
.wiz-hero img { width: 150px; height: 150px; }
.wiz-top.hero .progress { visibility: hidden; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 45; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
.announce { background: var(--paper); border-radius: 16px; padding: 14px 16px; font-size: calc(15px * var(--fz)); white-space: pre-wrap; word-break: break-all; line-height: 1.7; box-shadow: 0 0 0 2px var(--line) inset; max-height: 180px; overflow-y: auto; }

/* ---------- 会の招待（参加前） ---------- */
.invite { text-align: left; }
.invite .hero { display: flex; gap: 14px; align-items: center; }
.invite .hero .dtile { width: 64px; }
.invite .hero h2 { margin: 0; }
.invite .rows { margin-top: 14px; display: grid; gap: 8px; }
.invite .rows div { display: flex; gap: 10px; align-items: flex-start; }
.invite .rows .ic { width: 22px; text-align: center; flex-shrink: 0; }
.invite .notebox { background: var(--apricot-xl); border-radius: 14px; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; font-size: calc(15px * var(--fz)); }
.faces { display: flex; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.faces .avatar { width: 34px; height: 34px; font-size: 14px; margin-left: -8px; box-shadow: 0 0 0 3px var(--paper); }
.faces .avatar:first-child { margin-left: 0; }
.faces span { margin-left: 10px; font-size: calc(15px * var(--fz)); color: var(--sub); font-weight: 700; }

/* ---------- ホーム画面に追加の案内 ---------- */
.a2hs { position: fixed; inset: 0; z-index: 50; background: var(--cream); display: flex; flex-direction: column; overflow-y: auto; }
.a2hs .inner { max-width: 520px; width: 100%; margin: 0 auto; padding: calc(18px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; min-height: 100%; }
.a2hs h1 { font-size: calc(24px * var(--fzl)); line-height: 1.45; margin: 4px 0 6px; text-align: center; font-weight: 900; }
.a2hs .lead { font-size: calc(15px * var(--fz)); line-height: 1.8; color: var(--sub); text-align: center; }
.a2hs .steps { margin: 18px 0 8px; display: grid; gap: 10px; }
.a2hs .stp { display: flex; gap: 12px; align-items: center; background: var(--paper); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); font-size: calc(16px * var(--fz)); line-height: 1.6; }
.a2hs .stp .n { width: 32px; height: 32px; border-radius: 50%; background: var(--apricot); color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.a2hs .stp b { color: var(--apricot-d); }
.a2hs .stp > div { flex: 1; min-width: 0; }
.a2hs .stp:has(.fig) { align-items: flex-start; }
.a2hs .stp img.fig { border-radius: 12px; border: 1px solid #e6e0d6; }
.a2hs .stp .fig { display: block; width: 100%; max-width: 300px; height: auto; margin-top: 10px; font-family: inherit; }
.a2hs .ico { display: inline-flex; vertical-align: middle; width: 28px; height: 28px; border-radius: 8px; background: #eef2ff; align-items: center; justify-content: center; margin: 0 2px; }
.a2hs .already { margin-top: 10px; background: var(--apricot-xl); border-radius: 18px; padding: 14px 16px; font-size: calc(15px * var(--fz)); line-height: 1.7; }
.a2hs .skip { margin-top: auto; padding-top: 18px; text-align: center; }
.a2hs .skip button { background: none; border: none; color: var(--sub); text-decoration: underline; font-size: calc(15px * var(--fz)); text-underline-offset: 4px; }
.a2hs .arrow { font-size: 30px; text-align: center; color: var(--apricot-d); animation: hop 1.2s infinite; }
.a2hs .install { margin-top: 6px; }
.a2hs .pa-btn { margin-top: 22px; font-size: calc(20px * var(--fz)); padding: 18px; }
.a2hs .pa-note { margin-top: 12px; font-size: calc(14px * var(--fz)); }

/* ---------- 会のアプリ本体 ---------- */
#app { height: var(--app-h); display: flex; flex-direction: column; background: var(--cream); }
.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bar {
  background: rgba(255, 255, 255, .96); color: var(--ink); display: flex; align-items: center; gap: 6px;
  padding: calc(8px + env(safe-area-inset-top)) 10px 8px; min-height: 56px; flex-shrink: 0; box-shadow: 0 1px 0 var(--line);
  position: relative; z-index: 2;
}
.bar .title { flex: 1; font-weight: 900; font-size: calc(17px * var(--fz)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar button { background: none; border: none; font-size: calc(15px * var(--fz)); padding: 8px 10px; font-weight: 700; border-radius: 999px; }
.bar .pill { background: var(--apricot-xl); color: #9a4f00; }
.bar .back { padding: 4px 8px 4px 2px; color: var(--apricot-d); }
.conn { background: #fff1c2; color: #8a5a00; text-align: center; font-size: calc(13px * var(--fz)); padding: 4px; font-weight: 700; }
.list { flex: 1; overflow-y: auto; }
.info { margin: 14px 14px 6px; }
.info .hero { display: flex; gap: 14px; align-items: center; }
.info .hero h2 { margin: 0; font-size: calc(19px * var(--fzl)); }
.info .rows { margin-top: 10px; display: grid; gap: 6px; font-size: calc(15px * var(--fz)); }
.info .rows div { display: flex; gap: 8px; white-space: pre-wrap; word-break: break-word; }
.info .closed { display: inline-block; margin-top: 8px; font-size: calc(13px * var(--fz)); font-weight: 700; color: var(--sub); background: #f3ece2; padding: 3px 10px; border-radius: 99px; }
.info .pinned { margin-top: 12px; background: #fff6dc; border-radius: 14px; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; font-size: calc(15px * var(--fz)); }
.info .pinned b { color: #a35a00; display: block; font-size: calc(14px * var(--fz)); }
.rooms { margin: 8px 14px 24px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: none; border-bottom: 1px solid #f6efe5; background: var(--paper); width: 100%; text-align: left; }
.item:last-child { border-bottom: none; }
.item:active { background: var(--apricot-xl); }
.item .mid { flex: 1; min-width: 0; }
.item .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .last { color: var(--sub); font-size: calc(14px * var(--fz)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.item .right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: calc(13px * var(--fz)); color: var(--sub); }
.badge { background: var(--red); color: #fff; border-radius: 10px; min-width: 20px; height: 20px; padding: 0 6px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.section { font-size: calc(13px * var(--fz)); color: var(--sub); padding: 14px 14px 6px; background: #fcf7f0; font-weight: 700; }
.tag { font-size: calc(13px * var(--fz)); background: var(--apricot-l); color: #9a4f00; border-radius: 99px; padding: 1px 8px; margin-left: 6px; font-weight: 700; vertical-align: 2px; }
.mini { border: 2px solid var(--line); background: var(--paper); border-radius: 999px; padding: 5px 12px; font-size: calc(14px * var(--fz)); font-weight: 700; }
.mini.danger { color: var(--red); border-color: #f6c9ca; }
.item .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.item .acts .note { font-size: calc(14px * var(--fz)); }
.avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 17px; object-fit: cover; }
.avatar.img { background: var(--apricot-xl); }
.avatar.icon { background: var(--apricot-xl); color: var(--apricot-d); font-size: 20px; }
.avatar.icon.on { background: var(--apricot); color: #fff; }
/* 会の全体トークの「色の丸＋絵文字」（common.js の roomPic）。丸の大きさに合わせて絵文字も大きく */
.avatar.ev span { font-size: 1.35em; line-height: 1; font-weight: 400; }
/* 会のアイコンを選ぶ並び（会づくり・幹事メニュー。common.js の picGrid） */
.picgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 6px; }
.picgrid .pg { padding: 0; border: 0; background: none; aspect-ratio: 1; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.picgrid .pg .avatar { width: 100%; height: 100%; font-size: 22px; box-shadow: 0 0 0 1px rgba(90, 55, 25, .1); transition: transform .15s; }
.picgrid .pg.on .avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--apricot); transform: scale(.92); }
.sumpic .avatar { width: 44px; height: 44px; font-size: 18px; }

/* トーク */
/* 背景は淡いあんず色に、葉っぱと実の小さな柄をうっすら散らす */
.talk {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px 14px; background-color: var(--talk);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg opacity='.07'%3E%3Ccircle cx='24' cy='30' r='7' fill='%23e8851a'/%3E%3Cpath d='M24 23c2-5 7-7 11-6-2 5-6 7-11 6z' fill='%237a9a3a'/%3E%3Ccircle cx='86' cy='88' r='5' fill='%23e8851a'/%3E%3Cpath d='M86 83c1-4 5-5 8-4-1 3-4 5-8 4z' fill='%237a9a3a'/%3E%3Cpath d='M92 22c4 0 8 3 8 7-4 1-8-2-8-7z' fill='%237a9a3a'/%3E%3Ccircle cx='30' cy='96' r='2.5' fill='%23e8851a'/%3E%3C/g%3E%3C/svg%3E");
}
.hello { display: flex; gap: 12px; align-items: center; margin: 10px 4px 14px; padding: 12px 14px; background: rgba(255, 255, 255, .72); border-radius: 18px; border: 1.5px dashed #efcf9f; font-size: calc(14px * var(--fz)); color: var(--sub); line-height: 1.6; }
.hello img { width: 58px; height: 58px; flex-shrink: 0; }
.hello b { display: block; color: var(--ink); font-size: calc(15px * var(--fz)); margin-bottom: 2px; }
.day { text-align: center; margin: 14px 0 8px; }
.day span { background: var(--apricot-l); color: #9a4f00; font-size: calc(13px * var(--fz)); padding: 3px 12px; border-radius: 12px; font-weight: 700; }
.sys { text-align: center; margin: 10px 0; }
.sys span { display: inline-block; white-space: pre-wrap; line-height: 1.6; background: rgba(255, 255, 255, .7); color: #8a6a48; font-size: calc(13px * var(--fz)); padding: 3px 12px; border-radius: 12px; font-weight: 700; border: 1px solid #f1dfc6; }
.msg { display: flex; align-items: flex-end; gap: 6px; margin: 3px 0; }
.msg.head { margin-top: 10px; }
.msg .av { width: 36px; align-self: flex-start; }
.msg .av .avatar { width: 36px; height: 36px; font-size: 14px; box-shadow: 0 0 0 2px #fff; }
.msg .col { display: flex; flex-direction: column; max-width: 74%; min-width: 0; }
.msg .who { font-size: calc(13px * var(--fz)); color: #7a5c3e; margin: 0 0 3px 6px; font-weight: 700; }
.msg .line { display: flex; align-items: flex-end; gap: 5px; }
.msg .meta { font-size: calc(12px * var(--fz)); color: #a08669; display: flex; flex-direction: column; line-height: 1.3; flex-shrink: 0; }
.msg .meta .rd { color: var(--apricot-d); font-weight: 700; }
.bubble { position: relative; background: var(--theirs); border-radius: 20px; padding: 9px 14px; white-space: pre-wrap; word-break: break-word; line-height: 1.55; font-size: calc(15px * var(--fz)); box-shadow: 0 1px 2px rgba(122, 82, 36, .1); }
.bubble a { color: #1f63c6; }
/* しっぽ（続けて送った最初の 1 つだけ） */
.msg.head .bubble { border-top-left-radius: 6px; }
.msg.mine.head .bubble { border-top-left-radius: 20px; border-top-right-radius: 6px; }
.msg.head .bubble::before { content: ''; position: absolute; top: 0; left: -6px; width: 14px; height: 14px; background: inherit; clip-path: path('M14 0 H0 C5 2 7 6 8 12 Z'); }
.msg.mine { justify-content: flex-end; }
.msg.mine .line { flex-direction: row-reverse; }
/* 自分の吹き出し: 上から下へ濃くなる（上から何 px かで色を決めるので、右上のしっぽと同じ高さは同じ色になる） */
.msg.mine .bubble { background: linear-gradient(180deg, #ffdc9e 0, #ffc871 90px); color: #4a2f12; }
.msg.mine.head .bubble::before { left: auto; right: -6px; background: linear-gradient(180deg, #ffdc9e 0, #ffc871 90px); clip-path: path('M0 0 H14 C9 2 7 6 6 12 Z'); }
.msg.mine .meta { align-items: flex-end; text-align: right; }
.msg .bubble.notice::before { display: none; }
.msg .bubble.notice, .msg.mine .bubble.notice { background: #fff8e1; box-shadow: 0 0 0 2px #f6d27a inset; border-radius: 16px; }
.bubble.notice .nt { font-weight: 900; color: #a35a00; font-size: calc(14px * var(--fz)); margin-bottom: 2px; }
.photo { display: block; max-width: 220px; max-height: 300px; border-radius: 16px; background: #e9dccb; }
.locked { width: 200px; height: 140px; border-radius: 16px; background: #efe3d3; color: #6d5640; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: calc(14px * var(--fz)); border: none; font-weight: 700; }
.locked .k { font-size: 28px; }
.pinbar { display: block; width: 100%; text-align: left; border: none; background: #fff8e1; box-shadow: 0 1px 0 #f6d27a; padding: 9px 14px; font-size: calc(15px * var(--fz)); line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 4.6em; overflow: hidden; flex-shrink: 0; position: relative; z-index: 1; }
.pinbar.open { max-height: 40vh; overflow-y: auto; }
/* 幹事しかいない会のトークの上の「LINE でみんなに知らせよう」 */
.lonebar { display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); margin: 10px 10px 2px; border: none; border-radius: 20px; background: #eafaf0; box-shadow: 0 0 0 1.5px #bfe9cf inset, 0 6px 16px rgba(6, 164, 71, .14); padding: 8px 14px 8px 10px; text-align: left; font: inherit; color: var(--ink); flex-shrink: 0; position: relative; z-index: 1; animation: lonefloat 2.8s ease-in-out infinite; }
/* 帯はトークの中の一番上にあるので、まわりもトークの地の色に。右上の札は帯の下へずらす */
.talkwrap { background-color: var(--talk); }
.lonebar:not(.hidden) + .trcol { top: 86px; }
@keyframes lonefloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.lonebar:active { animation: none; transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .lonebar { animation: none; } }
.lonebar img { width: 40px; height: 40px; flex-shrink: 0; }
.lonebar .lt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.lonebar .lt b { font-size: calc(15px * var(--fz)); font-weight: 900; }
.lonebar .lt small { font-size: calc(13px * var(--fz)); color: #06a447; font-weight: 700; }
.lonebar .go { font-size: 22px; color: #06a447; }
.modal.ask { z-index: 80; } /* 確認・知らせの窓は、全画面の窓（.gp・写真の .viewer）より上に出す */
.modal.ask .announce { margin-bottom: 4px; }
.inputbar { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -1px 0 var(--line); flex-shrink: 0; }
.inputbar .plus { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--apricot-xl); font-size: 24px; color: var(--apricot-d); flex-shrink: 0; font-weight: 700; }
.inputbar textarea { flex: 1; resize: none; border: none; background: #f6efe6; border-radius: 22px; padding: 10px 16px; max-height: 120px; line-height: 1.4; outline: none; }
.inputbar .send { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--apricot); color: #fff; font-size: 17px; flex-shrink: 0; }
.inputbar .send:disabled { background: #f6d6a8; }
.inputbar textarea::placeholder { color: #bba58b; }
/* 引用返信（LINE と同じ）: 吹き出しの上に元の発言を小さく載せ、線で区切る */
.bubble.hasrq { min-width: 140px; }
.rq { display: flex; align-items: center; gap: 8px; white-space: normal; margin: -1px -4px 7px; padding: 0 4px 7px; border-bottom: 1px solid rgba(122, 82, 36, .2); cursor: pointer; }
.rq-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.rq-t b { font-size: calc(12.5px * var(--fz)); font-weight: 900; color: #7a5c3e; }
.rq-t span { font-size: calc(13px * var(--fz)); color: #8a7258; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.rq img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #e9dccb; }
/* 引用を押して飛んだ先の発言を少し光らせる */
#c-talk .msg.hl { animation: msghl 1.6s ease; }
@keyframes msghl { 0%, 60% { background: rgba(247, 166, 69, .28); } 100% { background: transparent; } }
/* 入力欄の上の「○○への返信」の帯 */
.replybar { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; background: #f6efe6; box-shadow: 0 -1px 0 var(--line); flex-shrink: 0; }
.replybar img { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.replybar .rb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; border-left: 3px solid var(--apricot); padding-left: 9px; }
.replybar .rb-t b { font-size: calc(13px * var(--fz)); font-weight: 900; color: var(--apricot-d); }
.replybar .rb-t span { font-size: calc(13px * var(--fz)); color: #8a7258; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replybar .rb-x { width: 40px; height: 40px; border: none; background: none; color: #8a7258; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.replybar .rb-x .ico { width: 20px; height: 20px; }
#v-chat.selecting .replybar { display: none; }
/* トークの上の帯: アイコン＋名前＋日時（個別トークは名前だけ） */
.bar .title.two { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bar .title.two span, .bar .title.two small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .title.two small { font-size: calc(13px * var(--fz)); color: var(--sub); font-weight: 700; }
#c-av .avatar { width: 34px; height: 34px; font-size: 14px; }

/* 幹事メニュー */
.page.admin { padding-top: 14px; }
.page.admin .card { padding: 18px 16px; }
.page.admin .card h3 { margin: 0 0 4px; font-size: calc(18px * var(--fz)); font-weight: 900; display: flex; align-items: center; gap: 8px; }
.page.admin .card > .note:first-of-type { margin: 0 0 6px; }

/* ---------- その他 ---------- */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(58, 42, 28, .45); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.modal .box { background: var(--paper); border-radius: 26px; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); width: 100%; max-width: 420px; animation: stepin .25s ease; }
.modal h3 { margin: 0 0 6px; font-weight: 900; }
.modal .q { font-weight: 900; font-size: calc(18px * var(--fz)); line-height: 1.6; margin: 6px 0; }
.viewer { position: fixed; inset: 0; z-index: 70; background: #000; display: flex; align-items: center; justify-content: center; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer .close { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; background: rgba(255, 255, 255, .2); color: #fff; border: none; border-radius: 20px; padding: 8px 14px; }
.viewer .vsave { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, .92); color: var(--ink); border: none; border-radius: 999px; padding: 11px 26px; font-weight: 900; font-size: calc(15px * var(--fz)); }
.viewer .hint {position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); width: 100%; text-align: center; color: #aaa; font-size: calc(13px * var(--fz)); }
.center-msg { text-align: center; padding-top: 40px; }
.center-msg img { width: 160px; height: 160px; }
.center-msg p { font-weight: 700; font-size: calc(17px * var(--fz)); }
@media (min-width: 700px) {
  #app { max-width: 560px; margin: 0 auto; box-shadow: 0 0 0 1px var(--line); }
}
.pinned-now { background: #fff6dc; border-radius: 14px; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; font-size: calc(15px * var(--fz)); margin-bottom: 10px; }
.pinned-now b { display: block; color: #a35a00; font-size: calc(14px * var(--fz)); }
/* 白い台の上のふきだしは、溶けないようにクリーム色に */
.modal .guide .say, .modal .guide .say::before { background: var(--apricot-xl); box-shadow: none; }

/* ---------- 日程アンケート ---------- */
/* 会づくりの分かれ道（日にちはどうする？） */
.choice {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin-bottom: 12px; padding: 16px;
  border: 2px solid transparent; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); transition: all .12s;
}
.choice:active { transform: scale(.98); }
.choice.on { border-color: var(--apricot); background: var(--apricot-xl); }
.choice .ic { width: 48px; height: 48px; border-radius: 16px; background: var(--apricot-xl); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.choice.on .ic { background: var(--apricot); }
.choice .t { flex: 1; }
.choice .t b { display: block; font-size: calc(17px * var(--fz)); font-weight: 900; }
.choice .t small { display: block; color: var(--sub); font-size: calc(14px * var(--fz)); line-height: 1.6; margin-top: 2px; }
.choice .chev { color: var(--faint); font-size: 22px; }
.candlist { margin-top: 12px; }
.candlist .note { margin: 0 4px; }
.candlist .chips { margin-top: 6px; }
.dtile.poll .m { background: var(--leaf); }
.dtile.poll .d { font-size: 12px; }
/* 時刻＋「未定」 */
.timerow { display: flex; gap: 10px; align-items: center; }
.timerow .field { flex: 1; }
label.check { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; font-weight: 700; }
label.check input { width: 20px; height: 20px; accent-color: var(--apricot-d); }

/* ○△× を付ける */
.markhelp { font-size: calc(14px * var(--fz)); color: var(--sub); font-weight: 700; margin: 0 4px 10px; }
.marks { display: grid; gap: 8px; }
.mrow { display: flex; align-items: center; gap: 10px; background: var(--paper); border-radius: 18px; padding: 10px 10px 10px 14px; box-shadow: 0 0 0 2px var(--line) inset; }
.mrow.done { box-shadow: 0 0 0 2px var(--apricot-l) inset; }
.mrow .when { flex: 1; min-width: 0; line-height: 1.3; }
.mrow .when b { display: block; font-size: calc(17px * var(--fz)); font-weight: 900; }
.mrow .when small { color: var(--sub); font-size: calc(14px * var(--fz)); font-weight: 700; }
.mbtns { display: flex; gap: 6px; }
.mk {
  width: 54px; height: 54px; border-radius: 16px; border: 2px solid var(--line); background: var(--paper); padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; transition: all .12s;
}
.mk span { font-size: 22px; font-weight: 900; color: var(--faint); }
.mk small { font-size: 11px; color: var(--faint); font-weight: 700; margin-top: 3px; }
.mk:active { transform: scale(.93); }
.mk.o.on { background: #e9f6e3; border-color: #6fbf4f; }
.mk.o.on span, .mk.o.on small { color: #3f8f22; }
.mk.t.on { background: #fff4d6; border-color: #f2b63c; }
.mk.t.on span, .mk.t.on small { color: #a97400; }
.mk.x.on { background: #fdecec; border-color: #ec8a8d; }
.mk.x.on span, .mk.x.on small { color: #c63b40; }
.page.admin .card .marks { margin-top: 4px; }
.page.admin .card .markhelp { margin-top: 8px; }

/* みんなの答え */
.res { border-radius: 16px; padding: 12px 14px; margin-top: 10px; background: #fcf7f0; }
.res.best { background: #fff3dc; box-shadow: 0 0 0 2px #f6d27a inset; }
.res.chosen { background: #e9f6e3; box-shadow: 0 0 0 2px #9ed383 inset; }
.res .rhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.res .rhead > b { font-size: calc(17px * var(--fz)); font-weight: 900; }
.res .rhead .tag { margin-left: 0; }
.res .cnt { margin-left: auto; display: flex; gap: 8px; font-size: calc(15px * var(--fz)); font-weight: 700; }
.res .cnt i { font-style: normal; }
.res .cnt .o { color: #3f8f22; } .res .cnt .t { color: #a97400; } .res .cnt .x { color: #c63b40; }
.res .names { margin-top: 6px; font-size: calc(14px * var(--fz)); color: var(--sub); display: grid; gap: 2px; }
.res .names b { display: inline-block; width: 18px; }
.res .names .o b { color: #3f8f22; } .res .names .t b { color: #a97400; } .res .names .x b { color: #c63b40; }
.res .mini { margin-top: 8px; background: var(--apricot); color: #fff; border-color: var(--apricot); }
.cmt { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: calc(15px * var(--fz)); }
.cmt:last-child { border-bottom: none; }
.cmt .avatar { width: 34px; height: 34px; font-size: 14px; }
.cmt b { font-size: calc(14px * var(--fz)); color: var(--sub); }
.pollrow { background: #fffaf2; }

/* 日程アンケートに答える画面（トークに入らずに答える人）のみんなの答え */
#j-result-card { margin-top: 16px; padding: 18px 16px; }
#j-result-card h3 { margin: 0 0 4px; font-size: calc(18px * var(--fz)); font-weight: 900; }
#j-comment-list:not(:empty) { margin-top: 12px; }

/* 文字の大きさの切り替え（あ・あ・あ の 3 つ。字の大きさは倍率に関係なく固定） */
.fzctl { display: inline-flex; align-items: center; gap: 2px; background: var(--paper); border-radius: 999px; padding: 3px; box-shadow: 0 0 0 2px var(--line) inset; }
.fzctl .lb { font-size: 12px; color: var(--sub); font-weight: 700; padding: 0 6px 0 8px; white-space: nowrap; }
.fzctl button { width: 32px; height: 32px; border: none; border-radius: 50%; background: none; color: var(--sub); font-weight: 900; line-height: 1; padding: 0; }
.fzctl button:nth-of-type(1) { font-size: 13px; }
.fzctl button:nth-of-type(2) { font-size: 17px; }
.fzctl button:nth-of-type(3) { font-size: 21px; }
.fzctl button.on { background: var(--apricot); color: #fff; }
.fzrow { display: flex; justify-content: center; margin: 22px 0 6px; }

/* 時刻のピッカー（会づくり）: 「時」と「分」を並べて選ぶ */
.timepick { display: flex; gap: 10px; }
.timepick select { flex: 1; min-width: 0; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 fill=%27none%27 stroke=%27%23e8851a%27 stroke-width=%272%27/%3E%3C/svg%3E") no-repeat right 14px center; font-size: calc(22px * var(--fzl)); font-weight: 700; text-align: center; text-align-last: center; padding: 16px 10px; -webkit-appearance: none; appearance: none; color: var(--ink); }
.timepick select:disabled { opacity: .4; }
/* iPhone の日付・時刻の入力欄が右にはみ出さないように */
input.field[type="time"], input.field[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; display: block; min-height: 54px; }
/* 時刻の 2 択（時間を決める / まだ決まってない）。チェックの付いた方が選ばれている */
.tchoice { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; padding: 12px 4px; font-weight: 700; font-size: calc(17px * var(--fz)); }
.tchoice .box { width: 28px; height: 28px; border-radius: 8px; border: 2.5px solid var(--faint); background: var(--paper); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tchoice.on .box { background: var(--apricot); border-color: var(--apricot); }
.tchoice.on .box::after { content: ""; width: 8px; height: 14px; border: solid #fff; border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); }
.tchoice:not(.on) .t { color: var(--sub); }
.timepick.off { opacity: .35; }
#t-tbd { margin-top: 10px; }

/* トーク画面の上（2 段だけ）: ①‹・会の名前・右上のアイコン ②切り替えタブ */
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
#v-chat .bar { min-height: 52px; padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; gap: 4px; }
#v-chat .bar .avatar { width: 36px; height: 36px; font-size: 15px; }
#v-chat .bar .back { padding: 4px 4px 4px 0; }
.bar .icons { display: flex; align-items: center; flex-shrink: 0; }
.bar .ib { position: relative; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); border-radius: 50%; }
.bar .ib:active { background: var(--apricot-xl); }
.bar .ib.muted { color: var(--faint); }
/* 文字つきのアイコン（トーク画面の右上） */
.bar .ib.tx { width: auto; min-width: 34px; height: 44px; padding: 0 1px; flex-direction: column; gap: 1px; border-radius: 12px; }
.bar .ib.tx small { font-size: 10px; font-weight: 700; color: var(--sub); line-height: 1.2; white-space: nowrap; }
.bar .ib.tx.muted small { color: var(--faint); }
.ib.tx.dot::after { top: 2px; right: 4px; }
.ib.dot::after, .mt.dot .mi::after { content: ""; position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #fff; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 10px 8px; background: rgba(255, 255, 255, .96); flex-shrink: 0; scrollbar-width: none; box-shadow: 0 1px 0 var(--line); position: relative; z-index: 2; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-weight: 900; font-size: calc(14px * var(--fz)); padding: 4px 12px; min-height: 32px; border-radius: 999px; }
.tabs .tab .ico { width: 17px; height: 17px; stroke-width: 2.2; }
.tabs .tab.on { background: var(--apricot); border-color: var(--apricot); color: #fff; }
.tabs .tab.hot { border-color: var(--red); background: #fff0f0; color: #c62828; position: relative; }
/* 波紋は別の層を広げて薄くするだけ（影を動かすと毎コマ描き直しになって重い） */
.tabs .tab.hot::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; box-shadow: 0 0 0 2px rgba(229, 72, 77, .55); pointer-events: none; animation: ring 1.4s ease-out infinite; }
@keyframes ring { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(1.12, 1.25); opacity: 0; } }
.tabs .tab.add { border-style: dashed; color: var(--sub); font-weight: 700; }
.tabs .tab .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tabs .tab .badge { position: static; margin-left: 1px; min-width: 18px; height: 18px; font-size: 11px; }
/* 未読の知らせ（ほかのトーク）: 右上に縦に並ぶ茶色の札。トークの上に浮かぶので段を取らない */
.talkwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.trcol { position: absolute; top: 8px; right: 10px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: calc(100% - 20px); pointer-events: none; }
.dmalert { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 100%; }
/* 告知・アンケートの札（期限まで右上に。押すとくわしく、× で自分の画面だけ隠す） */
.board { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 100%; }
.bchip { pointer-events: auto; display: flex; align-items: center; max-width: min(100%, 250px); background: #fff8e1; border-radius: 999px; box-shadow: 0 0 0 1.5px #f6d27a inset, 0 3px 10px rgba(90, 55, 25, .18); animation: slidein .25s ease; }
.bchip.vt { background: var(--apricot-xl); box-shadow: 0 0 0 1.5px var(--apricot-l) inset, 0 3px 10px rgba(90, 55, 25, .18); }
.bchip .bt { display: flex; align-items: center; gap: 5px; min-width: 0; border: none; background: none; color: var(--ink); padding: 4px 0 4px 10px; font-size: calc(12px * var(--fz)); font-weight: 900; text-align: left; }
.bchip .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bchip small { flex: none; color: var(--sub); font-weight: 700; font-size: calc(11px * var(--fz)); }
.bchip .bx { flex: none; width: 26px; height: 26px; margin-right: 2px; border: none; border-radius: 50%; background: none; color: var(--faint); font-size: 16px; line-height: 1; padding: 0; }
.bchip.todo .bt::after { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.bchip.more .bt { padding-right: 10px; color: var(--sub); }
.bpv { display: flex; justify-content: flex-end; padding: 10px; background: var(--apricot-xl); border-radius: 14px; }
.bpv .bt { padding-right: 12px; }
/* トークに流れる告知のカード */
.bubble.acard { border: none; font: inherit; color: inherit; text-align: left; cursor: pointer; min-width: 200px; max-width: 260px; padding: 10px 14px 8px; white-space: normal; background: #fff8e1; box-shadow: 0 0 0 1.5px #f6d27a inset; }
.msg.mine .bubble.acard { background: #fff8e1; color: var(--ink); }
.acard.pv { cursor: default; }
.acard .ac-h { display: flex; justify-content: space-between; gap: 8px; color: #b7791f; font-weight: 900; font-size: calc(13px * var(--fz)); }
.acard .ac-h span { color: var(--sub); font-weight: 700; font-size: calc(11px * var(--fz)); }
.acard .ac-t { font-weight: 900; font-size: calc(16px * var(--fz)); margin: 4px 0 2px; word-break: break-word; }
.acard .ac-b { color: var(--ink); font-size: calc(14px * var(--fz)); white-space: pre-wrap; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.acard .ac-go { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f6d27a; color: #b7791f; font-weight: 900; font-size: calc(13px * var(--fz)); text-align: center; }
.acard.closed { opacity: .65; }
/* 告知をくわしく見る・一覧 */
.adet { position: relative; }
.adet .x { position: absolute; top: 12px; right: 14px; }
.adet .ad-h { color: #b7791f; font-weight: 900; font-size: calc(13px * var(--fz)); margin-top: 4px; }
.adet .ad-t { font-weight: 900; font-size: calc(19px * var(--fz)); line-height: 1.4; margin: 4px 44px 6px 0; word-break: break-word; }
.adet .ad-by { color: var(--sub); font-weight: 700; font-size: calc(13px * var(--fz)); margin-bottom: 12px; }
.adet .ad-b { white-space: pre-wrap; word-break: break-word; font-size: calc(15px * var(--fz)); line-height: 1.7; background: #fff8e1; border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.adet .ad-acts { display: flex; flex-direction: column; gap: 8px; }
.adet .danger-t { color: #c9484c; }
.adet .bl { display: flex; flex-direction: column; margin-bottom: 14px; }
.adet .blrow { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.adet .blrow.hid .bl-t { opacity: .5; }
.adet .bl-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: none; background: none; color: var(--ink); text-align: left; padding: 0; }
.adet .bl-t .tx { min-width: 0; display: flex; flex-direction: column; }
.adet .bl-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(15px * var(--fz)); }
.adet .bl-t small { color: var(--sub); font-weight: 700; font-size: calc(12px * var(--fz)); }
.dmalert > button { pointer-events: auto; display: flex; align-items: center; gap: 6px; max-width: 100%; border: none; background: #8a5a34; color: #fff; padding: 6px 8px 6px 12px; border-radius: 999px; font-size: calc(13px * var(--fz)); font-weight: 700; box-shadow: 0 3px 10px rgba(90, 55, 25, .3); animation: slidein .25s ease; }
.dmalert .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmalert .go { font-weight: 900; white-space: nowrap; background: rgba(255, 255, 255, .22); border-radius: 999px; padding: 1px 8px; }
@keyframes slidein { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
/* トーク一覧（LINE のトーク画面） */
.tlist { flex: 1; overflow-y: auto; background: var(--paper); padding-bottom: env(safe-area-inset-bottom); }
.talks-page .bar .back { text-decoration: none; }
.trow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--ink); text-decoration: none; }
.trow:active { background: var(--apricot-xl); }
.trow .avatar { width: 50px; height: 50px; font-size: 20px; }
.trow .mid { flex: 1; min-width: 0; }
.trow .name { font-weight: 900; font-size: calc(16px * var(--fz)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .name .n { color: var(--sub); font-weight: 700; }
.trow .name .date { margin-right: 6px; font-size: calc(12px * var(--fz)); color: var(--apricot-d); font-weight: 900; background: var(--apricot-xl); border-radius: 6px; padding: 1px 6px; vertical-align: 1px; }.trow .last { color: var(--sub); font-size: calc(14px * var(--fz)); line-height: 1.45; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.trow.new .last { color: var(--ink); }
.trow .side { align-self: flex-start; padding-top: 4px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.trow .t { font-size: calc(12px * var(--fz)); color: var(--faint); font-weight: 700; }
.trow .badge { background: var(--apricot-d); }
.tl-empty { text-align: center; color: var(--sub); padding: 60px 20px; line-height: 1.8; }
.tl-empty img { width: 120px; }
.sectitle .tolist { margin-left: auto; font-size: calc(13px * var(--fz)); color: var(--sub); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* ☰ のメニュー（下から出るシート） */
.menu { position: fixed; inset: 0; z-index: 60; background: rgba(58, 42, 28, .4); display: flex; align-items: flex-end; justify-content: center; animation: fadein .18s ease; }
.menu .sheet { width: 100%; max-width: 480px; background: var(--paper); border-radius: 24px 24px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); animation: sheetup .24s cubic-bezier(.2, .8, .3, 1); }
.menu .grip { width: 40px; height: 5px; border-radius: 9px; background: var(--line); margin: 0 auto 10px; }
.menu .mh { display: flex; align-items: center; gap: 10px; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.menu .mh .avatar { width: 40px; height: 40px; }
.menu .mt2 { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.menu .mt2 b, .menu .mt2 small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .mt2 b { font-size: calc(16px * var(--fz)); }
.menu .mt2 small { font-size: calc(13px * var(--fz)); color: var(--sub); font-weight: 700; }
.menu .x { width: 36px; height: 36px; border: none; border-radius: 50%; background: #f5efe7; color: var(--sub); display: flex; align-items: center; justify-content: center; padding: 0; }
.menu .x .ico { width: 20px; height: 20px; }
.menu .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 4px; padding: 16px 0 8px; }
.menu .mt { border: none; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); }
.menu .mi { position: relative; width: 54px; height: 54px; border-radius: 18px; background: var(--apricot-xl); color: var(--apricot-d); display: flex; align-items: center; justify-content: center; transition: transform .1s; }
.menu .mi .ico { width: 27px; height: 27px; }
.menu .mt:active .mi { transform: scale(.92); }
.menu .mt.on .mi { background: var(--apricot); color: #fff; }
/* リアクションを取り消す: 付けている絵文字・スタンプに × の印 */
.menu .mi.rxu { font-size: 26px; }
.menu .mi.rxu img { height: 32px; width: auto; max-width: 46px; object-fit: contain; }
.menu .mi.rxu::after { content: "×"; position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; border-radius: 50%; background: #8a7a6a; color: #fff; font-size: 14px; font-weight: 900; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.menu .mt.dot .mi::after { top: -2px; right: -2px; width: 12px; height: 12px; }
.menu .ml { font-size: calc(12px * var(--fz)); font-weight: 900; line-height: 1.3; text-align: center; display: flex; flex-direction: column; }
.menu .ml small { font-size: calc(11px * var(--fz)); color: var(--sub); font-weight: 700; }
/* ☰ のメニューの中身は縦の一覧（項目が多いので、はみ出たらシートの中でスクロール） */
.menu.still, .menu.still .sheet { animation: none; }
/* 通知の設定の窓（オン・オフのどちらかにチェック） */
.pshead { display: flex; align-items: center; gap: 8px; font-size: calc(17px * var(--fz)); font-weight: 900; margin: 0 4px 12px; }
.pshead .ico { width: 24px; height: 24px; color: var(--apricot-d); }
.psopt { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 14px 16px; border: none; border-radius: 18px; background: #f7f1ea; color: var(--ink); text-align: left; font-family: inherit; box-shadow: 0 0 0 2px transparent inset; }
.psopt.sel { background: var(--apricot-xl); box-shadow: 0 0 0 2px var(--apricot) inset; }
.psopt .ck { flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px var(--line) inset; background: #fff; display: flex; align-items: center; justify-content: center; }
.psopt.sel .ck { background: var(--apricot-d); box-shadow: none; }
.psopt.sel .ck::after { content: ""; width: 10px; height: 6px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: translateY(-2px) rotate(-45deg); }
.psopt.wait { opacity: .5; }
.psopt .pst { display: flex; flex-direction: column; line-height: 1.4; }
.psopt .pst b { font-size: calc(16px * var(--fz)); }
.psopt .pst small { font-size: calc(12px * var(--fz)); color: var(--sub); font-weight: 700; }
.menu .sheet.lst {max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; }
.menu .rows { display: flex; flex-direction: column; padding: 8px 0 6px; }
.menu .mr { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 4px; border: none; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; }
.menu .mr:last-child { border-bottom: none; }
.menu .mr:active { background: var(--apricot-xl); }
.menu .mr .mi { width: 38px; height: 38px; border-radius: 12px; flex: none; }
.menu .mr .mi .ico { width: 21px; height: 21px; }
.menu .mr .ml { flex: 1; min-width: 0; display: block; text-align: left; font-size: calc(15px * var(--fz)); font-weight: 900; }
.menu .mr > small { font-size: calc(12px * var(--fz)); color: var(--sub); font-weight: 700; white-space: nowrap; }
.menu .mr .go { color: var(--faint); font-size: 20px; line-height: 1; padding: 0 2px; }
.menu .mr.dot .mi::after { content: ""; position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #fff; }
.menu .mr.dot > small { color: var(--red); }
.menu .mr.off .mi { color: var(--faint); background: #f5efe7; }
.menu .mr.warn .mi { background: #fdeeee; color: #c9484c; }
.menu .mr.warn .ml { color: #c9484c; }
/* 幹事だけの行（LINE でみんなに知らせる）: 緑の地に緑の字。上に小さく「幹事メニュー」（ほかの人も使えると思わないように） */
.menu .mr.kj { background: #eafaf0; border-radius: 16px; border-bottom: none; padding: 8px 10px 8px 6px; margin: 2px 0 6px; }
.menu .mr.kj:active { background: #d6f3e1; }
.menu .mr.kj .mi { background: #d3f3df; color: #06a447; }
.menu .mr.kj .ml { color: #06a447; display: flex; flex-direction: column; line-height: 1.35; }
.menu .mr.kj .ml i { font-style: normal; font-size: calc(11px * var(--fz)); color: var(--faint); font-weight: 700; }
.menu .mr.kj > small, .menu .mr.kj .go { color: #4cbf7c; }
.menu .fzrow { display: flex; justify-content: center; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
@keyframes sheetup { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* アルバム（トークの写真が自動で集まる） */
.chips-row { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; background: var(--paper); flex-shrink: 0; scrollbar-width: none; box-shadow: 0 1px 0 var(--line); }
.chips-row::-webkit-scrollbar { display: none; }
.chips-row .chip { flex-shrink: 0; white-space: nowrap; padding: 6px 12px; font-size: calc(14px * var(--fz)); }
.chips-row .chip small { color: var(--sub); font-weight: 700; margin-left: 2px; }
.album { flex: 1; overflow-y: auto; background: var(--paper); padding: 0 2px calc(20px + env(safe-area-inset-bottom)); }
.aday { font-weight: 900; font-size: calc(14px * var(--fz)); color: var(--ink); padding: 14px 10px 8px; }
.agrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ath { position: relative; aspect-ratio: 1; border: none; padding: 0; background: #f3ebe0; overflow: hidden; }
.ath img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ath .dm { position: absolute; right: 4px; bottom: 4px; font-size: 12px; background: rgba(0, 0, 0, .45); border-radius: 8px; padding: 1px 4px; }
.ath.lk { color: var(--sub); font-size: 22px; }
/* 選んで保存: 選んだ写真に印、下に保存のボタン */
.album.selecting .ath:not(.lk)::after { content: ""; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .25); box-sizing: border-box; }
.album.selecting .ath.on img { opacity: .75; }
.album.selecting .ath.on::after { content: "✓"; background: var(--apricot); color: #fff; font-size: 14px; font-weight: 900; line-height: 18px; text-align: center; }
.selbar { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid rgba(120, 80, 40, .1); flex-shrink: 0; }
.selbar .btn { margin: 0; min-height: 0; padding: 12px 6px; }
.selbar .btn.ghost { flex: 0 0 70px; }
.selbar .btn:not(.ghost) { flex: 1; }
.albumlock { display: flex; align-items: center; gap: 8px; width: calc(100% - 16px); margin: 10px 8px 0; border: none; border-radius: 14px; background: var(--apricot-xl); color: var(--ink); padding: 12px 14px; text-align: left; font-size: calc(14px * var(--fz)); font-weight: 700; }
.albumlock b { margin-left: auto; color: var(--apricot-d); white-space: nowrap; }
.viewer .vinfo { position: absolute; left: 0; right: 0; top: calc(10px + env(safe-area-inset-top)); padding: 6px 90px 6px 16px; color: #ddd; font-size: calc(13px * var(--fz)); line-height: 1.5; }
.viewer .vinfo b { color: #fff; margin-right: 8px; }
.viewer .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: none; background: rgba(255, 255, 255, .14); color: #fff; font-size: 28px; border-radius: 12px; }
.viewer .nav.prev { left: 8px; }
.viewer .nav.next { right: 8px; }
.bar .ib, .talks-page .bar .ib { text-decoration: none; }

/* 名前のパネル（トークのアイコンを押すと出る） */
.msg .av .avatar, #c-av .avatar { cursor: pointer; }
.menu .sheet.prof { position: relative; text-align: center; padding-top: 8px; }
.menu .prof .x { position: absolute; top: 14px; right: 14px; }
.menu .prof .pav { display: flex; justify-content: center; margin: 14px 0 10px; }
.menu .prof .pav .avatar { width: 96px; height: 96px; font-size: 40px; box-shadow: 0 0 0 4px #fff, 0 6px 18px rgba(90, 55, 25, .18); }
.menu .prof .pname { font-weight: 900; font-size: calc(22px * var(--fz)); display: flex; align-items: center; justify-content: center; gap: 8px; }
.menu .prof .psub { color: var(--sub); font-size: calc(13px * var(--fz)); font-weight: 700; margin-top: 2px; }
.menu .prof .pme { color: var(--sub); font-weight: 700; margin: 22px 0 10px; }
.menu .prof .pacts { display: flex; justify-content: center; gap: 28px; margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid var(--line); }

/* 名前のパネル（トークのアイコンを押すと出る） */
.msg .av .avatar, #c-av .avatar { cursor: pointer; }
.menu .sheet.prof { position: relative; text-align: center; padding-top: 8px; }
.menu .prof .x { position: absolute; top: 14px; right: 14px; }
.menu .prof .pav { display: flex; justify-content: center; margin: 14px 0 10px; }
.menu .prof .pav .avatar { width: 96px; height: 96px; font-size: 40px; box-shadow: 0 0 0 4px #fff, 0 6px 18px rgba(90, 55, 25, .18); }
.menu .prof .pname { font-weight: 900; font-size: calc(22px * var(--fz)); display: flex; align-items: center; justify-content: center; gap: 8px; }
.menu .prof .psub { color: var(--sub); font-size: calc(13px * var(--fz)); font-weight: 700; margin-top: 2px; }
.menu .prof .pme { color: var(--sub); font-weight: 700; margin: 22px 0 10px; }
.menu .prof .pacts { display: flex; justify-content: center; gap: 28px; margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid var(--line); }
/* メニューの「退室」は控えめな赤 */
.menu .mt.warn .mi { background: #fdeeee; color: #c9484c; }
#lv-text { resize: none; line-height: 1.6; }

/* ☰ のメニューのプロフィール設定（横長のパネル） */
.profbar { display: flex; align-items: center; gap: 12px; margin: 12px 0 2px; padding: 12px 14px; border-radius: 18px; background: var(--apricot-xl); color: var(--ink); text-decoration: none; }
.profbar .avatar { width: 44px; height: 44px; font-size: 18px; }
.profbar .pb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.profbar .pb-t b { font-size: calc(16px * var(--fz)); }
.profbar .pb-t small { font-size: calc(13px * var(--fz)); color: var(--sub); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profbar .pb-go { font-size: 26px; color: var(--apricot-d); line-height: 1; }
/* トーク一覧の右上: 文字つきのアイコン（プロフィール・アルバム） */
.bar .lb { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 6px; color: var(--ink); text-decoration: none; flex-shrink: 0; }
.bar .lb small { font-size: 10px; font-weight: 700; color: var(--sub); line-height: 1.2; }
.bar .lb .avatar { width: 26px; height: 26px; font-size: 12px; }
.bar .lb .ico { width: 26px; height: 26px; }
/* トーク一覧の左上のロゴ（上の段に収まるように少し小さく） */
.bar .tl-logo { flex: 1; min-width: 0; gap: 8px; }
.bar .tl-logo img { width: 38px; height: 38px; flex: none; }
.bar .tl-logo .word { min-width: 0; }
.bar .tl-logo .word b { font-size: 19px; white-space: nowrap; }
.bar .tl-logo .word small { font-size: 10px; letter-spacing: .28em; }
.bar button.lb { font: inherit; }
/* 右上の 3 つ（プロフィール・アルバム・設定）は同じ幅にして、アイコンを等間隔に並べる。長い「プロフィール」の文字は左右に少しはみ出してよい */
.talks-page .bar .lb { width: 54px; padding: 2px 0; }
.talks-page .bar .lb small { white-space: nowrap; }
/* トーク一覧のヘッダーはあんず色の帯（白いトークの行と見分けやすく。のっくりが 4 案から A を選んだ） */
.talks-page .bar { background: linear-gradient(135deg, #ffbe5c, #f39a2e); box-shadow: 0 2px 10px rgba(200, 110, 20, .25); }
.talks-page .bar .lb, .talks-page .bar .lb small, .talks-page .bar .tl-logo .word b { color: #fff; }
.talks-page .bar .tl-logo .word small { color: #fff3df; }
.talks-page .bar .tl-logo img { background: #fff; border-radius: 50%; padding: 2px; }
/* 幅の狭いスマホでは、ロゴを少し小さくして右の 3 つとくっつかないように */
@media (max-width: 374px) {
  .bar .tl-logo { gap: 6px; }
  .bar .tl-logo img { width: 32px; height: 32px; }
  .bar .tl-logo .word b { font-size: 16px; }
  .bar .tl-logo .word small { font-size: 9px; letter-spacing: .22em; }
}
/* 設定のシート: 下の小さなアプリ名 */
.menu .about { text-align: center; color: var(--faint); font-size: 12px; font-weight: 700; margin-top: 4px; }

/* 戻るボタンの「く」: 字の ‹ は小さいので、太い線の絵にして大きく見せる（老眼にもやさしく） */
.back { font-size: 0 !important; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.back::before { content: ""; display: block; width: 30px; height: 30px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 3.5 7 12l8.5 8.5' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 3.5 7 12l8.5 8.5' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* 会のリンクを開いたときの画面（参加の案内など）にも、トップへ戻る「く」 */
/* 押せる範囲は「く」の見た目より上下左右に広く（はみ出す分は負の margin で打ち消し、並びは変えない）。ロゴとの間もあけて押し間違えを防ぐ */
.top-head .gate-back { color: var(--apricot-d); padding: 13px 16px 13px 12px; margin: -13px 6px -13px -12px; flex-shrink: 0; }
.top-head .gate-back + .logo { margin-right: auto; }
.top-head .gate-back + .logo { gap: 6px; }
.top-head .gate-back + .logo img { width: 36px; height: 36px; }
/* 幅の狭いスマホでも右の「文字 あ あ あ」とぶつからないよう、画面の幅に合わせて少し小さくする */
.top-head .gate-back + .logo .word b { font-size: min(19px, 4.5vw); white-space: nowrap; }
.top-head .gate-back ~ .fzctl .lb { padding: 0 4px 0 6px; }
.top-head .gate-back ~ .fzctl button { width: 30px; height: 30px; }
.top-head .gate-back + .logo .word small { font-size: 10px; letter-spacing: .26em; }
/* 幹事の印: アイコンの右下の王冠と、色の濃い札 */
.avw { position: relative; display: inline-flex; flex-shrink: 0; }
.avw .crown { position: absolute; right: -4px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; background: #f2a516; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.avw .crown .ico { width: 14px; height: 14px; fill: #fff; stroke: #fff; stroke-width: 1.5; }
.menu .prof .pav .avw .crown { width: 34px; height: 34px; right: 0; bottom: 0; }
.menu .prof .pav .avw .crown .ico { width: 21px; height: 21px; }
.tag.adm { background: #f2a516; color: #fff; }
.item.is-adm { background: #fffaf0; }
.mini.adm { background: var(--apricot-l); color: #9a4f00; }

/* ---------- ふつうのアンケート（トークのカード） ---------- */
.vcard { background: var(--paper); border-radius: 20px; padding: 12px 12px 10px; width: min(78vw, 320px); box-shadow: 0 1px 2px rgba(122, 82, 36, .12); border: 2px solid #f7d7a6; }
.vcard.todo { border-color: var(--apricot); }
.vcard.closed { border-color: var(--line); }
.vcard.flash { animation: vflash 1.4s ease; }
@keyframes vflash { 0%, 60% { box-shadow: 0 0 0 6px rgba(247, 162, 59, .5); } 100% { box-shadow: 0 1px 2px rgba(122, 82, 36, .12); } }
.vcard .vh { display: flex; align-items: center; justify-content: space-between; font-weight: 900; color: var(--apricot-d); font-size: calc(13px * var(--fz)); }
.vcard .vh span { background: var(--apricot-xl); color: #9a4f00; border-radius: 99px; padding: 1px 8px; font-size: calc(12px * var(--fz)); }
.vcard .vq { font-weight: 900; font-size: calc(17px * var(--fz)); line-height: 1.5; margin: 6px 0 2px; word-break: break-word; }
.vcard .vstate { color: var(--sub); font-size: calc(13px * var(--fz)); font-weight: 700; margin-bottom: 8px; }
.vcard.todo .vstate { color: var(--apricot-d); }
.vopts { display: flex; flex-direction: column; gap: 6px; }
.vopt { position: relative; overflow: hidden; border: 2px solid var(--line); border-radius: 14px; padding: 9px 10px; cursor: pointer; background: #fff; }
.vopt.off { cursor: default; }
.vopt:not(.off):active { transform: scale(.98); }
.vopt.on { border-color: var(--apricot); }
.vopt .vbar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--apricot-xl); transition: width .3s; }
.vopt.on .vbar { background: var(--apricot-l); }
.vopt .vrow { position: relative; display: flex; align-items: center; gap: 8px; }
.vopt .vck { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d9c7ad; flex-shrink: 0; background: #fff; }
.vopt .vck.sq { border-radius: 6px; }
.vopt.on .vck { border-color: var(--apricot); background: var(--apricot); box-shadow: inset 0 0 0 3px #fff; }
.vopt .vt { flex: 1; font-weight: 700; word-break: break-word; }
.vopt .vn { color: #9a4f00; font-size: calc(14px * var(--fz)); }
.vopt .vwho { position: relative; color: var(--sub); font-size: calc(12px * var(--fz)); margin: 3px 0 0 28px; line-height: 1.5; }
.vcard .vfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--sub); font-size: calc(12px * var(--fz)); font-weight: 700; }
.vcard .vctl { border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 4px 10px; font-weight: 700; font-size: calc(12px * var(--fz)); color: var(--sub); flex-shrink: 0; }
/* 作る画面 */
.vex-h { font-weight: 900; color: var(--sub); font-size: calc(14px * var(--fz)); margin: 18px 0 8px; }
.vex .choice { margin-bottom: 8px; }
.vex .choice .t b { font-size: calc(16px * var(--fz)); }
.vedit { display: flex; flex-direction: column; gap: 8px; }
.vline { display: flex; align-items: center; gap: 8px; }
.vline .vnum { width: 26px; height: 26px; border-radius: 50%; background: var(--apricot-l); color: #9a4f00; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.vline .field { flex: 1; margin: 0; }
.vline .vdel { width: 40px; height: 40px; border: none; background: none; color: var(--faint); font-size: 22px; flex-shrink: 0; }
.vadd { margin-top: 10px; }
.vdl { margin-top: 4px; }
.vtime { display: flex; align-items: center; gap: 10px; font-weight: 900; margin-top: 12px; }
.vtime .field { flex: 1; margin: 0; }
.vdl-now { margin-top: 12px; text-align: center; color: var(--sub); }
.vdl-now b { color: var(--ink); }
.vpv { display: flex; justify-content: center; margin: 4px 0 14px; }
.vfix { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.step.stay { animation: none; }

/* ---------- 2026-10-04 夜: レビューを受けての追加 ---------- */
/* 場所を押すと地図 */
.maplink { color: inherit; text-decoration: underline; text-decoration-color: #e9b989; text-underline-offset: 3px; }
.maplink small { margin-left: 6px; font-size: calc(12px * var(--fz)); background: var(--apricot-l); color: #9a4f00; border-radius: 99px; padding: 1px 8px; font-weight: 700; text-decoration: none; display: inline-block; }
/* 同じ名前で入ろうとしている人の「通す・断る」 */
.pendbar { background: #fff1e6; box-shadow: 0 1px 0 #f3c9a4; padding: 8px 12px; flex-shrink: 0; position: relative; z-index: 1; max-height: 40vh; overflow-y: auto; }
.pendbar .pq + .pq { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #f3c9a4; }
.pendbar .pt { font-size: calc(14px * var(--fz)); line-height: 1.55; }
.pendbar .pb { display: flex; gap: 8px; margin-top: 6px; justify-content: flex-end; }
.pendbar .pb .mini { padding: 6px 18px; }
/* 出欠のお願い（全体トークの上） */
.rsvpbar { background: #f4f8ea; box-shadow: 0 1px 0 #d6e4b5; padding: 8px 12px; flex-shrink: 0; position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rsvpbar .rq { font-weight: 900; font-size: calc(14px * var(--fz)); }
.rb { display: flex; gap: 6px; flex-wrap: wrap; }
.rb.big .mini { padding: 9px 14px; font-size: calc(15px * var(--fz)); }
.mini.rs.go { border-color: #b7d38a; }
.mini.rs.maybe { border-color: #f1d08a; }
.mini.rs.no { border-color: #e8c1c1; }
.mini.rs.on { background: var(--apricot); color: #fff; border-color: var(--apricot); }
.tag.rs.go { background: #e7f2d4; color: #4d7314; }
.tag.rs.maybe { background: #fbf0cf; color: #8a6400; }
.tag.rs.no { background: #f6e1e1; color: #a03a3a; }
.tag.rs.none { background: #f1eeea; color: var(--faint); }
.rsum { background: #f4f8ea; border-radius: 14px; padding: 10px 14px; margin: 0 0 12px; font-weight: 700; font-size: calc(14px * var(--fz)); display: flex; justify-content: space-between; gap: 8px; cursor: pointer; }
.rsum span { color: var(--faint); }
.rgs { margin-top: 8px; }
.rg { padding: 8px 0; border-top: 1px solid var(--line); font-size: calc(14px * var(--fz)); }
.rg b { display: block; margin-bottom: 2px; }
/* 退室した人との個別トーク */
.gonebar { padding: 14px; text-align: center; color: var(--sub); background: #f6f3ee; font-size: calc(14px * var(--fz)); font-weight: 700; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
/* 送信中・送れなかった発言 */
.msg.out .bubble { opacity: .55; }
.msg.out.fail .bubble { opacity: 1; background: #fde3e3; }
.msg.out .meta span { color: var(--faint); font-size: calc(11px * var(--fz)); white-space: nowrap; }
.msg.out.fail .meta span { color: var(--red); font-weight: 700; white-space: normal; text-align: right; }
.msg.out.fail { cursor: pointer; }
/* 長押しのメニューを出すので、iPhone の標準の長押し（文字選択・画像保存）は止める */
#c-talk .bubble, #c-talk .photo { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* 機種変更の番号 */
.hcode { font-size: 40px; font-weight: 900; letter-spacing: 4px; margin: 6px 0 16px; color: #9a4f00; font-variant-numeric: tabular-nums; }
.handbtn { display: block; margin: 22px auto 0; border: none; background: none; color: var(--sub); font-weight: 700; font-size: calc(14px * var(--fz)); text-decoration: underline; text-underline-offset: 3px; font-family: inherit; }
.modal.ask textarea.field { margin-bottom: 12px; }
/* 前に開いた会は、トークが出るまで「読み込んでいるよ」を見せない（event.html の先頭で warm を付ける） */
html.warm #gate { visibility: hidden; }
/* トーク一覧の下の小さなボタン（会をひらく・届いた会に参加する） */
.tl-foot { display: flex; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid rgba(120, 80, 40, .1); }
.tl-foot .btn { flex: 1; margin: 0; padding: 9px 4px; font-size: calc(13px * var(--fz)); min-height: 0; white-space: nowrap; }
.talks-page .tlist { padding-bottom: 0; }
/* 押したとき、ページが切り替わるまで「押せた」と分かるように薄くする */
a.going, .say.going { opacity: .5; transition: opacity .1s; }

/* ---------- 削除するメッセージを選ぶ（LINE と同じ） ---------- */
#v-chat { position: relative; }
#v-chat .chatsel, #v-chat .seltop { display: none; }
#v-chat.selecting .chatsel { display: flex; }
#v-chat.selecting .seltop { display: flex; }
#v-chat.selecting .inputbar, #v-chat.selecting #c-gone { display: none !important; }
.seltop { position: absolute; left: 0; right: 0; top: 0; z-index: 5; align-items: center; justify-content: center; min-height: 56px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; background: #fff; font-weight: 900; font-size: calc(17px * var(--fz)); box-shadow: 0 1px 0 var(--line); box-sizing: border-box; }
#c-talk .msg[data-id] { transition: padding-left .18s ease; }
#v-chat.selecting #c-talk .msg[data-id] { position: relative; padding-left: 42px; cursor: pointer; -webkit-user-select: none; user-select: none; }
#v-chat.selecting #c-talk .msg[data-id]::before { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: 2px solid #c9b8a4; background: rgba(255, 255, 255, .8); box-sizing: border-box; }
#v-chat.selecting #c-talk .msg.sel::before { content: "✓"; border-color: var(--apricot); background: var(--apricot); color: #fff; font-size: 14px; font-weight: 900; line-height: 20px; text-align: center; }
.chatsel .btn.danger { background: var(--red); color: #fff; box-shadow: none; }
.chatsel .btn.danger:disabled { opacity: .45; }
.chatsel .btn.ghost { flex: 1; text-decoration: none; background: var(--paper); box-shadow: 0 0 0 1.5px var(--line) inset; color: var(--ink); }
#v-chat.selecting #c-dmalert { display: none !important; }

/* アルバムに写真を追加したときの吹き出し（小さな写真を並べる） */
.bubble.albumpost { border: none; font: inherit; color: inherit; text-align: left; padding: 10px; cursor: pointer; }
.albumpost .ab-h { font-weight: 700; font-size: calc(14px * var(--fz)); margin: 0 2px 8px; }
.albumpost .ab-g { display: grid; grid-template-columns: repeat(3, 64px); gap: 3px; }
.albumpost .ab-g.few { grid-template-columns: repeat(2, 96px); }
.albumpost .ab-c { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #e9dccb; display: block; }
.albumpost .ab-c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.albumpost .ab-c b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); color: #fff; font-size: 18px; }
.albumpost .ab-lock { color: var(--sub); font-size: calc(13px * var(--fz)); }

/* アルバムの「写真を追加」（会の切り替えのすぐ下の横長ボタン） */
.addbar { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 10px; padding: 12px; border: none; border-radius: 14px; background: linear-gradient(160deg, #ffbe5c, var(--apricot)); color: #fff; font-size: calc(16px * var(--fz)); font-weight: 900; box-shadow: 0 3px 10px rgba(214, 120, 20, .3); }
.addbar .p { font-size: calc(22px * var(--fz)); line-height: 1; }
.addbar:active { transform: scale(.98); }
.selbar .btn.danger:not(:disabled) { color: var(--red); }
.selbar .btn:disabled { opacity: .45; }

/* アルバムの一覧（会ごとのアルバムを表紙つきで 2 列に並べる） */
.alist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 10px; padding: 14px 10px; }
.acard { border: none; background: none; padding: 0; text-align: left; font: inherit; color: var(--ink); min-width: 0; }
.ac-img { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--apricot-xl); display: flex; align-items: center; justify-content: center; font-size: 34px; }
.ac-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-t { font-weight: 900; font-size: calc(15px * var(--fz)); margin: 6px 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-n { color: var(--sub); font-size: calc(13px * var(--fz)); font-weight: 700; margin: 0 2px; }

/* ノート（全面の画面。一覧 → 中身 → 書く・直す） */
.npage { position: fixed; inset: 0; z-index: 40; background: var(--cream); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); }
.np-body { flex: 1; overflow-y: auto; padding: 0 0 20px; }
.np-foot { padding: 0 16px calc(14px + env(safe-area-inset-bottom)); }
.np-foot:empty { display: none; }
.np-foot .btn { margin-top: 8px; }
.nrow { display: block; width: calc(100% - 20px); margin: 0 10px 8px; padding: 12px 14px; border: none; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); text-align: left; font: inherit; color: var(--ink); }
.nr-t { font-weight: 900; font-size: calc(16px * var(--fz)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-b { color: var(--ink); font-size: calc(14px * var(--fz)); margin-top: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nr-m { color: var(--sub); font-size: calc(12px * var(--fz)); font-weight: 700; margin-top: 6px; }
.nview { margin: 10px; padding: 16px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); }
.nview h2 { margin: 0 0 10px; font-size: calc(19px * var(--fz)); font-weight: 900; line-height: 1.4; word-break: break-word; }
.nv-m { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: calc(14px * var(--fz)); }
.nv-m .avatar { width: 34px; height: 34px; flex-shrink: 0; }
.nv-m small { display: block; color: var(--sub); font-size: calc(12px * var(--fz)); }
.nv-b { margin-top: 12px; white-space: pre-wrap; word-break: break-word; line-height: 1.75; font-size: calc(16px * var(--fz)); }
#npage .addbar { width: calc(100% - 20px); }
#npage .field { display: block; width: calc(100% - 20px); margin: 10px 10px 0; box-sizing: border-box; }
#npage textarea.field { min-height: 46vh; }
.nf-help { color: var(--sub); font-size: calc(13px * var(--fz)); margin: 8px 14px; }
.bubble.ncard { border: none; font: inherit; color: inherit; text-align: left; cursor: pointer; min-width: 200px; max-width: 250px; }
.ncard .nc-h { color: var(--apricot-d); font-weight: 900; font-size: calc(13px * var(--fz)); }
.ncard .nc-t { font-weight: 900; font-size: calc(16px * var(--fz)); margin: 4px 0 2px; word-break: break-word; }
.ncard .nc-b { color: var(--sub); font-size: calc(13px * var(--fz)); white-space: pre-wrap; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ncard .nc-go { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--apricot-d); font-weight: 900; font-size: calc(13px * var(--fz)); text-align: center; }
/* 全員チャットの「新しい会をひらいたよ」のカード（押すとその会へ） */
.bubble.evnew { display: block; text-decoration: none; }

/* ---------- 下のメニュー（トップ・トーク一覧・通知）。会をつくる窓やモーダルより下に ---------- */
.footnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: rgba(255, 255, 255, .97); box-shadow: 0 -1px 0 var(--line); padding: 6px 2px calc(6px + env(safe-area-inset-bottom)); }
.footnav a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; color: #a8957f; text-decoration: none; position: relative; font-weight: 700; }
.footnav a.on { color: var(--apricot-d); }
.footnav svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.footnav small { font-size: 11px; white-space: nowrap; }
.footnav a::before { content: ""; position: absolute; top: -2px; left: 50%; width: 58px; height: 34px; margin-left: -29px; border-radius: 999px; background: var(--apricot-xl); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; z-index: -1; }
.footnav a:active::before { opacity: 1; transform: none; transition: none; }
.footnav a:active { color: var(--apricot-d); }
.footnav a:active svg { transform: scale(.9); }
.footnav a { isolation: isolate; }
.footnav .badge { position: absolute; top: -3px; left: calc(50% + 5px); min-width: 19px; height: 19px; font-size: 11px; }
body.has-foot .page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
body.has-foot #app { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

/* ---------- 通知の箱 ---------- */
.ibsec { font-weight: 900; font-size: calc(15px * var(--fz)); margin: 18px 4px 8px; display: flex; align-items: center; gap: 8px; }
.ibsec .mini { margin-left: auto; }
.ibrow { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; border: none; background: var(--paper); border-radius: 18px; padding: 13px 14px; margin-bottom: 8px; box-shadow: 0 0 0 2px var(--line) inset; color: var(--ink); font: inherit; }
.ibrow.todo { box-shadow: 0 0 0 2px #f6c27f inset, 0 4px 12px rgba(232, 133, 26, .12); background: #fffaf2; }
.ibrow.done { opacity: .62; }
.ibrow .ic { font-size: 24px; line-height: 1.2; flex-shrink: 0; }
.ibrow .mid { flex: 1; min-width: 0; }
.ibrow .tx { word-break: break-word; line-height: 1.5; }
.ibrow .sub { color: var(--faint); font-size: calc(13px * var(--fz)); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.ibrow .chip { flex-shrink: 0; align-self: center; font-size: 12px; font-weight: 900; padding: 3px 9px; border-radius: 99px; background: var(--apricot); color: #fff; white-space: nowrap; }
.ibrow.done .chip { background: var(--line); color: #a8957f; }
.ibempty { text-align: center; color: var(--faint); padding: 40px 10px; line-height: 1.8; }
.ibempty img { width: 110px; }
/* 単独の画面で出す窓（後ろを透かさない。仲間に入る画面など） */
.modal.solo { background: var(--cream); align-items: center; overflow-y: auto; padding-top: calc(16px + env(safe-area-inset-top)); }
.modal.solo .box { margin: auto 0; box-shadow: 0 6px 24px rgba(120, 80, 40, .08); }
.modal .lbl { font-weight: 900; margin: 0 0 6px; line-height: 1.5; }
.modal .lbl small { display: block; font-weight: 700; color: var(--sub); }

/* 募集中の会の一覧（下のメニューの「参加する」・トーク一覧の上のお知らせ。common.js の openRecruit） */
.rc-box { max-height: 80vh; overflow-y: auto; }
.rc-h { font-weight: 900; font-size: calc(18px * var(--fz)); margin: 2px 0 12px; }
.rc-h .count { color: var(--sub); font-size: calc(14px * var(--fz)); font-weight: 700; }
.rc-empty { text-align: center; color: var(--sub); line-height: 1.7; padding: 6px 0 4px; font-size: calc(14px * var(--fz)); }
.rc-empty img { width: 84px; }
/* トーク一覧のいちばん上: 募集中の会のお知らせ */
.recbar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #fff4e0; box-shadow: 0 1px 0 #f6d9a8; color: var(--ink); font-weight: 900; text-decoration: none; font-size: calc(15px * var(--fz)); cursor: pointer; }
.recbar .n { background: var(--apricot-d); color: #fff; border-radius: 999px; padding: 1px 9px; font-size: calc(13px * var(--fz)); }
.recbar .chev { margin-left: auto; color: var(--sub); }
/* トーク一覧の 1 行ずつを帯に（部屋が 1 つでも「一覧」と分かるように） */
.talks-page .tlist { background: var(--cream); }
.talks-page .trow { background: var(--paper); border-bottom: 1px solid var(--line); }
/* 初めて入った人への案内（talks.html の tour）。対象の周りだけ明るく抜き、フキダシで説明 */
.tour { position: fixed; inset: 0; z-index: 90; }
.tour .hole { position: fixed; box-sizing: border-box; border-radius: 16px; border: 4px solid var(--apricot); box-shadow: 0 0 0 9999px rgba(40, 28, 16, .55); transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; pointer-events: none; }
/* 光る輪は別の層を広げて薄くするだけ（画面いっぱいの影ごと動かすと、毎コマ全部を描き直して重い） */
.tour .hole::after { content: ""; position: absolute; inset: -4px; border-radius: 16px; border: 4px solid rgba(255, 196, 110, .9); animation: tourRing 1.3s ease-out infinite; }
@keyframes tourRing { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.08); opacity: 0; } }
.tour .tip { position: fixed; left: 16px; right: 16px; max-width: 420px; margin: 0 auto; background: #fff; border-radius: 18px; padding: 18px 18px; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); display: flex; gap: 14px; align-items: center; font-weight: 700; line-height: 1.6; font-size: calc(17px * var(--fz)); animation: fadein .2s ease, tourBob 1.6s ease-in-out infinite; }
@keyframes tourBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.tour .tip img { width: 76px; height: 76px; flex-shrink: 0; animation: tourWiggle 1.6s ease-in-out infinite; }
@keyframes tourWiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.tour .tip small { display: block; color: var(--faint); font-size: calc(13px * var(--fz)); margin-top: 4px; }
.tour .tip::after { content: ""; position: absolute; left: var(--ax, 40px); width: 16px; height: 16px; background: #fff; transform: rotate(45deg); }
.tour .tip.up::after { top: -7px; }
.tour .tip.down::after { bottom: -7px; }
.tour .tip.mid::after { display: none; }
/* 募集中の会の「非表示にする」「一覧に戻す」 */
.rc-row { display: flex; flex-direction: column; gap: 4px; }
.rc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 8px; }
.rc-row .evcard .rc-foot .newtag { margin-top: 0; }
/* カードの右下の隅に、小さく控えめに（押せる範囲は余白で広げる） */
.rc-hide { color: var(--faint); opacity: .8; font-weight: 500; font-size: calc(11px * var(--fz)); line-height: 1; padding: 12px 4px 4px 12px; margin: 0 -8px -10px 0; white-space: nowrap; }
/* 「非表示にする」を押している間は、カードは縮まない（ボタンだけ薄くなる） */
.evcard:has(.rc-hide:active) { transform: none; }
.rc-more { display: block; width: 100%; border: none; background: none; color: var(--sub); font-weight: 700; font-size: calc(14px * var(--fz)); padding: 14px 0 8px; font-family: inherit; }
.rc-hid .evcard { opacity: .6; }
/* 募集中の会の一覧の下の「参加予定の会」の見出し（いつも並べる。見た目は「募集中の会」と同じ）と、参加予定の会の「👑 幹事」の札 */
.rc-h2 { margin-top: 26px; }
/* 参加予定の会のカードの右上の「参加」のハンコ（朱色の二重丸・少し傾けて） */
.evcard.plan { position: relative; }
.evcard.plan .name { padding-right: 46px; }
.stamp {
  position: absolute; top: 10px; right: 12px; width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid #d4483e; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3.5px #d4483e;
  color: #d4483e; font-weight: 900; font-size: 15px; letter-spacing: .04em; line-height: 1;
  transform: rotate(-14deg); opacity: .82; pointer-events: none;
}
.rc-row .evcard .newtag .kanji { font-weight: 900; margin-right: 8px; padding-right: 8px; border-right: 1px solid rgba(255, 255, 255, .6); }


/* 押したときの反応（全部のボタン・リンクの下じき）。専用の押した見た目があるものは除く。
   新しく押せる部品を作るときも、何もしなければここで薄くなる（押せたか分からないボタンを作らない） */
:where(button, a[href], [role="button"], label.tap, .say.tap):not(:disabled, .btn, .chip, .panel, .evcard, .item, .choice, .mk, .ib, .trow, .mt, .mr, .rxb, .stb, .stp-i, .vopt, .addbar, .upd-box, .footnav a, .lonebar):active { opacity: .5; transition: none; }
/* 募集中の会の窓: 下からふわっと 1 回だけ出す */
.rc-box { animation: rcin .22s cubic-bezier(.2, .8, .3, 1); }
@keyframes rcin { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* 画面から画面へ移るときのつなぎの動き（@view-transition）は使わない。
   iPhone で画面が一瞬小さく描かれてから右へ広がる動きになっていたため（10/6 のっくり）。 */

/* 参加の画面: 名前が分かっている仲間には「○○さんとして参加するよ」だけ見せる */
/* 参加の画面の「いま n 人が参加しているよ」（押すと顔ぶれ） */
.faces .who { border: none; background: none; padding: 0; font-family: inherit; font-size: calc(15px * var(--fz)); color: var(--sub); font-weight: 700; text-decoration: underline; text-decoration-color: var(--apricot); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.menu .people { display: flex; flex-direction: column; padding: 6px 0 4px; }
.menu .pp { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.menu .pp:last-child { border-bottom: none; }
.menu .pp .avatar { width: 44px; height: 44px; flex: none; }
.menu .pp span { display: flex; flex-direction: column; font-size: calc(16px * var(--fz)); font-weight: 700; line-height: 1.35; }
.menu .pp small { font-size: calc(12px * var(--fz)); color: var(--apricot-d); }

/* ---------- 通知の設定（talks.html の openNotif）・オンオフのスイッチ ---------- */
.sw { position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px; border: none; padding: 0; background: #d9cfc4; transition: background .2s; cursor: pointer; }
.sw span { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.sw.on { background: var(--apricot); }
.sw.on span { transform: translateX(20px); }
.sw:disabled { opacity: .45; cursor: default; }
#notif .nrow { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
#notif .nrow .avatar { width: 40px; height: 40px; font-size: 16px; }
#notif .nt { flex: 1; min-width: 0; }
#notif .nt b { display: block; font-size: calc(15px * var(--fz)); font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#notif .nt small { display: block; margin-top: 2px; font-size: calc(12px * var(--fz)); color: var(--sub); font-weight: 700; line-height: 1.5; }
#notif .nall { border-bottom: none; padding: 14px 4px 12px; }
#notif .nsec { margin: 6px 0 0; padding: 10px 4px 4px; border-top: 6px solid var(--apricot-xl); font-size: calc(13px * var(--fz)); font-weight: 900; color: var(--sub); }
#notif .nsec small { font-weight: 700; }
/* トーク一覧のメニュー: 項目名は折らず、右の小さい説明のほうを折り返す（「マイスタンプ」が 3 行に割れないように） */
#settings .mr .ml { flex: 1 0 auto; white-space: nowrap; }
#settings .mr > small { flex: 0 1 auto; min-width: 0; white-space: normal; text-align: right; line-height: 1.4; }
#notif .nlist .nrow:last-child { border-bottom: none; }
#notif .nlist.dim .nrow, #notif .nopt.dim { opacity: .5; }
#notif .nopt .nrow:last-child { border-bottom: none; }
/* 通知する時間帯（始まり 〜 終わり ×）と、時間外の通知 */
#notif .nhrs { padding: 2px 0 10px; }
#notif .nhr { display: flex; align-items: center; gap: 8px; padding: 6px 4px; }
#notif .nhr input { flex: 1; min-width: 0; height: 44px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: calc(17px * var(--fz)); font-weight: 900; text-align: center; -webkit-appearance: none; appearance: none; }
#notif .nhr .til { color: var(--sub); font-weight: 900; }
#notif .nhr .nx { flex: none; margin-right: -4px; padding: 2px 6px; border-radius: 8px; background: var(--apricot-xl); color: var(--apricot-d); font-size: calc(12px * var(--fz)); font-weight: 900; }
#notif .nhx { flex: none; width: 36px; height: 36px; border: none; border-radius: 50%; background: #f5efe7; color: var(--sub); display: flex; align-items: center; justify-content: center; padding: 0; }
#notif .nhx .ico { width: 18px; height: 18px; }
#notif .nhadd { display: block; width: calc(100% - 8px); margin: 4px 4px 0; height: 44px; border: 1.5px solid var(--apricot); border-radius: 12px; background: #fff; color: var(--apricot-d); font: inherit; font-size: calc(14px * var(--fz)); font-weight: 900; }
#notif .nhadd:active { background: var(--apricot-xl); }
#notif .nhnone { margin: 8px 4px 0; font-size: calc(12px * var(--fz)); color: var(--sub); font-weight: 700; line-height: 1.5; }
#notif .nout { margin: 12px 4px 0; padding: 12px; border-radius: 14px; background: var(--apricot-xl); }
#notif .nout b { display: block; font-size: calc(14px * var(--fz)); font-weight: 900; margin-bottom: 8px; }
#notif .nout small { display: block; margin-top: 8px; font-size: calc(12px * var(--fz)); color: var(--sub); font-weight: 700; line-height: 1.5; }
#notif .nseg { display: flex; padding: 3px; border-radius: 12px; background: #fff; }
#notif .nseg button { flex: 1; height: 38px; border: none; border-radius: 9px; background: none; color: var(--sub); font: inherit; font-size: calc(14px * var(--fz)); font-weight: 900; }
#notif .nseg button.on { background: var(--apricot); color: #fff; }
#notif .nt-none { text-align: center; padding: 16px 8px 8px; }
#notif .nt-none img { width: 90px; height: 90px; }
#notif .nt-none p, #notif .nt-empty { color: var(--sub); font-weight: 700; font-size: calc(14px * var(--fz)); line-height: 1.7; text-align: center; }
.flashed { pointer-events: none; }
#c-photo.sending { animation: sending 1s ease-in-out infinite; pointer-events: none; }
@keyframes sending { 50% { opacity: .35; } }

/* 会のタイトルなどの題名は「…」で 1 行に切らず、2 行まで折り返して読めるようにする（幅の狭い機種や文字を大きくしたときに読めなかった） */
.evcard .name, .trow .name, .bar .title:not(.two), .bar .title.two span, .menu .mt2 b, .ac-t, #notif .nt b, .adet .bl-t b, .nr-t {
  white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; line-height: 1.3;
}
/* 募集中の会の一覧: 「見てみる」はタイトルと日時の下に置き、タイトルが横幅いっぱい使えるようにする */
.rc-row .evcard .newtag { display: inline-block; margin-top: 8px; padding: 5px 14px; }
.rc-row .evcard .name { -webkit-line-clamp: 3; }
/* アルバムの一覧: 題名が 2 行の会があっても、表紙の上の端をそろえる */
.alist { align-items: start; }
.acard { display: flex; flex-direction: column; }
/* リアクション: 吹き出しのすぐ下に枠なしで並べる（❤️ 2　😆 6。吹き出しには重ねない）。押すとだれが付けたか */
.msg .rx { align-self: flex-start; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 3px 4px 0; padding: 0; border: none; background: none; color: var(--sub); line-height: 1.3; }
.msg.mine .rx { align-self: flex-end; justify-content: flex-end; }
.msg .rx span { display: inline-flex; align-items: center; gap: 3px; font-size: calc(22px * var(--fz)); }
.msg .rx b { font-size: calc(15px * var(--fz)); font-weight: 900; }
/* 自分が付けたものは数をあんず色に */
.msg .rx span.me b { color: var(--apricot-d); }
/* 長押しメニューの上の絵文字の列 */
.menu .rxbar { display: flex; justify-content: space-between; gap: 4px; padding: 2px 2px 14px; border-bottom: 1px solid var(--line); }
.menu .rxb { width: 48px; height: 48px; border: none; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(90, 60, 30, .16); font-size: 26px; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; transition: transform .1s; }
.menu .rxb:active { transform: scale(.86); }
.menu .rxb.on { background: var(--apricot-xl); box-shadow: 0 0 0 2.5px var(--apricot) inset; }
.menu .pp .re { margin-left: auto; font-style: normal; font-size: 24px; line-height: 1; }
/* グループを作る・招待（全画面の窓。common.js の gpPick・gpForm） */
.gp { position: fixed; inset: 0; z-index: 70; background: var(--cream); display: flex; flex-direction: column; animation: fadein .15s ease; }
.gp-bar { display: flex; align-items: center; gap: 4px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px 4px; min-height: 56px; background: #fff; box-shadow: 0 1px 0 var(--line); }
.gp-bar .back { border: none; background: none; padding: 6px; color: var(--apricot-d); }
.gp-bar b { font-size: calc(17px * var(--fzl)); font-weight: 900; }
.gp-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 16px; }
.gp-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -1px 0 var(--line); }
.gp-foot .btn { width: 100%; }
.gp-foot .btn:disabled { opacity: .45; }
.gp-q { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 999px; padding: 10px 16px; font: inherit; font-size: calc(15px * var(--fz)); background: #fff; }
.gp-chips { display: flex; gap: 10px; overflow-x: auto; padding: 10px 2px 2px; }
.gp-chips:empty { display: none; }
.gp-chip { position: relative; flex: none; width: 56px; border: none; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink); }
.gp-chip .avatar { width: 46px; height: 46px; }
.gp-chip small { font-size: 11px; font-weight: 700; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-chip i { position: absolute; top: -2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: #8b7763; color: #fff; font-style: normal; font-size: 12px; line-height: 18px; text-align: center; }
.gp-list { display: flex; flex-direction: column; margin-top: 8px; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.gp-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border: none; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; }
.gp-row:last-child { border-bottom: none; }
.gp-row .avatar { width: 44px; height: 44px; flex: none; font-size: 17px; }
.gp-n { flex: 1; min-width: 0; font-size: calc(16px * var(--fz)); font-weight: 700; }
.gp-ck { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--faint); flex: none; box-sizing: border-box; }
.gp-row.on .gp-ck { border-color: var(--apricot); background: var(--apricot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat; }
.gp-row.hidden { display: none; }
.gp-none { text-align: center; color: var(--sub); padding: 30px 0; }
.gp-top { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 18px; padding: 14px; box-shadow: var(--shadow); }
.gp-pic .avatar { width: 64px; height: 64px; font-size: 30px; }
.gp-nopic { background: var(--apricot-xl); }
.gp-name { flex: 1; min-width: 0; border: none; border-bottom: 2px solid var(--apricot-l); padding: 8px 2px; font: inherit; font-size: calc(17px * var(--fz)); font-weight: 700; background: none; outline: none; }
.gp-name:focus { border-bottom-color: var(--apricot); }
.gp-sec { margin: 18px 4px 8px; font-size: calc(14px * var(--fz)); font-weight: 900; color: var(--sub); }
.gp-mem { display: flex; gap: 10px; overflow-x: auto; padding: 2px; }
.gp-mem span { flex: none; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.gp-mem .avatar { width: 46px; height: 46px; }
.gp-mem small { font-size: 11px; font-weight: 700; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 自作スタンプ（stamp.js）: リアクションの中の絵・長押しメニューのスタンプの列・スタンプ工房 */
.msg .rx .sti { height: calc(36px * var(--fz)); width: auto; max-width: calc(80px * var(--fz)); object-fit: contain; }
.menu .pp .re .sti { height: 28px; width: auto; max-width: 60px; object-fit: contain; display: block; }
.mt2 small .sti { height: 1.25em; width: auto; vertical-align: -.25em; }
.sti, .st-si, .stb img { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.menu .rxbar:has(+ .stbar) { border-bottom: none; padding-bottom: 8px; }
.menu .stbar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.menu .stbar::-webkit-scrollbar { display: none; }
.menu .stb { flex: none; height: 48px; min-width: 48px; padding: 4px 8px; border: none; border-radius: 14px; background: #fff; box-shadow: 0 1px 5px rgba(90, 60, 30, .16); display: flex; align-items: center; justify-content: center; transition: transform .1s; }
.menu .stb:active { transform: scale(.88); }
.menu .stb img { height: 36px; width: auto; max-width: 84px; object-fit: contain; pointer-events: none; }
.menu .stb.on { background: var(--apricot-xl); box-shadow: 0 0 0 2.5px var(--apricot) inset; }
.menu .stb.add { min-width: auto; padding: 4px 12px; gap: 4px; background: none; box-shadow: none; border: 2px dashed var(--apricot-l); color: var(--apricot-d); font-weight: 900; font-size: calc(13px * var(--fz)); }
.menu .stb.ls { border-style: solid; border-color: var(--line); color: var(--sub); }
.menu .stb.add b { font-size: 20px; line-height: 1; }
.st .gp-body { padding-top: 10px; }
/* PC など横に広い画面では、工房の中身を真ん中の 600px に収める（つまみが長くなりすぎないように） */
.st { --gx: max(16px, calc(50vw - 300px)); }
.st .gp-body, .st .gp-foot { padding-left: var(--gx); padding-right: var(--gx); }
.st .st-top { margin-left: calc(-1 * var(--gx)); margin-right: calc(-1 * var(--gx)); }
/* 上: 作業台（指で動かす・描く）と、できあがり。下へ動かしても上に残る */
.st-top { position: sticky; top: -10px; z-index: 2; margin: -10px -16px 10px; padding: 12px 16px; background: var(--cream); display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 1px 0 var(--line); }
.st-wk { position: relative; flex: none; }
.st-work { display: block; width: min(58vw, 260px); height: auto; aspect-ratio: 1; border-radius: 16px; touch-action: none; box-shadow: var(--shadow);
  background: #fff repeating-conic-gradient(#f1e8de 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.st-work.pen { cursor: crosshair; }
.st-hint { position: absolute; inset: 0; margin: 0; display: none; align-items: center; justify-content: center; text-align: center; padding: 0 20px; color: var(--sub); font-size: 13px; font-weight: 700; pointer-events: none; }
.st-wk.empty .st-hint { display: flex; }
.st-side { flex: 0 0 min(30vw, 150px); min-width: 0; display: flex; /* 幅を決めておく（できあがりの横幅で作業台が左右に動かないように） */ flex-direction: column; align-items: center; gap: 6px; }
.st-side > small { font-size: 11px; font-weight: 800; color: var(--sub); }
.st-stage { height: 76px; min-width: 76px; max-width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: #fff repeating-conic-gradient(#f1e8de 0 25%, #fff 0 50%) 0 0 / 12px 12px; box-shadow: var(--shadow); }
.st-out { height: 64px; width: auto; max-width: 100%; object-fit: contain; }
.st-stage.empty .st-out { visibility: hidden; width: 64px; }
.st-mock { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.st-mock.hidden { display: none; }
.st-mb { background: #fff; border-radius: 16px; padding: 7px 13px; font-size: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.st-mr { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-left: 4px; font-size: 22px; color: var(--sub); }
.st-mr b { font-size: 15px; font-weight: 900; margin-right: 8px; }
.st-mr img { height: 36px; width: auto; max-width: 80px; object-fit: contain; }
.st-tabs { display: flex; gap: 6px; background: #f2e9df; border-radius: 999px; padding: 4px; }
.st-tabs button { flex: 1; border: none; border-radius: 999px; padding: 9px 4px; background: none; font: inherit; font-size: calc(14px * var(--fz)); font-weight: 800; color: var(--sub); }
.st-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(90, 60, 30, .15); }
.st-pane { margin-top: 12px; }
.st-pane.hidden, .st-crop.hidden, .st-pick.hidden, .st-file { display: none; }
.st-text, .st-name { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: calc(18px * var(--fz)); font-weight: 800; background: #fff; outline: none; }
.st-text:focus, .st-name:focus { border-color: var(--apricot); }
.st-name { font-size: calc(15px * var(--fz)); font-weight: 700; }
.st-sec { margin: 16px 4px 8px; font-size: calc(14px * var(--fz)); font-weight: 900; color: var(--sub); }
.st-sec small { margin-left: 8px; font-weight: 700; color: var(--faint); }
.st-sws { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.st-sw { aspect-ratio: 1; border: none; border-radius: 50%; padding: 4px; background: none; }
.st-sw i { display: block; width: 100%; height: 100%; border-radius: 50%; }
.st-sw.on { box-shadow: 0 0 0 3px var(--apricot); }
.st-fonts { display: flex; flex-wrap: wrap; gap: 8px; }
.st-ch { border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 14px; background: #fff; font: inherit; font-size: calc(14px * var(--fz)); font-weight: 700; color: var(--ink); }
.st-ch.on { border-color: var(--apricot); background: var(--apricot-xl); color: var(--apricot-d); }
.st-tip { margin: 6px 4px 2px; font-size: 12px; color: var(--sub); line-height: 1.5; }
.st-zoom { width: 100%; accent-color: var(--apricot); }
.st-phopt.hidden, .st-dsel.hidden, .st-tsel.hidden { display: none; }
.st-tadd { margin-top: 8px; }
.st-ph i { display: flex !important; align-items: center; justify-content: center; font-size: 20px; font-style: normal; background: #fff; box-shadow: 0 0 0 1.5px var(--line) inset; }
.st-decos { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.st-dc { aspect-ratio: 1; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-size: 22px; padding: 0; line-height: 1; }
.btn.st-addimg { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 6px; padding: 10px; text-decoration: none; border-radius: 16px; background: var(--paper); border: 2px dashed var(--apricot); color: var(--apricot-d); font-weight: 900; }
.st-addimg small { font-size: 11px; font-weight: 700; color: var(--sub); }
.st-sl { display: flex; align-items: center; gap: 10px; margin: 6px 4px; }
.st-sl > span { flex: none; width: 4.5em; font-size: calc(13px * var(--fz)); font-weight: 800; color: var(--sub); }
.st-sl .st-zoom { flex: 1; min-width: 0; }
.st-deg { flex: none; width: 3.2em; text-align: right; font-size: 13px; color: var(--ink); }
.st-ch.st-warn { color: #c0392b; }
.st-pens { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin: 12px 0 10px; }
.st-pen { aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(0,0,0,.12); padding: 0; }
.st-pen.on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--apricot); }
.st-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.st-item { background: #fff; border-radius: 16px; padding: 10px 6px 8px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.st-si { height: 52px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 4px; }
/* スタンプ（トークに大きく送る絵）: 入力欄の 😊、下のパネル、送ったスタンプ */
.inputbar .stk { width: 40px; height: 40px; border: none; border-radius: 50%; background: none; font-size: 24px; line-height: 1; flex-shrink: 0; padding: 0; }
.inputbar .stk.on { background: var(--apricot-xl); }
.stpanel { flex-shrink: 0; max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
#v-chat.selecting .stpanel { display: none; }
.stp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stp-i { aspect-ratio: 1; min-width: 0; border: none; border-radius: 14px; background: #fbf6f0; padding: 6px; display: flex; align-items: center; justify-content: center; transition: transform .1s; }
.stp-i:active { transform: scale(.9); }
.stp-i img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-touch-callout: none; user-select: none; }
.stp-i.on { background: var(--apricot-xl); box-shadow: 0 0 0 2.5px var(--apricot) inset; }
.stp-i.add { flex-direction: column; gap: 2px; background: none; border: 2px dashed var(--apricot-l); color: var(--apricot-d); font-weight: 900; font-size: calc(12px * var(--fz)); }
.stp-i.add b { font-size: 22px; line-height: 1; }
.stp-i.ls { border-style: solid; border-color: var(--line); color: var(--sub); }
.stp-prev { width: 100%; border: none; background: none; padding: 2px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stp-big { height: 120px; width: auto; max-width: 100%; object-fit: contain; pointer-events: none; }
.stp-prev small { font-size: 11px; color: var(--sub); font-weight: 700; }
.stp-none { margin: 10px 4px 0; font-size: 12px; color: var(--sub); line-height: 1.6; text-align: center; }
.stmsg { --stmh: 160px; --stmw: 72vw; display: block; height: auto; object-fit: contain; -webkit-touch-callout: none; user-select: none; }
.msg.out .stmsg { opacity: .55; }
.st-shelf.big { grid-template-columns: repeat(2, 1fr); }
.st-shelf.big .st-si { height: 96px; }
.st .gp-body > .st-tabs { margin-bottom: 6px; }
.st-item b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-item small { font-size: 11px; color: var(--sub); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-none { margin: 20px 0; }
.st-none img { width: 80px; height: 80px; }
.st-note { margin: 18px 4px 0; font-size: 12px; color: var(--sub); line-height: 1.6; }
/* スタンプが背景に溶けないように、絵の形にそってうすい影（白い絵が白いメニュー・クリーム色のトークに乗っても見える） */
.sti, .stb img, .st-si, .st-mr img { filter: drop-shadow(0 0 .6px rgba(70, 45, 20, .6)) drop-shadow(0 1px 1.5px rgba(70, 45, 20, .2)); }
/* ---------- 2 列（iPad の横向き・PC）: 左にトーク一覧、右に開いたトーク（talks.html の #pane。中は iframe） ---------- */
.pane { display: none; }
@media (min-width: 900px) {
  .talks-page #app { position: fixed; top: 0; left: 0; width: 380px; max-width: none; margin: 0; box-shadow: 1px 0 0 var(--line); z-index: 1; }
  .talks-page .footnav { right: auto; width: 380px; }
  .talks-page .pane { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 380px; background: var(--cream); padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); box-sizing: border-box; }
  .pane iframe { display: block; width: 100%; height: 100%; border: 0; }
  .pane:not(.on) iframe, .pane.on .pane-empty { display: none; }
  .pane-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--sub); font-weight: 900; }
  .pane-empty img { width: 140px; height: 140px; opacity: .9; }
  .talks-page .trow.cur { background: var(--apricot-xl); }
}
/* 右の枠の中のページは、枠いっぱいに広げる */
.in-split #app { max-width: none; margin: 0; box-shadow: none; }
/* マイスタンプの一覧: 絵はタップで使う（長押しから開いたら付ける・😊 から開いたら送る）。右上のゴミ箱で「選んで消す」 */
button.st-item { position: relative; border: 0; color: inherit; font: inherit; cursor: pointer; }
button.st-item:active { opacity: .6; }
.st-shelf.del .st-item { box-shadow: 0 0 0 2px var(--line) inset; }
.st-shelf.del .st-item.on { box-shadow: 0 0 0 3px var(--red) inset; background: #fff5f5; }
.st-ck { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d8cfc4; background: #fff; }
.st-item.on .st-ck { border-color: var(--red); background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.st-trash { margin-left: auto; min-width: 44px; height: 40px; padding: 0 10px; border: none; border-radius: 12px; background: none; color: var(--sub); font: inherit; font-size: calc(14px * var(--fz)); font-weight: 900; display: flex; align-items: center; justify-content: center; }
.st-trash .ico { width: 24px; height: 24px; }
.st-trash.on { color: var(--apricot-d); }
.gp-foot .btn.danger:not(:disabled) { background: var(--red); color: #fff; box-shadow: none; }
/* マイスタンプ: 公開中の札・公開するときにえらんだもの */
.st-pubtag { position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: 8px; background: var(--apricot-xl); color: var(--apricot-d); font-size: 10px; font-style: normal; font-weight: 900; }
.st-shelf.pub .st-item { box-shadow: 0 0 0 2px var(--line) inset; }
/* 公開するとき: 案内は目立つ帯に */
.st-tip.big { margin: 8px 0 6px; padding: 10px 12px; border-radius: 12px; background: var(--apricot-xl); color: var(--apricot-d); font-size: 14px; font-weight: 800; }
.st-shelf.pub .st-item.on { box-shadow: 0 0 0 3px var(--apricot) inset; background: var(--apricot-xl); }
.st-shelf.pub .st-item.on .st-ck { border-color: var(--apricot); background-color: var(--apricot); }
.st-trash.st-pubbtn { margin-left: auto; color: var(--apricot-d); }
.st-trash.st-pubbtn + .st-delbtn { margin-left: 0; }
.st-pubbtn.hidden + .st-delbtn { margin-left: auto; }
/* スタンプ工房: えらんだものの操作（どれでも同じ。台といっしょに上に残る）・戻す／やり直す */
.st-top { flex-wrap: wrap; row-gap: 8px; }
.st-ops { flex-basis: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.st-ops button { border: 1.5px solid var(--line); border-radius: 12px; padding: 7px 2px; background: #fff; font: inherit; font-size: calc(12.5px * var(--fz)); font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-ops button.on { border-color: var(--apricot); background: var(--apricot-xl); color: var(--apricot-d); }
.st-ops button.st-warn { color: #c0392b; }
.st-ops button:disabled { opacity: .35; }
.st-ur { display: flex; gap: 6px; margin-top: 2px; }
.st-ur button { width: 52px; height: 46px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font: inherit; font-size: 20px; font-weight: 900; line-height: 1; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; }
.st-ur button small { font-size: 10px; font-weight: 800; color: var(--sub); }
.st-ur button:disabled { opacity: .35; }
.st-arts .st-dc { padding: 4px; }
.st-arts .st-dc img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-touch-callout: none; user-select: none; }
/* スタンプ工房: スマホで入力欄を打っているあいだは、上の台を小さくして操作のボタンを隠す */
.st.kb .st-ops, .st.kb .st-optip, .st.kb .st-side { display: none; }
.st.kb .st-work { width: min(36vw, 150px); }