/* Layout: 画面外は静かなページ、主役はカカオトーク風のスマホ画面。テーマは .phone の data-theme で丸ごと差し替える。
   下タブ4つ: home / list / explore / phrases。サブ画面: room / create / profile(自分の設定) / char(キャラクター設定)。 */
:root {
  --page-bg: #eef2f7;
  --page-fg: #1d2733;
  --page-muted: #5d6b7c;
  --page-line: #d5dde8;
  --font-ui: 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC', system-ui, sans-serif;
  --font-sub: 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', system-ui, sans-serif;
  --font-cute: 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-bg: #11161d; --page-fg: #e6ebf2; --page-muted: #93a1b3; --page-line: #263140;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page-bg: #11161d; --page-fg: #e6ebf2; --page-muted: #93a1b3; --page-line: #263140;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  background: var(--page-bg); color: var(--page-fg);
  font-family: var(--font-ui); font-size: 14px;
  padding-block: 20px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.stage { max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.stage h1 { font-size: 15px; font-weight: 700; margin: 0; }
.stage p { margin: 0; color: var(--page-muted); line-height: 1.6; font-size: 12.5px; text-wrap: pretty; font-family: var(--font-sub); }

/* 最初のフォント: 見出し・タイトルだけ Jua、本文は標準(Noto Sans) */
.phone[data-font="orig"] :is(.list-title, .room-name, .group, .sheet h2, .prof .nm, .cview .nm, .xnm) { font-family: 'Jua', 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC', sans-serif; font-weight: 400; letter-spacing: 0; }
.phone[data-font="orig"] .list-title { font-size: 24px; }
.phone[data-font="orig"] .room-name { font-size: 18px; }
.phone[data-font="orig"] .cview .nm { font-size: 24px; }
.fontpick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fp { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 14px; background: var(--c-chip, var(--c-card)); border: 1.5px solid transparent; color: var(--c-hdr); }
.fp[aria-pressed="true"] { border-color: var(--c-accent); }
.fp .fs { font-size: 16px; line-height: 1.3; }
.fp .fn { font-size: 11.5px; color: var(--c-sub); }
.fp[aria-pressed="true"] .fn { color: var(--c-hdr); font-weight: 700; }

/* ---------- テーマ ---------- */
.phone {
  --c-bg: linear-gradient(180deg, #cfeaff 0%, #e6f4ff 55%, #f3faff 100%);
  --c-me: rgba(255,255,255,.78); --c-me-fg: #3f86c9;
  --c-you: rgba(255,255,255,.78); --c-you-fg: #3f86c9;
  --c-edge: #a9d4f5;
  --c-shadow: 0 0 14px rgba(255,255,255,.9) inset, 0 2px 8px rgba(110,170,225,.18);
  --c-hdr: #2f6fb0; --c-accent: #4aa0ee; --c-on-accent: #fff; --c-sub: #7fb0dc;
  --c-input: #f2f7fc; --c-input-fg: #4b6b8a; --c-card: rgba(255,255,255,.55);
  --c-notice: rgba(255,255,255,.6); --c-sheet: #f7fbff; --c-sheet-fg: #34506b;
  --m-fill: #eaf6ff; --m-line: #6fb2ec;
  --c-page: var(--c-bg); --pf-bg: var(--c-bg); --pf-fg: var(--c-hdr);
}
.phone[data-theme="kakao"] {
  --c-bg: #b2c7d9; --c-page: #ffffff; --c-composer: #ffffff; --c-composer-line: #ececec;
  --c-me: #fee500; --c-me-fg: #191919; --c-you: #ffffff; --c-you-fg: #191919;
  --c-edge: transparent; --c-shadow: none;
  --c-hdr: #191919; --c-accent: #191919; --c-on-accent: #ffffff; --c-sub: #8a8a8a;
  --c-input: #f2f2f2; --c-input-fg: #333; --c-card: #f6f6f6; --c-chip: #f2f2f2;
  --c-notice: rgba(255,255,255,.8); --c-sheet: #ffffff; --c-sheet-fg: #222;
  --m-fill: #fff6a8; --m-line: #3a3a3a; --c-unread: #c79a00;
  --pf-bg: linear-gradient(180deg, #6b7078 0%, #2f3338 100%); --pf-fg: #ffffff;
}
.phone[data-theme="sakura"] {
  --c-bg: linear-gradient(180deg, #ffe2ec 0%, #fff0f4 100%);
  --c-me: #ffc4d7; --c-me-fg: #6e3347; --c-you: #ffffff; --c-you-fg: #6e3347;
  --c-edge: #ffb3cb; --c-shadow: 0 2px 6px rgba(255,140,175,.18);
  --c-hdr: #a8456a; --c-accent: #ef6c9b; --c-on-accent: #fff; --c-sub: #c47792;
  --c-input: #fff7fa; --c-input-fg: #7a4558; --c-card: rgba(255,255,255,.7);
  --c-notice: rgba(255,255,255,.7); --c-sheet: #fff9fb; --c-sheet-fg: #6e3347;
  --m-fill: #fff0f5; --m-line: #ef8fb2;
}
.phone[data-theme="night"] {
  --c-bg: linear-gradient(180deg, #151a30 0%, #1f2742 100%);
  --c-me: #5766f2; --c-me-fg: #ffffff; --c-you: #2c3556; --c-you-fg: #e7ebff;
  --c-edge: transparent; --c-shadow: none;
  --c-hdr: #dfe4ff; --c-accent: #8d98ff; --c-on-accent: #fff; --c-sub: #8f9ad0;
  --c-input: #252d4b; --c-input-fg: #cfd5f5; --c-card: rgba(255,255,255,.08);
  --c-notice: rgba(255,255,255,.08); --c-sheet: #1c2340; --c-sheet-fg: #dfe4ff;
  --m-fill: #3a4470; --m-line: #9aa6ff;
}

/* ---------- 端末フレーム・画面遷移 ---------- */
.phone {
  position: relative; overflow: hidden; width: 100%;
  height: min(780px, calc(100dvh - 150px)); min-height: 560px;
  border-radius: 28px; border: 2px solid var(--c-edge);
  background: var(--c-bg); color: var(--c-you-fg);
  box-shadow: 0 10px 40px rgba(20,40,70,.18);
  isolation: isolate;
  overflow: clip; /* 画面外のパネルにフォーカスしても、端末フレームがスクロールしない */
}
.phone[data-theme="kakao"], .phone[data-theme="night"] { border-color: var(--page-line); }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; pointer-events: none; visibility: hidden; transition: transform .28s ease, opacity .24s ease, visibility 0s .28s; }
#roomScreen, #createScreen, #profileScreen, #charScreen, #settingsScreen { transform: translateX(100%); }
#cviewScreen { transform: translateY(8%); }
.phone[data-view="home"] #homeScreen, .phone[data-view="list"] #listScreen,
.phone[data-view="explore"] #exploreScreen, .phone[data-view="phrases"] #phrasesScreen,
.phone[data-view="room"] #roomScreen, .phone[data-view="create"] #createScreen,
.phone[data-view="profile"] #profileScreen, .phone[data-view="settings"] #settingsScreen, .phone[data-view="char"] #charScreen, .phone[data-view="cview"] #cviewScreen { opacity: 1; pointer-events: auto; transform: none; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .screen, .tabs, .sheet, .scrim { transition: none !important; } }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 8px; }
svg.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.bar { display: flex; align-items: center; gap: 4px; padding: 14px 14px 8px; color: var(--c-hdr); min-height: 54px; }
.bar .grow { flex: 1; min-width: 0; }
.bar .iconbtn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; }
.bar .iconbtn:hover { background: rgba(255,255,255,.35); }
.bar .textbtn { font-weight: 700; color: var(--c-accent); padding: 6px 10px; border-radius: 12px; }
.room-name { font-family: var(--font-cute); font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.room-name small { font-family: var(--font-ui); font-size: 11px; color: var(--c-sub); flex: none; }
.list-title { font-family: var(--font-cute); font-size: 24px; flex: 1; }
.scroll { flex: 1; overflow-y: auto; padding: 4px 12px 88px; display: flex; flex-direction: column; gap: 4px; }

.avatar { width: 46px; height: 46px; border-radius: 18px; background: var(--c-card); border: 1.5px solid var(--c-edge); display: grid; place-items: center; flex: none; overflow: hidden; color: var(--c-accent); }
.avatar svg { width: 32px; height: 32px; }
.avatar svg.ic { width: 24px; height: 24px; }
.avatar.sm { width: 38px; height: 38px; border-radius: 15px; }
.avatar.sm svg { width: 26px; height: 26px; }
.avatar.lg { width: 64px; height: 64px; border-radius: 26px; }
.avatar.lg svg.ic { width: 34px; height: 34px; }
.avatar.xl { width: 92px; height: 92px; border-radius: 36px; }
.avatar.xl svg { width: 64px; height: 64px; }
.avatar.xl svg.ic { width: 46px; height: 46px; }
.avatar.dim { opacity: .5; }
.avatar.xxl { width: 168px; height: 168px; border-radius: 66px; }
.avatar.xxl svg { width: 118px; height: 118px; }
.avbtn { border-radius: 66px; display: block; }
.avbtn:active .avatar { transform: scale(.98); }
.cview { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 28px 20px; text-align: center; }
.cview .nm { font-family: var(--font-cute); font-size: 26px; display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--c-hdr); }
.cview .st { font-size: 14px; color: var(--c-hdr); opacity: .8; font-family: var(--font-sub); text-wrap: pretty; line-height: 1.6; }
.cview .meta2 { font-size: 12px; color: var(--c-sub); font-family: var(--font-sub); }
.cfoot { display: flex; justify-content: center; padding: 14px 18px calc(26px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c-edge); }
.phone[data-theme="kakao"] .cfoot { border-top-color: #9fb3c4; }
.cbtn { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--c-hdr); font-family: var(--font-sub); }
.cbtn .c { width: 54px; height: 54px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,.14); }
.cbtn .c svg { width: 24px; height: 24px; }
.phone[data-theme="kakao"] .cbtn .c { background: #fee500; color: #191919; }
.avatar[data-editchar] { cursor: pointer; }

/* 行（一覧共通） */
.item { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; text-align: left; width: 100%; cursor: pointer; }
.item:hover { background: rgba(255,255,255,.35); }
.item .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item .t { font-weight: 700; color: var(--c-hdr); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.item .s { color: var(--c-sub); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-sub); }
.item .r { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; font-size: 11px; color: var(--c-sub); }
.item.soon { cursor: default; }
.item.soon:hover { background: none; }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--c-accent); color: var(--c-on-accent); font-size: 11px; display: grid; place-items: center; font-weight: 700; }
.phone[data-theme="kakao"] .badge { background: #ff5a4d; color: #fff; }
.badge[hidden] { display: none; }
.lang { font-size: 10.5px; font-weight: 500; padding: 1px 8px; border-radius: 9px; border: 1px solid var(--c-edge); color: var(--c-accent); background: var(--c-card); flex: none; font-family: var(--font-sub); }
.phone[data-theme="kakao"] .lang { border-color: #9fb3c4; }
.divider { height: 1px; background: var(--c-edge); opacity: .6; margin: 6px 8px; }
.favbtn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--c-sub); flex: none; }
.favbtn svg { width: 20px; height: 20px; }
.favbtn[aria-pressed="true"] { color: var(--c-accent); }
.favbtn[aria-pressed="true"] svg { fill: currentColor; }
.pillbtn { height: 32px; padding: 0 14px; border-radius: 16px; border: 1.5px solid var(--c-accent); color: var(--c-accent); font-size: 12.5px; font-weight: 700; flex: none; font-family: var(--font-sub); display: inline-flex; align-items: center; justify-content: center; line-height: 1; white-space: nowrap; }
.empty { padding: 10px 12px 14px; color: var(--c-sub); font-size: 12.5px; line-height: 1.6; font-family: var(--font-sub); }

/* ---------- ホーム ---------- */
.me-row { display: flex; gap: 14px; align-items: center; padding: 8px 8px 10px; border-radius: 18px; cursor: pointer; }
.me-row .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.me-row .nm { font-weight: 700; font-size: 17px; color: var(--c-hdr); }
.me-row .st { color: var(--c-sub); font-size: 12.5px; font-family: var(--font-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold { display: flex; align-items: center; gap: 6px; width: 100%; padding: 12px 8px; margin-top: 4px; border-top: 1px solid var(--c-edge); font-size: 12.5px; color: var(--c-sub); text-align: left; }
.phone[data-theme="kakao"] .fold { border-top-color: #9fb3c4; }
.fold .cnt { flex: 1; }
.fold svg { width: 18px; height: 18px; transition: transform .2s; }
.fold[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- タブバー ---------- */
.tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--c-notice); border-top: 1px solid var(--c-edge); backdrop-filter: blur(10px); transform: translateY(105%); transition: transform .25s ease; }
.phone[data-view="home"] .tabs, .phone[data-view="list"] .tabs, .phone[data-view="explore"] .tabs, .phone[data-view="phrases"] .tabs { transform: none; }
.phone[data-theme="night"] .tabs { background: #1c2340; }
.phone[data-theme="kakao"] .tabs { background: #fff; border-top-color: #dfe6ec; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; color: var(--c-sub); font-size: 10.5px; position: relative; font-weight: 500; white-space: nowrap; font-family: var(--font-sub); }
.tab[aria-current="page"] { color: var(--c-accent); font-weight: 700; }
.phone[data-theme="kakao"] .tab[aria-current="page"] { color: #191919; }
.tab .badge { position: absolute; top: 0; left: calc(50% + 8px); }

/* ---------- 탐색 ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 14px 8px; flex: none; }
.chips::-webkit-scrollbar { display: none; }
.chips .pill { flex: none; }

/* ---------- 保存した表現 ---------- */
.phrase { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 8px 14px; border-radius: 18px; background: var(--c-card); border: 1.5px solid var(--c-edge); box-shadow: var(--c-shadow); }
.phrase .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.phrase .ko { font-size: 15.5px; font-weight: 500; color: var(--c-you-fg); word-break: keep-all; overflow-wrap: anywhere; }
.phrase .rom { font-size: 12px; font-style: italic; color: var(--c-sub); }
.phrase .ja { font-size: 12.5px; color: var(--c-you-fg); opacity: .85; font-family: var(--font-sub); }
.phrase .by { font-size: 11px; color: var(--c-sub); font-family: var(--font-sub); }
.phrase .act { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ptop { display: flex; gap: 8px; align-items: flex-start; }
.pbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; cursor: pointer; text-align: left; }
.pbody .ko { font-size: 16px; }
.pfoot { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.pfoot .by { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jump { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 13px; border: 1px solid var(--c-edge); color: var(--c-accent); font-size: 11.5px; font-weight: 700; font-family: var(--font-sub); background: var(--c-card); flex: none; }
.phone[data-theme="kakao"] .jump { border-color: #9fb3c4; }
.jump svg { width: 14px; height: 14px; }
.phgroup { margin: 10px 6px 2px; font-size: 12px; color: var(--c-sub); display: flex; justify-content: space-between; }
.phhint { margin: 0 6px 4px; font-size: 11.5px; color: var(--c-sub); font-family: var(--font-sub); }
.msg.flash { animation: flash 1.8s ease; border-radius: 16px; }
@keyframes flash { 0%, 55% { background: var(--c-card); box-shadow: 0 0 0 6px var(--c-card); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }
.trash { width: 28px; height: 28px; display: grid; place-items: center; color: var(--c-sub); border-radius: 50%; }
.trash svg { width: 18px; height: 18px; }
.trash:hover { color: #e0524d; }

/* ---------- フォーム（新しい会話・プロフィール・キャラクター設定） ---------- */
.form { flex: 1; overflow-y: auto; padding: 6px 18px 24px; display: flex; flex-direction: column; gap: 6px; }
.form > * { flex: none; }
.form .lb { margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--c-hdr); display: block; }
.form .lb small { font-weight: 400; color: var(--c-sub); margin-left: 6px; font-family: var(--font-sub); }
.form textarea, .form input[type="text"] { width: 100%; border: 0; border-radius: 16px; background: var(--c-input); color: var(--c-input-fg); font: inherit; font-size: 14.5px; padding: 12px 14px; resize: none; line-height: 1.5; }
.form textarea::placeholder, .form input::placeholder { color: var(--c-sub); opacity: .85; }
.lb2 { font-size: 12.5px; font-weight: 700; margin-bottom: -6px; }
.iconpick { display: flex; gap: 10px; overflow-x: auto; padding: 8px 4px 12px; margin: 0 -4px; }
.iconpick::-webkit-scrollbar { display: none; }
.iconpick button { flex: none; border-radius: 18px; padding: 2px; border: 2px solid transparent; }
.iconpick button[aria-pressed="true"] { border-color: var(--c-accent); }
.iconpick .avatar { width: 44px; height: 44px; }
.bdrow { display: grid; grid-template-columns: 1.7fr 1fr; gap: 12px; align-items: start; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form select { width: 100%; border: 0; border-radius: 16px; background: var(--c-input); color: var(--c-input-fg); font: inherit; font-size: 14.5px; padding: 12px 10px; -webkit-appearance: none; appearance: none; text-align: center; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills.col { flex-direction: column; align-items: stretch; }
.pill { padding: 7px 13px; border-radius: 17px; border: 1.5px solid var(--c-edge); background: var(--c-card); color: var(--c-hdr); font-size: 13px; font-family: var(--font-sub); display: inline-flex; align-items: center; gap: 6px; text-align: left; }
.phone[data-theme="kakao"] .pill { border-color: #9fb3c4; }
.pill[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); font-weight: 700; }
.pill[disabled] { border-style: dashed; color: var(--c-sub); cursor: default; }
.pill .avatar { width: 24px; height: 24px; border-radius: 10px; border: 0; background: rgba(255,255,255,.6); }
.pill .avatar svg { width: 18px; height: 18px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg .pill { justify-content: center; flex-direction: column; gap: 0; padding: 7px 4px; border-radius: 14px; line-height: 1.3; text-align: center; }
.seg.four { grid-template-columns: repeat(4, 1fr); }
.hint { font-size: 11.5px; color: var(--c-sub); line-height: 1.6; font-family: var(--font-sub); }
.foot { padding: 10px 18px calc(14px + env(safe-area-inset-bottom, 0px)); }
.cta { margin: 14px 4px 0; height: 50px; border-radius: 25px; background: var(--c-accent); color: var(--c-on-accent); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 16px rgba(0,0,0,.14); font-family: var(--font-sub); }
.phone[data-theme="kakao"] .cta { background: #fee500; color: #191919; box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.foot .cta { margin: 0; width: 100%; }
.cta[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.av-edit { display: flex; justify-content: center; padding: 6px 0 2px; }
.avatars { display: flex; justify-content: center; gap: 10px; padding: 8px 0 4px; }
.avatars button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--c-edge); }
.phone[data-theme="kakao"] .avatars button { border-color: #9fb3c4; }
.avatars button[aria-pressed="true"] { border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent); }
.group { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--c-edge); font-family: var(--font-cute); font-size: 17px; color: var(--c-hdr); }
.phone[data-theme="kakao"] .group { border-top-color: #9fb3c4; }
.ro { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; padding: 10px 14px; border-radius: 16px; background: var(--c-input); color: var(--c-input-fg); font-family: var(--font-sub); }
.ro dt { color: var(--c-sub); }
.ro dd { margin: 0; }

/* ---------- ルーム ---------- */
.notice { margin: 0 12px; padding: 0 12px; max-height: 0; opacity: 0; overflow: hidden; border: 0 solid var(--c-edge); border-radius: 14px; background: var(--c-notice); color: var(--c-hdr); display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; font-family: var(--font-sub); text-align: left; line-height: 1.55; flex: none; transition: max-height .25s ease, opacity .2s ease, margin .25s ease, padding .25s ease; }
.notice.open, .notice.peek { padding: 8px 12px; margin: 0 12px 6px; border-width: 1px; }
.notice.open { max-height: 140px; opacity: 1; }
.notice.drag { transition: none; }
.chat { overscroll-behavior-y: contain; }
.notice svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.notice b { font-weight: 700; }
.notice .dim { opacity: .65; }
.chat { flex: 1; overflow-y: auto; padding: 8px 12px 14px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; }
.date { align-self: center; padding: 4px 12px; border-radius: 12px; background: rgba(0,0,0,.14); color: #fff; font-size: 11.5px; }
.phone[data-theme="jelly"] .date, .phone[data-theme="sakura"] .date { background: rgba(255,255,255,.6); color: var(--c-hdr); border: 1px solid var(--c-edge); }

.msg { display: flex; flex-direction: column; gap: 6px; }
.gap { width: 38px; flex: none; }
.row { display: flex; gap: 8px; align-items: flex-start; max-width: 100%; }
.row.me { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 78%; }
.row.me .stack { align-items: flex-end; }
.who { font-size: 12px; color: var(--c-sub); margin-left: 2px; }
.line { display: flex; align-items: flex-end; gap: 6px; }
.row.me .line { flex-direction: row-reverse; }
.tm { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.unr { color: var(--c-unread, var(--c-accent)); font-size: 10.5px; font-weight: 700; line-height: 1; }
.time { font-size: 10.5px; color: var(--c-sub); white-space: nowrap; padding-bottom: 2px; }
.bubble { position: relative; padding: 9px 13px; border-radius: 18px; line-height: 1.5; font-size: 14.5px; text-align: left; word-break: keep-all; overflow-wrap: anywhere; border: 1.5px solid var(--c-edge); box-shadow: var(--c-shadow); backdrop-filter: blur(6px); }
.you .bubble { background: var(--c-you); color: var(--c-you-fg); border-top-left-radius: 5px; }
.me .bubble { background: var(--c-me); color: var(--c-me-fg); border-top-right-radius: 5px; }
.you .bubble:hover { filter: brightness(.98); cursor: pointer; }
.play { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-card); border: 1.5px solid var(--c-edge); color: var(--c-accent); flex: none; }
.play svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.play.on { background: var(--c-accent); color: var(--c-on-accent); }
.play.on svg { animation: pulse .6s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(1.25); } }
.play.loading, .playm.loading { position: relative; pointer-events: none; }
.play.loading svg, .playm.loading svg { opacity: 0; }
.play.loading::after, .playm.loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border: 2px solid var(--c-edge); border-top-color: var(--c-accent); border-radius: 50%; animation: spin .7s linear infinite; }
.playm.loading::after { width: 11px; height: 11px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .play.loading::after, .playm.loading::after { animation-duration: 1.6s; } }
@media (prefers-reduced-motion: reduce) { .play.on svg { animation: none; } }

.narr { align-self: flex-start; max-width: 94%; padding: 2px 8px; color: var(--c-hdr); font-size: 13px; line-height: 1.7; text-align: left; word-break: keep-all; overflow-wrap: anywhere; }
.narr .n { opacity: .78; cursor: pointer; border-radius: 8px; }
.narr .n:hover { opacity: 1; }
.narr .detail { margin-top: 2px; padding: 0; border: 0; background: none; font-size: 12px; line-height: 1.6; color: var(--c-sub); }
.narr .detail .ja { margin-top: 0; }
.side { display: flex; flex: none; align-items: center; }
.ninl { display: inline-flex; vertical-align: middle; margin-left: 4px; opacity: .5; }
.ninl:hover, .ninl:focus-within { opacity: 1; }
.ninl .mini { width: 22px; height: 22px; }
.ninl .mini svg { width: 13px; height: 13px; }
.ninl .playm svg { width: 11px; height: 11px; }
.nact { display: flex; gap: 2px; margin: 1px 0 0 -4px; }
.mini { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--c-sub); }
.mini:hover { color: var(--c-accent); }
.mini svg { width: 15px; height: 15px; }
.playm svg { fill: currentColor; stroke: none; width: 13px; height: 13px; }
.playm.on { color: var(--c-accent); }
.playm.on svg { animation: pulse .6s ease-in-out infinite alternate; }
.mini[aria-pressed="true"] { color: var(--c-accent); }
.mini[aria-pressed="true"] svg { fill: currentColor; }
.ntag { align-self: flex-start; font-size: 10.5px; color: var(--c-sub); border: 1px solid var(--c-edge); border-radius: 8px; padding: 0 6px; font-family: var(--font-sub); }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.pcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pgrid .phrase { position: relative; padding: 11px 10px 6px 12px; border-radius: 16px; gap: 4px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dictbtn { margin-left: auto; gap: 5px; }
.pbody .ko.nat { font-family: var(--font-sub); font-weight: 500; }
.pbody .ko.orig { margin-top: 3px; padding-top: 5px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.dpanel { display: flex; align-items: center; gap: 2px; }
.dinp { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: transparent; font: inherit; font-size: 14px; padding: 6px 2px; color: var(--c-you-fg); border-radius: 0; }
.dinp:focus-visible { outline: none; border-bottom-color: var(--c-accent); }
.dres { flex: 1; font-size: 12px; font-weight: 700; }
.dres.ok { color: #2e9e5b; } .dres.ng { color: #d9534f; }
.pgrid .pbody .ko { font-size: 14.5px; line-height: 1.45; }
.pgrid .pbody .ja { font-size: 12px; }
.pgrid .pfoot { min-height: 26px; gap: 0; }
.pgrid .pfoot .by { font-size: 10.5px; }
.phrase .chk { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--c-edge); background: var(--c-card); display: grid; place-items: center; color: var(--c-on-accent); z-index: 1; }
.phone[data-theme="kakao"] .phrase .chk { border-color: #9fb3c4; }
.phrase .chk svg { width: 13px; height: 13px; stroke-width: 2.6; }
.phrase.sel { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.phrase.sel .chk { background: var(--c-accent); border-color: var(--c-accent); }
.phone[data-sel="on"] .pgrid .pbody { padding-right: 22px; }
.selbar { display: none; }
.phone[data-sel="on"] #phrasesScreen > .bar:not(.selbar) { display: none; }
.phone[data-sel="on"] #phrasesScreen > .selbar { display: flex; }
.selbar .list-title { font-size: 18px; }
.iconbtn[disabled] { opacity: .35; cursor: default; }
.tact { margin-left: 12px; font-weight: 700; color: #a9d6ff; text-decoration: underline; }
.phrase.narr-p .ko { font-size: 14.5px; font-weight: 400; opacity: .9; }
.narr:not(.me) { margin-left: 46px; max-width: calc(94% - 46px); padding-left: 2px; } /* 吹き出しの左端(アバター38px + 隙間8px)に合わせる */
.narr.me { align-self: flex-end; text-align: right; }

.detail { display: none; padding: 8px 12px; border-radius: 14px; background: var(--c-card); border: 1px dashed var(--c-edge); color: var(--c-you-fg); font-size: 12.5px; line-height: 1.55; }
.bubble .bsub { display: none; margin-top: 7px; padding-top: 7px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); color: color-mix(in srgb, currentColor 58%, transparent); font-size: 12.5px; line-height: 1.5; font-family: var(--font-sub); }
.bubble.open .bsub, .phone[data-detail="on"] .bsub { display: block; }
.bsub .brom { font-style: italic; font-size: 11.5px; }
.detail .rom { color: var(--c-sub); font-size: 12px; font-style: italic; }
.detail .ja { font-family: var(--font-sub); margin-top: 2px; }
.phone[data-detail="on"] .detail, .detail.open { display: block; }
.savebtn { margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 8px; border-radius: 12px; border: 1px solid var(--c-edge); color: var(--c-accent); font-size: 11.5px; font-weight: 700; background: var(--c-card); font-family: var(--font-sub); }
.phone[data-theme="kakao"] .savebtn { border-color: #9fb3c4; }
.savebtn svg { width: 14px; height: 14px; }
.savebtn[aria-pressed="true"] svg { fill: currentColor; }

.rewrite { width: 100%; padding: 9px 12px; border-radius: 16px; background: var(--c-card); border: 1.5px dashed var(--c-edge); color: var(--c-you-fg); font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 3px; }
.rewrite .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--c-accent); font-family: var(--font-sub); }
.rewrite .tag svg { width: 13px; height: 13px; }
.rewrite .ko { word-break: keep-all; font-size: 14.5px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rewrite .ko > div { min-width: 0; overflow-wrap: anywhere; }
.rewrite .rn { display: block; color: var(--c-sub); font-size: 12.5px; line-height: 1.6; }
.rewrite .rom { color: var(--c-sub); font-size: 12px; font-style: italic; }
.rewrite .note { font-family: var(--font-sub); color: var(--c-sub); font-size: 12px; }
.rwrow.off { display: none; }
.me .bubble[data-rw], .rewrite { cursor: pointer; }
.rewrite .savebtn { align-self: flex-start; }

.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); opacity: .4; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; opacity: .7; } }

.composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
.field { flex: 1; display: flex; align-items: flex-end; gap: 6px; background: var(--c-input); border-radius: 22px; padding: 0 12px; min-width: 0; }
.field textarea { flex: 1; min-width: 0; height: 40px; max-height: 148px; padding: 10px 0; border: 0; background: transparent; color: var(--c-input-fg); font: inherit; font-size: 14.5px; line-height: 20px; outline-offset: 0; resize: none; overflow-y: auto; box-sizing: border-box; }
.field textarea::placeholder { color: var(--c-sub); opacity: .85; }
.star { width: 30px; height: 30px; margin: 5px -6px 5px 0; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--c-accent); font-size: 19px; font-weight: 700; line-height: 1; }
.star:hover { background: rgba(120,160,200,.18); }
.sendbtn { width: 38px; height: 38px; border-radius: 50%; background: var(--c-input); color: var(--c-accent); display: grid; place-items: center; flex: none; }
.sendbtn.ready { background: var(--c-accent); color: var(--c-on-accent); }
.phone[data-theme="kakao"] .sendbtn.ready { background: #fee500; color: #191919; }

/* ---------- シート ---------- */
.scrim { position: absolute; inset: 0; background: rgba(10,20,40,.35); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 5; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--c-sheet); color: var(--c-sheet-fg); border-radius: 24px 24px 0 0; padding: 14px 18px calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; display: flex; flex-direction: column; gap: 14px; max-height: 88%; overflow-y: auto; }
.phone:not([data-sheet=""]) .scrim { opacity: 1; pointer-events: auto; }
.phone[data-sheet="settings"] #sheet, .phone[data-sheet="profile"] #profileSheet, .phone[data-sheet="csv"] #csvSheet, .phone[data-sheet="pv"] #pvSheet, .phone[data-sheet="menu"] #menuSheet { transform: none; visibility: visible; transition-delay: 0s; }
.grab { width: 40px; height: 4px; border-radius: 2px; background: currentColor; opacity: .25; align-self: center; flex: none; }
.sheet h2 { margin: 0; font-family: var(--font-cute); font-size: 18px; font-weight: 400; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sw { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; }
.sw .chip { width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; border: 2px solid transparent; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 8px 6px; }
.sw .chip i { display: block; height: 9px; border-radius: 5px; }
.sw .chip i:nth-child(odd) { width: 62%; align-self: flex-start; }
.sw .chip i:nth-child(even) { width: 62%; align-self: flex-end; }
.sw[aria-pressed="true"] .chip { border-color: var(--c-accent); }
.sw[aria-pressed="true"] span { font-weight: 700; }
.toggle { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; font-family: var(--font-sub); }
.toggle small { display: block; color: var(--c-sub); font-size: 11.5px; margin-top: 2px; }
.form .toggle { padding: 6px 2px; color: var(--c-you-fg); }
.switch { width: 46px; height: 28px; border-radius: 14px; background: rgba(120,130,150,.35); position: relative; flex: none; transition: background .15s; }
.switch[disabled] { opacity: .4; cursor: default; }
.narr .detail .rom { font-style: italic; font-size: 11.5px; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch[aria-checked="true"] { background: var(--c-accent); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.rule { font-size: 12.5px; line-height: 1.7; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sub); }
.rule .ex { background: var(--c-input); border-radius: 12px; padding: 8px 12px; }
.rule .ex em { font-style: normal; color: var(--c-sub); }
.prof { align-items: center; text-align: center; gap: 8px; }
.prof .nm { font-family: var(--font-cute); font-size: 22px; display: flex; align-items: center; gap: 8px; }
.prof .intro { font-size: 13px; line-height: 1.65; font-family: var(--font-sub); text-wrap: pretty; }
.prof dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 4px 0 6px; font-size: 12.5px; text-align: left; width: 100%; font-family: var(--font-sub); }
.prof dt { color: var(--c-sub); }
.prof dd { margin: 0; }
.prof .cta { width: 100%; margin: 4px 0 0; }
.prof .pillbtn { width: 100%; height: 40px; border-radius: 20px; }
#csvText { width: 100%; height: 160px; border: 0; border-radius: 14px; background: var(--c-input); color: var(--c-input-fg); font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; padding: 10px 12px; resize: none; }

.toast { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(10px); background: rgba(20,30,45,.88); color: #fff; padding: 9px 14px; border-radius: 16px; font-size: 12.5px; opacity: 0; pointer-events: none; transition: all .2s; z-index: 9; width: max-content; max-width: 88%; text-align: center; font-family: var(--font-sub); }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ===== KakaoTalk 準拠の仕上げ: テーマは色だけを変え、構造・文字・余白はカカオに合わせる ===== */
.phone { background: var(--c-page); }
.screen { background: var(--c-page); }
#roomScreen { background: var(--c-bg); }
.phone[data-theme="kakao"] #roomScreen { --c-sub: #5c6b7a; }
#cviewScreen { background: var(--pf-bg); color: var(--pf-fg); }
.list-title, .room-name, .group, .sheet h2, .prof .nm { font-family: var(--font-ui); font-weight: 700; }
.list-title { font-size: 22px; letter-spacing: -.01em; }
.room-name { font-size: 17px; }
.room-name small, #roomLang { display: none; }
.bar { padding: 12px 12px 6px; }
.bar .iconbtn { width: 38px; height: 38px; }
.bar svg.ic { width: 24px; height: 24px; stroke-width: 1.6; }
.bar .iconbtn:hover { background: rgba(0,0,0,.05); }

/* 下タブ: アイコンのみ */
.tabs { padding: 4px 8px calc(6px + env(safe-area-inset-bottom, 0px)); }
.tab { padding: 8px 0; }
.tab svg.ic { width: 26px; height: 26px; stroke-width: 1.6; }
.tab > span:not(.badge) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tab .badge { top: 3px; left: calc(50% + 6px); }

/* アイコンは角丸四角、一覧の行は名前＋右寄せの状態メッセージ */
.avatar { width: 44px; height: 44px; border-radius: 16px; }
.avatar svg { width: 30px; height: 30px; }
.avatar.lg { width: 56px; height: 56px; border-radius: 21px; }
#rooms .avatar { width: 48px; height: 48px; border-radius: 18px; }
.item { padding: 9px 8px; gap: 12px; border-radius: 12px; }
.item:hover { background: rgba(0,0,0,.04); }
.item .t { font-weight: 600; font-size: 15px; }
.item .s { font-size: 13px; }
.item .stat { font-size: 12px; color: var(--c-sub); max-width: 46%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-sub); }
.badge { background: #f5524f; color: #fff; }
.me-row { padding: 8px 8px 12px; }
.fold { font-size: 13px; padding: 12px 8px; }
.pill { background: var(--c-chip, var(--c-card)); }
.phone[data-theme="kakao"] .pill, .phone[data-theme="kakao"] .lang, .phone[data-theme="kakao"] .jump { border-color: transparent; }
.phone[data-theme="kakao"] .fold, .phone[data-theme="kakao"] .divider, .phone[data-theme="kakao"] .group { border-color: #efefef; background-color: transparent; }
.phone[data-theme="kakao"] .cfoot { border-top-color: rgba(255,255,255,.18); }

/* トーク: 吹き出し・入力バー */
.bubble { border-radius: 14px; font-size: 14px; padding: 8px 12px; }
.you .bubble { border-top-left-radius: 4px; }
.me .bubble { border-top-right-radius: 4px; }
.composer { background: var(--c-composer, transparent); border-top: 1px solid var(--c-composer-line, transparent); padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
.field { border-radius: 20px; }
.sendbtn { background: var(--c-input); }

/* キャラクターのプロフィール: カカオのように暗い全面表示、アイコンと文字だけ */
#cviewScreen .bar { color: var(--pf-fg); }
#cviewScreen .bar .iconbtn:hover { background: rgba(255,255,255,.12); }
#cviewScreen .favbtn[aria-pressed="true"] { color: #ffd400; }
.cview { justify-content: flex-end; padding-bottom: 30px; gap: 6px; }
.avatar.xxl { width: 120px; height: 120px; border-radius: 44px; }
.avatar.xxl svg { width: 84px; height: 84px; }
.cview .nm { font-family: var(--font-ui); font-size: 22px; font-weight: 700; color: var(--pf-fg); margin-top: 12px; }
.cview .st { color: var(--pf-fg); opacity: .85; }
.cview .meta2 { color: var(--pf-fg); opacity: .6; }
.cview .lang { color: var(--pf-fg); background: transparent; border-color: rgba(255,255,255,.35); }
.cfoot { border-top: 1px solid color-mix(in srgb, var(--pf-fg) 18%, transparent); padding: 12px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
.cbtn, .cbtn .c { color: var(--pf-fg); }
.cbtn .c, .phone[data-theme="kakao"] .cbtn .c { width: auto; height: auto; background: none; box-shadow: none; }
.cbtn .c svg { width: 28px; height: 28px; }

/* フォーム・ボタン */
.form textarea, .form input[type="text"], .form select { border-radius: 10px; }
.cta { border-radius: 12px; height: 48px; box-shadow: none; }
.phone[data-theme="kakao"] .cta { box-shadow: none; }
.sheet { border-radius: 16px 16px 0 0; }

/* 探索のカードで使う色 */
.phone { --c-grp: var(--c-card); }
.phone[data-theme="kakao"] { --c-hero: linear-gradient(180deg, #fff3b0 0%, #fff9d9 140px, #ffffff 320px); --c-grp: #ffffff; }

/* ===== 探索: 2カラムのフィード（アイコン・名前・概要） ===== */
#exploreScreen { background: var(--c-hero, var(--c-page)); }
#explore { padding: 4px 14px 96px; }
.xcard { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 22px; background: var(--c-grp); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.05); cursor: pointer; text-align: left; }
.xcard:hover { filter: brightness(.985); }
.xcard.soon { cursor: default; box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--c-sub) 45%, transparent); background: transparent; }
.xtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.xtop .avatar { width: 56px; height: 56px; border-radius: 21px; }
.xtop .avatar svg { width: 40px; height: 40px; }
.xnm { font-size: 16px; font-weight: 700; color: var(--c-hdr); }
.xsum { font-size: 12.5px; line-height: 1.55; color: var(--c-sub); font-family: var(--font-sub); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== 余白の設計 =====
   画面の左右余白 --gx = 20px（見出し・一覧・フォーム・シート・プロフィールで共通）
   トーク画面は対象外（もともとの余白: 左右12px）
   縦の間隔は 4 / 8 / 12 / 16 / 20 / 24 の段階だけを使う。
   アイコンボタンは 38px で、中の絵が 24px なので、絵の端が余白線にそろうよう 7px 内側に寄せる。 */
.phone { --gx: 20px; --gc: 16px; }
.bar { padding: 14px calc(var(--gx) - 7px) 8px var(--gx); min-height: 60px; gap: 6px; }
.bar > button.iconbtn:first-child { margin-left: -7px; }
.bar .textbtn { margin-right: -2px; }

/* 一覧 */
.scroll { padding: 4px var(--gx) 104px; gap: 2px; }
.item, .me-row { margin: 0 -12px; width: auto; padding: 10px 12px; }
.me-row { padding: 12px 12px 16px; }
.fold { padding: 18px 0 8px; margin-top: 6px; }
.empty { padding: 12px 0 18px; }
.chips { padding: 4px var(--gx) 12px; gap: 8px; }
.phhint { margin: 0 0 10px; }
.phgroup { margin: 16px 0 6px; }
.pgrid, .pcol { gap: 12px; }
.pgrid .phrase { padding: 14px 14px 8px; }
#explore { padding: 4px var(--gx) 104px; }
.xcard { padding: 16px; gap: 8px; }

/* フォーム・ボタン */
.form { padding: 8px var(--gx) 32px; gap: 8px; }
.form .lb { margin-top: 20px; }
.form textarea, .form input[type="text"], .form select { padding: 14px 16px; }
.foot { padding: 12px var(--gx) calc(20px + env(safe-area-inset-bottom, 0px)); }
.group { margin-top: 28px; padding-top: 14px; }
.hint { margin-top: 2px; }

/* トーク画面は、もともとの余白のまま（新しい余白の設計は当てない） */
#roomScreen .bar { padding: 12px 12px 6px; min-height: 54px; gap: 4px; }
#roomScreen .bar > button.iconbtn:first-child { margin-left: 0; }
.chat { padding: 8px 12px 14px; gap: 16px; }
.composer { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px; }

/* シート・プロフィール・タブ・通知 */
.sheet { padding: 20px var(--gx) calc(28px + env(safe-area-inset-bottom, 0px)); gap: 18px; }
.tabs { padding: 6px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
.cview { padding: 0 var(--gx) 36px; }
.cfoot { padding: 14px var(--gx) calc(24px + env(safe-area-inset-bottom, 0px)); }
.toast { bottom: 100px; }

/* ===== 下のメニュー: 背景(各テーマのグラデーション下端)と同じ色にそろえる ===== */
.phone[data-theme="kakao"] { --c-tabs: #ffffff; --c-tabs-line: #ececec; }
.phone[data-theme="jelly"] { --c-tabs: #f3faff; --c-tabs-line: #cfe6f7; }
.phone[data-theme="sakura"] { --c-tabs: #fff0f4; --c-tabs-line: #ffd6e2; }
.phone[data-theme="night"] { --c-tabs: #1f2742; --c-tabs-line: rgba(255,255,255,.08); }
.phone[data-theme] .tabs { background: var(--c-tabs); border-top-color: var(--c-tabs-line); backdrop-filter: none; }

/* トークの「＋」メニュー / トーク専用プロフィール */
.composer .plus { width: 38px; height: 38px; display: grid; place-items: center; color: var(--c-sub); flex: none; border-radius: 50%; }
.composer .plus:hover { background: rgba(0,0,0,.05); }
.mecard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--c-input); }
.mc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc b { font-size: 15px; color: var(--c-input-fg); }
.mc span { font-size: 12.5px; color: var(--c-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-sub); }
#profileScreen.roommode .av-edit, #profileScreen.roommode #avatarPick, #profileScreen.roommode [for="pfStatus"], #profileScreen.roommode #pfStatus { display: none; }

/* ===== 実アプリ: 画面いっぱいに表示。広い画面では中央に携帯サイズで表示 ===== */
html, body { height: 100%; margin: 0; padding: 0; }
body { background: var(--page-bg); }
.stage { max-width: none; margin: 0; gap: 0; height: 100%; }
.phone { max-width: 560px; margin: 0 auto; height: 100dvh; min-height: 0; border-radius: 0; border: 0; box-shadow: none; }
@media (min-width: 600px) { .phone { width: min(390px, calc((100dvh - 40px) * 9 / 19.5)); height: auto; aspect-ratio: 9 / 19.5; margin: 20px auto; border-radius: 28px; border: 2px solid var(--page-line); box-shadow: 0 10px 40px rgba(20,40,70,.18); } }
.bar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
#roomScreen .bar { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.scroll, .chat, .form { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.form input[type="password"] { width: 100%; border: 0; border-radius: 10px; background: var(--c-input); color: var(--c-input-fg); font: inherit; font-size: 14.5px; padding: 14px 16px; }
.retry { width: 24px; height: 24px; border-radius: 50%; background: #e5484d; color: #fff; font-weight: 700; font-size: 14px; line-height: 1; display: grid; place-items: center; align-self: center; flex: none; }
button, input, textarea { -webkit-tap-highlight-color: transparent; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--c-sub); font-family: var(--font-sub); }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--c-ink, #222); }
.form input[type="file"] { width: 100%; font: inherit; font-size: 13px; color: var(--c-sub); }
#ceVoice { display: flex; flex-direction: column; gap: 10px; }
#ceVoice .cta { width: 100%; }