/* あんずちゃんスケジューラの見た目
   あんず色（オレンジ）とクリーム色を基本に、丸ゴシック（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%; }
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-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; }
.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; }

/* トーク */
/* 背景は淡いあんず色に、葉っぱと実の小さな柄をうっすら散らす */
.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; }
.msg.mine .bubble { background: linear-gradient(160deg, #ffdc9e, #ffc871); color: #4a2f12; }
.msg.mine.head .bubble::before { left: auto; right: -6px; background: #ffdc9e; 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; }
.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; }
/* トークの上の帯: アイコン＋名前＋日時（個別トークは名前だけ） */
.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; }

/* ---------- その他 ---------- */
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: rgba(58, 42, 28, .92); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: calc(15px * var(--fz)); z-index: 80; max-width: 90vw; font-weight: 700; text-align: center; animation: toastin .2s ease; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } }
.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; animation: ring 1.4s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); } 70%, 100% { box-shadow: 0 0 0 4px rgba(229, 72, 77, 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 .ev { margin-left: 6px; font-size: calc(12px * var(--fz)); color: var(--sub); font-weight: 700; background: var(--apricot-xl); border-radius: 6px; padding: 1px 6px; }
.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 .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; }
.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; }

/* 戻るボタンの「く」: 字の ‹ は小さいので、太い線の絵にして大きく見せる（老眼にもやさしく） */
.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; }
/* 会のリンクを開いたときの画面（参加の案内など）にも、トップへ戻る「く」 */
.top-head .gate-back { color: var(--apricot-d); padding: 4px 6px 4px 0; 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: 38px; height: 38px; }
.top-head .gate-back + .logo .word b { font-size: 19px; white-space: nowrap; }
.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 .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; }