/* ==========================================================
   ハートネット（HeartNet）β
   すべて .hn-app の中だけに効くようにしてある。
   サイト側のテーマの見た目には触れない。
   文字の大きさは --fs を基準に calc で決めているので、
   入れ子でも二重に大きくならない。
   ========================================================== */

.hn-app{
  --fs:18px;

  --bg:#F3F6F2;
  --surface:#FFFFFF;
  --surface-2:#E7EDE7;
  --ink:#131C18;
  --ink-2:#4B5A52;
  --line:#C6D0C8;
  --line-strong:#8FA096;

  --accent:#0E6B57;
  --accent-ink:#FFFFFF;
  --accent-soft:#DAEAE3;

  --focus:#B03D14;

  --cat1:#0E6B57; --cat1-bg:#DAEAE3;
  --cat2:#9C3125; --cat2-bg:#F7DED9;
  --cat3:#493C90; --cat3-bg:#E3DFF5;
  --cat4:#734B00; --cat4-bg:#F5E5C4;

  --warn-bg:#FFF1D2; --warn-ink:#634100; --warn-line:#D8A73E;

  --shadow:0 2px 0 rgba(19,28,24,.12);
  --radius:14px;
  --tap:76px;

  position:relative;
  display:block;
  background:var(--bg);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  font-size:var(--fs);
  line-height:1.75;
  padding:0 0 calc(var(--fs) * 10);
  margin:0;
  -webkit-text-size-adjust:100%;
}
.hn-app *{ box-sizing:border-box; }

@media (prefers-color-scheme: dark){
  .hn-app{
    --bg:#0C1210; --surface:#17211E; --surface-2:#212E2A;
    --ink:#EDF3F0; --ink-2:#A6B6B0;
    --line:#31423D; --line-strong:#5A6F68;
    --accent:#63D5B6; --accent-ink:#062219; --accent-soft:#1B3A32;
    --focus:#FFB177;
    --cat1:#63D5B6; --cat1-bg:#17362F;
    --cat2:#F2998A; --cat2-bg:#3C201C;
    --cat3:#B6AAF5; --cat3-bg:#28224E;
    --cat4:#E9C070; --cat4-bg:#382B10;
    --warn-bg:#382B10; --warn-ink:#F4DCA8; --warn-line:#8A6C22;
    --shadow:0 2px 0 rgba(0,0,0,.5);
  }
}

/* はっきりモード（テーマより優先） */
.hn-app[data-contrast="high"]{
  --bg:#000000; --surface:#000000; --surface-2:#141414;
  --ink:#FFFFFF; --ink-2:#F2F2F2;
  --line:#FFFFFF; --line-strong:#FFFFFF;
  --accent:#FFE500; --accent-ink:#000000; --accent-soft:#1A1A00;
  --focus:#00E5FF;
  --cat1:#FFE500; --cat1-bg:#000000;
  --cat2:#FFE500; --cat2-bg:#000000;
  --cat3:#FFE500; --cat3-bg:#000000;
  --cat4:#FFE500; --cat4-bg:#000000;
  --warn-bg:#000000; --warn-ink:#FFE500; --warn-line:#FFE500;
  --shadow:none;
}
.hn-app[data-contrast="high"] .hn-card,
.hn-app[data-contrast="high"] .hn-big,
.hn-app[data-contrast="high"] .hn-panel,
.hn-app[data-contrast="high"] .hn-msg{ border-width:3px; }

/* 白地に黒（テーマより優先）
   黒地がまぶしく感じる方、白内障などで黒地だと文字がにじむ方向け。
   色は黒・白・濃い青の3色だけにし、線をすべて太くする。 */
.hn-app[data-contrast="light"]{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F2F2F2;
  --ink:#000000; --ink-2:#000000;
  --line:#000000; --line-strong:#000000;
  --accent:#00268F; --accent-ink:#FFFFFF; --accent-soft:#E6ECFF;
  --focus:#C40000;
  --cat1:#00268F; --cat1-bg:#FFFFFF;
  --cat2:#00268F; --cat2-bg:#FFFFFF;
  --cat3:#00268F; --cat3-bg:#FFFFFF;
  --cat4:#00268F; --cat4-bg:#FFFFFF;
  --warn-bg:#FFFFFF; --warn-ink:#000000; --warn-line:#000000;
  --shadow:none;
}
.hn-app[data-contrast="light"] .hn-card,
.hn-app[data-contrast="light"] .hn-big,
.hn-app[data-contrast="light"] .hn-panel,
.hn-app[data-contrast="light"] .hn-msg{ border-width:3px; }

.hn-app[data-size="s"]{ --fs:16px; }
.hn-app[data-size="m"]{ --fs:18px; }
.hn-app[data-size="l"]{ --fs:22px; }
.hn-app[data-size="xl"]{ --fs:27px; }

@media (prefers-reduced-motion: reduce){
  .hn-app *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
.hn-app[data-motion="off"] *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }

/* --- 焦点 --- */
.hn-app :focus-visible,
.hn-app button:focus, .hn-app a:focus,
.hn-app textarea:focus, .hn-app input:focus{
  outline:5px solid var(--focus);
  outline-offset:3px;
  border-radius:6px;
}

.hn-skip{
  position:absolute; left:-9999px; top:0; z-index:60;
  background:var(--accent); color:var(--accent-ink);
  padding:14px 20px; font-weight:700; border-radius:0 0 12px 0;
  text-decoration:none;
}
.hn-skip:focus{ left:0; }

.hn-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.hn-wrap{ max-width:640px; margin:0 auto; padding:0 14px; }

/* --- 上のバー --- */
.hn-bar{
  /* 管理者としてログインしていると、画面の上に黒い管理バーが
     貼り付く。そのぶん下に貼り付かないと、この帯の裏に潜る。
     ログインしていない方には 0px が入る。 */
  position:sticky; top:var(--hn-adminbar, 0px); z-index:30;
  background:var(--surface);
  border-bottom:3px solid var(--line);
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  max-width:640px; margin:0 auto;
}
.hn-brand{
  font-family:"Zen Maru Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  font-weight:900; font-size:calc(var(--fs) * 1.05);
  color:var(--accent); line-height:1.2; white-space:nowrap;
}
.hn-crumb{
  font-size:calc(var(--fs) * .8); color:var(--ink-2); font-weight:700;
  border-left:3px solid var(--line); padding-left:12px; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hn-mic{
  flex:none; min-width:var(--tap); min-height:64px;
  border:3px solid var(--line-strong); border-radius:12px;
  background:var(--surface-2); color:var(--ink);
  font-family:inherit; font-weight:700; font-size:calc(var(--fs) * .82);
  display:flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer;
}
.hn-mic[data-on="yes"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.hn-dot{ width:12px; height:12px; border-radius:50%; background:currentColor; }
.hn-mic[data-on="yes"] .hn-dot{ animation:hn-pulse 1.4s ease-in-out infinite; }
@keyframes hn-pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* --- 見出し --- */
.hn-app h2, .hn-app h3{
  font-family:"Zen Maru Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  text-wrap:balance; margin:0; color:var(--ink);
}
.hn-app h2{ font-size:calc(var(--fs) * 1.45); font-weight:900; line-height:1.35; }
.hn-app h3{ font-size:calc(var(--fs) * 1.05); font-weight:700; margin-top:22px; }
.hn-app h2:focus-visible{ outline:5px solid var(--focus); outline-offset:6px; }

.hn-lead{ color:var(--ink-2); font-size:calc(var(--fs) * .92); margin:6px 0 0; }
.hn-hint{ color:var(--ink-2); font-size:calc(var(--fs) * .84); margin:0; line-height:1.7; }
.hn-stack{ display:flex; flex-direction:column; gap:16px; margin-top:18px; }
.hn-screen{ padding:22px 0 0; }
.hn-screen[hidden]{ display:none !important; }

/* --- 大ボタン --- */
.hn-big{
  width:100%; min-height:132px;
  display:flex; align-items:center; gap:18px; padding:20px 22px;
  background:var(--surface);
  border:3px solid var(--line); border-left:12px solid var(--accent);
  border-radius:var(--radius); box-shadow:var(--shadow);
  color:var(--ink); font-family:inherit; text-align:left; cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.hn-big:hover{ background:var(--surface-2); }
.hn-big:active{ transform:translateY(2px); box-shadow:none; }
.hn-glyph{ font-size:calc(var(--fs) * 2.3); line-height:1; flex:none; }
.hn-bigglyph{ font-size:calc(var(--fs) * 3.6); display:block; }
.hn-t1{
  font-family:"Zen Maru Gothic",sans-serif; font-weight:900;
  font-size:calc(var(--fs) * 1.55); line-height:1.25; display:block;
}
.hn-t2{ display:block; font-size:calc(var(--fs) * .84); color:var(--ink-2); margin-top:4px; line-height:1.6; }
.hn-b2{ border-left-color:var(--cat3); }
.hn-b3{ border-left-color:var(--cat4); min-height:96px; }
.hn-b4{ border-left-color:var(--cat3); }

/* ==========================================================
   つうやく（一台のスマホで、日本語と英語のあいだを取りもつ）
   ========================================================== */
.hn-ipbtns{ margin-top:12px; }
.hn-ipbtn{
  min-height:120px; flex-direction:column; gap:4px; padding:14px 10px;
  border-width:4px;
}
.hn-ip-ja{ border-color:var(--cat1); color:var(--cat1); }
.hn-ip-en{ border-color:var(--cat3); color:var(--cat3); }
.hn-ipmic{ font-size:calc(var(--fs) * 1.6); line-height:1; }
.hn-iplabel{ font-size:calc(var(--fs) * 1.15); }
.hn-ipsub{ font-size:calc(var(--fs) * .85); font-weight:500; opacity:.85; }
.hn-ipbtn[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.hn-ipbtn[aria-pressed="true"] .hn-ipmic{ animation:hn-pulse 1s ease-in-out infinite; }
@keyframes hn-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.25); } }
.hn-ipbtn:disabled{ opacity:.45; cursor:default; }
.hn-ipresult{
  margin-top:14px; padding:16px; border:3px solid var(--accent); border-radius:var(--radius);
  background:var(--surface); display:flex; flex-direction:column; gap:10px;
}
.hn-ipresult[hidden]{ display:none !important; }
.hn-ipheard{ margin:0; font-size:calc(var(--fs) * .95); color:var(--ink-2); }
.hn-ipout{
  margin:0; font-family:"Zen Maru Gothic",sans-serif; font-weight:900;
  font-size:calc(var(--fs) * 1.6); line-height:1.5; color:var(--ink); word-break:break-word;
}
.hn-iptype{ margin-top:14px; }
.hn-iptype textarea{ width:100%; margin-top:8px; }
.hn-iptype .hn-primary{ margin-top:8px; }
.hn-iplog{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.hn-iplog .hn-msg{ margin:0; }
.hn-iplog .hn-ipout{ font-size:calc(var(--fs) * 1.1); }
.hn-b3 .hn-t1{ font-size:calc(var(--fs) * 1.2); }

/* --- ふつうのボタン --- */
.hn-backrow{ display:flex; gap:10px; margin-bottom:16px; }
.hn-btn{
  min-height:var(--tap); padding:14px 20px;
  border:3px solid var(--line-strong); border-radius:12px;
  background:var(--surface); color:var(--ink);
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:calc(var(--fs) * 1.02);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  line-height:1.4; text-align:center;
}
.hn-btn:hover{ background:var(--surface-2); }
.hn-primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
/* お問い合わせ（メールアプリを開くリンク）。ボタンと同じ見た目にする。 */
a.hn-contactbtn{ text-decoration:none; margin-top:4px; }
.hn-mail{ font-family:ui-monospace,"Consolas",monospace; font-weight:700; color:var(--ink); }
.hn-primary:hover{ filter:brightness(1.06); }
.hn-wide{ width:100%; }
.hn-small{ min-height:48px; padding:6px 14px; font-size:calc(var(--fs) * .84); }
.hn-two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* --- カテゴリとカード --- */
.hn-cats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.hn-cat{
  min-height:104px; padding:12px;
  border:3px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink);
  font-family:"Zen Maru Gothic",sans-serif; font-weight:900;
  font-size:calc(var(--fs) * 1.15);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  cursor:pointer;
}
.hn-cat[data-c="1"]{ background:var(--cat1-bg); border-color:var(--cat1); color:var(--cat1); }
.hn-cat[data-c="2"]{ background:var(--cat2-bg); border-color:var(--cat2); color:var(--cat2); }
.hn-cat[data-c="3"]{ background:var(--cat3-bg); border-color:var(--cat3); color:var(--cat3); }
.hn-cat[data-c="4"]{ background:var(--cat4-bg); border-color:var(--cat4); color:var(--cat4); }

.hn-cards{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.hn-card{
  position:relative; min-height:132px; padding:14px 10px;
  border:3px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink);
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:calc(var(--fs) * 1.08); line-height:1.3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; text-align:center; box-shadow:var(--shadow);
}
.hn-card:active{ transform:translateY(2px); box-shadow:none; }
.hn-num{
  position:absolute; top:8px; left:10px;
  font-size:calc(var(--fs) * .7); font-weight:700; color:var(--ink-2);
  border:2px solid var(--line-strong); border-radius:6px; padding:0 6px;
  background:var(--surface); line-height:1.6;
}
.hn-card[data-c="1"]{ background:var(--cat1-bg); border-color:var(--cat1); }
.hn-card[data-c="2"]{ background:var(--cat2-bg); border-color:var(--cat2); }
.hn-card[data-c="3"]{ background:var(--cat3-bg); border-color:var(--cat3); }
.hn-card[data-c="4"]{ background:var(--cat4-bg); border-color:var(--cat4); }
.hn-card.hn-urgent{ grid-column:1 / -1; border-width:5px; }

.hn-saypanel{
  border:5px solid var(--accent); border-radius:var(--radius);
  background:var(--surface); padding:28px 20px; text-align:center;
}
.hn-words{
  font-family:"Zen Maru Gothic",sans-serif; font-weight:900;
  font-size:calc(var(--fs) * 2); line-height:1.4; margin:14px 0 0;
  text-wrap:balance; color:var(--ink);
}
.hn-sub{ color:var(--ink-2); font-size:calc(var(--fs) * .84); margin:10px 0 0; }

/* --- はなす --- */
.hn-roomnow{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:calc(var(--fs) * .9); margin:16px 0 0; color:var(--ink-2);
}
.hn-roomnow b{ color:var(--ink); font-size:calc(var(--fs) * 1.05); }

.hn-msglist{ display:flex; flex-direction:column; gap:12px; padding:4px; margin:12px -4px 0; }
/* スマホでは段組みの箱そのものを無かったことにする（display:contents）。
   箱があると、その中で「下に貼り付ける」が効かなくなるため。 */
.hn-roomgrid{ display:contents; }
.hn-roomcol{ display:contents; }
.hn-keyhint{ display:none; }

/* ==========================================================
   パソコンの「はなす」画面
   左に会話、右に書く欄を並べて、どちらもスクロールなしで見えるようにする。
   会話は自分の枠の中だけで動くので、ページ全体は動かない。
   ========================================================== */
@media (min-width:900px){
  .hn-roomgrid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 400px;
    gap:22px;
    align-items:start;
    margin-top:6px;
  }
  .hn-roomcol{ display:block; min-width:0; }
  .hn-roomcol-write{ position:sticky; top:96px; }
  .hn-roomcol h3{ margin-top:0; }
  .hn-msglist{
    max-height:calc(100vh - 300px);
    min-height:280px;
    overflow-y:auto;
    scroll-behavior:smooth;
    padding:4px 8px 4px 4px;
  }
  .hn-keyhint{ display:block; }
  .hn-app{ max-width:none; }
  .hn-wrap{ max-width:1120px; }
  .hn-bar{ max-width:1120px; }
  .hn-capline{ max-width:1092px; }
}

.hn-msg{
  border:3px solid var(--line); border-left:10px solid var(--cat3);
  border-radius:12px; background:var(--surface); padding:14px 16px;
}
.hn-msg.hn-mine{ border-left-color:var(--accent); background:var(--accent-soft); }
.hn-msg.hn-card-kind{ border-left-color:var(--cat2); }
.hn-meta{
  font-size:calc(var(--fs) * .78); color:var(--ink-2); font-weight:700;
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.hn-body{
  font-size:calc(var(--fs) * 1.12); line-height:1.7; margin:6px 0 12px;
  word-break:break-word; color:var(--ink);
  -webkit-user-select:text; user-select:text;
}
.hn-msg .hn-btn{ width:100%; min-height:68px; font-size:var(--fs); }

/* 「入る前の言葉」と「いまの会話」の境目 */
.hn-divider{
  display:flex; align-items:center; gap:12px;
  margin:6px 2px; padding:0;
  color:var(--ink-2);
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:calc(var(--fs) * .82);
}
.hn-divider::before, .hn-divider::after{
  content:""; flex:1 1 auto; height:3px; background:var(--line-strong); border-radius:2px;
}
.hn-divider span{ flex:none; white-space:nowrap; }

.hn-compose{
  border:3px solid var(--line); border-radius:var(--radius);
  background:var(--surface); padding:16px;
  display:flex; flex-direction:column; gap:12px; margin-top:12px;
}
.hn-label{ font-weight:700; font-size:var(--fs); display:block; color:var(--ink); }
.hn-app textarea{
  width:100%; min-height:130px;
  font-family:inherit; font-size:calc(var(--fs) * 1.1); line-height:1.7;
  padding:14px; border:3px solid var(--line-strong); border-radius:12px;
  background:var(--bg); color:var(--ink); resize:vertical;
}
.hn-app input[type="text"]{
  width:100%; min-height:var(--tap);
  font-family:inherit; font-size:calc(var(--fs) * 1.1); padding:12px 14px;
  border:3px solid var(--line-strong); border-radius:12px;
  background:var(--bg); color:var(--ink);
}

/* --- お知らせ・時間 --- */
.hn-notice, .hn-timenote{
  border:3px solid var(--warn-line); background:var(--warn-bg); color:var(--warn-ink);
  border-radius:var(--radius); padding:18px;
  display:flex; flex-direction:column; gap:12px; margin-top:18px;
}
.hn-notice[hidden], .hn-timenote[hidden]{ display:none !important; }
.hn-notice p, .hn-timenote p{ margin:0; font-size:var(--fs); line-height:1.7; }
.hn-notice .hn-head, .hn-timenote p{ font-weight:700; }
.hn-notice ol{ margin:0; padding-left:1.3em; display:flex; flex-direction:column; gap:6px; font-size:var(--fs); }
.hn-noticebtns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hn-notice .hn-btn, .hn-timenote .hn-btn{ background:var(--surface); color:var(--ink); }
.hn-notice .hn-primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
/* お問い合わせ（メールアプリを開くリンク）。ボタンと同じ見た目にする。 */
a.hn-contactbtn{ text-decoration:none; margin-top:4px; }
.hn-mail{ font-family:ui-monospace,"Consolas",monospace; font-weight:700; color:var(--ink); }

/* 終わる・退室する */
.hn-leave{
  border-color:var(--cat2); color:var(--cat2);
  background:var(--surface);
}
.hn-leave:hover{ background:var(--cat2-bg); }
.hn-confirm{ border-color:var(--cat2); }

/* --- せってい --- */
.hn-panel{
  border:3px solid var(--line); border-radius:var(--radius);
  background:var(--surface); padding:18px; margin-top:18px;
}
.hn-panel h3{ margin-top:0; }
.hn-field{ display:flex; flex-direction:column; gap:10px; padding:16px 0; border-bottom:2px solid var(--line); }
.hn-field:last-child{ border-bottom:0; padding-bottom:0; }
.hn-field:first-child{ padding-top:0; }
.hn-seg{ display:flex; flex-wrap:wrap; gap:8px; }
.hn-seg button{
  flex:1 1 auto; min-width:88px; min-height:var(--tap);
  border:3px solid var(--line-strong); border-radius:12px;
  background:var(--surface); color:var(--ink);
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:var(--fs);
  cursor:pointer;
}
.hn-seg button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

.hn-keylist, .hn-cmdlist{ margin:10px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.hn-keylist li{ display:flex; gap:12px; align-items:baseline; font-size:calc(var(--fs) * .92); }
.hn-cmdlist li{ font-size:calc(var(--fs) * .92); }
.hn-app kbd{
  font-family:ui-monospace,"Consolas",monospace; font-size:calc(var(--fs) * .8);
  border:2px solid var(--line-strong); border-bottom-width:4px; border-radius:6px;
  padding:2px 8px; background:var(--surface-2); white-space:nowrap; flex:none; color:var(--ink);
}
.hn-cmdlist b{
  font-family:"Zen Maru Gothic",sans-serif;
  background:var(--accent-soft); color:var(--ink);
  border-radius:6px; padding:2px 8px; margin-right:8px; display:inline-block;
}

/* --- 字幕バー --- */
.hn-capbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--surface); border-top:4px solid var(--accent);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
}
.hn-capbar[hidden]{ display:none !important; }
.hn-capline{
  max-width:612px; margin:0 auto;
  display:flex; gap:10px; align-items:flex-start;
  font-size:var(--fs); line-height:1.5; min-height:1.5em;
}
.hn-tag{
  flex:none; font-size:calc(var(--fs) * .68); font-weight:700; letter-spacing:.06em;
  border:2px solid var(--line-strong); border-radius:6px;
  padding:1px 7px; margin-top:5px; color:var(--ink-2);
  font-family:"Zen Maru Gothic",sans-serif; white-space:nowrap;
}
.hn-say .hn-tag{ border-color:var(--accent); color:var(--accent); }
.hn-heard .hn-tag{ border-color:var(--cat3); color:var(--cat3); }
.hn-scene .hn-tag{ border-color:var(--cat4); color:var(--cat4); }
.hn-txt{ font-weight:700; word-break:break-word; color:var(--ink); }
.hn-txt:empty::after{ content:"—"; color:var(--ink-2); font-weight:400; }

/* --- 起動ゲート --- */
.hn-gate{
  position:fixed; inset:0; z-index:80; background:var(--bg);
  display:flex; flex-direction:column; align-items:center;
  gap:26px; padding:28px; text-align:center;

  /* 中身が画面より高いときは、上から並べて、指で動かせるようにする。

     中央そろえのままだと、はみ出したぶんが上と下に等しく出る。
     下は動かせば見えるが、上に出たぶんは、どうやっても見えない。
     実測（375×640の画面）で、画面の外に出ていた高さは
     　文字「中」　19px
     　文字「大」　88px
     　文字「特大」210px
     いちばん上にある「コミュヘル」が、そのぶん切れていた。

     safe を付けると、入りきらないときだけ上そろえに変わる。
     入りきるときは、これまでどおり中央に置かれる。 */
  justify-content:center;
  justify-content:safe center;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.hn-gate[hidden]{ display:none !important; }
.hn-logo{
  font-family:"Zen Maru Gothic",sans-serif; font-weight:900;
  font-size:calc(var(--fs) * 2.4); color:var(--accent); line-height:1.2;
}
.hn-logo small{ display:block; font-size:calc(var(--fs) * .9); color:var(--ink-2); font-weight:700; margin-top:8px; }
.hn-startbtn{
  min-width:min(360px,88vw); min-height:150px;
  border:5px solid var(--accent); border-radius:20px;
  background:var(--accent); color:var(--accent-ink);
  font-family:"Zen Maru Gothic",sans-serif; font-weight:900;
  font-size:calc(var(--fs) * 2); cursor:pointer;
}
.hn-gatelead{ max-width:30em; margin:0; color:var(--ink); font-size:calc(var(--fs) * 1.05); line-height:1.9; font-weight:700; }
.hn-gatenote{ max-width:34em; color:var(--ink-2); font-size:calc(var(--fs) * .88); margin:0; line-height:1.8; }

/* 入り口のことばの切り替え。
   「はじめる」より控えめにして、押し間違えないようにする。
   それでも、英語でも使えることが分かる大きさは残す。 */
.hn-gatelang{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.hn-gatelang-label{
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:calc(var(--fs) * .88); color:var(--ink-2);
}
.hn-gatelang .hn-seg{ justify-content:center; }
.hn-gatelang .hn-seg button{
  /* 三つ（日本語・English・한국어）が、幅375pxのスマホでも一列に収まる幅 */
  flex:0 0 auto; min-width:96px; min-height:52px;
  font-size:calc(var(--fs) * .95);
}
/* 背の低い画面（横向きや、アドレス欄の出ている縦画面）では、
   そもそもはみ出さないように詰める。 */
@media (max-height:720px){
  .hn-gate{ gap:16px; padding:20px 20px 24px; }
  .hn-logo{ font-size:calc(var(--fs) * 2); }
  .hn-startbtn{ min-height:112px; font-size:calc(var(--fs) * 1.7); }
  .hn-gatelead{ line-height:1.7; }
}
@media (max-height:560px){
  .hn-gate{ gap:12px; }
  .hn-logo{ font-size:calc(var(--fs) * 1.7); }
  .hn-startbtn{ min-height:88px; }
  .hn-gatelead{ line-height:1.6; }
}

@media (min-width:560px){
  .hn-cards{ grid-template-columns:repeat(3,1fr); }
  .hn-cats{ grid-template-columns:repeat(4,1fr); }
}

/* ==========================================================
   スマホの「はなす」画面
   ふつうに並べると、短い会話5件でページが3画面分になり、
   「送る」ボタンが2画面以上ずっと下に行ってしまう。
   読む場所と書く場所を行き来できないので、
   書く欄を画面の下に貼り付けて、常に見えるようにする。
   ========================================================== */
@media (max-width:819px){
  .hn-compose{
    position:sticky;
    bottom:var(--capbar-h, 0px);
    z-index:25;
    margin-top:12px;
    padding:10px;
    gap:8px;
    border-radius:14px 14px 0 0;
    box-shadow:0 -8px 20px rgba(19,28,24,.20);
  }
  /* 見出しは読み上げには残し、画面からは省く */
  .hn-compose .hn-label{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .hn-compose .hn-hint{ display:none; }
  .hn-compose textarea{ min-height:64px; }
  .hn-compose .hn-btn{ min-height:60px; padding:8px 10px; font-size:calc(var(--fs) * .92); }
  .hn-compose .hn-primary{ min-height:68px; font-size:calc(var(--fs) * 1.05); }

  /* 「書いて伝える」の見出しは、貼り付いた欄があるので省く */
  .hn-composehead{ display:none; }

  /* 名前と合言葉の行を詰める */
  .hn-roomnow{ font-size:calc(var(--fs) * .82); margin-top:10px; gap:8px; }
  .hn-roomnow b{ font-size:calc(var(--fs) * .95); }
  .hn-small{ min-height:44px; padding:4px 12px; }

  /* 字幕は2行に。画面の説明は声でも出るので、狭い画面では省く */
  .hn-capbar{ padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)); }
  .hn-capline{ font-size:calc(var(--fs) * .92); gap:8px; }
  .hn-capbar .hn-scene{ display:none; }

  /* 下の余白は、字幕バーのぶんだけでよい */
  .hn-app{ padding-bottom:calc(var(--capbar-h, 120px) + 16px); }
}

/* ==========================================================
   記事の読み上げボタン（ブログ記事の先頭に出る）
   ========================================================== */
.hn-reader{
  --r-ink:#131C18; --r-bg:#F3F6F2; --r-line:#C6D0C8; --r-accent:#0E6B57; --r-accent-ink:#fff;
  border:3px solid var(--r-line); border-left:10px solid var(--r-accent);
  border-radius:14px; background:var(--r-bg); color:var(--r-ink);
  padding:12px 14px 10px; margin:0 0 12px;
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  .hn-reader{ --r-ink:#EDF3F0; --r-bg:#17211E; --r-line:#31423D; --r-accent:#63D5B6; --r-accent-ink:#062219; }
}
.hn-reader-title{
  font-family:"Zen Maru Gothic",sans-serif; font-weight:900;
  font-size:1.05rem; margin:0 0 2px; color:var(--r-ink);
}
.hn-reader-note{ font-size:.85rem; color:var(--r-ink); opacity:.75; margin:0 0 10px; line-height:1.55; }
.hn-reader-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.hn-reader button{
  /* 高さに余白が足し算されないようにする。
     これがないと、min-height 60px に上下の余白と枠が乗って
     実際には87pxになっていた（実測）。 */
  box-sizing:border-box;
  min-height:44px; padding:6px 16px; line-height:1.3;
  border:3px solid var(--r-accent); border-radius:12px;
  background:var(--r-accent); color:var(--r-accent-ink);
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:1rem;
  cursor:pointer; flex:1 1 auto;
}
.hn-reader button.hn-reader-sub{ background:transparent; color:var(--r-ink); border-color:var(--r-line); }
.hn-reader button:focus-visible{ outline:5px solid #B03D14; outline-offset:3px; }
/* 途中から読む */
.hn-reader-jump{ margin-top:12px; }
.hn-reader-jump[hidden]{ display:none !important; }
.hn-reader-jump label{
  display:block; font-weight:700; font-size:.95rem; margin-bottom:6px; color:var(--r-ink);
}
.hn-reader-jumprow{ display:flex; gap:8px; flex-wrap:wrap; }
.hn-reader-jump select{
  box-sizing:border-box;
  flex:1 1 240px; min-width:0; min-height:44px;
  padding:6px 12px; font-family:inherit; font-size:1rem;
  border:3px solid var(--r-line); border-radius:12px;
  background:var(--r-bg); color:var(--r-ink);
}
.hn-reader-jump select:focus-visible{ outline:5px solid #B03D14; outline-offset:3px; }
.hn-reader-jump #hn-reader-jumpgo{ flex:0 0 auto; }
.hn-reader-tip{ margin:8px 0 0; font-size:.85rem; opacity:.85; color:var(--r-ink); }
.hn-reader-optin{
  box-sizing:border-box;
  /* しるしと文字を、上ではなく真ん中でそろえる。
     上そろえだと、文字が2行のときに下が余る。 */
  display:flex; align-items:center; gap:10px;
  margin-top:8px; padding:6px 10px;
  border:2px solid var(--r-line); border-radius:12px;
  font-weight:700; cursor:pointer; line-height:1.4;
}
.hn-reader-optin input{ width:22px; height:22px; margin:0; flex:none; cursor:pointer; }
.hn-reader-optin-text{ flex:1 1 auto; min-width:0; }
/* 但し書きは、行を変えずに続けて書く。
   行を変えると、そのぶん枠が高くなるだけだった。 */
.hn-reader-optin span span{ display:inline; font-weight:400; opacity:.75; font-size:.92em; }
.hn-reader-optin input:focus-visible{ outline:5px solid #B03D14; outline-offset:3px; }

.hn-reader-status{
  /* 何も出ていないときは場所を取らない。
     1.6em を空けていたので、いつも1行ぶん余っていた。 */
  margin:0; font-size:.95rem; font-weight:700; line-height:1.5;
  color:var(--r-ink); min-height:0;
}
.hn-reader-status:not(:empty){ margin-top:10px; }
.hn-reader[hidden]{ display:none !important; }

/* ==========================================================
   お酒シート
   ========================================================== */
.hn-sheetopen{
  border-color:var(--cat4); color:var(--cat4);
  font-size:calc(var(--fs) * 1.02);
}
.hn-sheetopen:hover{ background:var(--cat4-bg); }
.hn-sheetopen[hidden]{ display:none !important; }

.hn-sheet{
  border:3px solid var(--cat4);
  border-radius:var(--radius);
  background:var(--surface);
  padding:18px;
  margin-top:14px;
  display:flex; flex-direction:column; gap:10px;
}
.hn-sheet[hidden]{ display:none !important; }
.hn-sheet h3{ margin:0; color:var(--cat4); }
.hn-sheet .hn-label{ margin-top:6px; }

/* 星。半分きざみにはせず、1つずつを大きく保つ。 */
.hn-stars{ display:flex; gap:8px; flex-wrap:wrap; }
.hn-star{
  min-width:60px; min-height:60px;
  border:3px solid var(--line-strong); border-radius:12px;
  background:var(--surface); color:var(--cat4);
  font-size:calc(var(--fs) * 1.6); line-height:1;
  cursor:pointer; padding:0;
}
.hn-star[aria-pressed="true"]{ background:var(--cat4-bg); border-color:var(--cat4); }
.hn-star:focus-visible{ outline:5px solid var(--focus); outline-offset:3px; }

.hn-sk-preview{ margin:4px 0; }
.hn-sk-preview[hidden]{ display:none !important; }
.hn-field[hidden]{ display:none !important; }
/* この部屋のQRコード */
#hn-qrbtn[hidden]{ display:none !important; }
.hn-qrbox{ display:flex; flex-direction:column; gap:10px; }
.hn-qrbox[hidden]{ display:none !important; }
.hn-qrimg{ width:min(260px, 100%); margin:0 auto; background:#fff; padding:8px; border:3px solid var(--line); border-radius:12px; }
.hn-qrimg svg{ width:100%; height:auto; display:block; }
.hn-qrurl{ margin:0; font-size:calc(var(--fs) * .78); color:var(--ink-2); word-break:break-all; text-align:center; }
#hn-gatenotice .hn-btn[hidden]{ display:none !important; }
#hn-gatenotice .hn-btn{ margin-top:4px; }
/* 「写真を外す」は、写真をえらぶまで出さない。
   .hn-btn の display:inline-flex が hidden に勝ってしまい、
   空のボタンが最初から見えていた（1.8.2 で発見）。 */
.hn-sheet .hn-btn[hidden]{ display:none !important; }
.hn-sk-preview img{
  max-width:100%; max-height:260px; border-radius:12px;
  border:3px solid var(--line); display:block;
}

/* 送られてきたお酒シート */
.hn-sake-kind{ border-left-color:var(--cat4); }
.hn-sakecard{
  border:3px solid var(--cat4);
  border-radius:12px;
  background:var(--cat4-bg);
  padding:14px;
  margin:6px 0 12px;
}
.hn-sakephoto img{
  width:100%; max-height:320px; object-fit:cover;
  border-radius:10px; display:block; margin-bottom:12px;
  background:var(--surface-2);
}
.hn-sakebrand{
  font-family:"Zen Maru Gothic",sans-serif; font-weight:900;
  font-size:calc(var(--fs) * 1.25); margin:0 0 10px; color:var(--ink);
  line-height:1.35;
}
.hn-sakerows{ margin:0; display:flex; flex-direction:column; gap:6px; }
.hn-sakerows > div{ display:flex; gap:10px; align-items:baseline; }
.hn-sakerows dt{
  flex:0 0 6.5em; font-size:calc(var(--fs) * .82); font-weight:700;
  color:var(--ink-2);
}
.hn-sakerows dd{ margin:0; font-size:calc(var(--fs) * .98); color:var(--ink); word-break:break-word; }

.hn-advice{
  margin-top:12px; padding-top:12px;
  border-top:2px solid var(--cat4);
}
.hn-advicehead{
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:calc(var(--fs) * .86); color:var(--cat4); margin:0 0 4px;
}
.hn-advice p{ margin:0; font-size:calc(var(--fs) * .95); line-height:1.7; color:var(--ink); }
.hn-articlelink{
  display:inline-block; margin-top:10px;
  font-weight:700; font-size:calc(var(--fs) * .9);
  color:var(--ink); text-decoration:underline;
  min-height:48px; line-height:1.6; padding:8px 0;
}
.hn-articlelink:focus-visible{ outline:5px solid var(--focus); outline-offset:3px; }

@media (max-width:819px){
  .hn-sheet{ padding:14px; }
  .hn-sakerows dt{ flex-basis:5.5em; }
}

/* ==========================================================
   スマホ：横にスクロールして「トーク履歴」と「文字入力」を切り替える
   小さな画面に両方を詰め込むと、どちらも中途半端になるため、
   1画面につき1つだけを大きく見せる。
   指でなぞる以外に、上のボタンでも切り替えられる
   （手が動かしにくい方は、なぞる操作ができないことがあるため）。
   ========================================================== */
.hn-tabs{ display:none; }

@media (max-width:819px){
  .hn-tabs{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    position:sticky; top:64px; z-index:22;
    background:var(--bg); padding:10px 0 8px; margin-top:8px;
  }
  .hn-tab{
    min-height:64px; padding:10px;
    border:3px solid var(--line-strong); border-radius:12px;
    background:var(--surface); color:var(--ink-2);
    font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
    font-size:calc(var(--fs) * .95); cursor:pointer;
  }
  .hn-tab[aria-selected="true"]{
    background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
  }
  .hn-tab:focus-visible{ outline:5px solid var(--focus); outline-offset:3px; }

  /* 2枚を横に並べ、1枚ずつぴたりと止まるようにする */
  .hn-roomgrid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:100%;
    gap:0;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    margin:0;
    padding:0;
  }
  .hn-roomgrid::-webkit-scrollbar{ display:none; }
  .hn-roomcol{
    display:block; min-width:0;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    padding-right:14px;
  }
  /* 見出しは切り替えボタンと重複するので省く */
  .hn-roomcol-list > h3{ display:none; }

  /* 会話は、この枠の中だけで縦に動く */
  .hn-msglist{
    max-height:calc(100vh - var(--capbar-h, 110px) - 250px);
    min-height:220px;
    overflow-y:auto;
    padding:4px 6px 4px 4px;
  }
  /* 横切り替えのときは、書く欄を貼り付けない（枠の中に収まるため） */
  .hn-roomgrid .hn-compose{
    position:static;
    box-shadow:none;
    border-radius:var(--radius);
    margin-top:0;
  }
}

/* 横切り替えのときは、上の説明を詰めて、1画面に収める。
   「一定時間で消える」の案内は、お酒シートの画面と、せっていに出してある。 */
@media (max-width:819px){
  #hn-s-msg > h2{ font-size:calc(var(--fs) * 1.15); }
  #hn-s-msg > .hn-backrow{ margin-bottom:8px; }
  #hn-s-msg > .hn-backrow .hn-btn{ min-height:56px; font-size:calc(var(--fs) * .9); }
  #hn-room > .hn-lead{ display:none; }
  #hn-room > .hn-hint{ display:none; }
  #hn-room > .hn-roomnow{
    margin-top:6px; gap:6px;
    font-size:calc(var(--fs) * .76);
  }
  #hn-room > .hn-roomnow .hn-small{ min-height:40px; padding:2px 10px; font-size:calc(var(--fs) * .76); }
  .hn-tabs{ top:56px; padding:8px 0 6px; }
}

/* ==========================================================
   お酒シートを読みやすく
   もとは背景に色を敷いていたが、狭い画面だと文字が沈んで読みにくい。
   白い地に、枠と見出しだけ色をつける形に変える。
   ========================================================== */
.hn-sakecard{
  background:var(--surface);
  border-left-width:10px;
}
.hn-sakebrand{ color:var(--cat4); font-size:calc(var(--fs) * 1.3); }
.hn-sakerows dt{
  font-size:calc(var(--fs) * .88);
  color:var(--ink);
  flex-basis:7em;
}
.hn-sakerows dd{ font-size:calc(var(--fs) * 1.05); font-weight:700; }
.hn-advice p{ font-size:calc(var(--fs) * 1); }
.hn-advicehead{ font-size:calc(var(--fs) * .92); }

@media (max-width:819px){
  /* 狭い画面では、項目名と中身を上下に分けて、どちらも詰まらないようにする */
  .hn-sakerows > div{ display:block; }
  .hn-sakerows dt{ flex-basis:auto; margin-bottom:2px; }
  .hn-sakerows dd{ font-size:calc(var(--fs) * 1.1); }
}

/* 大きく見る画面 */
#hn-sv-body .hn-sakecard{
  border-width:3px; border-left-width:12px;
  padding:18px;
}
#hn-sv-body .hn-sakephoto img{ max-height:none; }
#hn-sv-body .hn-sakebrand{ font-size:calc(var(--fs) * 1.7); }
#hn-sv-body .hn-sakerows dt{ font-size:calc(var(--fs) * .95); }
#hn-sv-body .hn-sakerows dd{ font-size:calc(var(--fs) * 1.25); }
#hn-sv-body .hn-advice p{ font-size:calc(var(--fs) * 1.1); line-height:1.85; }
#hn-sv-body .hn-articlelink{ font-size:calc(var(--fs) * 1.02); }

/* 「写真を外しました」「◎を押した」などの、会話ではない一行の知らせ */
.hn-msgnote{
  text-align:center; margin:6px 0;
  font-size:calc(var(--fs) * .88); color:var(--ink-2);
}
.hn-sakephoto{ position:relative; }
.hn-photormv{
  display:block; width:100%; margin:-4px 0 12px;
  min-height:52px; padding:8px 12px;
  border:3px solid var(--line-strong); border-radius:10px;
  background:var(--surface); color:var(--ink);
  font:inherit; font-size:calc(var(--fs) * .9); font-weight:700;
  cursor:pointer;
}
.hn-photormv:hover{ border-color:var(--cat2); color:var(--cat2); }

/* ==========================================================
   ペアリングシート
   お酒の欄と料理の欄を同じ重さで持つ。
   入力は「飲みもの」「料理」「合わせて」の3つの枠に分け、
   見せるときは広い画面で左右に並べ、スマホでは縦に重ねる。
   ========================================================== */
.hn-sheetpart{
  border:3px solid var(--line); border-radius:12px;
  padding:12px 14px 14px; margin-top:6px;
  display:flex; flex-direction:column; gap:10px;
  background:var(--surface);
}
.hn-part-sake{ border-color:var(--cat4); }
.hn-part-food{ border-color:var(--cat2); }
.hn-part-verdict{ border-color:var(--cat1); }
.hn-parthead{
  margin:0; font-family:"Zen Maru Gothic",sans-serif; font-weight:900;
  font-size:calc(var(--fs) * 1.15); color:var(--ink);
}
.hn-part-sake .hn-parthead{ color:var(--cat4); }
.hn-part-food .hn-parthead{ color:var(--cat2); }
.hn-part-verdict .hn-parthead{ color:var(--cat1); }

/* 飲みものの種類（日本酒・焼酎・ウイスキー・ワイン・ビール・ソフトドリンク）。
   6つを2列×3段に。3列だと「ソフトドリンク」が折り返して読みにくかった。 */
.hn-genre button{ flex:1 1 45%; min-width:0; }

/* ◎○△× のボタン。4つを2×2に。 */
.hn-verdict{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hn-verdict .hn-vbtn{
  min-height:var(--tap); padding:8px 10px;
  border:3px solid var(--line-strong); border-radius:12px;
  background:var(--surface); color:var(--ink);
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:var(--fs);
  cursor:pointer; line-height:1.3;
}
.hn-verdict .hn-vbtn[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

/* 「ここが良かった」のカード。いくつでも押せる。 */
.hn-points{ display:flex; flex-wrap:wrap; gap:8px; }
.hn-pointbtn{
  min-height:56px; padding:8px 14px;
  border:3px solid var(--line-strong); border-radius:999px;
  background:var(--surface); color:var(--ink);
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:calc(var(--fs) * .95);
  cursor:pointer;
}
.hn-pointbtn[aria-pressed="true"]{ background:var(--cat1); color:var(--accent-ink); border-color:var(--cat1); }
.hn-pointbtn[aria-pressed="true"]::before{ content:"✓ "; }

/* 送られてきたペアリング */
.hn-pairgrid{ display:flex; flex-direction:column; gap:12px; }
.hn-pairside{
  border:3px solid var(--cat4); border-radius:10px; padding:10px 12px;
  background:var(--surface);
}
.hn-side-food{ border-color:var(--cat2); }
.hn-side-food .hn-sakebrand{ color:var(--ink); }
/* 左右に並べるのは「大きく見る」画面だけ。
   会話の一覧はパソコンでも幅が狭く（実測 約190px）、
   並べると星が縦に折れてしまった。 */
@media (min-width:600px){
  #hn-sv-body .hn-pairgrid{ flex-direction:row; align-items:stretch; }
  #hn-sv-body .hn-pairside{ flex:1 1 0; min-width:0; }
}
.hn-verdictbox{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.hn-verdictline{
  margin:0; font-family:"Zen Maru Gothic",sans-serif; font-weight:900;
  font-size:calc(var(--fs) * 1.15); color:var(--ink);
}
.hn-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.hn-chip{
  display:inline-block; padding:4px 12px; border-radius:999px;
  border:2px solid var(--cat1); color:var(--cat1); background:var(--surface);
  font-size:calc(var(--fs) * .88); font-weight:700;
}
.hn-tally{ margin:4px 0 0; font-weight:700; color:var(--ink); }
.hn-tallybreak{ margin:0; font-size:calc(var(--fs) * .9); color:var(--ink-2); }
.hn-reactrow{ margin-top:4px; }
.hn-reactrow .hn-vbtn{ min-height:60px; font-size:calc(var(--fs) * .92); }

.hn-viewbtn{ border-color:var(--cat4); color:var(--cat4); }
.hn-viewbtn:hover{ background:var(--cat4-bg); }
.hn-msgbtns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hn-msgbtns .hn-btn{ width:auto; }

/* ==========================================================
   テーマの左右の余白を打ち消して、画面いっぱいに使う

   twentytwentyfive は本文の左右に30pxずつ余白を入れる。
   375pxのスマホでは、それだけで60px（16%）が消え、
   アプリの内側の余白を足すと使えるのは287px（76%）しかなかった。
   会話も、お酒シートも、狭いほど読みにくくなるので、端まで使う。

   margin に !important を付けているのは、テーマ側が
   本文直下の要素の margin を上書きしてくるため（実測で確認）。
   横スクロールが出ないことも実機幅で確認済み。
   パソコン（900px以上）は2段組みで十分広いので、ここでは触らない。
   ========================================================== */
/* ==========================================================
   テーマの左右の余白を打ち消して、画面いっぱいに使う

   100vw は使わない。スマホはスクロール中にアドレスバーが伸び縮みして
   画面の幅が変わるため、100vw を基準にすると横に数pxずれて「ぐらつく」。
   かわりに、実際のずれ幅を測って --hn-bleed に入れ、それだけ引く。
   左右とも同じだけ引くので、幅は自動でちょうど画面いっぱいになる。

   セレクタを .hn-app.hn-app と二重にしているのは、WordPress が
     .is-layout-constrained > :where(...) { margin-left:auto !important }
   を当てているため。:where() は強さ0なので相手は .hn-app と同じ強さになり、
   同じ強さだと「あとに書かれたほう」が勝つ。WordPressの指定は
   このファイルより後ろに置かれるので、こちらを一段強くしておく。
   ========================================================== */
.hn-app.hn-app{
  width:auto !important;
  max-width:none !important;
  margin-left:calc(-1 * var(--hn-bleed, 0px)) !important;
  margin-right:calc(-1 * var(--hn-bleed, 0px)) !important;
  overflow-x:clip;              /* 中の要素がはみ出しても横に動かさない */
}

/* 内側の余白は、狭い画面のときだけ詰める */
@media (max-width:700px){
  .hn-wrap{ padding-left:10px !important; padding-right:10px !important; }
  .hn-bar{ padding-left:10px; padding-right:10px; }
  .hn-capbar{ padding-left:10px; padding-right:10px; }
  .hn-roomcol{ padding-right:0; }
  .hn-msglist{ margin-left:0; margin-right:0; }
}

/* 入れ子の余白も詰めて、カードの中身を広く取る */
@media (max-width:899px){
  .hn-msglist{ padding:4px 2px; margin-left:-2px; margin-right:-2px; }
  .hn-msg{ padding:12px 10px; }
  .hn-msg .hn-body{ font-size:calc(var(--fs) * 1.08); }
  .hn-sakecard{ padding:12px 10px; }
  .hn-compose{ padding:10px 8px; }
  .hn-sheet{ padding:14px 10px; }
  .hn-panel{ padding:14px 12px; }
}

/* ==========================================================
   横切り替えのとき、入力欄を空いている高さいっぱいまで広げる

   2枚は同じ高さにそろえられるので、書く側は下に空きができていた。
   その空きを入力欄で使い切る。ボタンは下に固定されたまま動かない。
   ========================================================== */
@media (max-width:819px){
  .hn-roomcol-write{ display:flex; flex-direction:column; min-height:0; }
  .hn-roomcol-write > .hn-compose{
    flex:1 1 auto;
    display:flex; flex-direction:column;
    min-height:0;
  }
  .hn-roomcol-write > .hn-compose > textarea{
    flex:1 1 auto;
    min-height:96px;
    height:auto;
  }
  /* ボタンや案内は縮ませない */
  .hn-roomcol-write > .hn-compose > .hn-two,
  .hn-roomcol-write > .hn-compose > .hn-btn,
  .hn-roomcol-write > .hn-compose > .hn-hint{ flex:0 0 auto; }
  /* お酒シートを開いているときは、入力欄は元の高さでよい */
  .hn-roomcol-write:has(.hn-sheet:not([hidden])) > .hn-compose{ flex:0 0 auto; }
  .hn-roomcol-write:has(.hn-sheet:not([hidden])) > .hn-compose > textarea{ flex:0 0 auto; min-height:64px; }
}

/* ==========================================================
   横切り替えの2枚の高さを、画面に収まる分だけに決める

   入力欄を空きいっぱいに広げたところ、2枚の高さが画面より高くなり、
   送るボタンが字幕バーに潜り込んだ。
   そこで枠の高さそのものを「画面 － 字幕バー － 上の見出し」に決める。
   実際の位置はJSが測って --hn-paneh に入れる（測れないときは概算を使う）。
   ========================================================== */
@media (max-width:819px){
  .hn-roomgrid{
    height: var(--hn-paneh, calc(100vh - var(--capbar-h, 110px) - 360px));
    min-height: 300px;
  }
  .hn-roomcol{
    height:100%;
    display:flex; flex-direction:column; min-height:0;
  }
  .hn-roomcol-list > .hn-msglist{
    flex:1 1 auto;
    max-height:none;
    min-height:0;
    overflow-y:auto;
  }
  /* お酒シートを開いたときは、枠の中で縦に送れるようにする */
  .hn-roomcol-write{ overflow-y:auto; }
}

/* ==========================================================
   横切り替えのとき、上の飾りを削って入力欄に回す

   812pxの画面で、上のバー・見出し・戻る・名前・合言葉・切り替えで
   292px（36%）を使っていた。そのぶん入力欄が110pxしか取れない。
   見出しは上のバーに同じものが出ているので画面からは省き、
   読み上げのためだけに残す。戻るボタンは小さくする。
   ========================================================== */
@media (max-width:819px){
  #hn-s-msg > h2{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  #hn-s-msg{ padding-top:8px; }
  #hn-s-msg > .hn-backrow{ margin-bottom:2px; }
  #hn-s-msg > .hn-backrow .hn-btn{
    min-height:44px; padding:4px 12px; font-size:calc(var(--fs) * .82);
  }
  #hn-room > .hn-roomnow{ margin-top:2px; }
  .hn-tabs{ padding:6px 0 4px; }

  /* 補助のボタンを少し薄くして、入力欄の取り分を増やす */
  .hn-compose .hn-two .hn-btn{ min-height:52px; }
  .hn-sheetopen{ min-height:52px; }
  .hn-compose{ gap:6px; }
}

/* ==========================================================
   字幕バーをたためるようにする

   スマホでは字幕バーが常に画面の1割ほどを占めていた。
   ふだんは「読み上げ」の1行だけにして、必要なときだけひろげる。
   設定で字幕そのものを消すこともできる（せってい → 字幕）。
   ========================================================== */
.hn-capfold{ display:none; }

@media (max-width:819px){
  .hn-capbar{
    position:relative;
    /* 「字幕をひろげる」は、この帯より30px上にはみ出して置いてある
       （下にあると帯の中身を隠してしまうため）。
       そのぶんの場所を空けておかないと、
       すぐ上にある内容に重なる。
       実際に「つたえる → おねがい」で、カードの上に重なっていた。 */
    margin-top:38px;
  }
  .hn-capfold{
    display:block;
    position:absolute; right:8px; top:-30px;
    min-height:30px; padding:2px 12px;
    border:2px solid var(--line-strong); border-bottom:0;
    border-radius:10px 10px 0 0;
    background:var(--surface); color:var(--ink-2);
    font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
    font-size:calc(var(--fs) * .72);
    cursor:pointer;
  }
  .hn-capfold:focus-visible{ outline:5px solid var(--focus); outline-offset:2px; }
  /* たたんでいるときは「読み上げ」だけ */
  .hn-app:not([data-cap="open"]) .hn-capbar .hn-heard{ display:none; }
  .hn-app[data-cap="open"] .hn-capbar .hn-scene{ display:flex; }
}

/* ==========================================================
   スマホ：はなすの画面を、上から下まで使い切る

   上のバー・見出し・戻る・名前・合言葉・切り替えで、
   812pxの画面のうち300px以上を飾りに使っていた。
   見出しと戻るは上のバーに同じ役目のものがあるので画面からは省き、
   名前と合言葉は1行にまとめる。残り全部を会話と入力欄に渡す。
   ========================================================== */
.hn-roomhead{ display:block; }
.hn-homebtn{ display:none; }

@media (max-width:819px){
  #hn-s-msg > .hn-backrow{ display:none; }   /* 🏠 に置きかえる */
  .hn-homebtn{ display:inline-flex; min-width:52px; padding:4px 10px; }

  .hn-roomhead{
    display:flex; flex-wrap:wrap; align-items:center; gap:6px;
    margin-top:4px;
  }
  .hn-roomhead .hn-roomnow{
    margin:0; gap:6px;
    font-size:calc(var(--fs) * .78);
  }
  /* 「あなたの名前：」などの説明は、読み上げには残して画面からは省く */
  .hn-rl{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .hn-roomhead .hn-small{ min-height:40px; padding:2px 10px; font-size:calc(var(--fs) * .76); }
  .hn-roomhead b{ font-size:calc(var(--fs) * .92); }
}

/* 名前と合言葉を1行に収める。
   合言葉の「変える」はスマホでは省く（「退室する」で入り直せば同じことができる）。
   「変える」は名前側の1つだけ残す。 */
@media (max-width:819px){
  #hn-roomchange{ display:none; }
  .hn-roomhead{ flex-wrap:nowrap; }
  .hn-roomhead .hn-roomnow{ min-width:0; }
  .hn-roomhead b{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    max-width:8em; display:inline-block; vertical-align:bottom;
  }
  /* ホームの「おわる」の下の説明は、ボタンの文字で足りるので省く */
  #hn-finishhint{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
}

/* ==========================================================
   スマホ：「はなす」の間だけ、画面全体をアプリが使う

   ふだんはサイトのヘッダーやフッターが上下にあり、
   会話と入力に使える高さがそのぶん削られる。
   合言葉の場に入っている間は、アプリを画面いっぱいに固定して、
   上から下まで会話と入力に使う。
   ホームや設定にもどると、元のページの中の表示に戻る。
   ========================================================== */
@media (max-width:819px){
  .hn-app.hn-fullroom{
    position:fixed; inset:0; z-index:60;
    margin:0 !important; width:auto !important; max-width:none !important;
    padding:0;
    display:flex; flex-direction:column;
    overflow:hidden;
    background:var(--bg);
  }
  .hn-fullroom .hn-bar{
    position:static; flex:0 0 auto;

    /* 全画面のときは、必ず画面いっぱいの幅にする。
       .hn-wrap と同じ理由。ここは上下に積む箱（flex）の中にあり、
       もとの「margin:0 auto」が効くと、中身の幅ぶんに広がってしまう。
       375pxの画面で399pxになり、右のマイクボタンが切れていた。 */
    width:100%; max-width:none;
    margin-left:0; margin-right:0;
    align-self:stretch;

    /* 中身も画面に収める。
       合言葉と名前は長くなりうるので、そこだけ縮めて、
       家のしるしとマイクは大きさを保つ（押しやすさのため）。 */
    gap:8px;
  }
  .hn-fullroom .hn-barhome,
  .hn-fullroom .hn-mic{ flex:0 0 auto; }
  .hn-fullroom .hn-crumb{
    flex:1 1 auto; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* アプリの名前は、場所が足りないときは縮める。
     英語では「ComyuHel」となり、日本語の「コミュヘル」より横に長い。
     文字を大きくしている方の狭い画面では、これだけで
     右のマイクが画面からはみ出して切れていた。
     ホームのしるしとマイクは押しやすさのため、大きさを保つ。 */
  .hn-fullroom .hn-brand{
    flex:0 1 auto; min-width:0;
    overflow:hidden; text-overflow:ellipsis;
  }
  /* とくに狭い画面では、名前は出さない。
     いまどの部屋にいるかのほうが、その場では大事。 */
  @media (max-width:359px){
    .hn-fullroom .hn-brand{ display:none; }
  }

  /* 画面のいちばん上に、時計や電池の帯が重なる端末がある。
     ホームにおいたアプリとして開いたときに起きる。
     そのぶんだけ、バーを下げておく。 */
  .hn-fullroom .hn-bar{
    padding-top:calc(10px + env(safe-area-inset-top, 0px));
  }
  .hn-fullroom .hn-wrap{
    flex:1 1 auto; min-height:0;
    display:flex; flex-direction:column;
    padding-bottom:0;

    /* 全画面のときは、必ず画面いっぱいの幅にする。
       ここは上下に並べる箱（flex）の中にあり、
       もとの「margin:0 auto」が効くと、
       中身の幅ぶんしか広がらなくなる。
       会話が少ないときほど細くなり、
       まわりに濃い色の余白が出ていた。 */
    width:100%; max-width:none;
    margin-left:0; margin-right:0;
    align-self:stretch;
  }
  .hn-fullroom #hn-s-msg{
    flex:1 1 auto; min-height:0;
    display:flex; flex-direction:column;
    padding-top:6px;
  }
  .hn-fullroom #hn-room{
    flex:1 1 auto; min-height:0;
    display:flex; flex-direction:column;
  }
  .hn-fullroom .hn-roomgrid{
    flex:1 1 auto; min-height:0;
    height:auto !important;
  }
  .hn-fullroom .hn-capbar{
    position:static; flex:0 0 auto;
    margin:0 -10px;
  }
  .hn-fullroom .hn-capfold{ top:-28px; }
  /* 画面いっぱいのときは、字幕バーのぶんの下余白はいらない */
  .hn-fullroom .hn-app{ padding-bottom:0; }
}

/* ホーム画面への追加の案内 */
.hn-steph{
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:calc(var(--fs) * 1.02); margin:14px 0 8px; color:var(--ink);
}
.hn-steps{
  margin:0 0 10px; padding-left:1.4em;
  display:flex; flex-direction:column; gap:8px;
  font-size:calc(var(--fs) * .95); line-height:1.7;
}
.hn-steps li{ padding-left:2px; }
#hn-installnow{ font-weight:700; color:var(--accent); }
#hn-installnow:empty{ display:none; }

/* 聞き取り中の「やめる」ボタン。始めた場所でそのまま止められるようにする。 */
.hn-listening{
  background:var(--cat2-bg) !important;
  border-color:var(--cat2) !important;
  color:var(--cat2) !important;
}
.hn-listening::before{
  content:""; width:12px; height:12px; border-radius:50%;
  background:currentColor; margin-right:2px;
  animation:hn-pulse 1.2s ease-in-out infinite;
}

/* ==========================================================
   全画面のあいだは、裏側のページを動かさない

   横にスライドしたとき、指の動きが裏のページにも伝わって
   ページがわずかに縦に動く。するとスマホのアドレスバーが
   伸び縮みして画面の高さが変わり、全画面のアプリごと
   上下にズレて見える。裏側を止めれば起きない。
   ========================================================== */
html.hn-lock, body.hn-lock{
  overflow:hidden !important;
  height:100% !important;
  overscroll-behavior:none;
}
/* touch-action は指定しない。ここで none にすると、
   中の会話の縦スクロールまで止まってしまう。 */
/* 中の枠から外へスクロールが伝わらないようにする */
.hn-fullroom .hn-msglist,
.hn-fullroom .hn-roomcol,
.hn-fullroom .hn-roomgrid{
  overscroll-behavior:contain;
}

/* 上のバーの 🏠。スマホで「はなす」にいるときだけ出す。 */
.hn-barhome{ display:none; }
@media (max-width:819px){
  .hn-fullroom .hn-barhome{
    display:inline-flex; flex:none;
    min-width:48px; min-height:48px; padding:2px 8px;
    font-size:calc(var(--fs) * 1.05);
  }
  /* 名前と合言葉の行は、上のバーとせっていに移したので出さない */
  .hn-fullroom .hn-roomhead{ display:none; }
  .hn-fullroom #hn-s-msg > .hn-backrow{ display:none; }
}

/* サイトへ戻るリンク（ページの見出しを隠しているため、ここから戻る） */
.hn-sitelink{ margin:6px 0 0; text-align:center; }
.hn-sitelink a{
  display:inline-block; min-height:56px; line-height:56px;
  padding:0 16px;
  color:var(--ink-2); font-size:calc(var(--fs) * .88); font-weight:700;
  text-decoration:underline;
}
.hn-sitelink a:focus-visible{ outline:5px solid var(--focus); outline-offset:3px; }
.hn-linkbtn{
  display:inline-block; min-height:56px; line-height:56px; padding:0 16px;
  background:none; border:0; cursor:pointer; font:inherit;
  color:var(--ink-2); font-size:calc(var(--fs) * .88); font-weight:700;
  text-decoration:underline;
}
.hn-linkbtn:focus-visible{ outline:5px solid var(--focus); outline-offset:3px; }
#hn-contactpanel textarea, #hn-contactpanel input[type="email"]{
  width:100%; padding:12px 14px; font:inherit; font-size:var(--fs);
  border:3px solid var(--line-strong); border-radius:12px;
  background:var(--surface); color:var(--ink);
}
#hn-contactpanel .hn-label{ margin-top:8px; }
#hn-contactpanel .hn-primary{ margin-top:10px; }

/* ==========================================================
   スマホ：トーク履歴と文字入力を「入れ替え」で切り替える

   横スクロールで2枚を並べる作りは、実機で指のスライドが
   ブラウザに横取りされ、動かないことがあった（2度直して2度とも不発）。
   スクロールに頼らず、片方だけを出す形にする。
   切り替えは、上のボタン・指のスライド・キーボードのどれでも同じ。
   ========================================================== */
@media (max-width:819px){
  .hn-roomgrid{
    display:block !important;
    overflow:visible !important;
    scroll-snap-type:none !important;
    height:auto !important;
  }
  .hn-roomcol{ display:none !important; width:auto !important; padding-right:0 !important; }
  #hn-room[data-pane="list"] .hn-roomcol-list,
  #hn-room[data-pane="write"] .hn-roomcol-write{
    display:flex !important;
    flex-direction:column;
    min-height:0;
  }
  /* 残りの高さいっぱいに広げる */
  .hn-fullroom #hn-room[data-pane] .hn-roomgrid{ flex:1 1 auto; min-height:0; display:flex !important; }
  .hn-fullroom #hn-room[data-pane] .hn-roomcol{ flex:1 1 auto; }
}

/* 指の動きの確認（せってい） */
#hn-swipeinfo{
  font-family:ui-monospace,"Consolas",monospace;
  font-size:calc(var(--fs) * .82); line-height:1.7;
  white-space:pre-wrap; word-break:break-all;
}

/* ==========================================================
   パソコンでも横幅を使い切る

   テーマが本文を645pxで止めていて、1440pxの画面でも
   アプリは645pxしか使えていなかった（左右795pxが空き）。
   スマホと同じ理由（:where() で強さが同じになり、
   あとに書かれたテーマ側が勝つ）なので、同じように強さを上げる。
   ========================================================== */
@media (min-width:900px){
  .hn-app.hn-app{ max-width:none !important; width:auto !important; }
  .hn-wrap{ max-width:1320px; }
  .hn-bar{ max-width:1320px; }
  .hn-capline{ max-width:1292px; }
  /* 書く欄の幅は決め打ちにしない。
     440pxに固定したところ「前のほうが広くて見やすかった」との声があった。
     窓が広いほど書く欄も広がるようにして、
     狭い窓でも420pxは確保する。上は620pxで止める
     （これ以上広げると、一行が長くなりすぎて読みにくい）。 */
  .hn-roomgrid{
    grid-template-columns:minmax(0,1fr) clamp(420px, 34vw, 620px);
    gap:26px;
  }
  .hn-msglist{ max-height:calc(100vh - 260px); }
  /* 書く欄そのものも、空いた高さぶん広げる */
  .hn-roomgrid #hn-text{ min-height:220px; }
}
@media (min-width:1500px){
  .hn-wrap{ max-width:1560px; }
  .hn-bar{ max-width:1560px; }
  .hn-capline{ max-width:1532px; }
  .hn-roomgrid #hn-text{ min-height:280px; }
}

/* ==========================================================
   指の横の動きを、ブラウザに横取りさせない

   実機で「指は拾えているのに、動きが3pxで止まる」という
   報告があった。これは、指が動き出した瞬間にブラウザが
   その動きをスクロールとして自分のものにしてしまい、
   こちらへの通知がそこで細るために起きる。

   pan-y は「縦のスクロールはブラウザに任せ、横は渡さない」
   という指定。pinch-zoom を併記してあるので、
   指二本での拡大はこれまでどおりできる。
   横に並べて出すパソコンの幅では要らないので、
   スマホの幅のときだけにしてある。
   ========================================================== */
@media (max-width:819px){
  #hn-s-msg,
  #hn-s-msg .hn-roomgrid,
  #hn-s-msg .hn-roomcol,
  #hn-s-msg .hn-msglist{
    touch-action:pan-y pinch-zoom;
  }
}

/* ==========================================================
   訳した言葉の下に、書かれたそのままの文を残す

   訳は必ずしも正しくない。
   元の文が消えてしまうと、間違いに気づけなくなる。
   小さく、薄く、しかし読める大きさで並べる。
   ========================================================== */
.hn-orig{
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed var(--line, #cfd8d2);
  font-size:calc(var(--fs) * .82);
  opacity:.78;
  white-space:pre-wrap;
}

/* 合言葉の場で画面いっぱいに使っているときは、
   「字幕をひろげる」のつまみを出さない。
   このとき字幕バーは位置の基準を持たないので、
   つまみだけが画面の外（上）へ飛んでしまい、
   目には見えないのにキーボードでは選べる状態になっていた。 */
.hn-fullroom .hn-capfold{ display:none !important; }

/* 聞き取りの記録。写して渡してもらうための欄。 */
.hn-log{
  width:100%; box-sizing:border-box;
  font-family:ui-monospace,"Consolas",monospace;
  font-size:calc(var(--fs) * .78); line-height:1.6;
  border:2px solid var(--line); border-radius:10px;
  padding:8px 10px; background:var(--surface); color:var(--ink);
  white-space:pre; overflow:auto;
}

/* ホーム下の版の表示 */
.hn-ver { text-align: center; opacity: .8; }

/* ==========================================================
   主催者の操作（1.13.53）：場を開いた人にだけ出る。たたんだ状態が初期。
   ========================================================== */
.hn-hostbox{
  margin:12px 0 0; padding:10px 14px;
  background:var(--surface); border:3px solid var(--line); border-radius:12px;
  color:var(--ink);
}
.hn-hostbox[hidden]{ display:none !important; }
.hn-hostbox > summary{
  cursor:pointer; min-height:44px; display:flex; align-items:center;
  font-weight:700; font-size:calc(var(--fs) * .92);
}
.hn-hostbox > summary:focus-visible{ outline:5px solid var(--focus); outline-offset:3px; }
.hn-hostnote{ color:var(--ink-2); font-size:calc(var(--fs) * .84); line-height:1.7; margin:6px 0 0; }
.hn-hostbtns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.hn-hostbtns .hn-btn{ flex:1 1 200px; min-height:56px; }
.hn-hostbtns .hn-btn[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.hn-hostlist{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.hn-hostlist[hidden]{ display:none !important; }
.hn-hostlist li{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border:2px solid var(--line); border-radius:10px;
}
.hn-hostlist .hn-hostwho{ flex:1; min-width:0; overflow-wrap:anywhere; font-weight:700; }
.hn-hostlist .hn-btn{ min-height:48px; }