:root{--bg:#efefef;--text:#0b0b0b;--muted:#6f6f6f;--line:rgba(0,0,0,.08);--shadow:0 18px 40px rgba(0,0,0,.08);--radius:24px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif}
body{min-height:100vh;overflow-x:hidden;overflow-x:clip}
.pageFade{opacity:1;transition:opacity 5s ease;will-change:opacity}
.returnOverlay{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:9999;transition:opacity 5s ease;will-change:opacity}
html.return-fade-pending #pageFade{opacity:0.08}
html.return-fade-pending #returnOverlay{opacity:1}
.wrap{width:min(1400px,calc(100% - 24px));margin:auto;padding:18px 0 26px}
.logo{display:block;width:max-content;margin:0 auto;text-align:center;font-size:128px;font-weight:300;line-height:1;letter-spacing:.02em;transform:scaleX(1.1);transform-origin:center center;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif}
.langTop{display:flex;justify-content:center;gap:8px;margin:8px auto 14px;flex-wrap:wrap}
.langTop .langBtn{appearance:none;-webkit-appearance:none;border:1px solid rgba(0,0,0,.16);background:#fff;color:#111;border-radius:12px;padding:8px 12px;font-size:13px;line-height:1;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease,opacity .15s ease}
.langTop .langBtn:hover{transform:translateY(-1px)}
.heroLead{text-align:center;color:#4f4f4f;margin:0 auto 14px;font-size:16px;letter-spacing:.06em}
.sub{text-align:center;color:var(--muted);margin:0 auto 28px;font-size:15px;line-height:1.9;max-width:720px}
.sub .catch{display:block;color:#202020;font-size:20px;font-weight:500;margin-bottom:12px}
html[lang="en"] .sub{max-width:860px;line-height:1.8}
html[lang="en"] .sub .catch{font-size:18px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.topbarLeft{display:flex;align-items:center;gap:12px;min-width:0}
.topbar h2{margin:0}
.sectionControls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-2px 0 14px;flex-wrap:wrap}
.viewToggle{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:14px;padding:4px}
.viewBtn{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:#111;border-radius:10px;padding:8px 12px;font-size:13px;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease}
.viewBtn:hover{transform:translateY(-1px)}
.viewBtn.active{background:#141414;color:#fff}
.searchWrap{flex:1;min-width:min(320px,100%);display:flex;justify-content:flex-end}
.searchInput{width:min(420px,100%);border:1px solid rgba(0,0,0,.14);background:#fff;color:#111;border-radius:14px;padding:12px 14px;font-size:14px;outline:none}
.searchInput::placeholder{color:#7a7a7a}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{border-radius:var(--radius);color:#fff;padding:16px;display:flex;flex-direction:column;min-height:240px;box-shadow:var(--shadow)}
.card-main{background:#3a3a3a}
.card-solo{background:#4a4a4a}
.card-midnight{background:#16213b}
.card-chat{background:#2c2c2c}
.card-user{background:#575757}
.roomName{font-size:26px;font-weight:300;margin:0 0 6px}
.desc{font-size:13px;color:rgba(255,255,255,.8);margin-bottom:14px}
html[lang="en"] .roomName{font-size:24px;line-height:1.2;min-height:2.4em}
html[lang="en"] .desc{line-height:1.45;min-height:2.9em}
.meta{margin-top:auto;background:rgba(255,255,255,.1);padding:8px 10px;border-radius:14px;font-size:13px}
.enterBtn,.createBtn,.modalActions button{border:0;cursor:pointer}
.enterBtn{margin-top:12px;background:#fff;color:#000;border-radius:16px;padding:12px;font-size:20px}
.createBtn{background:#141414;color:#fff;border-radius:14px;padding:10px 16px;font-size:14px;white-space:nowrap}
.createBtn:disabled{opacity:.45;cursor:not-allowed}
.cooldownText{font-size:13px;color:var(--muted);text-align:right}
.list{display:flex;flex-direction:column;gap:8px}
.listItem{display:grid;grid-template-columns:8px minmax(0,1fr) auto auto;align-items:center;gap:12px;min-height:58px;border-radius:18px;padding:10px 14px;background:#fff;color:#111;border:1px solid rgba(0,0,0,.08);box-shadow:0 8px 20px rgba(0,0,0,.05)}
.listItem.card-main{background:#3a3a3a;color:#fff;border-color:rgba(255,255,255,.06)}
.listItem.card-solo{background:#4a4a4a;color:#fff;border-color:rgba(255,255,255,.06)}
.listItem.card-midnight{background:#16213b;color:#fff;border-color:rgba(255,255,255,.06)}
.listItem.card-chat{background:#2c2c2c;color:#fff;border-color:rgba(255,255,255,.06)}
.listItem.card-user{background:#575757;color:#fff;border-color:rgba(255,255,255,.06)}
.listAccent{width:8px;height:100%;min-height:38px;border-radius:999px;background:#575757}
.listItem.card-main .listAccent,.listItem.card-solo .listAccent,.listItem.card-chat .listAccent,.listItem.card-user .listAccent{background:rgba(255,255,255,.80)}
.listItem.card-midnight .listAccent{background:rgba(255,255,255,.92)}
.listMain{min-width:0}
.listTitleRow{display:flex;align-items:center;gap:8px;min-width:0}
.listName{margin:0;font-size:16px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#111}
.listItem.card-main .listName,.listItem.card-solo .listName,.listItem.card-midnight .listName,.listItem.card-chat .listName,.listItem.card-user .listName{color:#fff}
.listToggle{display:none;appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;padding:0;margin:0;width:18px;height:18px;flex:0 0 auto;cursor:pointer;opacity:.82;font-size:12px;line-height:1}
.listItem.open .listToggle{transform:rotate(180deg)}
.listDesc{display:block;font-size:12px;color:#6a6a6a;margin:4px 0 0;line-height:1.4}
.listItem.card-main .listDesc,.listItem.card-solo .listDesc,.listItem.card-midnight .listDesc,.listItem.card-chat .listDesc,.listItem.card-user .listDesc{color:rgba(255,255,255,.78)}
.listMeta{min-width:auto;text-align:right;font-size:13px;line-height:1.2;color:#5f5f5f;background:transparent;padding:0;border-radius:0;white-space:nowrap}
.listItem.card-main .listMeta,.listItem.card-solo .listMeta,.listItem.card-midnight .listMeta,.listItem.card-chat .listMeta,.listItem.card-user .listMeta{color:rgba(255,255,255,.82)}
.listEnterBtn{border:0;cursor:pointer;background:#141414;color:#fff;border-radius:999px;padding:8px 12px;font-size:13px;line-height:1;white-space:nowrap}
.resultMeta{font-size:13px;color:var(--muted);text-align:right}
.loading,.empty{text-align:center;padding:30px}
/* TOP common empty state: occupy the entire responsive row, never one card column. */
.roomSectionBody .grid > .empty,
.roomSectionBody .list > .empty{
  grid-column:1 / -1;
  width:100%;
  min-width:0;
}
.sectionGap{height:18px}
.modalOverlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:16px;z-index:10000}
.modalOverlay.show{display:flex}
.modal{width:min(520px,100%);background:#fff;border-radius:24px;box-shadow:0 22px 60px rgba(0,0,0,.18);padding:20px;color:#111}
.modalTitle{margin:0 0 8px;font-size:24px;font-weight:500}
.modalSub{margin:0 0 18px;color:#666;font-size:14px;line-height:1.7}
.formRow{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.formRow label,.formLabelLike{font-size:13px;color:#4b4b4b}
.formRow input,.formRow select{width:100%;border:1px solid rgba(0,0,0,.14);border-radius:14px;padding:12px 14px;font-size:15px;outline:none;background:#fff}
.formNote{font-size:12px;color:#777;line-height:1.6;margin-top:-4px}
.createRoomTwoCol{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.createRoomTwoCol .formRow{margin-bottom:0}
.roomModeChoices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.roomModeChoice{position:relative;display:block;cursor:pointer}
.roomModeChoice input{position:absolute;opacity:0;pointer-events:none}
.roomModeCard{min-height:66px;padding:11px 12px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:#fff;display:flex;flex-direction:column;gap:5px;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .15s ease}
.roomModeChoice:hover .roomModeCard{transform:translateY(-1px)}
.roomModeChoice input:checked + .roomModeCard{border-color:rgba(52,145,84,.58);background:rgba(238,250,242,.95);box-shadow:0 8px 18px rgba(52,145,84,.12),inset 0 0 0 1px rgba(52,145,84,.28)}
.roomModeChoice input:focus-visible + .roomModeCard{outline:2px solid rgba(52,145,84,.32);outline-offset:2px}
.roomModeTitle{font-size:14px;font-weight:800;line-height:1.25;color:#111}
.roomModeDesc{font-size:12px;line-height:1.35;color:#666}
@media(max-width:640px){.createRoomTwoCol{grid-template-columns:1fr 1fr;gap:10px}
.roomModeChoices{grid-template-columns:1fr 1fr;gap:8px}
.roomModeCard{min-height:58px;padding:10px 10px}
.roomModeTitle{font-size:13px}
.roomModeDesc{font-size:11px;line-height:1.35}
}
.modalError{display:none;margin:4px 0 14px;color:#b30000;font-size:13px;line-height:1.6}
.modalError.show{display:block}
.modalActions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.cancelBtn{background:#ececec;color:#111;border-radius:14px;padding:11px 16px;font-size:14px}
.submitBtn{background:#141414;color:#fff;border-radius:14px;padding:11px 18px;font-size:14px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}
.logo{font-size:90px;transform:scaleX(1.08)}
}
@media (max-width:640px){.grid{grid-template-columns:1fr}
.logo{font-size:68px;transform:scaleX(1.06);font-family:Arial,"Helvetica Neue",Helvetica,sans-serif}
.langTop{gap:6px;margin:6px auto 12px}
.langTop .langBtn{font-size:12px;padding:7px 10px}
.heroLead{font-size:14px;margin:0 auto 12px;letter-spacing:.04em}
.sub{margin:0 auto 20px;padding:0 10px;font-size:14px;line-height:1.85;max-width:100%}
.sub .catch{font-size:18px;margin-bottom:10px}
html[lang="en"] .sub{max-width:100%;font-size:13px;line-height:1.72}
html[lang="en"] .sub .catch{font-size:17px}
.topbar{align-items:flex-start}
.topbarLeft{flex-wrap:wrap;gap:10px}
.sectionControls{align-items:stretch;gap:10px}
.viewToggle{width:100%;justify-content:space-between}
.viewBtn{flex:1}
.searchWrap{width:100%;min-width:0}
.searchInput{width:100%}
.resultMeta{text-align:left}
.cooldownText{font-size:12px}
.list{gap:7px}
.listItem{grid-template-columns:6px minmax(0,1fr) auto auto;gap:8px;min-height:50px;padding:8px 10px;border-radius:16px}
.listAccent{width:6px;min-height:30px}
.listMain{min-width:0}
.listTitleRow{gap:6px}
.listName{font-size:14px}
.listToggle{display:inline-flex;align-items:center;justify-content:center}
.listDesc{display:none;margin-top:6px;font-size:11px;line-height:1.35}
.listItem.open{align-items:flex-start}
.listItem.open .listDesc{display:block}
.listItem.open{grid-template-columns:6px minmax(0,1fr) auto;grid-template-areas:"accent main button"
"accent main button"
". meta button";row-gap:6px}
.listItem:not(.open){grid-template-areas:"accent main meta button"}
.listAccent{grid-area:accent}
.listMain{grid-area:main}
.listMeta{grid-area:meta;font-size:12px;text-align:right}
.listEnterBtn{grid-area:button;padding:7px 10px;font-size:12px}
.listItem:not(.open) .listMeta{text-align:right}
.listItem:not(.open) .listDesc{display:none !important}
.modal{padding:18px 16px;border-radius:20px}
.modalTitle{font-size:21px}
.modalActions{flex-direction:column-reverse}
.cancelBtn,.submitBtn{width:100%}
html[lang="en"] .roomName{font-size:22px;min-height:2.4em}
html[lang="en"] .desc{min-height:2.9em}
}
@media (min-width:641px){.list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;align-items:start}
.listItem{grid-template-columns:8px minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:64px;padding:10px 12px;border-radius:16px}
.listAccent{width:8px;min-height:42px;height:42px;align-self:center}
.listMain{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.listNameWrap{display:flex;align-items:center;gap:8px;min-width:0}
.listName{font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listToggleBtn{flex:0 0 auto;width:22px;height:22px;border:0;background:transparent;color:inherit;opacity:.9;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:11px;line-height:1}
.listDesc{display:block;margin-top:0;font-size:12px;line-height:1.2;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.listMeta{min-width:auto;text-align:right;font-size:12px;line-height:1.2;white-space:nowrap}
.listEnterBtn{width:auto;padding:7px 11px;font-size:12px;border-radius:999px;white-space:nowrap}
}
.officialRoomsBar{display:flex;align-items:center;justify-content:flex-start;gap:14px}
.officialRoomsBar .topbarLeft{min-width:0}
.officialRoomsBar h2{white-space:nowrap}
.officialRoomsBar #roomCountText{margin-left:0;white-space:nowrap}
.userRoomsBar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.userRoomsBar .topbarLeft{display:flex;align-items:center;gap:12px;min-width:0}
.userRoomsBar h2{white-space:nowrap}
.userRoomsBar .searchWrap{flex:1;min-width:320px;display:flex;justify-content:stretch}
.userRoomsBar .searchInput{width:100%;max-width:none}
.userRoomsBar .userRoomsMeta{margin-left:auto;text-align:right;white-space:nowrap}
.sectionControlsCompact{margin:6px 0 12px}
.sectionControlsCompact .searchWrap{display:none !important}
.sectionControlsCompact .viewToggle{display:none !important}
@media (max-width:640px){.officialRoomsBar{align-items:flex-start;gap:10px;flex-wrap:wrap}
.officialRoomsBar #roomCountText{margin-left:0}
.userRoomsBar{align-items:flex-start;gap:10px 12px}
.userRoomsBar .topbarLeft{width:100%;flex-wrap:wrap;gap:10px}
.userRoomsBar .searchWrap{width:100%;min-width:0;order:3}
.userRoomsBar .userRoomsMeta{margin-left:auto;text-align:right}
}
.officialRoomsBar{display:flex;align-items:center;gap:14px}
.officialRoomsBar #roomCountText{margin-left:auto}
@media (max-width:640px){.officialRoomsBar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}
.officialRoomsBar .topbarLeft{min-width:0}
.officialRoomsBar h2{font-size:18px;line-height:1.1;white-space:nowrap}
.officialRoomsBar .viewToggle{width:auto;justify-self:center;padding:3px;gap:4px;border-radius:12px}
.officialRoomsBar .viewBtn{flex:none;padding:7px 12px;font-size:12px;border-radius:9px;min-width:72px}
.officialRoomsBar #roomCountText{margin-left:0;justify-self:end;font-size:12px;white-space:nowrap}
.userRoomsBar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px 10px}
.userRoomsBar .topbarLeft{display:contents}
.userRoomsBar h2{grid-column:1 / 3;grid-row:1;font-size:18px;line-height:1.1;white-space:nowrap;margin:0}
.userRoomsBar .userRoomsMeta{grid-column:3;grid-row:1;margin-left:0;justify-self:end;text-align:right;white-space:nowrap;font-size:12px}
.userRoomsBar #createRoomBtn{grid-column:1;grid-row:2;width:auto;justify-self:start;padding:10px 16px;font-size:14px;border-radius:14px}
.userRoomsBar .searchWrap{grid-column:2 / 4;grid-row:2;width:100%;min-width:0;order:unset}
.userRoomsBar .searchInput{width:100%;max-width:none}
}
@media (max-width:640px){.listTitleRow{gap:4px}
.listName{font-size:15px;line-height:1.15}
.listToggle{width:14px;height:14px;font-size:10px;opacity:.9}
.listItem:not(.open){grid-template-columns:6px minmax(0,1fr) auto auto}
.listMeta{font-size:11px;letter-spacing:0}
.listEnterBtn{padding:7px 8px;font-size:12px;min-width:64px}
}
@media (max-width:640px){.listMeta{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;min-width:70px;font-size:11px;line-height:1.05;white-space:nowrap}
.listMetaTop,.listMetaBottom{display:block}
.listEnterBtn{align-self:center;display:inline-flex;align-items:center;justify-content:center}
}
@media (max-width:640px){.listItem{align-items:center !important}
.listMeta{align-self:center}
.listEnterBtn{align-self:center !important;justify-self:center !important;height:32px;min-height:32px;line-height:1;margin:0}
}
.listItem.open .listName{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.listItem.open .listDesc{display:block !important}
@media (min-width:641px){.listItem{align-items:center !important}
.listMeta{align-self:center;line-height:1.2}
.listEnterBtn{align-self:center !important;display:inline-flex;align-items:center;justify-content:center;margin:0}
}
.enterBtn{background:#fff !important;color:#000 !important;border:1px solid rgba(0,0,0,0.15)}
.enterBtn:hover{background:#f3f3f3 !important}
.rooomInAppNotice{position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-16px);width:min(420px,calc(100% - 28px));background:rgba(20,20,20,.94);color:#fff;border-radius:18px;padding:12px 14px;box-shadow:0 18px 42px rgba(0,0,0,.24);z-index:20000;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.rooomInAppNotice.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.rooomInAppNoticeTitle{font-size:13px;font-weight:700;line-height:1.2;margin-bottom:4px}
.rooomInAppNoticeBody{font-size:13px;line-height:1.35;opacity:.92}
.rooomInAppNoticeHint{font-size:11px;line-height:1.2;opacity:.72;margin-top:6px}
@media (max-width:640px){.rooomInAppNotice{top:10px;border-radius:16px;padding:11px 13px}
}
.topRefreshHeader{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 16px;padding:12px 0 8px}
.topRefreshLogo{display:block;flex:0 0 auto;color:#111;text-decoration:none;font-size:44px;font-weight:300;letter-spacing:.02em;line-height:1;transform:scaleX(1.08);transform-origin:left center;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif}
.topRefreshRight{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0;flex:1}
.topRefreshNav{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.topRefreshNavLink,.topRefreshMenuBtn{appearance:none;-webkit-appearance:none;border:1px solid rgba(0,0,0,.10);background:#fff;color:#222;border-radius:999px;padding:9px 13px;font-size:13px;line-height:1;text-decoration:none;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.04)}
.topRefreshMenuBtn{min-width:38px;font-size:18px;padding:7px 12px}
.topRefreshSearch{width:min(360px,38vw);min-width:220px}
.topRefreshSearch .searchInput{width:100%;max-width:none;border-radius:999px;padding:11px 14px}
.topRefreshCreate{flex:0 0 auto;border-radius:999px;padding:11px 16px}
.topRefreshHero{text-align:center;margin:4px auto 14px}
.topRefreshLead{margin:0;color:#161616;font-size:24px;font-weight:700;line-height:1.35;letter-spacing:.02em}
.topRefreshSub{margin:8px auto 0;color:#666;font-size:13px;line-height:1.6}
.topRefreshLang{margin:12px auto 14px}
.topRefreshNotice{width:min(820px,100%);margin:0 auto 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.08);border-radius:18px;box-shadow:0 10px 24px rgba(0,0,0,.055)}
.topRefreshNoticeMain{min-width:0}
.topRefreshNoticeTitle{font-size:14px;color:#161616;font-weight:700;line-height:1.35}
.topRefreshNoticeText{margin-top:2px;font-size:12px;color:#666;line-height:1.35}
.topRefreshNoticeBtn{appearance:none;-webkit-appearance:none;border:1px solid rgba(0,0,0,.12);background:#141414;color:#fff;border-radius:999px;padding:8px 13px;font-size:12px;line-height:1;cursor:pointer;white-space:nowrap}
.topRefreshNoticeBtn:disabled{opacity:.55;cursor:not-allowed}
.pwaStepBadge{display:inline-flex;align-items:center;gap:6px;margin-top:5px;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.055);color:#444;font-size:11px;line-height:1}
.topRefreshNoticeText:empty{display:none}
.pwaStepBadge:empty{display:none}
.pwaSuccessNote{margin-top:6px;font-size:12px;line-height:1.55;color:#555}
.pwaBannerDone{border-color:rgba(24,150,74,.22);background:rgba(255,255,255,.82)}
.pwaGuideOverlay{position:fixed;inset:0;z-index:30000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.45)}
.pwaGuideOverlay.show{display:flex}
.pwaGuideModal{width:min(520px,100%);background:#fff;color:#111;border-radius:24px;padding:22px;box-shadow:0 24px 80px rgba(0,0,0,.25)}
.pwaGuideTitle{margin:0 0 8px;font-size:22px;line-height:1.35}
.pwaGuideLead{margin:0 0 16px;color:#666;font-size:14px;line-height:1.65}
.pwaGuideSteps{display:flex;flex-direction:column;gap:10px;margin:0 0 18px}
.pwaGuideStep{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:16px;background:#f5f5f5;font-size:14px;line-height:1.55}
.pwaGuideStepNum{flex:0 0 auto;width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#111;color:#fff;font-size:12px;font-weight:700}
.iosShareIconSvg{display:inline-block;width:22px;height:22px;margin:0 5px;vertical-align:-5px;color:#111;stroke:currentColor;stroke-width:1.85;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pwaGuideActions{display:flex;justify-content:flex-end;gap:10px}
.pwaGuideBtn{appearance:none;-webkit-appearance:none;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:10px 16px;background:#111;color:#fff;cursor:pointer}
.pwaGuideBtnSub{background:#eee;color:#111}
@media (max-width:640px){.pwaGuideModal{padding:19px 16px;border-radius:22px}
.pwaGuideTitle{font-size:20px}
.pwaGuideActions{flex-direction:column-reverse}
.pwaGuideBtn{width:100%}
}
.topRefreshSectionLead{margin:-6px 0 12px;color:#777;font-size:13px;line-height:1.5}
@media (max-width:820px){.topRefreshHeader{display:grid;grid-template-columns:auto auto;align-items:center;gap:10px}
.topRefreshLogo{font-size:38px}
.topRefreshRight{display:grid;grid-template-columns:1fr auto auto;grid-column:1 / -1;width:100%;gap:8px}
.topRefreshNav{grid-column:2 / 3;grid-row:1;justify-content:flex-end}
.topRefreshNavLink{display:none}
.topRefreshMenuBtn{grid-column:3 / 4}
.topRefreshSearch{grid-column:1 / 2;width:100%;min-width:0}
.topRefreshCreate{grid-column:2 / 4;white-space:nowrap;padding:11px 13px}
.topRefreshLead{font-size:20px}
.topRefreshSub{font-size:12px}
.topRefreshNotice{align-items:flex-start;border-radius:16px;padding:10px 11px}
.topRefreshNoticeTitle{font-size:13px}
.topRefreshNoticeText{font-size:11px}
}
@media (max-width:640px){.wrap{padding-top:10px}
.topRefreshHeader{margin-bottom:12px}
.topRefreshLogo{font-size:34px}
.topRefreshHero{margin-top:2px}
.topRefreshLang{margin:10px auto 12px}
.topRefreshNotice{margin-bottom:18px}
.topRefreshNoticeBtn{padding:8px 11px}
}
.topRefreshSearch,.topRefreshCreate{display:none !important}
.topRefreshRight{justify-content:flex-end !important}
.topRefreshNav{display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:8px !important;flex-wrap:nowrap !important}
.topRefreshLangMini{display:flex !important;align-items:center !important;gap:8px !important;flex:0 0 auto !important}
.topRefreshLangBtn{appearance:none !important;-webkit-appearance:none !important;width:44px !important;height:34px !important;padding:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;text-align:center !important;border:1px solid rgba(0,0,0,.10) !important;background:#fff !important;color:#222 !important;border-radius:999px !important;font-size:13px !important;line-height:1 !important;cursor:pointer !important;box-shadow:0 8px 18px rgba(0,0,0,.04) !important}
.topRefreshLangBtn.active,.topRefreshLangBtn[aria-pressed="true"]{background:#141414 !important;color:#fff !important}
.userRoomsBar{display:flex !important;align-items:center !important;gap:14px !important;flex-wrap:wrap !important}
.userRoomsBar .topbarLeft{display:flex !important;align-items:center !important;gap:12px !important;flex:0 0 auto !important;min-width:0 !important}
.userRoomsBar .searchWrap{flex:1 1 auto !important;min-width:320px !important;display:flex !important;justify-content:stretch !important}
.userRoomsBar .searchInput{width:100% !important;max-width:none !important;border-radius:999px !important}
.userRoomsBar .userRoomsMeta{margin-left:auto !important;text-align:right !important;white-space:nowrap !important}
@media (max-width:820px){.topRefreshHeader{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important}
.topRefreshRight{display:flex !important;justify-content:flex-end !important;width:auto !important;flex:1 !important}
.topRefreshNavLink{display:none !important}
.topRefreshLangMini{gap:5px !important}
.topRefreshLangBtn{width:40px !important;height:32px !important;font-size:12px !important}
}
@media (max-width:640px){.topRefreshLangMini{display:none !important}
.userRoomsBar{display:grid !important;grid-template-columns:auto 1fr auto !important;align-items:center !important;gap:10px !important}
.userRoomsBar .topbarLeft{grid-column:1 / 3 !important;grid-row:1 !important;display:flex !important;align-items:center !important;gap:10px !important}
.userRoomsBar .searchWrap{grid-column:1 / 4 !important;grid-row:2 !important;width:100% !important;min-width:0 !important}
.userRoomsBar .userRoomsMeta{grid-column:3 !important;grid-row:1 !important;justify-self:end !important}
}
.topRefreshBrand{display:flex;align-items:flex-end;gap:12px;min-width:0}
.topRefreshTagline{color:#666;font-size:14px;line-height:1;margin-bottom:8px;white-space:nowrap}
.topRefreshHero{display:none !important}
@media (max-width:640px){.topRefreshBrand{gap:8px}
.topRefreshTagline{font-size:11px;margin-bottom:5px}
}
.conceptModalOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.42);z-index:30000}
.conceptModalOverlay.show{display:flex}
.conceptModalBox{width:min(640px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;color:#111;border-radius:24px;padding:26px 24px;box-shadow:0 28px 80px rgba(0,0,0,.24);text-align:center}
.conceptModalTitle{margin:0 0 12px;font-size:22px;line-height:1.45;font-weight:700}
.conceptModalLead{margin:0 0 16px;color:#555;font-size:14px;line-height:1.9}
.conceptModalBody{color:#666;font-size:14px;line-height:1.9}
.conceptModalClose{margin-top:20px;appearance:none;-webkit-appearance:none;border:0;background:#141414;color:#fff;border-radius:999px;padding:10px 22px;font-size:14px;cursor:pointer}
@media (max-width:640px){.conceptModalBox{border-radius:20px;padding:22px 18px}
.conceptModalTitle{font-size:19px}
.conceptModalBody{font-size:13px}
}
.howtoModalOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.42);z-index:30001}
.howtoModalOverlay.show{display:flex}
.howtoModalBox{position:relative;width:min(1040px,calc(100vw - 44px));height:min(650px,calc(100vh - 54px));overflow:hidden;border-radius:30px;background:#f7f8fb;color:#111;box-shadow:0 30px 90px rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.72);isolation:isolate}
.howtoPill{position:absolute;left:20px;top:20px;z-index:8;display:inline-flex;align-items:center;justify-content:center;height:34px;min-width:76px;padding:0 17px;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 10px 28px rgba(0,0,0,.10);font-size:14px;font-weight:900;line-height:1}
.howtoCounter{position:absolute;left:28px;top:62px;z-index:7;display:inline-flex;align-items:center;justify-content:center;min-width:62px;height:30px;padding:0 12px;border-radius:999px;background:rgba(0,0,0,.86);color:#fff;font-size:12px;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.16)}
.howtoModalCloseIcon{position:absolute;right:20px;top:18px;z-index:9;width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#111;box-shadow:0 10px 28px rgba(0,0,0,.10);font-size:27px;font-weight:800;line-height:1;cursor:pointer}
.howtoViewport{position:absolute;inset:0;z-index:1;overflow:hidden;touch-action:pan-y}
.howtoTrack{height:100%;display:flex;transform:translateX(0%);transition:transform .34s cubic-bezier(.22,.72,.18,1);will-change:transform}
.howtoSlide{position:relative;min-width:100%;height:100%;padding:86px 60px 84px;display:grid;grid-template-columns:.92fr 1.08fr;gap:34px;align-items:center;overflow:hidden;background:radial-gradient(circle at 16% 18%,#fff 0 13%,transparent 34%),radial-gradient(circle at 80% 12%,rgba(204,212,229,.7),transparent 34%),linear-gradient(135deg,#fff 0 46%,#e4e8f0 46% 58%,#fff 58% 100%)}
.howtoSlideDark{background:radial-gradient(circle at 80% 20%,rgba(255,202,126,.20),transparent 30%),radial-gradient(circle at 62% 82%,rgba(121,87,255,.30),transparent 36%),linear-gradient(160deg,#101827 0%,#08101f 100%);color:#fff}
.howtoSlideNight{background:radial-gradient(circle at 78% 72%,rgba(151,75,255,.40),transparent 32%),radial-gradient(circle at 90% 88%,rgba(255,174,93,.24),transparent 24%),linear-gradient(180deg,#07132c 0%,#111d48 58%,#39264d 100%);color:#fff}
.howtoSlideArchive{background:radial-gradient(circle at 16% 14%,#fff 0 16%,transparent 32%),radial-gradient(circle at 75% 36%,rgba(177,224,139,.34),transparent 34%),linear-gradient(145deg,#f9fbf4 0%,#edf6e2 100%);color:#0d1511}
.howtoSlideEnd{background:radial-gradient(circle at 76% 26%,rgba(255,255,255,.18),transparent 30%),radial-gradient(circle at 62% 82%,rgba(156,91,255,.28),transparent 36%),linear-gradient(180deg,#07142d 0%,#101c44 58%,#382447 100%);color:#fff}
.howtoCopy{position:relative;z-index:2;max-width:430px}
.howtoEyebrow{display:inline-flex;align-items:center;justify-content:center;min-width:74px;height:30px;margin:0 0 16px;padding:0 13px;border-radius:999px;background:rgba(13,19,32,.12);font-size:12px;font-weight:900;letter-spacing:.05em}
.howtoSlideDark .howtoEyebrow,.howtoSlideNight .howtoEyebrow,.howtoSlideEnd .howtoEyebrow{background:rgba(255,255,255,.18)}
.howtoBigTitle{display:inline;margin:0;font-size:clamp(37px,4.2vw,58px);line-height:1.08;font-weight:950;letter-spacing:-.06em;background:linear-gradient(transparent 58%,rgba(255,226,87,.78) 58% 84%,transparent 84%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.howtoSlideDark .howtoBigTitle,.howtoSlideNight .howtoBigTitle,.howtoSlideEnd .howtoBigTitle{background:linear-gradient(transparent 58%,rgba(146,92,255,.86) 58% 84%,transparent 84%)}
.howtoSlideArchive .howtoBigTitle{background:linear-gradient(transparent 58%,rgba(113,215,123,.65) 58% 84%,transparent 84%)}
.howtoText{margin:22px 0 0;color:rgba(13,19,32,.70);font-size:17px;line-height:1.95;font-weight:650}
.howtoSlideDark .howtoText,.howtoSlideNight .howtoText,.howtoSlideEnd .howtoText{color:rgba(255,255,255,.86)}
.howtoBadges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.howtoBadge{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 15px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.70);box-shadow:0 10px 22px rgba(0,0,0,.06);color:#111;font-size:14px;font-weight:900;white-space:nowrap}
.howtoSlideDark .howtoBadge,.howtoSlideNight .howtoBadge,.howtoSlideEnd .howtoBadge{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.howtoVisual{position:relative;z-index:2;min-height:360px;display:flex;align-items:center;justify-content:center}
.howtoPhone{width:min(420px,100%);min-height:430px;border-radius:36px;background:linear-gradient(180deg,#111827,#060b15);box-shadow:0 30px 70px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.16);padding:26px;transform:rotate(4deg)}
.howtoPhoneHeader{display:flex;justify-content:space-between;align-items:center;color:#fff;margin-bottom:18px}
.howtoPhoneLogo{font-size:24px;font-weight:900;letter-spacing:-.03em}
.howtoPhoneBell{color:#ffcf4a}
.howtoTabs{display:flex;gap:18px;color:rgba(255,255,255,.72);font-size:13px;font-weight:800;margin-bottom:14px}
.howtoTabs span:first-child{color:#fff;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:7px;text-decoration-color:#8c5cff}
.howtoRoomCard{margin:13px 0;padding:20px 18px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.14);color:#fff}
.howtoRoomCard.active{border-color:rgba(142,88,255,.70);box-shadow:0 0 0 2px rgba(142,88,255,.22) inset}
.howtoRoomName{font-size:22px;font-weight:950;line-height:1.15}
.howtoRoomDesc{margin-top:6px;color:rgba(255,255,255,.68);font-size:13px;line-height:1.4}
.howtoRoomMeta{display:flex;gap:14px;margin-top:14px;color:rgba(255,255,255,.72);font-size:13px;font-weight:800}
.howtoChatMock{width:min(440px,100%);min-height:430px;border-radius:34px;padding:28px;background:rgba(3,9,20,.48);border:1px solid rgba(255,255,255,.13);box-shadow:0 32px 80px rgba(0,0,0,.28);backdrop-filter:blur(10px)}
.howtoChatTop{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:15px;font-weight:900;margin-bottom:34px}
.howtoBubble{width:max-content;max-width:82%;margin:14px 0;padding:14px 18px;border-radius:20px;background:rgba(255,255,255,.18);color:#fff;font-size:14px;line-height:1.5;font-weight:650}
.howtoBubble.light{margin-left:auto;background:rgba(255,255,255,.92);color:#111}
.howtoInputMock{display:flex;align-items:center;gap:12px;margin-top:34px}
.howtoInputLine{flex:1;height:42px;border-radius:999px;background:rgba(255,255,255,.90)}
.howtoSendCircle{width:48px;height:48px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px}
.howtoTimerMock{width:min(410px,100%);min-height:410px;border-radius:34px;background:rgba(10,17,36,.72);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;box-shadow:0 32px 80px rgba(0,0,0,.26)}
.howtoTimerCircle{width:230px;height:230px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(#fff 0 112deg,rgba(255,255,255,.18) 112deg 360deg);box-shadow:0 0 80px rgba(151,75,255,.48)}
.howtoTimerInner{width:170px;height:170px;border-radius:50%;background:#111a31;display:flex;flex-direction:column;align-items:center;justify-content:center}
.howtoTimerLabel{color:rgba(255,255,255,.62);font-size:15px;font-weight:900;margin-bottom:8px}
.howtoTimerValue{color:#fff;font-size:48px;font-weight:950;letter-spacing:-.04em}
.howtoMoon{position:absolute;right:36px;bottom:54px;width:94px;height:94px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 44px rgba(255,255,255,.34)}
.howtoArchiveMock{width:min(390px,100%);min-height:420px;border-radius:34px;padding:28px 26px;background:rgba(255,255,255,.80);border:1px solid rgba(255,255,255,.88);box-shadow:0 30px 70px rgba(86,112,65,.18)}
.howtoArchiveHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;font-size:22px;font-weight:950}
.howtoArchiveItem{display:grid;grid-template-columns:minmax(0,1fr) 62px;gap:16px;align-items:center;margin:14px 0;padding:16px;border-radius:20px;background:rgba(255,255,255,.84);box-shadow:0 12px 26px rgba(0,0,0,.04)}
.howtoArchiveName{font-size:17px;font-weight:950;line-height:1.25}
.howtoArchiveTime{margin-top:6px;color:#777;font-size:13px;font-weight:700}
.howtoArchiveThumb{width:62px;height:62px;border-radius:16px;background:linear-gradient(135deg,#19243f,#f0a15d)}
.howtoDoorWrap{position:relative;width:min(420px,100%);min-height:420px;display:flex;align-items:flex-end;justify-content:center}
.howtoDoorGlow{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:310px;height:270px;border-radius:42px;background:radial-gradient(circle at 42% 72%,rgba(255,218,151,.78),rgba(125,92,255,.20) 50%,rgba(255,255,255,.06) 100%);filter:blur(2px);opacity:.85}
.howtoDoor{position:relative;z-index:1;width:150px;height:220px;border-radius:14px 14px 6px 6px;background:linear-gradient(145deg,#dcd5ff,#ffd7a8);transform:perspective(600px) rotateY(-28deg);box-shadow:0 30px 60px rgba(0,0,0,.26)}
.howtoDoor::after{content:"";position:absolute;right:-70px;top:26px;width:86px;height:182px;border-radius:10px;background:rgba(3,9,20,.72)}
.howtoEndLogo{position:absolute;z-index:2;left:50%;bottom:16px;transform:translateX(-50%);color:#fff;font-size:42px;font-weight:900;letter-spacing:-.04em}
.howtoControls{position:absolute;left:26px;right:26px;bottom:20px;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:14px;pointer-events:none}
.howtoDots{display:flex;align-items:center;gap:10px;height:38px;padding:0 15px;border-radius:999px;background:rgba(255,255,255,.78);box-shadow:0 10px 28px rgba(0,0,0,.08);pointer-events:auto}
.howtoDot{width:10px;height:10px;border:0;border-radius:50%;padding:0;background:rgba(0,0,0,.20);cursor:pointer}
.howtoDot.active{width:32px;border-radius:999px;background:#111}
.howtoButtons{display:flex;align-items:center;gap:10px;pointer-events:auto}
.howtoNavBtn,.howtoModalClose{min-width:68px;height:46px;border:0;border-radius:999px;padding:0 20px;cursor:pointer;font-size:14px;font-weight:950;line-height:1;box-shadow:0 10px 28px rgba(0,0,0,.10)}
.howtoNavBtn{background:rgba(255,255,255,.90);color:#111}
.howtoModalClose{background:#111;color:#fff}
.howtoNavBtn:disabled{opacity:.42;cursor:default}
.howtoStarField{position:absolute;inset:0;pointer-events:none;opacity:.34;background-image:radial-gradient(circle,rgba(255,255,255,.85) 1px,transparent 1.5px);background-size:72px 72px}
@media(max-width:99999px){.howtoModalOverlay{padding:12px}
.howtoModalBox{width:calc(100vw - 24px);height:min(760px,calc(100dvh - 76px));border-radius:28px}
.howtoPill{left:16px;top:16px;height:34px;min-width:76px;font-size:14px}
.howtoCounter{left:34px;top:47px;height:28px;min-width:58px;font-size:11px}
.howtoModalCloseIcon{right:16px;top:16px;width:46px;height:46px;font-size:28px}
.howtoSlide{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:18px;padding:92px 24px 92px}
.howtoCopy{max-width:none}
.howtoEyebrow{display:none}
.howtoBigTitle{font-size:clamp(31px,8.8vw,42px);line-height:1.12;letter-spacing:-.07em}
.howtoText{margin-top:17px;font-size:clamp(14px,4vw,17px);line-height:1.82}
.howtoBadges{gap:9px;margin-top:21px}
.howtoBadge{min-height:36px;padding:0 13px;font-size:13px}
.howtoVisual{flex:1;min-height:0;align-items:flex-end}
.howtoPhone{width:min(356px,92vw);min-height:345px;padding:22px;border-radius:32px;transform:rotate(5deg) translateY(8px)}
.howtoPhoneLogo{font-size:20px}
.howtoTabs{font-size:12px;gap:14px}
.howtoRoomCard{padding:15px 14px;border-radius:19px}
.howtoRoomName{font-size:20px}
.howtoRoomDesc{font-size:12px}
.howtoRoomMeta{font-size:12px;margin-top:10px}
.howtoChatMock,.howtoTimerMock,.howtoArchiveMock,.howtoDoorWrap{width:100%;min-height:350px;border-radius:30px}
.howtoChatMock{padding:22px}
.howtoChatTop{margin-bottom:28px}
.howtoBubble{font-size:13px;padding:12px 15px;border-radius:18px}
.howtoTimerCircle{width:210px;height:210px}
.howtoTimerInner{width:154px;height:154px}
.howtoTimerValue{font-size:44px}
.howtoMoon{width:78px;height:78px;right:28px;bottom:116px}
.howtoArchiveMock{padding:22px}
.howtoArchiveHead{font-size:20px;margin-bottom:18px}
.howtoArchiveItem{grid-template-columns:minmax(0,1fr) 54px;padding:14px;border-radius:18px}
.howtoArchiveName{font-size:16px}
.howtoArchiveThumb{width:54px;height:54px;border-radius:14px}
.howtoDoorGlow{width:260px;height:240px}
.howtoDoor{width:132px;height:200px}
.howtoDoor::after{right:-60px;width:76px;height:164px}
.howtoEndLogo{font-size:38px}
.howtoControls{left:16px;right:16px;bottom:18px;gap:10px}
.howtoDots{height:36px;gap:9px;padding:0 13px}
.howtoDot{width:9px;height:9px}
.howtoDot.active{width:30px}
.howtoButtons{gap:8px}
.howtoNavBtn,.howtoModalClose{min-width:58px;height:44px;padding:0 16px;font-size:13px}
}
@media(max-width:390px){.howtoModalBox{height:min(720px,calc(100dvh - 68px))}
.howtoSlide{padding:88px 20px 88px;gap:14px}
.howtoBigTitle{font-size:clamp(29px,8.5vw,38px)}
.howtoText{font-size:14px;line-height:1.74}
.howtoBadge{min-height:34px;font-size:12px;padding:0 11px}
.howtoPhone,.howtoChatMock,.howtoTimerMock,.howtoArchiveMock,.howtoDoorWrap{min-height:326px}
.howtoControls{left:12px;right:12px}
.howtoNavBtn,.howtoModalClose{min-width:54px;height:42px;padding:0 13px;font-size:12px}
}
.topRefreshNav{position:relative}
.topPolicyMenu{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;display:none;flex-direction:column;gap:4px;padding:8px;background:#fff;border:1px solid rgba(0,0,0,.10);border-radius:18px;box-shadow:0 18px 42px rgba(0,0,0,.14);z-index:35000}
.topPolicyMenu.show{display:flex}
.topPolicyMenuLink{display:block;color:#222;text-decoration:none;font-size:13px;line-height:1.2;padding:11px 12px;border-radius:12px;white-space:nowrap}
.topPolicyMenuLink:hover{background:rgba(0,0,0,.06)}
@media (max-width:640px){.topPolicyMenu{min-width:190px;right:0}
}
@media (max-width:640px){.topRefreshHeader{position:relative !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:12px 56px 8px !important;margin-bottom:16px !important}
.topRefreshBrand{width:100% !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:5px !important;text-align:center !important;min-width:0 !important}
.topRefreshLogo{font-size:48px !important;line-height:.95 !important;transform:scaleX(1.04) !important;transform-origin:center center !important}
.topRefreshTagline{display:block !important;width:100% !important;max-width:calc(100vw - 112px) !important;margin:0 !important;color:#666 !important;font-size:12px !important;line-height:1.25 !important;text-align:center !important;white-space:normal !important}
.topRefreshRight{position:absolute !important;right:12px !important;top:50% !important;transform:translateY(-50%) !important;width:auto !important;flex:0 0 auto !important;display:flex !important;justify-content:flex-end !important;align-items:center !important}
.topRefreshNav{position:relative !important;display:flex !important;align-items:center !important;justify-content:flex-end !important}
.topRefreshLangMini,.topRefreshNav>.topRefreshNavLink{display:none !important}
.topRefreshMenuBtn{position:relative !important;right:auto !important;top:auto !important;transform:none !important;width:52px !important;height:52px !important;min-width:52px !important;padding:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;border-radius:999px !important;font-size:26px !important;line-height:1 !important}
.topPolicyMenu{top:calc(100% + 10px) !important;right:0 !important;min-width:238px !important;max-width:calc(100vw - 24px) !important;padding:10px !important;border-radius:18px !important}
.topPolicyMenuSection{padding:6px 4px 8px !important;border-bottom:1px solid rgba(0,0,0,.08) !important;margin-bottom:4px !important}
.topPolicyMenuSection:last-child{border-bottom:0 !important;margin-bottom:0 !important;padding-bottom:4px !important}
.topPolicyMenuTitle{font-size:11px !important;color:#777 !important;line-height:1 !important;margin:0 0 7px !important;padding:0 6px !important}
.topPolicyLangGrid{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:6px !important}
.topPolicyLangBtn{appearance:none !important;-webkit-appearance:none !important;border:1px solid rgba(0,0,0,.10) !important;background:#f6f6f6 !important;color:#222 !important;border-radius:999px !important;padding:9px 0 !important;font-size:12px !important;line-height:1 !important;cursor:pointer !important}
.topPolicyLangBtn.active,.topPolicyLangBtn[aria-pressed="true"]{background:#141414 !important;color:#fff !important}
.topPolicyMenuLink{font-size:14px !important;padding:12px 12px !important}
}
@media (max-width:640px){.topRefreshHeader{padding:12px 46px 8px !important}
.topRefreshRight{left:12px !important;right:auto !important;top:50% !important;transform:translateY(-50%) !important}
.topRefreshMenuBtn{width:38px !important;height:38px !important;min-width:38px !important;background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;color:#111 !important;font-size:30px !important;padding:0 !important}
.topPolicyMenu{left:0 !important;right:auto !important;top:calc(100% + 10px) !important}
}
@media (max-width:640px){.topRefreshHeader{position:relative !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:12px 44px 8px !important;margin-bottom:16px !important}
.topRefreshBrand{width:100% !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:5px !important;text-align:center !important;min-width:0 !important}
.topRefreshLogo{font-size:48px !important;line-height:.95 !important;transform:scaleX(1.04) !important;transform-origin:center center !important}
.topRefreshTagline{display:block !important;width:100% !important;max-width:calc(100vw - 88px) !important;margin:0 !important;color:#666 !important;font-size:12px !important;line-height:1.25 !important;text-align:center !important;white-space:normal !important}
.topRefreshRight{position:absolute !important;left:0 !important;right:auto !important;top:50% !important;transform:translateY(-50%) !important;width:auto !important;flex:0 0 auto !important;display:flex !important;justify-content:flex-start !important;align-items:center !important;z-index:40000 !important}
.topRefreshNav{position:relative !important;display:flex !important;align-items:center !important;justify-content:flex-start !important}
.topRefreshMenuBtn{width:36px !important;height:36px !important;min-width:36px !important;background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;color:#111 !important;font-size:30px !important;padding:0 !important;line-height:1 !important}
.topPolicyMenu{left:0 !important;right:auto !important;top:calc(100% + 8px) !important;min-width:238px !important;max-width:calc(100vw - 24px) !important}
}
.topRefreshSectionLead{display:none !important}
@media (max-width:640px){.topRefreshRight{position:fixed !important;left:4px !important;top:4px !important;right:auto !important;transform:none !important;z-index:99999 !important;width:auto !important;flex:0 0 auto !important;display:flex !important;align-items:center !important;justify-content:flex-start !important}
.topRefreshNav{position:relative !important;display:flex !important;align-items:center !important;justify-content:flex-start !important}
.topRefreshMenuBtn{width:34px !important;height:34px !important;min-width:34px !important;background:transparent !important;border:none !important;box-shadow:none !important;border-radius:0 !important;color:#111 !important;font-size:28px !important;line-height:1 !important;padding:0 !important}
.topPolicyMenu{position:fixed !important;left:4px !important;top:44px !important;right:auto !important;min-width:238px !important;max-width:calc(100vw - 24px) !important}
.officialRoomsBar{display:grid !important;grid-template-columns:auto auto 1fr auto !important;align-items:center !important;gap:8px !important}
.officialRoomsBar .topbarLeft{grid-column:1 !important;min-width:0 !important}
.officialRoomsBar h2{margin:0 !important;font-size:18px !important;line-height:1.1 !important;white-space:nowrap !important;overflow:visible !important;text-overflow:clip !important}
.officialRoomsBar .viewToggle{grid-column:2 !important;justify-self:start !important;width:auto !important;min-width:92px !important;padding:4px !important;gap:4px !important;margin-left:0 !important}
.officialRoomsBar .viewBtn{flex:0 0 auto !important;width:40px !important;min-width:40px !important;height:32px !important;padding:0 !important;font-size:0 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important}
.officialRoomsBar .viewBtn::before{display:block !important;color:currentColor !important;line-height:1 !important}
#cardViewBtn::before{content:"□" !important;font-size:22px !important}
#listViewBtn::before{content:"☰" !important;font-size:19px !important}
.officialRoomsBar #roomCountText{grid-column:4 !important;justify-self:end !important;margin-left:0 !important;font-size:12px !important;white-space:nowrap !important}
.userRoomsBar{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;grid-template-areas:"title meta"
"create meta"
"search search" !important;align-items:start !important;gap:8px 10px !important}
.userRoomsBar .topbarLeft{display:contents !important}
.userRoomsBar h2{grid-area:title !important;margin:0 !important;min-width:0 !important;font-size:18px !important;line-height:1.15 !important;white-space:normal !important}
.userRoomsBar .userRoomsMeta{grid-area:meta !important;align-self:start !important;justify-self:end !important;margin:0 !important;text-align:right !important;font-size:12px !important;line-height:1.35 !important;white-space:nowrap !important}
.userRoomsBar #createRoomBtn{grid-area:create !important;justify-self:start !important;width:auto !important;margin-top:2px !important}
.userRoomsBar .searchWrap{grid-area:search !important;width:100% !important;min-width:0 !important;margin-top:4px !important}
.userRoomsBar .searchInput{width:100% !important}
}
@media (max-width:640px){.topRefreshTagline{white-space:nowrap !important;max-width:none !important;width:auto !important;font-size:11px !important}
}
@media (min-width:641px){.topRefreshNotice{width:max-content !important;max-width:min(720px,calc(100% - 24px)) !important;margin:0 auto 22px !important;padding:9px 12px !important;gap:8px !important;border-radius:16px !important;justify-content:flex-start !important}
.topRefreshNoticeMain{min-width:0 !important;flex:0 0 auto !important}
.topRefreshNoticeTitle{font-size:14px !important;line-height:1.25 !important;white-space:nowrap !important}
.topRefreshNoticeText,.pwaStepBadge{display:none !important}
.topRefreshNoticeBtn{margin-left:8px !important;padding:8px 14px !important;font-size:12px !important;min-width:86px !important}
}
.pushSetupStatus.flash{animation:pushSetupStatusFlash .78s ease 2}
@keyframes pushSetupStatusFlash{0%{background:rgba(210,140,0,.12);transform:scale(1)}
45%{background:rgba(255,160,0,.34);transform:scale(1.018)}
100%{background:rgba(210,140,0,.12);transform:scale(1)}
}
@media (max-width:640px){.topRefreshNotice{align-items:center !important;padding:9px 10px !important;min-height:58px !important}
.topRefreshNoticeMain{display:flex !important;align-items:center !important;min-width:0 !important}
.topRefreshNoticeTitle{display:flex !important;align-items:center !important;line-height:1.15 !important;transform:translateY(1px) !important}
.topRefreshNoticeBtn{height:34px !important;min-width:78px !important;padding:6px 11px !important;font-size:13px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important}
.listMetaTop{display:inline-flex !important;align-items:center !important;justify-content:flex-end !important;gap:3px !important}
.peopleIcon{position:relative !important;display:inline-block !important;width:10px !important;height:10px !important;margin-right:3px !important;border-radius:50% !important;background:#4ADE80 !important;box-shadow:0 0 8px rgba(74,222,128,.45) !important;vertical-align:middle !important;flex:0 0 auto !important}
.peopleIcon::after{content:"" !important;position:absolute !important;left:-3px !important;top:7px !important;width:16px !important;height:8px !important;border-radius:999px 999px 5px 5px !important;background:#4ADE80 !important;box-shadow:0 0 8px rgba(74,222,128,.35) !important}
}
.peopleIcon{position:relative !important;display:inline-block !important;width:8px !important;height:8px !important;margin-right:4px !important;border-radius:50% !important;background:#4ADE80 !important;box-shadow:none !important;vertical-align:-1px !important;flex:0 0 auto !important}
.peopleIcon::after{content:"" !important;position:absolute !important;left:-2px !important;top:6px !important;width:12px !important;height:6px !important;border-radius:999px 999px 5px 5px !important;background:#4ADE80 !important;box-shadow:none !important}
.meta .peopleIcon,.listMeta .peopleIcon{margin-right:4px !important}
@media (max-width:640px){.topRefreshNotice{align-items:center !important;padding:7px 10px !important;min-height:48px !important;border-radius:16px !important;gap:8px !important}
.topRefreshNoticeMain{display:flex !important;align-items:center !important;min-width:0 !important}
.topRefreshNoticeTitle{display:flex !important;align-items:center !important;line-height:1 !important;transform:none !important;font-size:15px !important}
.topRefreshNoticeBtn{height:30px !important;min-width:70px !important;padding:5px 10px !important;font-size:12px !important;line-height:1 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important}
.listMetaTop{display:inline-flex !important;align-items:center !important;justify-content:flex-end !important;gap:2px !important}
}
@media (max-width:640px){.topRefreshNotice{align-items:center !important;min-height:46px !important;padding:7px 10px !important;gap:8px !important}
.topRefreshNoticeMain{display:flex !important;align-items:center !important;min-height:32px !important}
.topRefreshNoticeTitle{display:flex !important;align-items:center !important;line-height:1 !important;font-size:15px !important;transform:translateY(1px) !important}
.topRefreshNoticeBtn{height:30px !important;min-height:30px !important;min-width:68px !important;padding:0 11px !important;font-size:12px !important;line-height:1 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;transform:translateY(0) !important}
.listMeta{gap:1px !important;line-height:1 !important}
.listMetaTop,.listMetaBottom{height:15px !important;min-height:15px !important;line-height:15px !important}
.listMetaTop{display:inline-flex !important;align-items:center !important;justify-content:flex-end !important;gap:3px !important}
.listMetaBottom{display:block !important;transform:translateY(-1px) !important}
}
.peopleIcon{position:relative !important;display:inline-block !important;width:7px !important;height:7px !important;margin-right:4px !important;border-radius:50% !important;background:#4ADE80 !important;box-shadow:none !important;vertical-align:0 !important;flex:0 0 auto !important;transform:translateY(-1px) !important}
.peopleIcon::after{content:"" !important;position:absolute !important;left:-2px !important;top:5px !important;width:11px !important;height:6px !important;border-radius:999px 999px 4px 4px !important;background:#4ADE80 !important;box-shadow:none !important}
@media (max-width:640px){.topRefreshNotice{min-height:44px !important;height:auto !important;padding:6px 10px !important;align-items:center !important;gap:8px !important}
.topRefreshNoticeMain{display:flex !important;align-items:center !important;min-height:30px !important;height:30px !important}
.topRefreshNoticeTitle{display:flex !important;align-items:center !important;height:30px !important;min-height:30px !important;margin:0 !important;padding:0 !important;font-size:15px !important;line-height:30px !important;transform:none !important}
.topRefreshNoticeBtn{height:30px !important;min-height:30px !important;min-width:68px !important;padding:0 11px !important;margin:0 !important;font-size:12px !important;line-height:30px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;transform:none !important}
}
@media (min-width:641px){.meta .peopleIcon,.listMeta .peopleIcon{transform:translateY(-4px) !important;vertical-align:middle !important}
}
#pwaBanner .topRefreshNoticeText,#pwaBanner .pwaStepBadge{display:none !important}
#pwaBanner.topRefreshNotice{justify-content:center !important}
@media (min-width:641px){#pwaBanner.topRefreshNotice{width:max-content !important;max-width:min(720px,calc(100% - 24px)) !important;margin:0 auto 22px !important;padding:9px 12px !important;gap:10px !important;border-radius:16px !important;align-items:center !important}
#pwaBanner .topRefreshNoticeMain{flex:0 0 auto !important;min-width:0 !important}
#pwaBanner .topRefreshNoticeTitle{display:block !important;font-size:14px !important;line-height:1.2 !important;white-space:nowrap !important}
#pwaBanner .topRefreshNoticeBtn{margin-left:4px !important;height:34px !important;min-width:72px !important;padding:0 14px !important;font-size:12px !important;line-height:1 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;white-space:nowrap !important}
}
@media (max-width:640px){#pwaBanner.topRefreshNotice{width:min(560px,calc(100% - 24px)) !important;max-width:calc(100% - 24px) !important;margin:4px auto 18px !important;display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;min-height:44px !important;padding:8px 11px !important;border-radius:17px !important}
#pwaBanner .topRefreshNoticeMain{display:block !important;min-width:0 !important;flex:1 1 auto !important;width:auto !important;height:auto !important;min-height:0 !important}
#pwaBanner .topRefreshNoticeTitle{display:block !important;height:auto !important;min-height:0 !important;margin:0 !important;padding:0 !important;font-size:15px !important;line-height:1.2 !important;font-weight:700 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;transform:none !important}
#pwaBanner .topRefreshNoticeBtn{flex:0 0 auto !important;width:auto !important;min-width:64px !important;height:32px !important;min-height:32px !important;padding:0 13px !important;margin:0 !important;align-self:center !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;font-size:13px !important;line-height:1 !important;white-space:nowrap !important;transform:none !important}
}
@media (max-width:640px){#pwaBanner.topRefreshNotice{min-height:42px !important;padding:7px 11px !important;margin:2px auto 16px !important}
#pwaBanner .topRefreshNoticeTitle{font-size:15px !important;line-height:1.15 !important}
#pwaBanner .topRefreshNoticeBtn{min-width:58px !important;height:30px !important;min-height:30px !important;padding:0 12px !important;font-size:13px !important;border-radius:999px !important}
}
@media (min-width:641px){#pwaBanner .topRefreshNoticeBtn{min-width:62px !important}
}
@media (max-width:640px){.pwaGuideModal{width:min(520px,calc(100% - 20px)) !important;padding:22px 18px !important;border-radius:24px !important}
.pwaGuideTitle{font-size:22px !important;line-height:1.35 !important;margin-bottom:10px !important}
.pwaGuideLead{font-size:15px !important;line-height:1.75 !important;color:#555 !important;margin-bottom:16px !important}
.pwaGuideSteps{gap:10px !important;margin-bottom:18px !important}
.pwaGuideStep{align-items:center !important;gap:12px !important;padding:13px 14px !important;border-radius:18px !important;font-size:15px !important;line-height:1.55 !important}
.pwaGuideStepNum{width:30px !important;height:30px !important;font-size:13px !important}
.pwaGuideBtn{min-height:48px !important;font-size:15px !important}
}
#pwaBanner.topRefreshNotice{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;width:min(620px,calc(100% - 24px)) !important;max-width:calc(100% - 24px) !important;margin:4px auto 18px !important;padding:10px 13px !important;border-radius:999px !important;min-height:54px !important}
#pwaBanner .topRefreshNoticeMain{min-width:0 !important;flex:1 1 auto !important}
#pwaBanner .topRefreshNoticeTitle{display:block !important;margin:0 !important;padding:0 !important;font-size:16px !important;line-height:1.2 !important;font-weight:800 !important;color:#111 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
#pwaInstallBtn.rooomNotifySwitch{position:relative !important;flex:0 0 auto !important;width:108px !important;height:46px !important;min-width:108px !important;min-height:46px !important;padding:0 !important;margin:0 !important;border:0 !important;border-radius:999px !important;cursor:pointer !important;overflow:hidden !important;box-shadow:inset 0 0 0 2px rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.12) !important;transition:background .22s ease,transform .12s ease,opacity .12s ease !important}
#pwaInstallBtn.rooomNotifySwitch:active{transform:scale(.97) !important}
#pwaInstallBtn.rooomNotifySwitch.is-on{background:#23d523 !important}
#pwaInstallBtn.rooomNotifySwitch.is-off{background:#bdbdbd !important}
#pwaInstallBtn.rooomNotifySwitch .rooomSwitchText{position:absolute !important;top:50% !important;transform:translateY(-50%) !important;z-index:1 !important;color:#fff !important;font-size:18px !important;line-height:1 !important;font-weight:900 !important;letter-spacing:.02em !important;pointer-events:none !important;transition:left .22s ease,right .22s ease !important}
#pwaInstallBtn.rooomNotifySwitch.is-on .rooomSwitchText{left:18px !important;right:auto !important}
#pwaInstallBtn.rooomNotifySwitch.is-off .rooomSwitchText{left:auto !important;right:17px !important}
#pwaInstallBtn.rooomNotifySwitch .rooomSwitchKnob{position:absolute !important;top:4px !important;left:4px !important;z-index:2 !important;width:38px !important;height:38px !important;border-radius:50% !important;background:#fff !important;box-shadow:0 3px 8px rgba(0,0,0,.28),inset 0 0 0 1px rgba(0,0,0,.05) !important;pointer-events:none !important;transition:left .22s ease !important}
#pwaInstallBtn.rooomNotifySwitch.is-on .rooomSwitchKnob{left:66px !important}
#pwaInstallBtn.rooomNotifySwitch.is-off .rooomSwitchKnob{left:4px !important}
#pwaInstallBtn.rooomNotifySwitch:disabled{opacity:.55 !important;cursor:not-allowed !important}
#pwaInstallBtn.topRefreshNoticeBtn:not(.rooomNotifySwitch){width:auto !important;min-width:72px !important;height:34px !important;min-height:34px !important;padding:0 14px !important;border-radius:999px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;white-space:nowrap !important}
@media (max-width:640px){#pwaBanner.topRefreshNotice{width:calc(100% - 24px) !important;max-width:calc(100% - 24px) !important;min-height:50px !important;padding:8px 10px !important;margin:3px auto 16px !important;gap:8px !important}
#pwaBanner .topRefreshNoticeTitle{font-size:15px !important}
#pwaInstallBtn.rooomNotifySwitch{width:96px !important;height:42px !important;min-width:96px !important;min-height:42px !important}
#pwaInstallBtn.rooomNotifySwitch .rooomSwitchText{font-size:16px !important}
#pwaInstallBtn.rooomNotifySwitch .rooomSwitchKnob{width:34px !important;height:34px !important;top:4px !important;left:4px !important}
#pwaInstallBtn.rooomNotifySwitch.is-on .rooomSwitchText{left:15px !important}
#pwaInstallBtn.rooomNotifySwitch.is-off .rooomSwitchText{right:14px !important}
#pwaInstallBtn.rooomNotifySwitch.is-on .rooomSwitchKnob{left:58px !important}
}
#pwaBanner.topRefreshNotice{min-height:42px !important;padding:7px 10px !important;margin:2px auto 14px !important}
#pwaInstallBtn.rooomNotifySwitch{width:76px !important;min-width:76px !important;height:34px !important;min-height:34px !important}
#pwaInstallBtn.rooomNotifySwitch .rooomSwitchText{font-size:12px !important;font-weight:900 !important}
#pwaInstallBtn.rooomNotifySwitch .rooomSwitchKnob{width:28px !important;height:28px !important;top:3px !important;left:3px !important}
#pwaInstallBtn.rooomNotifySwitch.is-on .rooomSwitchText{left:12px !important}
#pwaInstallBtn.rooomNotifySwitch.is-off .rooomSwitchText{right:10px !important}
#pwaInstallBtn.rooomNotifySwitch.is-on .rooomSwitchKnob{left:45px !important}
#pwaInstallBtn.rooomNotifySwitch.is-off .rooomSwitchKnob{left:3px !important}
@media (max-width:640px){#pwaBanner.topRefreshNotice{min-height:40px !important;padding:6px 9px !important;margin:2px auto 13px !important}
#pwaBanner .topRefreshNoticeTitle{font-size:14px !important}
#pwaInstallBtn.rooomNotifySwitch{width:70px !important;min-width:70px !important;height:32px !important;min-height:32px !important}
#pwaInstallBtn.rooomNotifySwitch .rooomSwitchText{font-size:11px !important}
#pwaInstallBtn.rooomNotifySwitch .rooomSwitchKnob{width:26px !important;height:26px !important;top:3px !important}
#pwaInstallBtn.rooomNotifySwitch.is-on .rooomSwitchText{left:10px !important}
#pwaInstallBtn.rooomNotifySwitch.is-off .rooomSwitchText{right:9px !important}
#pwaInstallBtn.rooomNotifySwitch.is-on .rooomSwitchKnob{left:41px !important}
}
@media (min-width:641px){#pwaBanner.rooomPcUnsupportedNotice{width:max-content !important;max-width:min(720px,calc(100% - 24px)) !important;margin:0 auto 22px !important;padding:9px 16px !important;min-height:34px !important;border-radius:999px !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:0 !important}
#pwaBanner.rooomPcUnsupportedNotice .topRefreshNoticeMain{flex:0 0 auto !important;min-width:0 !important}
#pwaBanner.rooomPcUnsupportedNotice .topRefreshNoticeTitle{font-size:14px !important;line-height:1.2 !important;font-weight:700 !important;white-space:nowrap !important;overflow:visible !important;text-overflow:clip !important;color:#111 !important}
#pwaBanner.rooomPcUnsupportedNotice .topRefreshNoticeText,#pwaBanner.rooomPcUnsupportedNotice .pwaStepBadge,#pwaBanner.rooomPcUnsupportedNotice #pwaInstallBtn{display:none !important}
}
#cardViewBtn,#listViewBtn{font-size:0 !important;width:40px !important;min-width:40px !important;height:32px !important;padding:0 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important}
#cardViewBtn::before,#listViewBtn::before{display:block !important;color:currentColor !important;line-height:1 !important}
#cardViewBtn::before{content:"□" !important;font-size:22px !important}
#listViewBtn::before{content:"☰" !important;font-size:19px !important}
#pwaInstallBtn.rooomNotifySwitch{transition:background .55s cubic-bezier(.16,1,.3,1),background-color .55s cubic-bezier(.16,1,.3,1),opacity .2s ease !important}
#pwaInstallBtn.rooomNotifySwitch .rooomSwitchKnob{transition:left .72s cubic-bezier(.16,1,.3,1),box-shadow .28s ease !important;will-change:left !important}
#pwaInstallBtn.rooomNotifySwitch:active .rooomSwitchKnob{box-shadow:0 2px 7px rgba(0,0,0,.24),inset 0 0 0 1px rgba(0,0,0,.05) !important}
@media (max-width:640px){body,.wrap,.pageFade{background:#efefef !important}
.listItem{box-shadow:none !important;background-clip:padding-box !important;transform:none !important;will-change:auto !important;contain:paint !important}
.listItem.card-main,.listItem.card-solo,.listItem.card-midnight,.listItem.card-chat,.listItem.card-user{box-shadow:none !important}
.listAccent,.listMeta,.listEnterBtn{transform:none !important;will-change:auto !important}
.listEnterBtn{box-shadow:none !important}
#pwaBanner.topRefreshNotice{box-shadow:0 4px 12px rgba(0,0,0,.06) !important;background:#fff !important;transform:none !important;will-change:auto !important;contain:paint !important}
#pwaInstallBtn.rooomNotifySwitch{box-shadow:inset 0 0 0 1px rgba(0,0,0,.10) !important;transition:background-color .18s ease,opacity .12s ease !important;transform:none !important;will-change:auto !important}
#pwaInstallBtn.rooomNotifySwitch .rooomSwitchKnob{box-shadow:0 1px 3px rgba(0,0,0,.22) !important;transition:left .18s ease !important;will-change:auto !important}
#pwaInstallBtn.rooomNotifySwitch:active,#pwaInstallBtn.rooomNotifySwitch:active .rooomSwitchKnob{transform:none !important}
.topPolicyMenu,.rooomInAppNotice,.pwaGuideModal,.conceptModalBox,.howtoModalBox,.modal{box-shadow:0 8px 24px rgba(0,0,0,.12) !important;transform:none;will-change:auto !important}
}
#pwaInstallBtn,#pwaInstallBtn *{-webkit-tap-highlight-color:transparent !important}
#pwaInstallBtn:focus,#pwaInstallBtn:active,#pwaInstallBtn:focus-visible{outline:none !important}
@media (max-width:640px){#pwaInstallBtn.rooomNotifySwitch,#pwaInstallBtn.rooomNotifySwitch *{-webkit-tap-highlight-color:transparent !important;-webkit-touch-callout:none !important}
#pwaInstallBtn.rooomNotifySwitch:active{transform:none !important}
#pwaInstallBtn.rooomNotifySwitch:focus,#pwaInstallBtn.rooomNotifySwitch:focus-visible{outline:none !important;box-shadow:none !important}
}
html.rooom-ipad-portrait .list{display:flex !important;flex-direction:column !important;gap:8px !important}
html.rooom-ipad-portrait .listItem{display:grid !important;grid-template-columns:6px minmax(0,1fr) auto auto !important;grid-template-areas:"accent main meta button" !important;align-items:center !important;gap:8px !important;min-height:54px !important;padding:9px 11px !important;border-radius:16px !important}
html.rooom-ipad-portrait .listAccent{grid-area:accent !important;width:6px !important;min-height:34px !important;height:34px !important;align-self:center !important}
html.rooom-ipad-portrait .listMain{grid-area:main !important;min-width:0 !important}
html.rooom-ipad-portrait .listTitleRow{gap:5px !important;min-width:0 !important}
html.rooom-ipad-portrait .listName{font-size:15px !important;line-height:1.15 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
html.rooom-ipad-portrait .listToggle{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:15px !important;height:15px !important;font-size:10px !important;opacity:.9 !important}
html.rooom-ipad-portrait .listDesc{display:none !important;margin-top:6px !important;font-size:12px !important;line-height:1.35 !important}
html.rooom-ipad-portrait .listItem.open{grid-template-columns:6px minmax(0,1fr) auto !important;grid-template-areas:"accent main button"
"accent main button"
". meta button" !important;align-items:flex-start !important;row-gap:6px !important}
html.rooom-ipad-portrait .listItem.open .listName{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:3 !important}
html.rooom-ipad-portrait .listItem.open .listDesc{display:block !important}
html.rooom-ipad-portrait .listMeta{grid-area:meta !important;display:flex !important;flex-direction:column !important;align-items:flex-end !important;justify-content:center !important;gap:2px !important;min-width:72px !important;text-align:right !important;font-size:12px !important;line-height:1.05 !important;white-space:nowrap !important;align-self:center !important}
html.rooom-ipad-portrait .listMetaTop,html.rooom-ipad-portrait .listMetaBottom{display:block !important;height:16px !important;min-height:16px !important;line-height:16px !important}
html.rooom-ipad-portrait .listMetaTop{display:inline-flex !important;align-items:center !important;justify-content:flex-end !important;gap:3px !important}
html.rooom-ipad-portrait .listEnterBtn{grid-area:button !important;align-self:center !important;justify-self:center !important;height:34px !important;min-height:34px !important;min-width:66px !important;padding:7px 10px !important;font-size:13px !important;line-height:1 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important}
html.rooom-ipad-portrait .officialRoomsBar{display:grid !important;grid-template-columns:auto auto 1fr auto !important;align-items:center !important;gap:8px !important}
html.rooom-ipad-portrait .officialRoomsBar .topbarLeft{grid-column:1 !important;min-width:0 !important}
html.rooom-ipad-portrait .officialRoomsBar h2,html.rooom-ipad-portrait .userRoomsBar h2{font-size:18px !important;line-height:1.1 !important;margin:0 !important;white-space:nowrap !important}
html.rooom-ipad-portrait .officialRoomsBar .viewToggle{grid-column:2 !important;justify-self:start !important;width:auto !important;min-width:92px !important;padding:4px !important;gap:4px !important;margin-left:0 !important}
html.rooom-ipad-portrait .officialRoomsBar #roomCountText{grid-column:4 !important;justify-self:end !important;margin-left:0 !important;font-size:12px !important;white-space:nowrap !important}
html.rooom-ipad-portrait .userRoomsBar{display:grid !important;grid-template-columns:auto 1fr auto !important;align-items:center !important;gap:10px !important}
html.rooom-ipad-portrait .userRoomsBar .topbarLeft{grid-column:1 / 3 !important;grid-row:1 !important;display:flex !important;align-items:center !important;gap:10px !important}
html.rooom-ipad-portrait .userRoomsBar .userRoomsMeta{grid-column:3 !important;grid-row:1 !important;justify-self:end !important;margin-left:0 !important;text-align:right !important;white-space:nowrap !important;font-size:12px !important}
html.rooom-ipad-portrait .userRoomsBar .searchWrap{grid-column:1 / 4 !important;grid-row:2 !important;width:100% !important;min-width:0 !important}
html.rooom-ipad-portrait .userRoomsBar .searchInput{width:100% !important;max-width:none !important}
.meta,.listMeta{font-variant-numeric:tabular-nums !important}
html.rooom-ipad-portrait .list{width:100% !important;max-width:none !important;align-items:stretch !important}
html.rooom-ipad-portrait .listItem{width:100% !important;max-width:none !important;justify-self:stretch !important}
html.rooom-ipad-portrait .listMain{min-width:0 !important}
html.rooom-ipad-portrait .listName{font-size:17px !important;max-width:none !important}
html.rooom-ipad-portrait .listMeta{min-width:82px !important;font-size:13px !important}
html.rooom-ipad-portrait .listEnterBtn{min-width:78px !important;padding:8px 16px !important;font-size:14px !important}
html.rooom-ipad-portrait #pwaBanner.topRefreshNotice{width:calc(100% - 24px) !important;max-width:calc(100% - 24px) !important}
html.rooom-ipad-portrait #pwaInstallBtn.topRefreshNoticeBtn:not(.rooomNotifySwitch){display:inline-flex !important;min-width:82px !important;height:36px !important;min-height:36px !important;padding:0 16px !important;background:#141414 !important;color:#fff !important}
html.rooom-ipad-portrait .listItem.open .listDesc{display:block !important;visibility:visible !important;opacity:1 !important;height:auto !important;max-height:none !important;overflow:visible !important}
.listItem.hasDesc .listToggle{display:inline-flex;align-items:center;justify-content:center}
.listItem.open{align-items:start !important}
.listItem.open .listName{white-space:normal !important;overflow:hidden !important;text-overflow:clip !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important}
.listItem.open .listDesc{display:block !important;visibility:visible !important;opacity:1 !important;height:auto !important;max-height:none !important;margin-top:7px !important;white-space:normal !important;overflow:hidden !important;text-overflow:clip !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:3 !important}
@media (min-width:641px){.listItem.open{display:grid !important;grid-template-columns:8px minmax(0,1fr) auto !important;grid-template-areas:"accent main main"
". meta button" !important;gap:8px 10px !important;min-height:92px !important;align-items:start !important}
.listItem.open .listAccent{grid-area:accent !important;height:100% !important;min-height:64px !important}
.listItem.open .listMain{grid-area:main !important;min-width:0 !important}
.listItem.open .listMeta{grid-area:meta !important;justify-self:end !important;align-self:center !important;display:inline-flex !important;align-items:center !important;justify-content:flex-end !important;gap:6px !important;white-space:nowrap !important}
.listItem.open .listEnterBtn{grid-area:button !important;justify-self:end !important;align-self:center !important}
}
@media (max-width:640px){.listItem.open{display:grid !important;grid-template-columns:6px minmax(0,1fr) auto !important;grid-template-areas:"accent main main"
". meta button" !important;gap:8px 8px !important;align-items:start !important}
.listItem.open .listAccent{grid-area:accent !important;height:100% !important;min-height:70px !important}
.listItem.open .listMain{grid-area:main !important;min-width:0 !important}
.listItem.open .listMeta{grid-area:meta !important;justify-self:end !important;align-self:center !important;display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:flex-end !important;gap:10px !important;min-width:0 !important;white-space:nowrap !important}
.listItem.open .listMetaTop,.listItem.open .listMetaBottom{display:inline-flex !important;align-items:center !important;height:auto !important;min-height:0 !important;line-height:1.1 !important}
.listItem.open .listEnterBtn{grid-area:button !important;justify-self:end !important;align-self:center !important}
}
html.rooom-ipad-portrait .listItem.open{display:grid !important;grid-template-columns:6px minmax(0,1fr) auto !important;grid-template-areas:"accent main main"
". meta button" !important;gap:8px 10px !important;align-items:start !important;min-height:92px !important}
html.rooom-ipad-portrait .listItem.open .listAccent{grid-area:accent !important;height:100% !important;min-height:70px !important}
html.rooom-ipad-portrait .listItem.open .listMain{grid-area:main !important;min-width:0 !important}
html.rooom-ipad-portrait .listItem.open .listMeta{grid-area:meta !important;justify-self:end !important;align-self:center !important;display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:flex-end !important;gap:10px !important;min-width:0 !important;white-space:nowrap !important}
html.rooom-ipad-portrait .listItem.open .listMetaTop,html.rooom-ipad-portrait .listItem.open .listMetaBottom{display:inline-flex !important;align-items:center !important;height:auto !important;min-height:0 !important;line-height:1.1 !important}
html.rooom-ipad-portrait .listItem.open .listEnterBtn{grid-area:button !important;justify-self:end !important;align-self:center !important}
.listItem.open{height:auto !important;min-height:0 !important;align-items:start !important}
.listItem.open .listMain{align-self:start !important}
.listItem.open .listDesc{margin-top:5px !important;margin-bottom:0 !important;line-height:1.45 !important}
.listItem.open .listMeta,.listItem.open .listEnterBtn{margin-top:0 !important}
@media (min-width:641px){.listItem.open{min-height:0 !important;grid-template-rows:auto auto !important;row-gap:7px !important;padding-top:10px !important;padding-bottom:10px !important}
.listItem.open .listAccent{min-height:0 !important;height:100% !important}
.listItem.open .listMeta,.listItem.open .listEnterBtn{align-self:end !important}
}
@media (max-width:640px){.listItem.open{min-height:0 !important;grid-template-rows:auto auto !important;row-gap:8px !important;padding-top:10px !important;padding-bottom:10px !important}
.listItem.open .listAccent{min-height:0 !important;height:100% !important}
.listItem.open .listMeta,.listItem.open .listEnterBtn{align-self:end !important}
}
html.rooom-ipad-portrait .listItem.open{height:auto !important;min-height:0 !important;grid-template-rows:auto auto !important;row-gap:8px !important;padding-top:10px !important;padding-bottom:10px !important}
html.rooom-ipad-portrait .listItem.open .listAccent{min-height:0 !important;height:100% !important}
html.rooom-ipad-portrait .listItem.open .listMeta,html.rooom-ipad-portrait .listItem.open .listEnterBtn{align-self:end !important}
.listItem.open:not(.longText){align-items:center !important}
@media (min-width:641px){.listItem.open:not(.longText){display:grid !important;grid-template-columns:8px minmax(0,1fr) auto auto !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;gap:8px 10px !important;min-height:0 !important;padding-top:10px !important;padding-bottom:10px !important;align-items:center !important}
.listItem.open:not(.longText) .listAccent{grid-area:accent !important;height:100% !important;min-height:42px !important;align-self:stretch !important}
.listItem.open:not(.longText) .listMain{grid-area:main !important;align-self:center !important;min-width:0 !important}
.listItem.open:not(.longText) .listMeta{grid-area:meta !important;justify-self:end !important;align-self:center !important;display:inline-flex !important;align-items:center !important;justify-content:flex-end !important;gap:6px !important;white-space:nowrap !important;margin-top:0 !important}
.listItem.open:not(.longText) .listEnterBtn{grid-area:button !important;justify-self:end !important;align-self:center !important;margin-top:0 !important}
}
@media (max-width:640px){.listItem.open:not(.longText){display:grid !important;grid-template-columns:6px minmax(0,1fr) auto auto !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;gap:8px 8px !important;min-height:0 !important;padding-top:10px !important;padding-bottom:10px !important;align-items:center !important}
.listItem.open:not(.longText) .listAccent{grid-area:accent !important;height:100% !important;min-height:44px !important;align-self:stretch !important}
.listItem.open:not(.longText) .listMain{grid-area:main !important;align-self:center !important;min-width:0 !important}
.listItem.open:not(.longText) .listMeta{grid-area:meta !important;justify-self:end !important;align-self:center !important;display:flex !important;flex-direction:column !important;align-items:flex-end !important;justify-content:center !important;gap:2px !important;min-width:70px !important;white-space:nowrap !important;margin-top:0 !important}
.listItem.open:not(.longText) .listEnterBtn{grid-area:button !important;justify-self:end !important;align-self:center !important;margin-top:0 !important}
}
html.rooom-ipad-portrait .listItem.open:not(.longText){display:grid !important;grid-template-columns:6px minmax(0,1fr) auto auto !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;gap:8px 10px !important;min-height:0 !important;padding-top:10px !important;padding-bottom:10px !important;align-items:center !important}
html.rooom-ipad-portrait .listItem.open:not(.longText) .listAccent{grid-area:accent !important;height:100% !important;min-height:44px !important;align-self:stretch !important}
html.rooom-ipad-portrait .listItem.open:not(.longText) .listMain{grid-area:main !important;align-self:center !important;min-width:0 !important}
html.rooom-ipad-portrait .listItem.open:not(.longText) .listMeta{grid-area:meta !important;justify-self:end !important;align-self:center !important;display:flex !important;flex-direction:column !important;align-items:flex-end !important;justify-content:center !important;gap:2px !important;min-width:82px !important;white-space:nowrap !important;margin-top:0 !important}
html.rooom-ipad-portrait .listItem.open:not(.longText) .listEnterBtn{grid-area:button !important;justify-self:end !important;align-self:center !important;margin-top:0 !important}
.listItem{min-height:0 !important}
.listMain{min-width:0 !important}
.listTitleRow{min-width:0 !important}
.listName{white-space:normal !important;overflow:hidden !important;text-overflow:clip !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;line-height:1.22 !important}
.listDesc{display:-webkit-box !important;visibility:visible !important;opacity:1 !important;height:auto !important;max-height:none !important;margin:4px 0 0 !important;white-space:normal !important;overflow:hidden !important;text-overflow:clip !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;line-height:1.35 !important}
.listItem.open .listName,.listItem.open .listDesc{display:block !important;-webkit-line-clamp:unset !important;overflow:visible !important;text-overflow:clip !important;white-space:normal !important}
.listItem.open .listDesc{margin-top:6px !important}
.listMeta{display:flex !important;flex-direction:column !important;align-items:flex-end !important;justify-content:center !important;gap:2px !important;min-width:64px !important;white-space:nowrap !important;font-variant-numeric:tabular-nums !important;line-height:1.1 !important}
.listMetaTop,.listMetaBottom{display:inline-flex !important;align-items:center !important;justify-content:flex-end !important;height:auto !important;min-height:0 !important;line-height:1.1 !important}
.listEnterBtn.entryIconBtn{width:42px !important;min-width:42px !important;height:34px !important;min-height:34px !important;padding:0 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;border-radius:999px !important;font-size:0 !important;line-height:1 !important}
.entryDoorIcon{position:relative !important;display:inline-block !important;width:22px !important;height:22px !important}
.entryDoorIcon::before{content:"" !important;position:absolute !important;right:2px !important;top:2px !important;width:9px !important;height:18px !important;background:#111 !important;clip-path:polygon(0 0,100% 3px,100% 19px,0 100%) !important}
.entryDoorIcon::after{content:"" !important;position:absolute !important;left:1px !important;top:8px !important;width:17px !important;height:7px !important;background:#111 !important;clip-path:polygon(0 50%,7px 0,7px 3px,100% 3px,100% 4px,7px 4px,7px 7px) !important}
@media (min-width:641px){.listItem{grid-template-columns:8px minmax(0,1fr) auto auto !important;gap:10px !important;align-items:center !important;padding-top:10px !important;padding-bottom:10px !important}
.listDesc{font-size:12px !important}
.listMeta{font-size:12px !important}
.listEnterBtn.entryIconBtn{width:40px !important;min-width:40px !important;height:32px !important;min-height:32px !important}
.listItem.open,.listItem.open.longText,.listItem.open:not(.longText){display:grid !important;grid-template-columns:8px minmax(0,1fr) auto auto !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;gap:10px !important;align-items:center !important;padding-top:10px !important;padding-bottom:10px !important;min-height:0 !important}
.listItem.open .listAccent{grid-area:accent !important;align-self:stretch !important;height:auto !important;min-height:42px !important}
.listItem.open .listMain{grid-area:main !important}
.listItem.open .listMeta{grid-area:meta !important;align-self:center !important;justify-self:end !important}
.listItem.open .listEnterBtn{grid-area:button !important;align-self:center !important;justify-self:end !important}
}
@media (max-width:640px){.listItem{grid-template-columns:6px minmax(0,1fr) auto auto !important;gap:8px !important;align-items:center !important;padding-top:9px !important;padding-bottom:9px !important}
.listName{font-size:15px !important}
.listDesc{font-size:11px !important}
.listMeta{min-width:58px !important;font-size:11px !important}
.listEnterBtn.entryIconBtn{width:40px !important;min-width:40px !important;height:32px !important;min-height:32px !important}
.entryDoorIcon{transform:scale(.92) !important}
.listItem.open,.listItem.open.longText,.listItem.open:not(.longText){display:grid !important;grid-template-columns:6px minmax(0,1fr) auto auto !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;gap:8px !important;align-items:center !important;padding-top:10px !important;padding-bottom:10px !important;min-height:0 !important}
.listItem.open .listAccent{grid-area:accent !important;align-self:stretch !important;height:auto !important;min-height:48px !important}
.listItem.open .listMain{grid-area:main !important}
.listItem.open .listMeta{grid-area:meta !important;align-self:center !important;justify-self:end !important}
.listItem.open .listEnterBtn{grid-area:button !important;align-self:center !important;justify-self:end !important}
}
html.rooom-ipad-portrait .listItem,html.rooom-ipad-portrait .listItem.open,html.rooom-ipad-portrait .listItem.open.longText,html.rooom-ipad-portrait .listItem.open:not(.longText){display:grid !important;grid-template-columns:6px minmax(0,1fr) auto auto !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;gap:10px !important;align-items:center !important;padding-top:10px !important;padding-bottom:10px !important;min-height:0 !important}
html.rooom-ipad-portrait .listItem .listAccent,html.rooom-ipad-portrait .listItem.open .listAccent{grid-area:accent !important;align-self:stretch !important;height:auto !important;min-height:48px !important}
html.rooom-ipad-portrait .listItem .listMain{grid-area:main !important}
html.rooom-ipad-portrait .listItem .listMeta{grid-area:meta !important;align-self:center !important;justify-self:end !important;min-width:70px !important}
html.rooom-ipad-portrait .listItem .listEnterBtn{grid-area:button !important;align-self:center !important;justify-self:end !important}
html.rooom-ipad-portrait .listName{font-size:17px !important}
html.rooom-ipad-portrait .listDesc{font-size:12px !important}
html.rooom-ipad-portrait .listEnterBtn.entryIconBtn{width:44px !important;min-width:44px !important;height:34px !important;min-height:34px !important}
.listMeta .peopleIcon,.listMeta .peopleIcon::before,.listMeta .peopleIcon::after{display:none !important;content:none !important}
.listItem{grid-template-columns:8px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;align-items:center !important}
.listMeta{grid-area:meta !important;width:76px !important;min-width:76px !important;max-width:76px !important;display:flex !important;flex-direction:column !important;align-items:flex-end !important;justify-content:center !important;gap:3px !important;padding:0 !important;margin:0 !important;text-align:right !important;white-space:nowrap !important;overflow:visible !important;font-size:12px !important;line-height:1.05 !important;font-variant-numeric:tabular-nums !important;align-self:center !important;justify-self:end !important}
.listMetaTop,.listMetaBottom{display:block !important;width:100% !important;min-width:0 !important;height:auto !important;min-height:0 !important;padding:0 !important;margin:0 !important;white-space:nowrap !important;overflow:visible !important;text-align:right !important;line-height:1.05 !important}
.listEnterBtn.entryIconBtn{grid-area:button !important;width:38px !important;min-width:38px !important;height:32px !important;min-height:32px !important;padding:0 !important;margin:0 !important;align-self:center !important;justify-self:end !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;border-radius:999px !important;font-size:0 !important}
.entryDoorIcon{width:20px !important;height:20px !important}
@media (min-width:641px){.listItem,.listItem.open,.listItem.open.longText,.listItem.open:not(.longText){grid-template-columns:8px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;align-items:center !important;gap:10px !important}
}
@media (max-width:640px){.listItem,.listItem.open,.listItem.open.longText,.listItem.open:not(.longText){grid-template-columns:6px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;align-items:center !important;gap:8px !important}
.listEnterBtn.entryIconBtn{width:40px !important;min-width:40px !important;height:34px !important;min-height:34px !important}
}
html.rooom-ipad-portrait .listItem,html.rooom-ipad-portrait .listItem.open,html.rooom-ipad-portrait .listItem.open.longText,html.rooom-ipad-portrait .listItem.open:not(.longText){grid-template-columns:6px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;align-items:center !important;gap:8px !important}
html.rooom-ipad-portrait .listEnterBtn.entryIconBtn{width:40px !important;min-width:40px !important;height:34px !important;min-height:34px !important}
.listItem .listMeta,.listItem.open .listMeta,.listItem.open.longText .listMeta,.listItem.open:not(.longText) .listMeta{display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;align-items:flex-end !important;justify-content:center !important;gap:3px !important;width:76px !important;min-width:76px !important;max-width:76px !important;white-space:nowrap !important}
.listItem .listMetaTop,.listItem .listMetaBottom,.listItem.open .listMetaTop,.listItem.open .listMetaBottom,.listItem.open.longText .listMetaTop,.listItem.open.longText .listMetaBottom,.listItem.open:not(.longText) .listMetaTop,.listItem.open:not(.longText) .listMetaBottom{display:block !important;width:100% !important;white-space:nowrap !important;text-align:right !important;line-height:1.05 !important}
.listItem.open .listMetaTop,.listItem.open.longText .listMetaTop,.listItem.open:not(.longText) .listMetaTop{margin-bottom:2px !important}
.listItem.open .listMetaBottom,.listItem.open.longText .listMetaBottom,.listItem.open:not(.longText) .listMetaBottom{margin-top:0 !important}
.listItem.open .listEnterBtn.entryIconBtn,.listItem.open.longText .listEnterBtn.entryIconBtn,.listItem.open:not(.longText) .listEnterBtn.entryIconBtn{align-self:center !important;justify-self:end !important}
@media (min-width:641px){.listItem.open,.listItem.open.longText,.listItem.open:not(.longText){grid-template-columns:8px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;align-items:center !important;min-height:0 !important;padding-top:10px !important;padding-bottom:10px !important;row-gap:0 !important}
.listItem.open .listMain{align-self:center !important}
.listItem.open .listName{margin:0 !important;line-height:1.22 !important}
.listItem.open .listDesc{margin:4px 0 0 !important;line-height:1.35 !important}
.listItem.open .listMeta{align-self:center !important;justify-self:end !important}
.listItem.open .listEnterBtn.entryIconBtn{align-self:center !important;justify-self:end !important}
}
@media (max-width:640px){.listItem.open,.listItem.open.longText,.listItem.open:not(.longText){grid-template-columns:6px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main main main"
"accent main main main"
". meta meta button" !important;grid-template-rows:auto auto auto !important;align-items:start !important;row-gap:8px !important;min-height:0 !important;padding-top:12px !important;padding-bottom:12px !important}
.listItem.open .listAccent{grid-area:accent !important;align-self:stretch !important;height:auto !important;min-height:42px !important}
.listItem.open .listMain{grid-area:main !important;width:100% !important;min-width:0 !important;align-self:start !important}
.listItem.open .listName,.listItem.open.longText .listName,.listItem.open:not(.longText) .listName{display:block !important;-webkit-line-clamp:unset !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;margin:0 !important;line-height:1.28 !important}
.listItem.open .listDesc,.listItem.open.longText .listDesc,.listItem.open:not(.longText) .listDesc{display:block !important;-webkit-line-clamp:unset !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;margin:8px 0 0 !important;line-height:1.45 !important}
.listItem.open .listMeta,.listItem.open.longText .listMeta,.listItem.open:not(.longText) .listMeta{grid-area:meta !important;align-self:center !important;justify-self:end !important;width:76px !important;min-width:76px !important;max-width:76px !important;display:flex !important;flex-direction:column !important;align-items:flex-end !important;justify-content:center !important;gap:3px !important}
.listItem.open .listEnterBtn.entryIconBtn,.listItem.open.longText .listEnterBtn.entryIconBtn,.listItem.open:not(.longText) .listEnterBtn.entryIconBtn{grid-area:button !important;align-self:center !important;justify-self:end !important}
}
html.rooom-ipad-portrait .listItem.open,html.rooom-ipad-portrait .listItem.open.longText,html.rooom-ipad-portrait .listItem.open:not(.longText){grid-template-columns:6px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main main main"
"accent main main main"
". meta meta button" !important;grid-template-rows:auto auto auto !important;align-items:start !important;row-gap:8px !important;min-height:0 !important;padding-top:12px !important;padding-bottom:12px !important}
html.rooom-ipad-portrait .listItem.open .listAccent{grid-area:accent !important;align-self:stretch !important;height:auto !important;min-height:42px !important}
html.rooom-ipad-portrait .listItem.open .listMain{grid-area:main !important;width:100% !important;min-width:0 !important;align-self:start !important}
html.rooom-ipad-portrait .listItem.open .listName,html.rooom-ipad-portrait .listItem.open .listDesc{display:block !important;-webkit-line-clamp:unset !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important}
html.rooom-ipad-portrait .listItem.open .listDesc{margin:8px 0 0 !important;line-height:1.45 !important}
html.rooom-ipad-portrait .listItem.open .listMeta{grid-area:meta !important;align-self:center !important;justify-self:end !important;width:76px !important;min-width:76px !important;max-width:76px !important}
html.rooom-ipad-portrait .listItem.open .listEnterBtn.entryIconBtn{grid-area:button !important;align-self:center !important;justify-self:end !important}
#newRoomTitleNote,#newRoomSubtitleNote{font-size:12px;color:#777;line-height:1.55}
.listMain{gap:0 !important}
.listTitleRow{gap:5px !important;line-height:1 !important}
.listName{margin:0 !important;line-height:1.08 !important}
.listDesc{margin:2px 0 0 !important;line-height:1.18 !important}
.listItem:not(.open) .listMain{display:flex !important;flex-direction:column !important;justify-content:center !important;gap:0 !important}
.listItem:not(.open) .listName{line-height:1.08 !important}
.listItem:not(.open) .listDesc{margin-top:2px !important;line-height:1.16 !important}
.listItem.open .listName{line-height:1.14 !important}
.listItem.open .listDesc{margin-top:4px !important;line-height:1.26 !important}
@media (min-width:641px){.listItem,.listItem.open,.listItem.open.longText,.listItem.open:not(.longText){grid-template-columns:8px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;align-items:center !important;min-height:58px !important;padding:8px 10px !important;gap:10px !important;row-gap:0 !important}
.listItem .listAccent,.listItem.open .listAccent{grid-area:accent !important;align-self:center !important;height:42px !important;min-height:42px !important}
.listItem .listMain,.listItem.open .listMain{grid-area:main !important;align-self:center !important;justify-self:stretch !important;min-width:0 !important}
.listItem .listMeta,.listItem.open .listMeta,.listItem.open.longText .listMeta,.listItem.open:not(.longText) .listMeta{grid-area:meta !important;align-self:center !important;justify-self:end !important;width:76px !important;min-width:76px !important;max-width:76px !important;transform:none !important}
.listItem .listEnterBtn.entryIconBtn,.listItem.open .listEnterBtn.entryIconBtn,.listItem.open.longText .listEnterBtn.entryIconBtn,.listItem.open:not(.longText) .listEnterBtn.entryIconBtn{grid-area:button !important;align-self:center !important;justify-self:end !important;transform:none !important}
.listItem:not(.open) .listDesc{-webkit-line-clamp:2 !important}
.listItem.open .listDesc{margin-top:4px !important}
}
@media (max-width:640px){.listItem:not(.open) .listName{line-height:1.08 !important}
.listItem:not(.open) .listDesc{margin-top:2px !important;line-height:1.16 !important}
}
html.rooom-ipad-portrait .listItem:not(.open) .listName{line-height:1.08 !important}
html.rooom-ipad-portrait .listItem:not(.open) .listDesc{margin-top:2px !important;line-height:1.16 !important}
.listToggle,.listItem.open .listToggle{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:16px !important;height:16px !important;min-width:16px !important;min-height:16px !important;padding:0 !important;margin:0 0 0 4px !important;border:0 !important;outline:0 !important;background:transparent !important;box-shadow:none !important;color:inherit !important;line-height:1 !important;font-size:10px !important;opacity:.82 !important;vertical-align:middle !important;transform:none !important}
.listItem.open .listToggle{transform:none !important}
.listItem.open .listToggle::before,.listItem.open .listToggle::after{box-shadow:none !important;border:0 !important}
.listTitleRow,.listItem.open .listTitleRow,.listItem.open.longText .listTitleRow,.listItem.open:not(.longText) .listTitleRow{display:flex !important;align-items:center !important;gap:0 !important;min-width:0 !important;line-height:1.08 !important}
.listName,.listItem.open .listName,.listItem.open.longText .listName,.listItem.open:not(.longText) .listName{margin:0 !important;line-height:1.08 !important}
.listDesc,.listItem.open .listDesc,.listItem.open.longText .listDesc,.listItem.open:not(.longText) .listDesc{margin:2px 0 0 !important;line-height:1.16 !important}
.listItem,.listItem.open,.listItem.open.longText,.listItem.open:not(.longText){grid-template-columns:var(--rooom-list-accent,8px) minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;align-items:center !important;row-gap:0 !important}
.listItem .listAccent,.listItem.open .listAccent,.listItem.open.longText .listAccent,.listItem.open:not(.longText) .listAccent{grid-area:accent !important;align-self:center !important;height:42px !important;min-height:42px !important}
.listItem .listMain,.listItem.open .listMain,.listItem.open.longText .listMain,.listItem.open:not(.longText) .listMain{grid-area:main !important;align-self:center !important;justify-self:stretch !important;min-width:0 !important;display:flex !important;flex-direction:column !important;justify-content:center !important;gap:0 !important}
.listItem .listMeta,.listItem.open .listMeta,.listItem.open.longText .listMeta,.listItem.open:not(.longText) .listMeta{grid-area:meta !important;align-self:center !important;justify-self:end !important;width:76px !important;min-width:76px !important;max-width:76px !important;transform:none !important}
.listItem .listEnterBtn.entryIconBtn,.listItem.open .listEnterBtn.entryIconBtn,.listItem.open.longText .listEnterBtn.entryIconBtn,.listItem.open:not(.longText) .listEnterBtn.entryIconBtn{grid-area:button !important;align-self:center !important;justify-self:end !important;transform:none !important}
.listItem:not(.open) .listName{display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important;white-space:normal !important}
.listItem:not(.open) .listDesc{display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important;white-space:normal !important}
.listItem.open .listName,.listItem.open .listDesc{display:block !important;-webkit-line-clamp:unset !important;overflow:visible !important;white-space:normal !important}
@media (min-width:641px){.listItem,.listItem.open,.listItem.open.longText,.listItem.open:not(.longText){--rooom-list-accent:8px;min-height:58px !important;padding:8px 10px !important;gap:10px !important}
}
@media (max-width:640px){.listItem,.listItem.open,.listItem.open:not(.longText){--rooom-list-accent:6px;grid-template-columns:6px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;align-items:center !important;gap:8px !important;row-gap:0 !important}
.listItem.open.longText{grid-template-columns:6px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main main main"
". meta meta button" !important;grid-template-rows:auto auto !important;align-items:start !important;row-gap:8px !important}
.listItem.open.longText .listMain{grid-area:main !important;align-self:start !important}
.listItem.open.longText .listMeta{grid-area:meta !important;align-self:center !important;justify-self:end !important}
.listItem.open.longText .listEnterBtn.entryIconBtn{grid-area:button !important;align-self:center !important;justify-self:end !important}
}
html.rooom-ipad-portrait .listItem,html.rooom-ipad-portrait .listItem.open,html.rooom-ipad-portrait .listItem.open:not(.longText){--rooom-list-accent:6px;grid-template-columns:6px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;align-items:center !important;gap:8px !important;row-gap:0 !important}
html.rooom-ipad-portrait .listItem.open.longText{grid-template-columns:6px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main main main"
". meta meta button" !important;grid-template-rows:auto auto !important;align-items:start !important;row-gap:8px !important}
html.rooom-ipad-portrait .listItem.open.longText .listMain{grid-area:main !important;align-self:start !important}
html.rooom-ipad-portrait .listItem.open.longText .listMeta{grid-area:meta !important;align-self:center !important;justify-self:end !important}
html.rooom-ipad-portrait .listItem.open.longText .listEnterBtn.entryIconBtn{grid-area:button !important;align-self:center !important;justify-self:end !important}
.listToggle{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:16px !important;height:16px !important;min-width:16px !important;min-height:16px !important;margin:0 0 0 4px !important;padding:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important;color:inherit !important;font-size:10px !important;line-height:1 !important;opacity:.82 !important;transform:none !important}
.listItem.open .listToggle{transform:rotate(180deg) !important}
.listItem:not(.open) .listName,.listItem.open:not(.longText) .listName{display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:1 !important;overflow:hidden !important;white-space:normal !important;text-overflow:clip !important;margin:0 !important;line-height:1.08 !important}
.listItem:not(.open) .listDesc,.listItem.open:not(.longText) .listDesc{display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:1 !important;overflow:hidden !important;white-space:normal !important;text-overflow:clip !important;margin:2px 0 0 !important;line-height:1.16 !important}
.listItem.open:not(.longText){grid-template-columns:var(--rooom-list-accent,8px) minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;align-items:center !important;row-gap:0 !important}
.listItem.open:not(.longText) .listMain{grid-area:main !important;align-self:center !important;justify-self:stretch !important;display:flex !important;flex-direction:column !important;justify-content:center !important;gap:0 !important;min-width:0 !important}
.listItem.open:not(.longText) .listMeta{grid-area:meta !important;align-self:center !important;justify-self:end !important}
.listItem.open:not(.longText) .listEnterBtn.entryIconBtn{grid-area:button !important;align-self:center !important;justify-self:end !important}
.listItem.open.longText .listName,.listItem.open.longText .listDesc{display:block !important;-webkit-line-clamp:unset !important;overflow:visible !important;white-space:normal !important;text-overflow:clip !important}
.listItem.open.longText .listName{margin:0 !important;line-height:1.14 !important}
.listItem.open.longText .listDesc{margin:5px 0 0 !important;line-height:1.28 !important}
@media (min-width:641px){.listItem,.listItem.open:not(.longText){--rooom-list-accent:8px;min-height:58px !important;height:auto !important;padding:8px 10px !important;gap:10px !important}
.listItem.open.longText{--rooom-list-accent:8px;grid-template-columns:8px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;align-items:center !important;min-height:58px !important;padding:8px 10px !important;gap:10px !important}
.listItem.open.longText .listMain{align-self:center !important}
.listItem .listAccent,.listItem.open .listAccent{align-self:center !important;height:42px !important;min-height:42px !important}
}
@media (max-width:640px){.listItem,.listItem.open:not(.longText){--rooom-list-accent:6px;grid-template-columns:6px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;align-items:center !important;gap:8px !important;row-gap:0 !important;min-height:58px !important;padding:8px 10px !important}
.listItem.open.longText{grid-template-columns:6px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main main main"
". meta meta button" !important;grid-template-rows:auto auto !important;align-items:start !important;row-gap:8px !important;min-height:0 !important;padding:11px 10px !important}
.listItem.open.longText .listAccent{grid-area:accent !important;align-self:stretch !important;height:auto !important;min-height:42px !important}
.listItem.open.longText .listMain{grid-area:main !important;align-self:start !important}
.listItem.open.longText .listMeta{grid-area:meta !important;align-self:center !important;justify-self:end !important}
.listItem.open.longText .listEnterBtn.entryIconBtn{grid-area:button !important;align-self:center !important;justify-self:end !important}
}
html.rooom-ipad-portrait .listItem,html.rooom-ipad-portrait .listItem.open:not(.longText){--rooom-list-accent:6px;grid-template-columns:6px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;align-items:center !important;gap:8px !important;row-gap:0 !important;min-height:58px !important;padding:8px 10px !important}
html.rooom-ipad-portrait .listItem.open.longText{grid-template-columns:6px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main main main"
". meta meta button" !important;grid-template-rows:auto auto !important;align-items:start !important;row-gap:8px !important;min-height:0 !important;padding:11px 10px !important}
html.rooom-ipad-portrait .listItem.open.longText .listAccent{grid-area:accent !important;align-self:stretch !important;height:auto !important;min-height:42px !important}
.listItem .listMeta,.listItem.open:not(.longText) .listMeta{height:30px !important;min-height:30px !important;max-height:30px !important;display:grid !important;grid-template-rows:15px 15px !important;align-items:center !important;justify-items:end !important;align-content:center !important;justify-content:end !important;gap:0 !important;line-height:1 !important;transform:none !important}
.listItem .listMetaTop,.listItem .listMetaBottom,.listItem.open:not(.longText) .listMetaTop,.listItem.open:not(.longText) .listMetaBottom{display:block !important;width:76px !important;height:15px !important;min-height:15px !important;max-height:15px !important;line-height:15px !important;margin:0 !important;padding:0 !important;text-align:right !important;white-space:nowrap !important;transform:none !important}
.listItem:not(.longText),.listItem.open:not(.longText){align-items:center !important}
.listItem:not(.longText) .listMeta,.listItem.open:not(.longText) .listMeta,.listItem:not(.longText) .listEnterBtn.entryIconBtn,.listItem.open:not(.longText) .listEnterBtn.entryIconBtn{align-self:center !important;justify-self:end !important}
.listItem:not(.longText) .listMain,.listItem.open:not(.longText) .listMain{align-self:center !important;justify-content:center !important;transform:none !important}
.listItem.open.longText .listMeta{height:auto !important;min-height:30px !important;max-height:none !important;display:flex !important;flex-direction:column !important;gap:3px !important}
.modalOverlay.show{display:flex !important;align-items:flex-start !important;justify-content:center !important;overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch !important;overscroll-behavior:contain !important;padding-top:24px !important;padding-bottom:calc(24px + var(--rooom-safe-bottom)) !important}
#createRoomModal.show{overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch !important}
#createRoomModal .modal{max-height:calc(var(--rooom-vh,100vh) - 48px - var(--rooom-safe-bottom)) !important;overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch !important;overscroll-behavior:contain !important}
#createRoomForm{padding-bottom:calc(10px + var(--rooom-safe-bottom)) !important}
@media (max-width:640px){.modalOverlay.show{padding-top:18px !important;padding-bottom:calc(120px + var(--rooom-safe-bottom)) !important;touch-action:pan-y !important}
#createRoomModal .modal{width:min(520px,calc(100vw - 24px)) !important;max-height:calc(var(--rooom-vh,100vh) - 36px - var(--rooom-safe-bottom)) !important}
#createRoomForm{padding-bottom:calc(80px + var(--rooom-safe-bottom)) !important}
}
html.rooom-ipad-portrait .modalOverlay.show{padding-top:20px !important;padding-bottom:calc(90px + var(--rooom-safe-bottom)) !important;touch-action:pan-y !important}
html.rooom-ipad-portrait #createRoomModal .modal{max-height:calc(var(--rooom-vh,100vh) - 40px - var(--rooom-safe-bottom)) !important}
html.rooom-ipad-portrait #createRoomForm{padding-bottom:calc(70px + var(--rooom-safe-bottom)) !important}
:is(#userRoomList,#prepOpenCloneList) .listItem,:is(#userRoomList,#prepOpenCloneList) .listItem.open:not(.longText),#roomList .listItem,#roomList .listItem.open:not(.longText){min-height:58px !important}
:is(#userRoomList,#prepOpenCloneList) .listMain,:is(#userRoomList,#prepOpenCloneList) .listItem.open:not(.longText) .listMain,#roomList .listMain,#roomList .listItem.open:not(.longText) .listMain{display:flex !important;flex-direction:column !important;justify-content:center !important;gap:0 !important;align-self:center !important}
:is(#userRoomList,#prepOpenCloneList) .listTitleRow,:is(#userRoomList,#prepOpenCloneList) .listItem.open:not(.longText) .listTitleRow,#roomList .listTitleRow,#roomList .listItem.open:not(.longText) .listTitleRow{display:flex !important;align-items:center !important;line-height:1.08 !important;gap:0 !important}
:is(#userRoomList,#prepOpenCloneList) .listName,:is(#userRoomList,#prepOpenCloneList) .listItem.open:not(.longText) .listName,#roomList .listName,#roomList .listItem.open:not(.longText) .listName{margin:0 !important;line-height:1.08 !important}
:is(#userRoomList,#prepOpenCloneList) .listDesc,:is(#userRoomList,#prepOpenCloneList) .listItem.open:not(.longText) .listDesc,#roomList .listDesc,#roomList .listItem.open:not(.longText) .listDesc{margin:2px 0 0 !important;line-height:1.16 !important}
:is(#userRoomList,#prepOpenCloneList) .listItem.open.longText .listName,#roomList .listItem.open.longText .listName{line-height:1.14 !important}
:is(#userRoomList,#prepOpenCloneList) .listItem.open.longText .listDesc,#roomList .listItem.open.longText .listDesc{margin-top:5px !important;line-height:1.28 !important}
:is(#userRoomList,#prepOpenCloneList) .listMeta,:is(#userRoomList,#prepOpenCloneList) .listItem.open:not(.longText) .listMeta,#roomList .listMeta,#roomList .listItem.open:not(.longText) .listMeta{height:30px !important;min-height:30px !important;max-height:30px !important;display:grid !important;grid-template-rows:15px 15px !important;align-items:center !important;justify-items:end !important;align-content:center !important;justify-content:end !important;gap:0 !important;line-height:1 !important;transform:none !important}
:is(#userRoomList,#prepOpenCloneList) .listMetaTop,:is(#userRoomList,#prepOpenCloneList) .listMetaBottom,#roomList .listMetaTop,#roomList .listMetaBottom{height:15px !important;min-height:15px !important;max-height:15px !important;line-height:15px !important;margin:0 !important;padding:0 !important}
:is(#userRoomList,#prepOpenCloneList) .listItem.open:not(.longText),#roomList .listItem.open:not(.longText){padding-top:8px !important;padding-bottom:8px !important;row-gap:0 !important;align-items:center !important}
#roomList .listItem:not(.longText) .listMain,#roomList .listItem.open:not(.longText) .listMain,:is(#userRoomList,#prepOpenCloneList) .listItem:not(.longText) .listMain,:is(#userRoomList,#prepOpenCloneList) .listItem.open:not(.longText) .listMain{height:34px !important;min-height:34px !important;max-height:34px !important;display:grid !important;grid-template-rows:17px 15px !important;align-content:center !important;justify-content:stretch !important;gap:2px !important;align-self:center !important;transform:none !important}
#roomList .listItem:not(.longText) .listTitleRow,#roomList .listItem.open:not(.longText) .listTitleRow,:is(#userRoomList,#prepOpenCloneList) .listItem:not(.longText) .listTitleRow,:is(#userRoomList,#prepOpenCloneList) .listItem.open:not(.longText) .listTitleRow{height:17px !important;min-height:17px !important;max-height:17px !important;display:flex !important;align-items:center !important;gap:0 !important;line-height:17px !important;margin:0 !important;padding:0 !important;transform:none !important}
#roomList .listItem:not(.longText) .listName,#roomList .listItem.open:not(.longText) .listName,:is(#userRoomList,#prepOpenCloneList) .listItem:not(.longText) .listName,:is(#userRoomList,#prepOpenCloneList) .listItem.open:not(.longText) .listName{height:17px !important;min-height:17px !important;max-height:17px !important;line-height:17px !important;margin:0 !important;padding:0 !important;display:block !important;overflow:hidden !important;white-space:nowrap !important;text-overflow:ellipsis !important;transform:none !important}
#roomList .listItem:not(.longText) .listToggle,#roomList .listItem.open:not(.longText) .listToggle,:is(#userRoomList,#prepOpenCloneList) .listItem:not(.longText) .listToggle,:is(#userRoomList,#prepOpenCloneList) .listItem.open:not(.longText) .listToggle{width:16px !important;height:16px !important;min-width:16px !important;min-height:16px !important;max-width:16px !important;max-height:16px !important;margin:0 0 0 4px !important;padding:0 !important;line-height:16px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;vertical-align:top !important;border:0 !important;background:transparent !important;box-shadow:none !important}
#roomList .listItem:not(.longText) .listDesc,#roomList .listItem.open:not(.longText) .listDesc,:is(#userRoomList,#prepOpenCloneList) .listItem:not(.longText) .listDesc,:is(#userRoomList,#prepOpenCloneList) .listItem.open:not(.longText) .listDesc{height:15px !important;min-height:15px !important;max-height:15px !important;line-height:15px !important;margin:0 !important;padding:0 !important;display:block !important;overflow:hidden !important;white-space:nowrap !important;text-overflow:ellipsis !important;transform:none !important}
#roomList .listItem:not(.longText),#roomList .listItem.open:not(.longText),:is(#userRoomList,#prepOpenCloneList) .listItem:not(.longText),:is(#userRoomList,#prepOpenCloneList) .listItem.open:not(.longText){min-height:58px !important;height:58px !important;max-height:58px !important;align-items:center !important;padding-top:8px !important;padding-bottom:8px !important;row-gap:0 !important}
#roomList .listItem.open.longText,:is(#userRoomList,#prepOpenCloneList) .listItem.open.longText{height:auto !important;max-height:none !important}
#roomList .listItem.open.longText .listMain,:is(#userRoomList,#prepOpenCloneList) .listItem.open.longText .listMain{height:auto !important;min-height:0 !important;max-height:none !important;display:flex !important;flex-direction:column !important;justify-content:flex-start !important;gap:0 !important}
#roomList .listItem.open.longText .listTitleRow,:is(#userRoomList,#prepOpenCloneList) .listItem.open.longText .listTitleRow,#roomList .listItem.open.longText .listName,:is(#userRoomList,#prepOpenCloneList) .listItem.open.longText .listName,#roomList .listItem.open.longText .listDesc,:is(#userRoomList,#prepOpenCloneList) .listItem.open.longText .listDesc{height:auto !important;min-height:0 !important;max-height:none !important;line-height:1.25 !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important}
.createRoomImagePicker{width:100%;min-height:86px;border:1px dashed rgba(0,0,0,.22);background:#f7f7f7;color:#222;border-radius:16px;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;cursor:pointer;font-size:14px;line-height:1.5;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.createRoomImagePicker:hover{background:#fff;border-color:rgba(0,0,0,.34);transform:translateY(-1px)}
.createRoomImageInput{display:none}
.createRoomImagePreview{display:none;align-items:center;gap:10px;margin-top:10px;padding:9px;border-radius:16px;background:rgba(0,0,0,.045)}
.createRoomImagePreview.show{display:flex}
.createRoomImagePreview img{width:68px;height:68px;object-fit:cover;border-radius:14px;background:#ddd;flex:0 0 auto}
.createRoomImagePreviewMeta{min-width:0;flex:1}
.createRoomImagePreviewName{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.createRoomImagePreviewSize{margin-top:3px;font-size:12px;color:#666}
.createRoomImageRemoveBtn{width:34px;height:34px;border:0;border-radius:12px;background:#141414;color:#fff;cursor:pointer;flex:0 0 auto;font-size:18px;line-height:1}
.list .listImageItem,#roomList .listImageItem,:is(#userRoomList,#prepOpenCloneList) .listImageItem,#roomList .listItem.listImageItem:not(.longText),:is(#userRoomList,#prepOpenCloneList) .listItem.listImageItem:not(.longText),#roomList .listItem.listImageItem.open:not(.longText),:is(#userRoomList,#prepOpenCloneList) .listItem.listImageItem.open:not(.longText){position:relative !important;display:flex !important;flex-direction:column !important;grid-template-columns:none !important;grid-template-areas:none !important;align-items:stretch !important;justify-content:stretch !important;height:260px !important;min-height:260px !important;max-height:none !important;padding:0 !important;gap:0 !important;overflow:hidden !important;border-radius:22px !important;background:#111 !important;color:#fff !important;box-shadow:0 12px 26px rgba(0,0,0,.12) !important;border:1px solid rgba(0,0,0,.08) !important}
.listImageTap{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;background:#111;cursor:pointer;overflow:hidden;display:block;color:#fff;text-align:left}
.listRoomImage{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.001)}
.listImageOverlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:22px;background:rgba(0,0,0,.68);color:#fff;opacity:0;pointer-events:none;transition:opacity .18s ease}
.listImageItem.imageOpen .listImageOverlay{opacity:1}
.listImageFullTitle{margin:0;font-size:22px;line-height:1.35;font-weight:800;word-break:break-word}
.listImageFullDesc{margin:10px 0 0;font-size:14px;line-height:1.65;color:rgba(255,255,255,.88);word-break:break-word}
.listImageBottom{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto auto 40px;align-items:center;gap:8px;padding:42px 10px 10px;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.50) 58%,rgba(0,0,0,0));pointer-events:none}
.listImageTitle{min-width:0;margin:0;color:#fff !important;font-size:15px;line-height:1.25;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:center}
.listImagePeople,.listImageTime{align-self:center !important;justify-self:end !important;color:rgba(255,255,255,.94) !important;font-size:12px !important;line-height:1 !important;white-space:nowrap !important;text-align:right !important;padding:0 !important;margin:0 !important;pointer-events:none !important;font-variant-numeric:tabular-nums !important;text-shadow:0 1px 5px rgba(0,0,0,.45) !important}
.listImageBottom .listEnterBtn.entryIconBtn{align-self:center !important;justify-self:end !important;pointer-events:auto !important;background:#fff !important;color:#111 !important}
.listImageBottom .entryDoorIcon::before,.listImageBottom .entryDoorIcon::after{background:#111 !important}
@media (max-width:640px){.list .listImageItem,#roomList .listImageItem,:is(#userRoomList,#prepOpenCloneList) .listImageItem,#roomList .listItem.listImageItem:not(.longText),:is(#userRoomList,#prepOpenCloneList) .listItem.listImageItem:not(.longText),#roomList .listItem.listImageItem.open:not(.longText),:is(#userRoomList,#prepOpenCloneList) .listItem.listImageItem.open:not(.longText){height:220px !important;min-height:220px !important;border-radius:20px !important}
.listImageBottom{grid-template-columns:minmax(0,1fr) auto auto 38px;gap:7px;padding:38px 9px 9px}
.listImageTitle{font-size:14px}
.listImagePeople,.listImageTime{font-size:11px !important}
.listImageFullTitle{font-size:20px}
.listImageFullDesc{font-size:13px}
}
html.rooom-ipad-portrait .listImageItem{height:250px !important;min-height:250px !important}
.card.cardImageRoom{position:relative !important;min-height:240px !important;padding:0 !important;overflow:hidden !important;background:#111 !important;color:#fff !important}
.cardImageTap{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;padding:0 !important;margin:0 !important;border:0 !important;background:#111 !important;cursor:pointer !important;display:block !important;overflow:hidden !important;color:#fff !important;text-align:left !important}
.cardRoomImage{width:100% !important;height:100% !important;display:block !important;object-fit:cover !important;transform:scale(1.001) !important}
.cardImageOverlay{position:absolute !important;inset:0 !important;z-index:2 !important;display:flex !important;flex-direction:column !important;justify-content:center !important;padding:22px !important;background:rgba(0,0,0,.70) !important;color:#fff !important;opacity:0 !important;pointer-events:none !important;transition:opacity .18s ease !important}
.cardImageRoom.imageOpen .cardImageOverlay{opacity:1 !important}
.cardImageFullTitle{margin:0 !important;font-size:24px !important;line-height:1.35 !important;font-weight:800 !important;word-break:break-word !important}
.cardImageFullDesc{margin:10px 0 0 !important;font-size:14px !important;line-height:1.65 !important;color:rgba(255,255,255,.88) !important;word-break:break-word !important}
.cardImageBottom{position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;z-index:3 !important;display:grid !important;grid-template-columns:minmax(0,1fr) auto auto 40px !important;align-items:center !important;gap:8px !important;padding:58px 12px 12px !important;background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,.52) 62%,rgba(0,0,0,0)) !important;pointer-events:none !important}
.cardImageTitle{min-width:0 !important;margin:0 !important;color:#fff !important;font-size:17px !important;line-height:1.2 !important;font-weight:800 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;align-self:center !important;text-shadow:0 1px 6px rgba(0,0,0,.48) !important}
.cardImagePeople,.cardImageTime{align-self:center !important;justify-self:end !important;color:rgba(255,255,255,.94) !important;font-size:12px !important;line-height:1 !important;white-space:nowrap !important;text-align:right !important;padding:0 !important;margin:0 !important;pointer-events:none !important;font-variant-numeric:tabular-nums !important;text-shadow:0 1px 5px rgba(0,0,0,.45) !important}
.cardImageMeta{display:none !important}
.cardImageBottom .listEnterBtn.entryIconBtn,.cardImageEnterBtn{align-self:center !important;justify-self:end !important;pointer-events:auto !important;background:#fff !important;color:#111 !important;width:38px !important;min-width:38px !important;height:32px !important;min-height:32px !important;padding:0 !important;font-size:0 !important}
.cardImageBottom .entryDoorIcon::before,.cardImageBottom .entryDoorIcon::after{background:#111 !important}
.cardImageRoom.imageOpen .cardImageBottom,.listImageItem.imageOpen .listImageBottom{opacity:.18 !important}
@media (max-width:640px){.card.cardImageRoom{min-height:250px !important}
.cardImageBottom{grid-template-columns:minmax(0,1fr) auto auto 38px !important;padding:52px 10px 10px !important;gap:7px !important}
.cardImageTitle{font-size:15px !important}
.cardImagePeople,.cardImageTime{font-size:11px !important}
.cardImageFullTitle{font-size:22px !important}
.cardImageFullDesc{font-size:13px !important}
}
.card.cardImageRoom{position:relative !important}
.cardImageBottom{position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;z-index:3 !important;height:58px !important;min-height:58px !important;display:grid !important;grid-template-columns:minmax(0,1fr) auto auto 42px !important;grid-template-areas:"title people time enter" !important;align-items:center !important;justify-items:start !important;column-gap:8px !important;padding:0 12px 10px !important;margin:0 !important;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.58) 58%,rgba(0,0,0,0)) !important;pointer-events:none !important}
.cardImageTitle{grid-area:title !important;align-self:center !important;justify-self:start !important;min-width:0 !important;width:100% !important;margin:0 !important;padding:0 !important;color:#fff !important;font-size:16px !important;line-height:32px !important;height:32px !important;font-weight:800 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;transform:none !important}
.cardImagePeople,.cardImageTime{align-self:center !important;justify-self:end !important;height:32px !important;min-height:32px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;margin:0 !important;padding:0 !important;color:rgba(255,255,255,.96) !important;font-size:12px !important;line-height:32px !important;white-space:nowrap !important;font-variant-numeric:tabular-nums !important;text-shadow:0 1px 5px rgba(0,0,0,.45) !important;pointer-events:none !important;transform:none !important}
.cardImagePeople{grid-area:people !important}
.cardImageTime{grid-area:time !important}
.cardImageBottom .listEnterBtn.entryIconBtn,.cardImageBottom .cardImageEnterBtn{grid-area:enter !important;align-self:center !important;justify-self:end !important;width:40px !important;min-width:40px !important;height:32px !important;min-height:32px !important;padding:0 !important;margin:0 !important;border-radius:999px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;line-height:1 !important;background:#fff !important;color:#111 !important;pointer-events:auto !important;transform:none !important}
.cardImageBottom .entryDoorIcon{width:20px !important;height:20px !important;margin:0 !important;transform:none !important}
@media (max-width:640px){.cardImageBottom{height:54px !important;min-height:54px !important;grid-template-columns:minmax(0,1fr) auto auto 40px !important;column-gap:6px !important;padding:0 10px 9px !important}
.cardImageTitle{font-size:15px !important;height:32px !important;line-height:32px !important}
.cardImagePeople,.cardImageTime{height:32px !important;min-height:32px !important;font-size:11px !important;line-height:32px !important}
.cardImageBottom .listEnterBtn.entryIconBtn,.cardImageBottom .cardImageEnterBtn{width:38px !important;min-width:38px !important;height:32px !important;min-height:32px !important}
}
.card.cardImageRoom,.card.cardPlainRoom{position:relative !important;overflow:hidden !important}
.card.cardImageRoom .cardImageBottom,.card.cardPlainRoom .cardImageBottom{bottom:0 !important;height:46px !important;min-height:46px !important;padding:0 12px 6px !important;display:grid !important;grid-template-columns:minmax(0,1fr) auto auto 42px !important;grid-template-areas:"title people time enter" !important;align-items:end !important;column-gap:8px !important}
.card.cardImageRoom .cardImageBottom{background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.52) 62%,rgba(0,0,0,0)) !important}
.card.cardPlainRoom{min-height:240px !important;padding:16px !important}
.cardPlainMain{display:flex !important;flex-direction:column !important;min-height:0 !important;padding-bottom:54px !important}
.card.cardPlainRoom .cardImageBottom{background:linear-gradient(to top,rgba(0,0,0,.20),rgba(0,0,0,.10) 58%,rgba(0,0,0,0)) !important;pointer-events:none !important}
.card.cardPlainRoom .cardImageTitle,.card.cardPlainRoom .cardImagePeople,.card.cardPlainRoom .cardImageTime{color:#fff !important;text-shadow:0 1px 5px rgba(0,0,0,.35) !important}
.cardImageTitle{grid-area:title !important;align-self:end !important;height:32px !important;line-height:32px !important;margin:0 !important}
.cardImageBottom .cardImagePeople,.cardImageBottom .cardImageTime{align-self:end !important;height:32px !important;min-height:32px !important;line-height:32px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important}
.cardImageBottom .listEnterBtn.entryIconBtn,.cardImageBottom .cardImageEnterBtn{grid-area:enter !important;align-self:end !important;justify-self:end !important;width:40px !important;min-width:40px !important;height:32px !important;min-height:32px !important;padding:0 !important;margin:0 !important;pointer-events:auto !important}
.card.cardPlainRoom .entryDoorIcon::before,.card.cardPlainRoom .entryDoorIcon::after{background:#111 !important}
@media (max-width:640px){.card.cardImageRoom .cardImageBottom,.card.cardPlainRoom .cardImageBottom{height:44px !important;min-height:44px !important;grid-template-columns:minmax(0,1fr) auto auto 40px !important;column-gap:6px !important;padding:0 10px 6px !important}
.card.cardPlainRoom{min-height:250px !important}
.cardPlainMain{padding-bottom:52px !important}
}
.card.cardImageRoom,.card.cardPlainRoom{position:relative !important;overflow:hidden !important;display:flex !important;flex-direction:column !important;min-height:240px !important}
.card.cardImageRoom{padding:0 !important}
.card.cardPlainRoom{padding:16px !important}
.cardPlainMain{flex:1 1 auto !important;min-height:0 !important;padding-bottom:54px !important}
.card.cardImageRoom .cardImageBottom,.card.cardPlainRoom .cardImageBottom{position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;z-index:3 !important;height:46px !important;min-height:46px !important;padding:0 12px 6px !important;display:grid !important;grid-template-columns:minmax(0,1fr) auto auto 42px !important;grid-template-areas:"title people time enter" !important;align-items:end !important;column-gap:8px !important;pointer-events:none !important}
.card.cardPlainRoom .cardImageBottom{background:linear-gradient(to top,rgba(0,0,0,.22),rgba(0,0,0,.10) 58%,rgba(0,0,0,0)) !important}
.cardImageTitle,.cardPlainHudTitle{grid-area:title !important;align-self:end !important;justify-self:start !important;min-width:0 !important;width:100% !important;height:32px !important;line-height:32px !important;margin:0 !important;padding:0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
.cardImageBottom .cardImagePeople,.cardImageBottom .cardImageTime{align-self:end !important;justify-self:end !important;height:32px !important;min-height:32px !important;line-height:32px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;margin:0 !important;padding:0 !important;white-space:nowrap !important;pointer-events:none !important;font-variant-numeric:tabular-nums !important}
.card.cardPlainRoom .roomName{display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:3 !important;overflow:hidden !important;text-overflow:clip !important;margin-bottom:8px !important}
.card.cardPlainRoom .desc{display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important;text-overflow:clip !important}
@media (min-width:900px) and (max-width:1180px){.grid{align-items:stretch !important}
.card.cardImageRoom,.card.cardPlainRoom{min-height:276px !important;height:276px !important}
.card.cardPlainRoom .roomName{-webkit-line-clamp:3 !important}
.card.cardPlainRoom .desc{-webkit-line-clamp:2 !important}
}
@media (max-width:640px){.card.cardImageRoom,.card.cardPlainRoom{min-height:250px !important}
.card.cardPlainRoom{padding:16px !important}
.cardPlainMain{padding-bottom:52px !important}
.card.cardImageRoom .cardImageBottom,.card.cardPlainRoom .cardImageBottom{height:44px !important;min-height:44px !important;grid-template-columns:minmax(0,1fr) auto auto 40px !important;column-gap:6px !important;padding:0 10px 6px !important}
}
.card.cardPlainRoom .cardPlainBottom{grid-template-columns:minmax(0,1fr) auto auto 42px !important;grid-template-areas:"spacer people time enter" !important}
.card.cardPlainRoom .cardPlainHudTitle{display:none !important}
.card.cardPlainRoom .cardImagePeople{grid-area:people !important}
.card.cardPlainRoom .cardImageTime{grid-area:time !important}
.card.cardPlainRoom .cardImageEnterBtn{grid-area:enter !important}
.cardImageTap{touch-action:manipulation !important;-webkit-tap-highlight-color:transparent !important}
.cardImageTap:focus,.cardImageTap:focus-visible{outline:none !important}
.cardImageOverlay{pointer-events:none !important}
@media (max-width:640px){.card.cardPlainRoom .cardPlainBottom{grid-template-columns:minmax(0,1fr) auto auto 40px !important}
}
.entryDoorIcon{position:relative !important;display:inline-block !important;width:24px !important;height:24px !important;margin:0 !important;padding:0 !important;background-repeat:no-repeat !important;background-position:center center !important;background-size:contain !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23111' d='M8 8 29 2v60L8 56z'/%3E%3Ccircle cx='24' cy='34' r='2.4' fill='%23fff'/%3E%3Cpath fill='%23111' d='M36 10h19v5H36zM50 10h5v17h-5zM36 49h19v5H36zM50 37h5v17h-5zM31 32l15-12v7h14v10H46v7z'/%3E%3C/svg%3E") !important;transform:none !important}
.entryDoorIcon::before,.entryDoorIcon::after{content:none !important;display:none !important;background:none !important;clip-path:none !important}
.cardImageBottom .entryDoorIcon,.card.cardPlainRoom .entryDoorIcon,.listEnterBtn.entryIconBtn .entryDoorIcon{width:24px !important;height:24px !important;transform:none !important}
@media (max-width:640px){.cardImageBottom .entryDoorIcon,.card.cardPlainRoom .entryDoorIcon,.listEnterBtn.entryIconBtn .entryDoorIcon{width:23px !important;height:23px !important}
}
.entryArchiveIcon{position:relative !important;display:inline-block !important;width:24px !important;height:24px !important;margin:0 !important;padding:0 !important;background-repeat:no-repeat !important;background-position:center center !important;background-size:contain !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='%23111' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' d='M32 54C23 47 13 47 6 50V12c7-3 17-2 26 5 9-7 19-8 26-5v38c-7-3-17-3-26 4z'/%3E%3Cpath fill='none' stroke='%23111' stroke-width='4' stroke-linecap='round' d='M16 23c4-1 8 0 12 2M16 33c4-1 8 0 12 2M48 23c-4-1-8 0-12 2M48 33c-4-1-8 0-12 2'/%3E%3C/svg%3E") !important}
@media (max-width:640px){.entryArchiveIcon{width:23px !important;height:23px !important}
}
.cardImageBottom .cardImagePeople[data-archive-meta="true"],.cardImageBottom .cardImageTime[data-archive-meta="true"]{font-size:12px !important;letter-spacing:0 !important}
.listMeta[data-archive-ended="true"]{width:92px !important;min-width:92px !important;max-width:92px !important;gap:2px !important}
.listMeta[data-archive-ended="true"] .archiveMetaCompact{font-size:12px !important;line-height:1.05 !important}
@media (max-width:640px){.card.cardImageRoom .cardImageBottom,.card.cardPlainRoom .cardImageBottom{grid-template-columns:minmax(0,1fr) auto auto 40px !important;column-gap:5px !important}
.cardImageBottom .cardImagePeople[data-archive-meta="true"],.cardImageBottom .cardImageTime[data-archive-meta="true"]{font-size:11px !important}
.listItem,.listItem.open,.listItem.open.longText,.listItem.open:not(.longText){grid-template-columns:6px minmax(0,1fr) 82px 42px !important;gap:7px !important}
.listMeta[data-archive-ended="true"]{width:82px !important;min-width:82px !important;max-width:82px !important}
.listMeta[data-archive-ended="true"] .archiveMetaCompact{font-size:11px !important}
.listEnterBtn.entryIconBtn{width:38px !important;min-width:38px !important}
}
.categoryFilterBar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 12px}
.categoryOpenBtn{appearance:none;-webkit-appearance:none;border:1px solid rgba(0,0,0,.12);background:#fff;color:#111;border-radius:999px;padding:10px 15px;font-size:14px;line-height:1;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.04);white-space:nowrap}
.categoryActiveText{display:none !important}
.roomModeLegend{flex:0 0 auto;min-width:0;margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;color:#666;font-size:12px;line-height:1;white-space:nowrap}
.roomModeLegendItem{display:inline-flex;align-items:center;gap:5px;min-width:0}
.roomModeLegendDot,.roomModeDotBadge{display:inline-block;width:10px;height:10px;border-radius:999px;flex:0 0 auto}
.roomModeLegendDot{width:11px;height:11px;border:1.5px solid rgba(255,255,255,.95);box-shadow:0 2px 5px rgba(0,0,0,.20)}
.roomModeDotTemporary{background:linear-gradient(135deg,#ffffff 0%,#9e9e9e 100%)}
.roomModeDotArchive{background:#b7ff5a}
.roomCategoryBadge{position:relative;overflow:visible}
.roomModeDotBadge{position:absolute;left:-5px;top:-5px;width:12px;height:12px;border:1.5px solid rgba(255,255,255,.95);box-shadow:0 2px 5px rgba(0,0,0,.20);pointer-events:none;z-index:2}
@media (max-width:640px){.roomModeLegend{gap:7px;font-size:11px;justify-content:flex-end;margin-left:auto}
.roomModeLegendItem{gap:4px}
.roomModeLegendDot{width:11px;height:11px}
.roomModeDotBadge{width:11px;height:11px;left:-5px;top:-5px}
}
.categoryLayer{position:fixed;inset:0;z-index:42000;display:none;background:rgba(210,210,210,.50);color:#111;padding:18px 14px;overflow:hidden;backdrop-filter:blur(6px) grayscale(.15);-webkit-backdrop-filter:blur(6px) grayscale(.15)}
.categoryLayer.show{display:block}
.categoryLayerPanel{width:min(760px,100%);height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:center}
.categoryLayerHead{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;margin:0 0 12px}
.categoryLayerClose,.categoryLayerReset{appearance:none;-webkit-appearance:none;border:0;background:rgba(255,255,255,.88);color:#111;border-radius:999px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.08);font-size:18px;line-height:1}
.categoryLayerReset{font-size:12px;font-weight:700}
.categoryLayerTitle{margin:0;text-align:center;font-size:20px;font-weight:800;line-height:1.25}
.categoryLayerLead{margin:0 auto 14px;color:#555;font-size:13px;line-height:1.5;text-align:center}
.categoryGrid{width:min(620px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:88px;gap:10px 8px;align-content:center;justify-content:center;max-height:min(62vh,470px);overflow-y:auto;overscroll-behavior:contain;padding:4px 2px 10px;scrollbar-width:thin}
.categoryItem{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:#111;border-radius:18px;padding:5px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;cursor:pointer;box-shadow:none;transition:transform .12s ease,background .12s ease}
.categoryItem:active{transform:scale(.94)}
.categoryItem.active{background:rgba(219,250,229,.72);box-shadow:inset 0 0 0 1px rgba(27,150,77,.30)}
.categoryIcon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:16px;background:rgba(255,255,255,.86);box-shadow:0 8px 18px rgba(0,0,0,.08);font-size:27px;line-height:1}
.categoryLabel{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center;font-size:11px;font-weight:800;line-height:1.08;min-height:2.16em;word-break:keep-all;overflow-wrap:anywhere;text-shadow:0 1px 0 rgba(255,255,255,.55)}
@media (min-width:641px){.categoryLayer{padding:28px 20px;background:rgba(210,210,210,.46)}
.categoryLayerPanel{height:min(720px,100%)}
.categoryGrid{width:min(640px,100%);grid-auto-rows:92px;gap:12px 10px;max-height:min(64vh,500px)}
.categoryIcon{width:50px;height:50px;font-size:30px}
.categoryLabel{font-size:12px}
}
@media (max-width:640px){.categoryFilterBar{margin:6px 0 10px}
.categoryOpenBtn{padding:9px 13px;font-size:13px}
.categoryActiveText{font-size:12px}
.categoryLayer{padding:12px 10px 14px;background:rgba(210,210,210,.48)}
.categoryLayerPanel{justify-content:center}
.categoryLayerHead{grid-template-columns:40px minmax(0,1fr) 40px;margin-bottom:8px}
.categoryLayerClose,.categoryLayerReset{width:36px;height:36px}
.categoryLayerTitle{font-size:18px}
.categoryLayerLead{font-size:12px;margin-bottom:8px}
.categoryGrid{width:100%;grid-auto-rows:74px;gap:7px 4px;max-height:min(70vh,430px);padding-bottom:8px}
.categoryItem{border-radius:14px;padding:4px 1px;gap:4px}
.categoryIcon{width:42px;height:42px;border-radius:14px;font-size:25px}
.categoryLabel{font-size:10px;line-height:1.04;min-height:2.08em}
}
#createRoomModal .modalSub{display:none !important}
#createRoomModal .modalTitle{margin-bottom:14px !important}
.categoryLayer{padding:calc(12px + var(--rooom-safe-top))
14px
calc(16px + var(--rooom-safe-bottom)) !important}
.categoryLayerPanel{justify-content:flex-start !important;padding-top:4px !important}
.categoryLayerHead{display:flex !important;justify-content:flex-end !important;align-items:center !important;gap:0 !important;margin:0 0 8px !important;flex:0 0 auto !important}
.categoryLayerTitle,.categoryLayerLead,.categoryLayerReset{display:none !important}
.categoryGrid{align-content:start !important;max-height:calc(var(--rooom-vh,100vh) - 78px - var(--rooom-safe-top) - var(--rooom-safe-bottom)) !important;padding-top:10px !important;padding-bottom:18px !important}
.createRoomCategoryRow{margin-bottom:14px !important}
.createRoomCategoryChoices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.createRoomCategoryItem{appearance:none;-webkit-appearance:none;border:1px solid rgba(0,0,0,.10);background:#fff;color:#111;border-radius:15px;padding:8px 4px 7px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .12s ease,box-shadow .15s ease}
.createRoomCategoryItem:active{transform:scale(.96)}
.createRoomCategoryItem.active{border-color:rgba(52,145,84,.52);background:rgba(238,250,242,.96);box-shadow:inset 0 0 0 1px rgba(52,145,84,.24)}
.createRoomCategoryIcon{font-size:22px;line-height:1}
.createRoomCategoryLabel{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:10px;font-weight:800;line-height:1.05;text-align:center;word-break:keep-all;overflow-wrap:anywhere}
.roomCategoryBadge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;height:26px;border-radius:10px;background:rgba(255,255,255,.88);box-shadow:0 5px 12px rgba(0,0,0,.08);font-size:16px;line-height:1}
.listCategoryBadge{margin-right:5px}
.cardCategoryBadge{margin-right:6px}
.cardImageTitleRow,.cardPlainTitleRow{display:flex;align-items:center;gap:6px;min-width:0}
.cardImageTitleRow .cardImageTitle,.cardPlainTitleRow .roomName{min-width:0}
@media (max-width:640px){.categoryLayer{padding:calc(8px + var(--rooom-safe-top))
10px
calc(14px + var(--rooom-safe-bottom)) !important}
.categoryLayerPanel{padding-top:0 !important}
.categoryLayerHead{margin-bottom:6px !important}
.categoryGrid{max-height:calc(var(--rooom-vh,100vh) - 62px - var(--rooom-safe-top) - var(--rooom-safe-bottom)) !important;padding-top:8px !important}
.createRoomCategoryChoices{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.createRoomCategoryItem{min-height:52px;padding:7px 3px 6px;border-radius:14px}
.createRoomCategoryIcon{font-size:20px}
.createRoomCategoryLabel{font-size:9px}
#createRoomModal .modalTitle{margin-bottom:12px !important}
}
@media (max-width:900px) and (orientation:landscape){.categoryLayer{padding:calc(6px + var(--rooom-safe-top))
10px
calc(10px + var(--rooom-safe-bottom)) !important}
.categoryLayerHead{margin-bottom:4px !important}
.categoryLayerClose{width:34px !important;height:34px !important}
.categoryGrid{grid-auto-rows:68px !important;max-height:calc(var(--rooom-vh,100vh) - 52px - var(--rooom-safe-top) - var(--rooom-safe-bottom)) !important;padding-top:8px !important}
.categoryIcon{width:38px !important;height:38px !important;font-size:23px !important}
.categoryLabel{font-size:9px !important}
}
.createRoomSettingsRow{display:grid !important;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr) minmax(0,.82fr) !important;gap:10px !important;margin-bottom:14px !important}
.createRoomSettingsRow .formRow{margin-bottom:0 !important}
.createRoomSettingsRow .formLabelLike,.createRoomSettingsRow label{font-size:12px !important;line-height:1 !important;color:#555 !important}
.createRoomSettingCell{min-width:0 !important;gap:7px !important}
.createRoomSettingsRow select,.createRoomCategoryTrigger{width:100% !important;height:42px !important;min-height:42px !important;border:1px solid rgba(0,0,0,.14) !important;border-radius:14px !important;background:#fff !important;color:#111 !important;font-size:14px !important}
.createRoomSettingsRow select{padding:0 10px !important}
.createRoomCategoryTrigger{appearance:none !important;-webkit-appearance:none !important;padding:0 9px !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:5px !important;cursor:pointer !important;line-height:1 !important}
.createRoomCategoryTrigger:active{transform:scale(.98) !important}
.createRoomCategoryTriggerIcon{flex:0 0 auto !important;font-size:17px !important;line-height:1 !important}
.createRoomCategoryTriggerText{min-width:0 !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;font-size:13px !important;font-weight:800 !important}
.createRoomCategoryTriggerArrow{flex:0 0 auto !important;font-size:9px !important;opacity:.58 !important;transform:translateY(1px) !important}
.createRoomCategoryChoices{display:none !important}
.categoryLayer{padding:calc(16px + var(--rooom-safe-top))
14px
calc(16px + var(--rooom-safe-bottom)) !important}
.categoryLayerPanel{justify-content:flex-start !important;padding-top:0 !important}
.categoryGrid{align-content:start !important;max-height:calc(var(--rooom-vh,100vh) - 78px - var(--rooom-safe-top) - var(--rooom-safe-bottom)) !important;padding-top:14px !important;padding-bottom:18px !important}
@media (max-width:640px){.createRoomSettingsRow{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr) minmax(0,.82fr) !important;gap:8px !important;margin-bottom:13px !important}
.createRoomSettingsRow select,.createRoomCategoryTrigger{height:40px !important;min-height:40px !important;border-radius:13px !important}
.createRoomSettingsRow select{font-size:13px !important;padding:0 8px !important}
.createRoomCategoryTrigger{padding:0 7px !important;gap:4px !important}
.createRoomCategoryTriggerIcon{font-size:16px !important}
.createRoomCategoryTriggerText{font-size:12px !important}
.categoryLayer{padding:calc(14px + var(--rooom-safe-top))
10px
calc(14px + var(--rooom-safe-bottom)) !important}
.categoryLayerHead{margin-bottom:8px !important}
.categoryGrid{max-height:calc(var(--rooom-vh,100vh) - 66px - var(--rooom-safe-top) - var(--rooom-safe-bottom)) !important;padding-top:12px !important}
}
.categoryLayer{padding:calc(14px + var(--rooom-safe-top))
14px
calc(16px + var(--rooom-safe-bottom)) !important}
.categoryLayerPanel{width:min(760px,100%) !important;height:100% !important;margin:0 auto !important;display:flex !important;flex-direction:column !important;justify-content:center !important;padding-top:0 !important}
.categoryLayerHead{position:relative !important;width:min(620px,100%) !important;min-height:42px !important;margin:0 auto 10px !important;display:flex !important;align-items:center !important;justify-content:center !important;flex:0 0 auto !important;gap:0 !important}
.categoryLayerClose{position:absolute !important;right:0 !important;top:50% !important;transform:translateY(-50%) !important;width:40px !important;height:40px !important;display:inline-flex !important}
.categoryLayerReset{position:static !important;width:auto !important;min-width:112px !important;height:40px !important;padding:0 17px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;border:1px solid rgba(0,0,0,.10) !important;background:rgba(255,255,255,.88) !important;color:#111 !important;border-radius:999px !important;box-shadow:0 8px 18px rgba(0,0,0,.08) !important;font-size:13px !important;font-weight:800 !important;line-height:1 !important;white-space:nowrap !important}
.categoryLayerReset.active{background:rgba(219,250,229,.82) !important;box-shadow:inset 0 0 0 1px rgba(27,150,77,.30),0 8px 18px rgba(0,0,0,.08) !important}
.categoryLayerTitle,.categoryLayerLead{display:none !important}
.categoryLayer.createMode .categoryLayerHead{justify-content:flex-end !important}
.categoryLayer.createMode .categoryLayerReset{display:none !important}
.categoryLayer.createMode .categoryLayerClose{position:static !important;transform:none !important}
.categoryGrid{width:min(620px,100%) !important;margin:0 auto !important;display:grid !important;grid-template-columns:repeat(5,1fr) !important;grid-auto-rows:88px !important;gap:10px 8px !important;align-content:center !important;justify-content:center !important;max-height:min(68vh,500px) !important;overflow-y:auto !important;overscroll-behavior:contain !important;padding:6px 2px 10px !important;scrollbar-width:thin !important}
@media (min-width:641px){.categoryLayerPanel{height:min(720px,100%) !important}
.categoryLayerHead,.categoryGrid{width:min(640px,100%) !important}
.categoryGrid{grid-auto-rows:92px !important;gap:12px 10px !important;max-height:min(68vh,520px) !important}
}
@media (max-width:640px){.categoryLayer{padding:calc(12px + var(--rooom-safe-top))
10px
calc(14px + var(--rooom-safe-bottom)) !important}
.categoryLayerPanel{justify-content:center !important}
.categoryLayerHead{width:100% !important;min-height:38px !important;margin-bottom:8px !important}
.categoryLayerClose{width:36px !important;height:36px !important}
.categoryLayerReset{min-width:104px !important;height:36px !important;padding:0 14px !important;font-size:12px !important}
.categoryGrid{width:100% !important;grid-template-columns:repeat(5,1fr) !important;grid-auto-rows:74px !important;gap:7px 4px !important;align-content:center !important;max-height:calc(var(--rooom-vh,100vh) - 82px - var(--rooom-safe-top) - var(--rooom-safe-bottom)) !important;padding-top:6px !important;padding-bottom:8px !important}
}
.categoryLayerReset{min-width:148px !important;padding-left:24px !important;padding-right:24px !important;font-size:15px !important;font-weight:900 !important;letter-spacing:.01em !important}
@media (min-width:641px){.categoryLayerReset{min-width:154px !important;height:40px !important;font-size:15px !important;padding-left:26px !important;padding-right:26px !important}
}
@media (max-width:640px){.categoryLayerReset{min-width:136px !important;height:36px !important;font-size:14px !important;padding-left:20px !important;padding-right:20px !important}
}
.cardImageRoom,.cardPlainRoom{position:relative !important}
.cardCategoryCornerBadge{position:absolute !important;top:12px !important;left:22px !important;z-index:8 !important;margin-right:0 !important;pointer-events:none !important}
.cardImageTitleRow,.cardPlainTitleRow{gap:0 !important}
.cardImageTitleRow .cardImageTitle,.cardPlainTitleRow .roomName{padding-left:0 !important}
.cardPlainMain{padding-top:24px !important}
.cardImageBottom .cardImageTitleRow{padding-left:0 !important}
@media (min-width:641px){.listTitleRow{align-items:center !important;gap:8px !important;margin-bottom:4px !important}
.listCategoryBadge{margin-right:2px !important;transform:translateY(-1px) !important}
.listDesc{margin-top:1px !important;line-height:1.28 !important}
.listMain{gap:2px !important}
}
@media (max-width:640px){.cardCategoryCornerBadge{top:10px !important;left:20px !important}
.cardPlainMain{padding-top:22px !important}
}
.card.cardImageRoom .cardImageBottom{grid-template-columns:minmax(0,1fr) auto auto 40px !important;grid-template-areas:"title people time enter" !important;column-gap:6px !important;align-items:end !important;overflow:hidden !important}
.card.cardImageRoom .cardImageTitleRow{grid-area:title !important;min-width:0 !important;width:100% !important;max-width:100% !important;overflow:hidden !important;align-self:end !important;justify-self:stretch !important}
.card.cardImageRoom .cardImageTitle{display:block !important;width:100% !important;max-width:100% !important;min-width:0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;line-height:32px !important;height:32px !important;padding:0 !important;margin:0 !important}
.card.cardImageRoom .cardImagePeople{grid-area:people !important;flex:0 0 auto !important;min-width:max-content !important;max-width:max-content !important;white-space:nowrap !important}
.card.cardImageRoom .cardImageTime{grid-area:time !important;flex:0 0 auto !important;min-width:max-content !important;max-width:max-content !important;white-space:nowrap !important}
.card.cardImageRoom .cardImageEnterBtn,.card.cardImageRoom .cardImageBottom .listEnterBtn.entryIconBtn{grid-area:enter !important;flex:0 0 auto !important;width:38px !important;min-width:38px !important;max-width:38px !important}
@media (max-width:640px){.card.cardImageRoom .cardImageBottom{grid-template-columns:minmax(0,1fr) auto auto 38px !important;column-gap:5px !important;padding-left:10px !important;padding-right:9px !important}
.card.cardImageRoom .cardImageTitle{font-size:15px !important}
.card.cardImageRoom .cardImagePeople,.card.cardImageRoom .cardImageTime{font-size:10px !important}
.card.cardImageRoom .cardImageEnterBtn,.card.cardImageRoom .cardImageBottom .listEnterBtn.entryIconBtn{width:36px !important;min-width:36px !important;max-width:36px !important}
}
.listAccent{display:none !important}
.listCategorySlot{grid-area:accent !important;width:44px !important;min-width:44px !important;height:100% !important;min-height:42px !important;display:flex !important;align-items:center !important;justify-content:center !important;align-self:stretch !important;justify-self:center !important;padding:0 !important;margin:0 !important;overflow:visible !important}
.listCategorySlot .listCategoryBadge{margin:0 !important;transform:none !important;width:30px !important;height:30px !important;min-width:30px !important;border-radius:12px !important;font-size:17px !important;background:rgba(255,255,255,.92) !important;color:#111 !important;box-shadow:0 4px 10px rgba(0,0,0,.10) !important}
.listCategorySlot .listCategoryBadgeFallback{opacity:.92 !important}
.listItem,.listItem.open,.listItem.open.longText,.listItem.open:not(.longText){grid-template-columns:44px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;align-items:center !important}
.listItem .listMain,.listItem.open .listMain,.listItem.open.longText .listMain,.listItem.open:not(.longText) .listMain{grid-area:main !important;min-width:0 !important}
.listItem .listTitleRow,.listItem.open .listTitleRow{gap:4px !important}
@media (max-width:640px){.listCategorySlot{width:38px !important;min-width:38px !important;min-height:40px !important}
.listCategorySlot .listCategoryBadge{width:28px !important;height:28px !important;min-width:28px !important;border-radius:11px !important;font-size:16px !important}
.listItem,.listItem.open,.listItem.open.longText,.listItem.open:not(.longText){grid-template-columns:38px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;align-items:center !important}
}
html.rooom-ipad-portrait .listCategorySlot{width:40px !important;min-width:40px !important;min-height:42px !important}
html.rooom-ipad-portrait .listCategorySlot .listCategoryBadge{width:30px !important;height:30px !important;min-width:30px !important}
html.rooom-ipad-portrait .listItem,html.rooom-ipad-portrait .listItem.open,html.rooom-ipad-portrait .listItem.open.longText,html.rooom-ipad-portrait .listItem.open:not(.longText){grid-template-columns:40px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;align-items:center !important}
@media (min-width:641px){html:not(.rooom-ipad-portrait) .listItem,html:not(.rooom-ipad-portrait) .listItem.open,html:not(.rooom-ipad-portrait) .listItem.open.longText,html:not(.rooom-ipad-portrait) .listItem.open:not(.longText){display:grid !important;grid-template-columns:44px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;align-items:center !important;gap:10px !important;row-gap:0 !important;min-height:58px !important;height:auto !important;padding:8px 10px !important}
html:not(.rooom-ipad-portrait) .listItem .listCategorySlot,html:not(.rooom-ipad-portrait) .listItem.open .listCategorySlot,html:not(.rooom-ipad-portrait) .listItem.open.longText .listCategorySlot,html:not(.rooom-ipad-portrait) .listItem.open:not(.longText) .listCategorySlot{grid-area:accent !important;align-self:stretch !important;justify-self:center !important;width:44px !important;min-width:44px !important;min-height:42px !important;height:auto !important;display:flex !important;align-items:center !important;justify-content:center !important}
html:not(.rooom-ipad-portrait) .listItem .listMain,html:not(.rooom-ipad-portrait) .listItem.open .listMain,html:not(.rooom-ipad-portrait) .listItem.open.longText .listMain,html:not(.rooom-ipad-portrait) .listItem.open:not(.longText) .listMain{grid-area:main !important;align-self:center !important;justify-self:stretch !important;min-width:0 !important;display:flex !important;flex-direction:column !important;justify-content:center !important;gap:0 !important;margin:0 !important;padding:0 !important}
html:not(.rooom-ipad-portrait) .listItem .listTitleRow,html:not(.rooom-ipad-portrait) .listItem.open .listTitleRow,html:not(.rooom-ipad-portrait) .listItem.open.longText .listTitleRow,html:not(.rooom-ipad-portrait) .listItem.open:not(.longText) .listTitleRow{display:flex !important;align-items:center !important;gap:4px !important;line-height:1 !important;min-width:0 !important;margin:0 !important;padding:0 !important}
html:not(.rooom-ipad-portrait) .listItem .listName,html:not(.rooom-ipad-portrait) .listItem.open .listName,html:not(.rooom-ipad-portrait) .listItem.open.longText .listName,html:not(.rooom-ipad-portrait) .listItem.open:not(.longText) .listName{display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;white-space:normal !important;overflow:hidden !important;text-overflow:clip !important;margin:0 !important;padding:0 !important;line-height:1.08 !important}
html:not(.rooom-ipad-portrait) .listItem .listDesc,html:not(.rooom-ipad-portrait) .listItem.open .listDesc,html:not(.rooom-ipad-portrait) .listItem.open.longText .listDesc,html:not(.rooom-ipad-portrait) .listItem.open:not(.longText) .listDesc{display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;visibility:visible !important;opacity:1 !important;white-space:normal !important;overflow:hidden !important;text-overflow:clip !important;margin:2px 0 0 !important;padding:0 !important;line-height:1.16 !important}
html:not(.rooom-ipad-portrait) .listItem .listMeta,html:not(.rooom-ipad-portrait) .listItem.open .listMeta,html:not(.rooom-ipad-portrait) .listItem.open.longText .listMeta,html:not(.rooom-ipad-portrait) .listItem.open:not(.longText) .listMeta{grid-area:meta !important;align-self:center !important;justify-self:end !important;width:76px !important;min-width:76px !important;max-width:76px !important;margin:0 !important;padding:0 !important;transform:none !important}
html:not(.rooom-ipad-portrait) .listItem .listEnterBtn.entryIconBtn,html:not(.rooom-ipad-portrait) .listItem.open .listEnterBtn.entryIconBtn,html:not(.rooom-ipad-portrait) .listItem.open.longText .listEnterBtn.entryIconBtn,html:not(.rooom-ipad-portrait) .listItem.open:not(.longText) .listEnterBtn.entryIconBtn{grid-area:button !important;align-self:center !important;justify-self:end !important;width:38px !important;min-width:38px !important;height:32px !important;min-height:32px !important;margin:0 !important;padding:0 !important;transform:none !important}
}
.listItem.openVisual .listToggle,.listToggle.visualOpen{transform:rotate(180deg) !important}
@media (min-width:641px){html:not(.rooom-ipad-portrait) .listItem:not(.hasOverflow).open,html:not(.rooom-ipad-portrait) .listItem:not(.hasOverflow).open.longText,html:not(.rooom-ipad-portrait) .listItem:not(.hasOverflow).open:not(.longText){display:grid !important;grid-template-columns:44px minmax(0,1fr) 76px 44px !important;grid-template-areas:"accent main meta button" !important;grid-template-rows:auto !important;align-items:center !important;gap:10px !important;row-gap:0 !important;min-height:58px !important;height:auto !important;padding:8px 10px !important}
html:not(.rooom-ipad-portrait) .listItem:not(.hasOverflow).open .listCategorySlot{grid-area:accent !important;align-self:stretch !important;justify-self:center !important;width:44px !important;min-width:44px !important;min-height:42px !important;height:auto !important;display:flex !important;align-items:center !important;justify-content:center !important;margin:0 !important;padding:0 !important}
html:not(.rooom-ipad-portrait) .listItem:not(.hasOverflow).open .listMain{grid-area:main !important;align-self:center !important;justify-self:stretch !important;min-width:0 !important;display:flex !important;flex-direction:column !important;justify-content:center !important;gap:0 !important;margin:0 !important;padding:0 !important}
html:not(.rooom-ipad-portrait) .listItem:not(.hasOverflow).open .listTitleRow{display:flex !important;align-items:center !important;gap:4px !important;line-height:1 !important;min-width:0 !important;margin:0 !important;padding:0 !important}
html:not(.rooom-ipad-portrait) .listItem:not(.hasOverflow).open .listName{display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;white-space:normal !important;overflow:hidden !important;text-overflow:clip !important;margin:0 !important;padding:0 !important;line-height:1.08 !important}
html:not(.rooom-ipad-portrait) .listItem:not(.hasOverflow).open .listDesc{display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;visibility:visible !important;opacity:1 !important;white-space:normal !important;overflow:hidden !important;text-overflow:clip !important;margin:2px 0 0 !important;padding:0 !important;line-height:1.16 !important}
html:not(.rooom-ipad-portrait) .listItem:not(.hasOverflow).open .listMeta{grid-area:meta !important;align-self:center !important;justify-self:end !important;width:76px !important;min-width:76px !important;max-width:76px !important;margin:0 !important;padding:0 !important;transform:none !important}
html:not(.rooom-ipad-portrait) .listItem:not(.hasOverflow).open .listEnterBtn.entryIconBtn{grid-area:button !important;align-self:center !important;justify-self:end !important;width:38px !important;min-width:38px !important;height:32px !important;min-height:32px !important;margin:0 !important;padding:0 !important;transform:none !important}
html:not(.rooom-ipad-portrait) .listItem.hasOverflow.open .listName,html:not(.rooom-ipad-portrait) .listItem.hasOverflow.open .listDesc{display:block !important;-webkit-line-clamp:unset !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important}
html:not(.rooom-ipad-portrait) .listItem.hasOverflow.open .listDesc{margin-top:4px !important;line-height:1.26 !important}
}
.categoryItem{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;text-align:center !important}
.categoryIcon{width:46px !important;height:46px !important;min-width:46px !important;min-height:46px !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:0 !important;margin:0 auto 5px !important;line-height:1 !important;text-align:center !important;overflow:hidden !important;font-size:0 !important;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Android Emoji",sans-serif !important}
.categoryIconEmoji{display:flex !important;align-items:center !important;justify-content:center !important;width:34px !important;height:34px !important;min-width:34px !important;min-height:34px !important;line-height:1 !important;text-align:center !important;font-size:24px !important;transform:translate(0,0) !important;transform-origin:center center !important;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Android Emoji",sans-serif !important}
.categoryItem[data-category-id="work"] .categoryIconEmoji{transform:translate(1px,1px) !important}
.categoryItem[data-category-id="game"] .categoryIconEmoji{transform:translate(1px,1px) !important}
.categoryItem[data-category-id="fashion"] .categoryIconEmoji{transform:translate(1px,1px) !important}
.categoryItem[data-category-id="food"] .categoryIconEmoji{transform:translate(0,1px) !important}
.categoryItem[data-category-id="local"] .categoryIconEmoji{transform:translate(0,1px) !important;font-size:25px !important}
.categoryItem[data-category-id="travel"] .categoryIconEmoji{transform:translate(1px,1px) !important}
.categoryItem[data-category-id="advice"] .categoryIconEmoji{transform:translate(0,1px) !important}
.categoryLabel{width:100% !important;text-align:center !important;line-height:1.08 !important}
@media (min-width:641px){.categoryIcon{width:50px !important;height:50px !important;min-width:50px !important;min-height:50px !important;font-size:0 !important}
.categoryIconEmoji{width:36px !important;height:36px !important;min-width:36px !important;min-height:36px !important;font-size:26px !important}
.categoryItem[data-category-id="local"] .categoryIconEmoji{font-size:27px !important}
}
@media (max-width:640px){.categoryIcon{width:42px !important;height:42px !important;min-width:42px !important;min-height:42px !important;font-size:0 !important}
.categoryIconEmoji{width:31px !important;height:31px !important;min-width:31px !important;min-height:31px !important;font-size:23px !important}
.categoryItem[data-category-id="local"] .categoryIconEmoji{font-size:24px !important}
}
#pwaBanner.rooomIosNotifyCooldown .topRefreshNoticeMain{display:flex !important;align-items:center !important;gap:14px !important}
#pwaBanner.rooomIosNotifyCooldown .topRefreshNoticeText{display:block !important;margin:0 !important;color:#666 !important;font-size:12px !important;line-height:1.25 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
@media (max-width:640px){#pwaBanner.rooomIosNotifyCooldown .topRefreshNoticeMain{display:block !important}
#pwaBanner.rooomIosNotifyCooldown .topRefreshNoticeText{margin-top:3px !important;font-size:11px !important}
}
.cardRoomImage{backface-visibility:hidden !important;-webkit-backface-visibility:hidden !important;transform:translateZ(0) scale(1.001) !important;-webkit-transform:translateZ(0) scale(1.001) !important;will-change:auto !important}
.cardImageTap,.card.cardImageRoom{transform:translateZ(0) !important;-webkit-transform:translateZ(0) !important;contain:paint !important}
html.rooom-ipad-portrait .listItem .listEnterBtn.entryIconBtn,html.rooom-ipad-portrait .listItem.open .listEnterBtn.entryIconBtn,html.rooom-ipad-portrait .listItem.open.longText .listEnterBtn.entryIconBtn,html.rooom-ipad-portrait .listItem.open:not(.longText) .listEnterBtn.entryIconBtn{width:52px !important;min-width:52px !important;max-width:52px !important;height:40px !important;min-height:40px !important;padding:0 !important}
html.rooom-ipad-portrait .listEnterBtn.entryIconBtn .entryDoorIcon,html.rooom-ipad-portrait .listEnterBtn.entryIconBtn .entryArchiveIcon{width:28px !important;height:28px !important;transform:none !important;-webkit-transform:none !important}
html.rooom-ipad-portrait .listItem,html.rooom-ipad-portrait .listItem.open,html.rooom-ipad-portrait .listItem.open.longText,html.rooom-ipad-portrait .listItem.open:not(.longText){grid-template-columns:34px minmax(0,1fr) 84px 52px !important}
:is(#userRoomList,#prepOpenCloneList) .listItem.hasDesc .listToggle{display:inline-flex !important;align-items:center !important;justify-content:center !important}
:is(#userRoomList,#prepOpenCloneList) .listItem:not(.open) .listMain{display:flex !important;flex-direction:column !important;justify-content:center !important;gap:0 !important;min-width:0 !important}
:is(#userRoomList,#prepOpenCloneList) .listItem:not(.open) .listTitleRow{min-width:0 !important;display:flex !important;align-items:center !important;gap:5px !important}
:is(#userRoomList,#prepOpenCloneList) .listItem:not(.open) .listName{display:block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;-webkit-line-clamp:unset !important;line-height:1.15 !important;margin:0 !important}
:is(#userRoomList,#prepOpenCloneList) .listItem:not(.open) .listDesc{display:none !important;visibility:hidden !important;opacity:0 !important;height:0 !important;max-height:0 !important;margin:0 !important;overflow:hidden !important}
:is(#userRoomList,#prepOpenCloneList) .listItem.open .listMain{min-width:0 !important}
:is(#userRoomList,#prepOpenCloneList) .listItem.open .listName{display:block !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;-webkit-line-clamp:unset !important;line-height:1.25 !important;margin:0 !important}
:is(#userRoomList,#prepOpenCloneList) .listItem.open .listDesc{display:block !important;visibility:visible !important;opacity:1 !important;height:auto !important;max-height:none !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;-webkit-line-clamp:unset !important;margin:6px 0 0 !important;line-height:1.35 !important}
:is(#userRoomList,#prepOpenCloneList) .listItem.open .listToggle{transform:rotate(180deg) !important}
:is(#userRoomList,#prepOpenCloneList) .listItem:not(.open) .listTitleRow{min-width:0 !important;display:flex !important;align-items:center !important;gap:5px !important;height:auto !important;max-height:none !important}
:is(#userRoomList,#prepOpenCloneList) .listItem:not(.open) .listName{display:block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;-webkit-line-clamp:unset !important;height:auto !important;min-height:0 !important;max-height:none !important;line-height:1.15 !important;margin:0 !important}
:is(#userRoomList,#prepOpenCloneList) .listItem:not(.open) .listDesc{display:block !important;visibility:visible !important;opacity:1 !important;height:auto !important;min-height:0 !important;max-height:none !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;-webkit-line-clamp:unset !important;margin:2px 0 0 !important;padding:0 !important;line-height:1.18 !important}
:is(#userRoomList,#prepOpenCloneList) .listItem.open .listTitleRow{height:auto !important;max-height:none !important}
:is(#userRoomList,#prepOpenCloneList) .listItem.open .listName{display:block !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;-webkit-line-clamp:unset !important;height:auto !important;min-height:0 !important;max-height:none !important;line-height:1.25 !important;margin:0 !important}
:is(#userRoomList,#prepOpenCloneList) .listItem.open .listDesc{display:block !important;visibility:visible !important;opacity:1 !important;height:auto !important;min-height:0 !important;max-height:none !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;-webkit-line-clamp:unset !important;margin:6px 0 0 !important;padding:0 !important;line-height:1.35 !important}
.howtoModalBox{width:min(1040px,calc(100vw - 44px)) !important;height:min(650px,calc(100vh - 54px)) !important;aspect-ratio:auto !important;background:#000 !important}
.howtoSlide{position:relative !important;display:block !important;padding:0 !important;overflow:hidden !important;background:#000 !important}
.howtoSlide>*{opacity:0 !important;pointer-events:none !important}
.howtoSlide::before{content:"" !important;position:absolute !important;inset:0 !important;z-index:1 !important;background-size:cover !important;background-position:center center !important;background-repeat:no-repeat !important}
.howtoTrack .howtoSlide:nth-child(1)::before{background-image:url('./rooom_howto_assets/PC1.png') !important}
.howtoTrack .howtoSlide:nth-child(2)::before{background-image:url('./rooom_howto_assets/PC2.png') !important}
.howtoTrack .howtoSlide:nth-child(3)::before{background-image:url('./rooom_howto_assets/PC3.png') !important}
.howtoTrack .howtoSlide:nth-child(4)::before{background-image:url('./rooom_howto_assets/PC4.png') !important}
.howtoTrack .howtoSlide:nth-child(5)::before{background-image:url('./rooom_howto_assets/PC5.png') !important}
.howtoControls,.howtoPill,.howtoCounter,.howtoModalCloseIcon{z-index:20 !important}
@media(max-width:99999px){.howtoModalBox{width:min(430px,calc(100vw - 24px)) !important;height:auto !important;max-height:calc(100dvh - 54px) !important;aspect-ratio:9 / 16 !important;border-radius:28px !important}
.howtoTrack .howtoSlide:nth-child(1)::before{background-image:url('./rooom_howto_assets/phone1.png') !important}
.howtoTrack .howtoSlide:nth-child(2)::before{background-image:url('./rooom_howto_assets/phone2.png') !important}
.howtoTrack .howtoSlide:nth-child(3)::before{background-image:url('./rooom_howto_assets/phone3.png') !important}
.howtoTrack .howtoSlide:nth-child(4)::before{background-image:url('./rooom_howto_assets/phone4.png') !important}
.howtoTrack .howtoSlide:nth-child(5)::before{background-image:url('./rooom_howto_assets/phone5.png') !important}
}
.howtoPill,.howtoCounter,.howtoModalCloseIcon{display:none !important}
.howtoModalBox{display:flex !important;flex-direction:column !important;overflow:hidden !important;background:#070b14 !important}
.howtoViewport{position:relative !important;inset:auto !important;width:100% !important;height:auto !important;overflow:hidden !important;flex:1 1 auto !important;min-height:0 !important;touch-action:pan-y !important}
.howtoTrack{height:100% !important}
.howtoSlide::before{background-size:cover !important;background-position:center center !important}
.howtoControls{position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;z-index:30 !important;flex:0 0 auto !important;width:100% !important;min-height:58px !important;padding:8px 18px 12px !important;display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;pointer-events:none !important;background:linear-gradient(180deg,rgba(7,11,20,.86),rgba(7,11,20,.96)) !important;border-top:1px solid rgba(255,255,255,.10) !important}
.howtoDots,.howtoButtons{pointer-events:auto !important}
.howtoDots{height:34px !important;padding:0 13px !important;gap:8px !important}
.howtoDot{width:9px !important;height:9px !important}
.howtoDot.active{width:30px !important}
.howtoNavBtn,.howtoModalClose{min-width:58px !important;height:40px !important;padding:0 15px !important;font-size:13px !important;box-shadow:none !important}
@media(min-width:761px){.howtoModalBox{width:min(1040px,calc(100vw - 44px)) !important;height:auto !important;max-height:calc(100vh - 54px) !important;aspect-ratio:auto !important}
.howtoViewport{aspect-ratio:16 / 9 !important;max-height:calc(100vh - 124px) !important}
.howtoSlide::before{background-size:contain !important;background-position:center center !important;background-color:#070b14 !important}
}
@media(max-width:99999px){.howtoModalBox{width:min(430px,calc(100vw - 24px)) !important;height:min(760px,calc(100dvh - 76px)) !important;max-height:calc(100dvh - 76px) !important;aspect-ratio:auto !important;border-radius:28px !important}
.howtoViewport{height:auto !important;aspect-ratio:auto !important}
.howtoSlide::before{background-size:cover !important;background-position:center center !important}
.howtoControls{min-height:58px !important;padding:7px 12px 10px !important;gap:8px !important}
.howtoDots{height:32px !important;padding:0 11px !important;gap:7px !important}
.howtoDot{width:8px !important;height:8px !important}
.howtoDot.active{width:28px !important}
.howtoButtons{gap:7px !important}
.howtoNavBtn,.howtoModalClose{min-width:52px !important;height:38px !important;padding:0 12px !important;font-size:12px !important}
}
@media(max-width:390px){.howtoModalBox{width:calc(100vw - 20px) !important;height:calc(100dvh - 68px) !important}
.howtoControls{padding-left:10px !important;padding-right:10px !important}
.howtoNavBtn,.howtoModalClose{min-width:48px !important;padding:0 10px !important}
}
.categoryLayerPanel{justify-content:flex-start !important;padding-top:calc(18px + var(--rooom-safe-top)) !important}
.categoryLayerHead{margin-bottom:22px !important}
.categoryGrid{align-content:start !important;max-height:calc(var(--rooom-vh,100vh) - 118px - var(--rooom-safe-top) - var(--rooom-safe-bottom)) !important;padding-top:18px !important;padding-bottom:22px !important}
@media (max-width:640px){.categoryLayerPanel{padding-top:calc(14px + var(--rooom-safe-top)) !important}
.categoryLayerHead{margin-bottom:18px !important}
.categoryGrid{max-height:calc(var(--rooom-vh,100vh) - 108px - var(--rooom-safe-top) - var(--rooom-safe-bottom)) !important;padding-top:16px !important;padding-bottom:18px !important}
}
@media (max-width:900px) and (orientation:landscape){.categoryLayerPanel{padding-top:calc(8px + var(--rooom-safe-top)) !important}
.categoryLayerHead{margin-bottom:16px !important}
.categoryGrid{max-height:calc(var(--rooom-vh,100vh) - 96px - var(--rooom-safe-top) - var(--rooom-safe-bottom)) !important;padding-top:14px !important;padding-bottom:16px !important}
}
@media(max-width:99999px){.howtoTrack .howtoSlide:nth-child(1)::before{background-image:url('./rooom_howto_assets_webp/allphone1_result.webp?v=howto_webp_v1') !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important}
.howtoTrack .howtoSlide:nth-child(1) .howtoTextLayer{opacity:1 !important;pointer-events:none !important;position:absolute !important;inset:0 !important;z-index:5 !important;color:#050505 !important;font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;letter-spacing:-.035em !important;text-rendering:geometricPrecision !important;-webkit-font-smoothing:antialiased !important}
.howtoTextLayerStep{display:none !important}
.howtoTextLayerTitle{position:absolute !important;left:7.2% !important;top:13.4% !important;width:68% !important;font-size:clamp(31px,8.9vw,45px) !important;line-height:1.18 !important;font-weight:950 !important;letter-spacing:-.055em !important;text-align:left !important;white-space:pre-line !important}
.howtoTextLayerAccent{position:absolute !important;left:7.3% !important;top:27.2% !important;width:20.0% !important;height:6px !important;border-radius:999px !important;background:#31c56a !important;box-shadow:0 1px 0 rgba(255,255,255,.15) inset !important}
.howtoTextLayerDesc{position:absolute !important;left:7.3% !important;top:31.5% !important;width:72% !important;font-size:clamp(12px,3.15vw,16px) !important;line-height:1.48 !important;font-weight:800 !important;letter-spacing:-.03em !important;text-align:left !important;white-space:pre-line !important}
.howtoTextLayerBtn{position:absolute !important;left:31.0% !important;width:50.5% !important;transform:translateY(-50%) !important;text-align:left !important;font-size:clamp(12px,3.35vw,17px) !important;line-height:1.05 !important;font-weight:950 !important;letter-spacing:-.04em !important;white-space:nowrap !important}
.howtoTextLayerBtn1{top:75.10% !important}
.howtoTextLayerBtn2{top:82.55% !important}
.howtoTextLayerBtn3{top:89.95% !important}
html[lang="en"] .howtoTextLayerTitle{width:68% !important;font-size:clamp(30px,8.5vw,43px) !important;line-height:1.12 !important;letter-spacing:-.035em !important}
html[lang="en"] .howtoTextLayerDesc{width:72% !important;font-size:clamp(10px,2.8vw,14px) !important;line-height:1.42 !important;letter-spacing:-.02em !important}
html[lang="en"] .howtoTextLayerBtn{left:30.0% !important;width:57.5% !important;font-size:clamp(9px,2.55vw,13px) !important;letter-spacing:-.02em !important}
html[lang="ko"] .howtoTextLayerTitle{width:70% !important;font-size:clamp(29px,8.25vw,42px) !important;line-height:1.20 !important;letter-spacing:-.045em !important}
html[lang="ko"] .howtoTextLayerDesc{width:74% !important;font-size:clamp(10px,2.9vw,14px) !important;line-height:1.45 !important;letter-spacing:-.025em !important}
html[lang="ko"] .howtoTextLayerBtn{left:30.0% !important;width:57.5% !important;font-size:clamp(10px,2.85vw,14px) !important;letter-spacing:-.03em !important}
html[lang="zh-CN"] .howtoTextLayerTitle{width:70% !important;font-size:clamp(30px,8.4vw,43px) !important;line-height:1.18 !important;letter-spacing:-.035em !important}
html[lang="zh-CN"] .howtoTextLayerDesc{width:74% !important;font-size:clamp(11px,3.05vw,15px) !important;line-height:1.45 !important;letter-spacing:-.02em !important}
html[lang="zh-CN"] .howtoTextLayerBtn{left:30.0% !important;width:57.5% !important;font-size:clamp(11px,3.0vw,15px) !important;letter-spacing:-.025em !important}
}
@media(min-width:761px){.howtoTextLayer{display:none !important}
}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(1) .howtoTextLayer,html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(1) .howtoTextLayer *,html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerTitle,html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerTitle *,html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerStep,html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerDesc{font-weight:400 !important;-webkit-text-stroke:0 !important;text-shadow:none !important;letter-spacing:-.02em !important;-webkit-font-smoothing:antialiased !important;text-rendering:geometricPrecision !important}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerTitle{font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;line-height:1.12 !important}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerAccent{display:block !important;background:#31c56a !important}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerTitle{font-size:clamp(34px,4.7vw,48px) !important;line-height:1.08 !important;max-width:9.6em !important;margin-bottom:10px !important}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerAccent{margin-top:2px !important;margin-bottom:14px !important}
@media(max-width:99999px){.howtoTrack .howtoSlide:nth-child(2)::before{background-image:url('./rooom_howto_assets_webp/allphone2_result.webp?v=howto_webp_v1') !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important}
.howtoTrack .howtoSlide:nth-child(2) .howtoSlide2TextLayer{opacity:1 !important;pointer-events:none !important;position:absolute !important;inset:0 !important;z-index:6 !important;color:#fff !important;font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;letter-spacing:-.035em !important;text-rendering:geometricPrecision !important;-webkit-font-smoothing:antialiased !important}
.howtoSlide2Title{position:absolute !important;left:7.2% !important;top:13.2% !important;width:70% !important;font-size:clamp(37px,10.8vw,55px) !important;line-height:1.18 !important;font-weight:950 !important;letter-spacing:-.06em !important;text-align:left !important;white-space:pre-line !important;text-shadow:0 3px 12px rgba(0,0,0,.40) !important}
.howtoSlide2Accent{position:absolute !important;left:7.3% !important;top:27.6% !important;width:33.5% !important;height:6px !important;border-radius:999px !important;background:linear-gradient(90deg,#9b38ff 0%,#2d9cff 100%) !important;box-shadow:0 1px 0 rgba(255,255,255,.15) inset !important}
.howtoSlide2Desc{position:absolute !important;left:7.3% !important;top:31.7% !important;width:62% !important;font-size:clamp(16px,4.7vw,24px) !important;line-height:1.62 !important;font-weight:850 !important;letter-spacing:-.035em !important;text-align:left !important;white-space:pre-line !important;text-shadow:0 2px 10px rgba(0,0,0,.42) !important}
.howtoSlide2Feature{position:absolute !important;left:7.2% !important;width:60% !important;height:5.35% !important;min-height:42px !important;display:flex !important;align-items:center !important;gap:14px !important;padding:0 16px !important;border-radius:16px !important;background:rgba(10,14,22,.78) !important;border:1px solid rgba(255,255,255,.18) !important;box-shadow:0 10px 24px rgba(0,0,0,.22) !important;backdrop-filter:blur(5px) !important;-webkit-backdrop-filter:blur(5px) !important}
.howtoSlide2Feature1{top:66.8% !important}
.howtoSlide2Feature2{top:74.2% !important}
.howtoSlide2Feature3{top:81.6% !important}
.howtoSlide2Feature4{top:89.0% !important}
.howtoSlide2Icon{flex:0 0 auto !important;width:27px !important;height:27px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;color:#6f5cff !important}
.howtoSlide2Icon svg{display:block !important;width:27px !important;height:27px !important;fill:currentColor !important}
.howtoSlide2FeatureText{min-width:0 !important;color:#fff !important;font-size:clamp(14px,4.1vw,21px) !important;line-height:1.05 !important;font-weight:900 !important;letter-spacing:-.04em !important;text-align:left !important;white-space:nowrap !important;text-shadow:0 2px 8px rgba(0,0,0,.30) !important}
html[lang="en"] .howtoSlide2Title{width:72% !important;font-size:clamp(36px,10.0vw,52px) !important;line-height:1.12 !important;letter-spacing:-.045em !important}
html[lang="en"] .howtoSlide2Desc{width:64% !important;font-size:clamp(13px,3.7vw,19px) !important;line-height:1.45 !important;letter-spacing:-.025em !important}
html[lang="en"] .howtoSlide2Feature{width:60% !important;gap:10px !important;padding:0 13px !important}
html[lang="en"] .howtoSlide2FeatureText{font-size:clamp(11px,3.15vw,16px) !important;letter-spacing:-.025em !important}
html[lang="ko"] .howtoSlide2Title{width:74% !important;font-size:clamp(24px,6.8vw,35px) !important;line-height:1.18 !important;letter-spacing:-.05em !important}
html[lang="ko"] .howtoSlide2Desc{width:66% !important;font-size:clamp(10px,2.85vw,15px) !important;line-height:1.48 !important;letter-spacing:-.03em !important}
html[lang="ko"] .howtoSlide2Feature{width:60% !important;gap:10px !important;padding:0 13px !important}
html[lang="ko"] .howtoSlide2FeatureText{font-size:clamp(11px,3.25vw,16px) !important;letter-spacing:-.035em !important}
html[lang="zh-CN"] .howtoSlide2Title{width:72% !important;font-size:clamp(26px,7.3vw,37px) !important;line-height:1.16 !important;letter-spacing:-.04em !important}
html[lang="zh-CN"] .howtoSlide2Desc{width:66% !important;font-size:clamp(11px,3.05vw,15px) !important;line-height:1.46 !important;letter-spacing:-.025em !important}
html[lang="zh-CN"] .howtoSlide2Feature{width:60% !important;gap:10px !important;padding:0 13px !important}
html[lang="zh-CN"] .howtoSlide2FeatureText{font-size:clamp(12px,3.35vw,17px) !important;letter-spacing:-.03em !important}
}
@media(min-width:761px){.howtoSlide2TextLayer{display:none !important}
}
@media(max-width:99999px){.howtoTrack .howtoSlide:nth-child(3)::before{content:"" !important;position:absolute !important;inset:0 !important;z-index:0 !important;background-image:url('./rooom_howto_assets_webp/allphone3_result.webp?v=howto_webp_v1') !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important}
.howtoTrack .howtoSlide:nth-child(3){padding:0 !important;background:#050817 !important;color:#fff !important}
.howtoTrack .howtoSlide:nth-child(3)>.howtoStarField,.howtoTrack .howtoSlide:nth-child(3)>.howtoCopy,.howtoTrack .howtoSlide:nth-child(3)>.howtoVisual{display:none !important}
.howtoTrack .howtoSlide:nth-child(3) .howtoSlide3TextLayer{opacity:1 !important;pointer-events:none !important;position:absolute !important;inset:0 !important;z-index:6 !important;color:#fff !important;font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;letter-spacing:-.035em !important;text-rendering:geometricPrecision !important;-webkit-font-smoothing:antialiased !important}
.howtoSlide3Title{position:absolute !important;left:7.2% !important;top:12.2% !important;width:42% !important;font-size:clamp(31px,8.7vw,44px) !important;line-height:1.18 !important;font-weight:950 !important;letter-spacing:-.06em !important;text-align:left !important;white-space:pre-line !important;text-shadow:0 3px 13px rgba(0,0,0,.44) !important}
.howtoSlide3Accent{position:absolute !important;left:7.3% !important;top:31.9% !important;width:36.8% !important;height:5px !important;border-radius:999px !important;background:linear-gradient(90deg,#a735ff 0%,#c044ff 100%) !important;box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 0 14px rgba(180,54,255,.28) !important}
.howtoSlide3Desc{position:absolute !important;left:7.3% !important;top:36.9% !important;width:41% !important;font-size:clamp(12px,3.35vw,17px) !important;line-height:1.55 !important;font-weight:750 !important;letter-spacing:-.035em !important;text-align:left !important;white-space:pre-line !important;text-shadow:0 2px 10px rgba(0,0,0,.42) !important}
.howtoSlide3TimerLabel{position:absolute !important;left:73.0% !important;top:31.8% !important;transform:translateX(-50%) !important;width:24% !important;color:rgba(255,255,255,.92) !important;font-size:clamp(10px,2.65vw,15px) !important;line-height:1 !important;font-weight:850 !important;letter-spacing:-.02em !important;text-align:center !important;white-space:nowrap !important;text-shadow:0 2px 10px rgba(0,0,0,.46) !important}
.howtoSlide3Feature{position:absolute !important;left:7.2% !important;width:47.5% !important;height:6.25% !important;min-height:46px !important;display:flex !important;align-items:center !important;gap:14px !important;padding:0 17px !important;border-radius:17px !important;background:rgba(22,10,36,.74) !important;border:1px solid rgba(193,70,255,.34) !important;box-shadow:0 10px 26px rgba(0,0,0,.26) !important;backdrop-filter:blur(5px) !important;-webkit-backdrop-filter:blur(5px) !important}
.howtoSlide3Feature1{top:67.7% !important}
.howtoSlide3Feature2{top:75.2% !important}
.howtoSlide3Feature3{top:82.7% !important}
.howtoSlide3Icon{flex:0 0 auto !important;width:28px !important;height:28px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;color:#cf48ff !important;filter:drop-shadow(0 0 8px rgba(207,72,255,.26)) !important}
.howtoSlide3Icon svg{display:block !important;width:28px !important;height:28px !important;fill:none !important;stroke:currentColor !important;stroke-width:2.1 !important;stroke-linecap:round !important;stroke-linejoin:round !important}
.howtoSlide3FeatureText{min-width:0 !important;color:#fff !important;font-size:clamp(10px,2.85vw,15px) !important;line-height:1.16 !important;font-weight:850 !important;letter-spacing:-.04em !important;text-align:left !important;white-space:pre-line !important;text-shadow:0 2px 8px rgba(0,0,0,.32) !important}
html[lang="en"] .howtoSlide3Title{width:52% !important;font-size:clamp(26px,7.3vw,37px) !important;line-height:1.16 !important;letter-spacing:-.045em !important}
html[lang="en"] .howtoSlide3Desc{width:50% !important;font-size:clamp(10px,2.85vw,15px) !important;line-height:1.48 !important;letter-spacing:-.025em !important}
html[lang="en"] .howtoSlide3Feature{width:52% !important;gap:13px !important;padding:0 15px !important}
html[lang="en"] .howtoSlide3FeatureText{font-size:clamp(10px,2.8vw,14px) !important;letter-spacing:-.025em !important}
html[lang="ko"] .howtoSlide3Title{width:54% !important;font-size:clamp(24px,6.8vw,35px) !important;line-height:1.18 !important;letter-spacing:-.05em !important}
html[lang="ko"] .howtoSlide3Desc{width:54% !important;font-size:clamp(10px,2.75vw,14px) !important;line-height:1.50 !important;letter-spacing:-.035em !important}
html[lang="ko"] .howtoSlide3Feature{width:54% !important;gap:13px !important;padding:0 15px !important}
html[lang="ko"] .howtoSlide3FeatureText{font-size:clamp(10px,2.75vw,14px) !important;letter-spacing:-.035em !important}
html[lang="zh-CN"] .howtoSlide3Title{width:52% !important;font-size:clamp(26px,7.3vw,37px) !important;line-height:1.16 !important;letter-spacing:-.04em !important}
html[lang="zh-CN"] .howtoSlide3Desc{width:52% !important;font-size:clamp(11px,3.05vw,15px) !important;line-height:1.48 !important;letter-spacing:-.025em !important}
html[lang="zh-CN"] .howtoSlide3Feature{width:52% !important;gap:13px !important;padding:0 15px !important}
html[lang="zh-CN"] .howtoSlide3FeatureText{font-size:clamp(10px,2.9vw,15px) !important;letter-spacing:-.03em !important}
}
@media(min-width:761px){.howtoSlide3TextLayer{display:none !important}
}
@media(max-width:99999px){.howtoTrack .howtoSlide:nth-child(4)::before{content:"" !important;position:absolute !important;inset:0 !important;z-index:0 !important;background-image:url('./rooom_howto_assets_webp/allphone4_result.webp?v=howto_webp_v1') !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important}
.howtoTrack .howtoSlide:nth-child(4){padding:0 !important;background:#f7efe2 !important;color:#090909 !important}
.howtoTrack .howtoSlide:nth-child(4)>.howtoCopy,.howtoTrack .howtoSlide:nth-child(4)>.howtoVisual{display:none !important}
.howtoTrack .howtoSlide:nth-child(4) .howtoSlide4TextLayer{opacity:1 !important;pointer-events:none !important;position:absolute !important;inset:0 !important;z-index:6 !important;color:#070707 !important;font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;letter-spacing:-.035em !important;text-rendering:geometricPrecision !important;-webkit-font-smoothing:antialiased !important}
.howtoSlide4Title{position:absolute !important;left:7.2% !important;top:7.8% !important;width:70% !important;font-size:clamp(32px,9.25vw,47px) !important;line-height:1.17 !important;font-weight:950 !important;letter-spacing:-.06em !important;text-align:left !important;white-space:pre-line !important}
.howtoSlide4Accent{position:absolute !important;left:7.4% !important;top:21.35% !important;width:25.5% !important;height:5px !important;border-radius:999px !important;background:#e8ad1b !important;box-shadow:0 1px 0 rgba(255,255,255,.2) inset !important}
.howtoSlide4Desc{position:absolute !important;left:7.4% !important;top:24.6% !important;width:71% !important;font-size:clamp(11px,3.0vw,15px) !important;line-height:1.48 !important;font-weight:800 !important;letter-spacing:-.033em !important;text-align:left !important;white-space:pre-line !important}
.howtoSlide4PanelTitle{position:absolute !important;left:22% !important;top:42.55% !important;width:56% !important;font-size:clamp(10px,2.75vw,14px) !important;line-height:1 !important;font-weight:900 !important;letter-spacing:-.035em !important;text-align:center !important;white-space:nowrap !important}
.howtoSlide4CardTitle{position:absolute !important;top:68.45% !important;width:34% !important;font-size:clamp(16px,4.45vw,23px) !important;line-height:1.05 !important;font-weight:950 !important;letter-spacing:-.055em !important;text-align:center !important;white-space:nowrap !important}
.howtoSlide4LeftTitle{left:10.0% !important}
.howtoSlide4RightTitle{left:55.6% !important}
.howtoSlide4CardDesc{position:absolute !important;top:72.45% !important;width:34% !important;font-size:clamp(10px,2.85vw,14px) !important;line-height:1.30 !important;font-weight:850 !important;letter-spacing:-.04em !important;text-align:center !important;white-space:pre-line !important}
.howtoSlide4LeftDesc{left:10.0% !important}
.howtoSlide4RightDesc{left:55.6% !important}
.howtoSlide4PillText{position:absolute !important;top:80.55% !important;width:34.5% !important;transform:translateY(-50%) !important;font-size:clamp(6px,1.95vw,10px) !important;line-height:1 !important;font-weight:900 !important;letter-spacing:-.055em !important;color:#745833 !important;text-align:center !important;white-space:nowrap !important}
.howtoSlide4LeftPill{left:9.8% !important}
.howtoSlide4RightPill{left:54.8% !important}
.howtoSlide4BottomText{position:absolute !important;left:26.0% !important;top:85.15% !important;width:64.5% !important;font-size:clamp(6px,1.75vw,9px) !important;line-height:1.18 !important;font-weight:850 !important;letter-spacing:-.035em !important;text-align:left !important;white-space:pre-line !important}
html[lang="en"] .howtoSlide4Title{width:80% !important;font-size:clamp(23px,6.8vw,34px) !important;line-height:1.10 !important;letter-spacing:-.04em !important}
html[lang="en"] .howtoSlide4Desc{width:80% !important;font-size:clamp(8px,2.15vw,11px) !important;line-height:1.34 !important;letter-spacing:-.015em !important}
html[lang="en"] .howtoSlide4PanelTitle{font-size:clamp(9px,2.45vw,12px) !important}
html[lang="en"] .howtoSlide4CardTitle{font-size:clamp(10px,2.85vw,15px) !important;letter-spacing:-.02em !important}
html[lang="en"] .howtoSlide4CardDesc{font-size:clamp(7px,1.95vw,10px) !important;line-height:1.22 !important;letter-spacing:-.01em !important}
html[lang="en"] .howtoSlide4PillText{font-size:clamp(5px,1.55vw,8px) !important;letter-spacing:-.005em !important}
html[lang="en"] .howtoSlide4BottomText{font-size:clamp(4px,1.25vw,7px) !important;line-height:1.14 !important;letter-spacing:-.005em !important}
html[lang="ko"] .howtoSlide4Title{width:80% !important;font-size:clamp(24px,6.9vw,35px) !important;line-height:1.12 !important;letter-spacing:-.05em !important}
html[lang="ko"] .howtoSlide4Desc{width:80% !important;font-size:clamp(8px,2.2vw,11px) !important;line-height:1.34 !important;letter-spacing:-.03em !important}
html[lang="ko"] .howtoSlide4CardTitle{font-size:clamp(12px,3.35vw,17px) !important}
html[lang="ko"] .howtoSlide4CardDesc{font-size:clamp(7px,2.05vw,10px) !important;line-height:1.22 !important}
html[lang="ko"] .howtoSlide4PillText{font-size:clamp(5px,1.65vw,8px) !important;letter-spacing:-.03em !important}
html[lang="ko"] .howtoSlide4RightPill{left:53.8% !important;width:35.8% !important}
html[lang="ko"] .howtoSlide4BottomText{font-size:clamp(5px,1.45vw,7.5px) !important;line-height:1.14 !important}
html[lang="zh-CN"] .howtoSlide4Title{width:80% !important;font-size:clamp(25px,7.0vw,36px) !important;line-height:1.12 !important;letter-spacing:-.035em !important}
html[lang="zh-CN"] .howtoSlide4Desc{width:80% !important;font-size:clamp(8px,2.25vw,11.5px) !important;line-height:1.34 !important;letter-spacing:-.02em !important}
html[lang="zh-CN"] .howtoSlide4CardTitle{font-size:clamp(12px,3.45vw,18px) !important}
html[lang="zh-CN"] .howtoSlide4CardDesc{font-size:clamp(8px,2.15vw,11px) !important;line-height:1.24 !important}
html[lang="zh-CN"] .howtoSlide4PillText{font-size:clamp(6px,1.75vw,9px) !important;letter-spacing:-.025em !important}
html[lang="zh-CN"] .howtoSlide4BottomText{font-size:clamp(5px,1.55vw,8px) !important;line-height:1.14 !important}
}
@media(min-width:761px){.howtoSlide4TextLayer{display:none !important}
}
.howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerAccent{display:none !important}
.howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerTitle{position:relative !important;display:inline-block !important;width:auto !important;max-width:8.6em !important;line-height:1.08 !important;border-bottom:0 !important;padding-bottom:0 !important}
.howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerTitle::after{content:"" !important;display:block !important;width:2.08em !important;height:.14em !important;min-height:5px !important;max-height:7px !important;margin-top:.18em !important;margin-left:0 !important;border-radius:999px !important;background:#31c56a !important}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerTitle{font-size:clamp(36px,4.9vw,50px) !important;font-weight:400 !important;letter-spacing:-.02em !important}
.howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerAccent,html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerAccent,html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(1) .howtoTextLayer .howtoTextLayerAccent{display:none !important;visibility:hidden !important;opacity:0 !important;width:0 !important;height:0 !important;margin:0 !important;padding:0 !important;overflow:hidden !important}
.howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerTitle::after{width:2.08em !important;height:.14em !important;min-height:5px !important;max-height:7px !important;margin-top:.18em !important;border-radius:999px !important;background:#31c56a !important}
html.rooom-ios .howtoSlide2Title,html.rooom-ios .howtoSlide2Title *{font-weight:400 !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
html.rooom-ios .howtoSlide2Desc,html.rooom-ios .howtoSlide2Desc *{font-weight:400 !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
html.rooom-ios .howtoSlide2FeatureText,html.rooom-ios .howtoSlide2FeatureText *{font-weight:400 !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
@media(max-width:99999px){.howtoTrack .howtoSlide:nth-child(1) .howtoTextLayer,.howtoTrack .howtoSlide:nth-child(2) .howtoSlide2TextLayer,.howtoTrack .howtoSlide:nth-child(3) .howtoSlide3TextLayer,.howtoTrack .howtoSlide:nth-child(4) .howtoSlide4TextLayer{font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;letter-spacing:-.02em !important;-webkit-font-smoothing:antialiased !important;text-rendering:geometricPrecision !important}
.howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerTitle,.howtoSlide2Title,.howtoSlide3Title,.howtoSlide4Title{font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;font-size:clamp(31px,8.9vw,45px) !important;line-height:1.10 !important;font-weight:400 !important;letter-spacing:-.02em !important;text-align:left !important;white-space:pre-line !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
.howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerTitle{left:7.2% !important;top:13.4% !important;max-width:8.6em !important}
.howtoSlide2Title{left:7.2% !important;top:13.4% !important;width:72% !important;max-width:8.6em !important}
.howtoSlide3Title{left:7.2% !important;top:12.8% !important;width:48% !important;max-width:8.6em !important}
.howtoSlide4Title{left:7.2% !important;top:8.4% !important;width:72% !important;max-width:8.6em !important}
.howtoSlide2Accent,.howtoSlide3Accent,.howtoSlide4Accent{display:none !important;visibility:hidden !important;opacity:0 !important;width:0 !important;height:0 !important;margin:0 !important;padding:0 !important;overflow:hidden !important}
.howtoSlide2Title::after,.howtoSlide3Title::after,.howtoSlide4Title::after{content:"" !important;display:block !important;width:2.08em !important;height:.14em !important;min-height:5px !important;max-height:7px !important;margin-top:.18em !important;margin-left:0 !important;border-radius:999px !important;box-shadow:none !important}
.howtoSlide2Title::after{background:linear-gradient(90deg,#9b38ff 0%,#2d9cff 100%) !important}
.howtoSlide3Title::after{background:linear-gradient(90deg,#a735ff 0%,#c044ff 100%) !important}
.howtoSlide4Title::after{background:#e8ad1b !important}
.howtoTextLayerDesc,.howtoSlide2Desc,.howtoSlide3Desc,.howtoSlide4Desc{font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;font-size:clamp(12px,3.15vw,16px) !important;line-height:1.48 !important;font-weight:400 !important;letter-spacing:-.02em !important;text-align:left !important;white-space:pre-line !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
.howtoTextLayerDesc{left:7.3% !important;top:31.5% !important;width:72% !important}
.howtoSlide2Desc{left:7.3% !important;top:34.0% !important;width:64% !important}
.howtoSlide3Desc{left:7.3% !important;top:34.8% !important;width:43% !important}
.howtoSlide4Desc{left:7.4% !important;top:25.6% !important;width:71% !important}
.howtoTextLayerBtn,.howtoSlide2FeatureText,.howtoSlide3FeatureText,.howtoSlide4PanelTitle,.howtoSlide4CardTitle,.howtoSlide4CardDesc,.howtoSlide4PillText,.howtoSlide4BottomText{font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;font-weight:400 !important;letter-spacing:-.02em !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
.howtoTextLayerBtn,.howtoSlide2FeatureText{font-size:clamp(12px,3.35vw,17px) !important;line-height:1.05 !important}
.howtoSlide3FeatureText{font-size:clamp(10px,2.85vw,15px) !important;line-height:1.16 !important}
.howtoSlide4PanelTitle{font-size:clamp(10px,2.75vw,14px) !important}
.howtoSlide4CardTitle{font-size:clamp(16px,4.45vw,23px) !important;line-height:1.05 !important}
.howtoSlide4CardDesc{font-size:clamp(10px,2.85vw,14px) !important;line-height:1.30 !important}
.howtoSlide4PillText{font-size:clamp(6px,1.95vw,10px) !important;line-height:1 !important}
.howtoSlide4BottomText{font-size:clamp(6px,1.75vw,9px) !important;line-height:1.18 !important}
.howtoBigTitle,.howtoText,.howtoBadge{font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;font-weight:400 !important;letter-spacing:-.02em !important}
.howtoBigTitle{font-size:clamp(31px,8.9vw,45px) !important;line-height:1.10 !important;background-position:0 100% !important}
.howtoText{font-size:clamp(12px,3.15vw,16px) !important;line-height:1.48 !important}
.howtoBadge{font-size:clamp(12px,3.35vw,17px) !important;line-height:1.05 !important}
}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerTitle,html.rooom-ipad-portrait .howtoSlide2Title,html.rooom-ipad-portrait .howtoSlide3Title,html.rooom-ipad-portrait .howtoSlide4Title{font-size:clamp(31px,4.9vw,45px) !important;line-height:1.10 !important;font-weight:400 !important;letter-spacing:-.02em !important;text-shadow:none !important}
html.rooom-ipad-portrait .howtoTextLayerDesc,html.rooom-ipad-portrait .howtoSlide2Desc,html.rooom-ipad-portrait .howtoSlide3Desc,html.rooom-ipad-portrait .howtoSlide4Desc{font-size:clamp(12px,1.95vw,16px) !important;line-height:1.48 !important;font-weight:400 !important;letter-spacing:-.02em !important;text-shadow:none !important}
html.rooom-ipad-portrait .howtoTextLayerBtn,html.rooom-ipad-portrait .howtoSlide2FeatureText,html.rooom-ipad-portrait .howtoSlide3FeatureText,html.rooom-ipad-portrait .howtoSlide4PanelTitle,html.rooom-ipad-portrait .howtoSlide4CardTitle,html.rooom-ipad-portrait .howtoSlide4CardDesc,html.rooom-ipad-portrait .howtoSlide4PillText,html.rooom-ipad-portrait .howtoSlide4BottomText{font-weight:400 !important;letter-spacing:-.02em !important;text-shadow:none !important}
@media(max-width:99999px){.howtoSlide4Title{top:10.4% !important}
.howtoSlide4Desc{top:27.6% !important}
.howtoSlide4BottomText{top:86.5% !important}
}
html.rooom-ipad-portrait .howtoSlide4Title{top:10.4% !important}
html.rooom-ipad-portrait .howtoSlide4Desc{top:27.6% !important}
html.rooom-ipad-portrait .howtoSlide4BottomText{top:86.5% !important}
@media(max-width:99999px){.howtoTrack .howtoSlide:nth-child(5)::before{content:"" !important;position:absolute !important;inset:0 !important;z-index:0 !important;background-image:url('./rooom_howto_assets_webp/allphone5_result.webp?v=howto_webp_v1') !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important}
.howtoTrack .howtoSlide:nth-child(5){padding:0 !important;background:#06112b !important;color:#fff !important}
.howtoTrack .howtoSlide:nth-child(5)>.howtoCopy,.howtoTrack .howtoSlide:nth-child(5)>.howtoVisual{display:none !important}
.howtoTrack .howtoSlide:nth-child(5) .howtoSlide5TextLayer{opacity:1 !important;pointer-events:none !important;position:absolute !important;inset:0 !important;z-index:6 !important;color:#fff !important;font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;text-rendering:geometricPrecision !important;-webkit-font-smoothing:antialiased !important}
.howtoSlide5CopyLayer{position:absolute !important;left:7.2% !important;top:13.4% !important;width:70% !important;max-width:10.2em !important;z-index:1 !important}
.howtoSlide5Title.howtoBigTitle{display:inline !important;margin:0 !important;padding:0 !important;font-size:clamp(28px,8.3vw,43px) !important;line-height:1.14 !important;font-weight:950 !important;letter-spacing:-.07em !important;color:#fff !important;text-align:left !important;white-space:pre-line !important;text-shadow:none !important;-webkit-text-stroke:0 !important;background:linear-gradient(transparent 58%,rgba(146,92,255,.86) 58% 84%,transparent 84%) !important;-webkit-box-decoration-break:clone !important;box-decoration-break:clone !important}
.howtoSlide5Desc.howtoText{display:block !important;margin:22px 0 0 !important;width:100% !important;color:rgba(255,255,255,.86) !important;font-size:clamp(12px,3.15vw,16px) !important;line-height:1.48 !important;font-weight:650 !important;letter-spacing:-.02em !important;text-align:left !important;white-space:pre-line !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
html[lang="en"] .howtoSlide5CopyLayer{width:76% !important;max-width:12.4em !important}
html[lang="en"] .howtoSlide5Title.howtoBigTitle{font-size:clamp(25px,7.2vw,38px) !important;line-height:1.16 !important;letter-spacing:-.045em !important}
html[lang="en"] .howtoSlide5Desc.howtoText{font-size:clamp(12px,3.1vw,16px) !important}
html[lang="ko"] .howtoSlide5CopyLayer,html[lang="zh-CN"] .howtoSlide5CopyLayer{width:74% !important;max-width:11.4em !important}
html[lang="ko"] .howtoSlide5Title.howtoBigTitle,html[lang="zh-CN"] .howtoSlide5Title.howtoBigTitle{font-size:clamp(26px,7.55vw,39px) !important;line-height:1.16 !important;letter-spacing:-.045em !important}
html[lang="ko"] .howtoSlide5Desc.howtoText,html[lang="zh-CN"] .howtoSlide5Desc.howtoText{font-size:clamp(12px,3.05vw,15px) !important}
}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5)::before{content:"" !important;position:absolute !important;inset:0 !important;z-index:0 !important;background-image:url('./rooom_howto_assets_webp/allphone5_result.webp?v=howto_webp_v1') !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5){padding:0 !important;background:#06112b !important;color:#fff !important}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5)>.howtoCopy,html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5)>.howtoVisual{display:none !important}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5) .howtoSlide5TextLayer{opacity:1 !important;pointer-events:none !important;position:absolute !important;inset:0 !important;z-index:6 !important;color:#fff !important;font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;text-rendering:geometricPrecision !important;-webkit-font-smoothing:antialiased !important}
html.rooom-ipad-portrait .howtoSlide5CopyLayer{position:absolute !important;left:7.2% !important;top:13.4% !important;width:70% !important;max-width:10.2em !important;z-index:1 !important}
html.rooom-ipad-portrait .howtoSlide5Title.howtoBigTitle{display:inline !important;margin:0 !important;padding:0 !important;font-size:clamp(30px,4.55vw,43px) !important;line-height:1.14 !important;font-weight:950 !important;letter-spacing:-.07em !important;color:#fff !important;text-align:left !important;white-space:pre-line !important;text-shadow:none !important;-webkit-text-stroke:0 !important;background:linear-gradient(transparent 58%,rgba(146,92,255,.86) 58% 84%,transparent 84%) !important;-webkit-box-decoration-break:clone !important;box-decoration-break:clone !important}
html.rooom-ipad-portrait .howtoSlide5Desc.howtoText{display:block !important;margin:22px 0 0 !important;width:100% !important;color:rgba(255,255,255,.86) !important;font-size:clamp(12px,1.95vw,16px) !important;line-height:1.48 !important;font-weight:650 !important;letter-spacing:-.02em !important;text-align:left !important;white-space:pre-line !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
@media(max-width:99999px){.howtoTrack .howtoSlide:nth-child(5)>.howtoCopy{display:block !important;position:absolute !important;left:7.2% !important;top:13.4% !important;width:70% !important;max-width:10.2em !important;z-index:7 !important;color:#fff !important;pointer-events:none !important}
.howtoTrack .howtoSlide:nth-child(5)>.howtoCopy .howtoEyebrow{display:none !important}
.howtoTrack .howtoSlide:nth-child(5)>.howtoVisual{display:none !important}
.howtoTrack .howtoSlide:nth-child(5) .howtoBigTitle{display:inline !important;margin:0 !important;padding:0 !important;font-size:clamp(27px,8.0vw,42px) !important;line-height:1.20 !important;font-weight:950 !important;letter-spacing:-.07em !important;color:#fff !important;text-align:left !important;white-space:normal !important;text-shadow:none !important;-webkit-text-stroke:0 !important;background:linear-gradient(transparent 64%,rgba(146,92,255,.86) 64% 86%,transparent 86%) !important;-webkit-box-decoration-break:clone !important;box-decoration-break:clone !important}
.howtoTrack .howtoSlide:nth-child(5) .howtoText{display:block !important;visibility:visible !important;opacity:1 !important;margin:22px 0 0 !important;width:100% !important;color:rgba(255,255,255,.86) !important;font-size:clamp(12px,3.15vw,16px) !important;line-height:1.48 !important;font-weight:650 !important;letter-spacing:-.02em !important;text-align:left !important;white-space:normal !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
.howtoTrack .howtoSlide:nth-child(5) .howtoSlide5TextLayer,.howtoTrack .howtoSlide:nth-child(5) .howtoSlide5CopyLayer,.howtoTrack .howtoSlide:nth-child(5) .howtoSlide5Accent{display:none !important}
html[lang="en"] .howtoTrack .howtoSlide:nth-child(5)>.howtoCopy{width:76% !important;max-width:12.4em !important}
html[lang="en"] .howtoTrack .howtoSlide:nth-child(5) .howtoBigTitle{font-size:clamp(25px,7.2vw,38px) !important;line-height:1.18 !important;letter-spacing:-.045em !important}
html[lang="ko"] .howtoTrack .howtoSlide:nth-child(5)>.howtoCopy,html[lang="zh-CN"] .howtoTrack .howtoSlide:nth-child(5)>.howtoCopy{width:74% !important;max-width:11.4em !important}
html[lang="ko"] .howtoTrack .howtoSlide:nth-child(5) .howtoBigTitle,html[lang="zh-CN"] .howtoTrack .howtoSlide:nth-child(5) .howtoBigTitle{font-size:clamp(26px,7.55vw,39px) !important;line-height:1.18 !important;letter-spacing:-.045em !important}
}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5)>.howtoCopy{display:block !important;position:absolute !important;left:7.2% !important;top:13.4% !important;width:70% !important;max-width:10.2em !important;z-index:7 !important;color:#fff !important;pointer-events:none !important}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5)>.howtoCopy .howtoEyebrow{display:none !important}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5)>.howtoVisual{display:none !important}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5) .howtoBigTitle{display:inline !important;margin:0 !important;padding:0 !important;font-size:clamp(30px,4.55vw,43px) !important;line-height:1.20 !important;font-weight:950 !important;letter-spacing:-.07em !important;color:#fff !important;text-align:left !important;white-space:normal !important;text-shadow:none !important;-webkit-text-stroke:0 !important;background:linear-gradient(transparent 64%,rgba(146,92,255,.86) 64% 86%,transparent 86%) !important;-webkit-box-decoration-break:clone !important;box-decoration-break:clone !important}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5) .howtoText{display:block !important;visibility:visible !important;opacity:1 !important;margin:22px 0 0 !important;width:100% !important;color:rgba(255,255,255,.86) !important;font-size:clamp(12px,1.95vw,16px) !important;line-height:1.48 !important;font-weight:650 !important;letter-spacing:-.02em !important;text-align:left !important;white-space:normal !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5) .howtoSlide5TextLayer,html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5) .howtoSlide5CopyLayer,html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5) .howtoSlide5Accent{display:none !important}
@media(max-width:99999px){.howtoTrack .howtoSlide:nth-child(5)::before{background-image:url('./rooom_howto_assets_webp/allphone5_result.webp?v=howto_webp_v1') !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important}
.howtoTrack .howtoSlide:nth-child(5)>.howtoCopy,.howtoTrack .howtoSlide:nth-child(5)>.howtoVisual,.howtoTrack .howtoSlide:nth-child(5) .howtoSlide5CopyLayer,.howtoTrack .howtoSlide:nth-child(5) .howtoSlide5Accent{display:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important}
.howtoTrack .howtoSlide:nth-child(5) .howtoSlide5TextLayer{display:block !important;visibility:visible !important;opacity:1 !important;pointer-events:none !important;position:absolute !important;inset:0 !important;z-index:9 !important;color:#fff !important;font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;letter-spacing:-.02em !important;-webkit-font-smoothing:antialiased !important;text-rendering:geometricPrecision !important}
.howtoSlide5Title{position:absolute !important;left:7.2% !important;top:13.4% !important;width:86% !important;max-width:none !important;margin:0 !important;padding:0 !important;font-size:clamp(31px,8.9vw,45px) !important;line-height:1.10 !important;font-weight:400 !important;letter-spacing:-.02em !important;color:#fff !important;text-align:left !important;white-space:pre-line !important;word-break:keep-all !important;overflow-wrap:normal !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
.howtoSlide5Title::after{content:"" !important;display:block !important;width:2.08em !important;height:.14em !important;min-height:5px !important;max-height:7px !important;margin-top:.18em !important;margin-left:0 !important;border-radius:999px !important;background:linear-gradient(90deg,#a735ff 0%,#c044ff 100%) !important;box-shadow:none !important}
.howtoSlide5Desc{position:absolute !important;left:7.3% !important;top:42.0% !important;width:78% !important;margin:0 !important;padding:0 !important;display:block !important;visibility:visible !important;opacity:1 !important;color:rgba(255,255,255,.86) !important;font-size:clamp(12px,3.15vw,16px) !important;line-height:1.48 !important;font-weight:400 !important;letter-spacing:-.02em !important;text-align:left !important;white-space:pre-line !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
html[lang="en"] .howtoSlide5Title{width:88% !important;font-size:clamp(27px,7.65vw,39px) !important;line-height:1.12 !important;letter-spacing:-.02em !important}
html[lang="en"] .howtoSlide5Desc{top:42.0% !important;font-size:clamp(12px,3.05vw,16px) !important}
html[lang="ko"] .howtoSlide5Title,html[lang="zh-CN"] .howtoSlide5Title{width:88% !important;font-size:clamp(29px,8.1vw,41px) !important;line-height:1.12 !important;letter-spacing:-.02em !important}
html[lang="ko"] .howtoSlide5Desc,html[lang="zh-CN"] .howtoSlide5Desc{top:42.0% !important;font-size:clamp(12px,3.05vw,15px) !important}
}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5)::before{background-image:url('./rooom_howto_assets_webp/allphone5_result.webp?v=howto_webp_v1') !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5)>.howtoCopy,html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5)>.howtoVisual,html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5) .howtoSlide5CopyLayer,html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5) .howtoSlide5Accent{display:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5) .howtoSlide5TextLayer{display:block !important;visibility:visible !important;opacity:1 !important;pointer-events:none !important;position:absolute !important;inset:0 !important;z-index:9 !important;color:#fff !important;font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;letter-spacing:-.02em !important;-webkit-font-smoothing:antialiased !important;text-rendering:geometricPrecision !important}
html.rooom-ipad-portrait .howtoSlide5Title{position:absolute !important;left:7.2% !important;top:13.4% !important;width:86% !important;max-width:none !important;margin:0 !important;padding:0 !important;font-size:clamp(31px,4.9vw,45px) !important;line-height:1.10 !important;font-weight:400 !important;letter-spacing:-.02em !important;color:#fff !important;text-align:left !important;white-space:pre-line !important;word-break:keep-all !important;overflow-wrap:normal !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
html.rooom-ipad-portrait .howtoSlide5Title::after{content:"" !important;display:block !important;width:2.08em !important;height:.14em !important;min-height:5px !important;max-height:7px !important;margin-top:.18em !important;margin-left:0 !important;border-radius:999px !important;background:linear-gradient(90deg,#a735ff 0%,#c044ff 100%) !important;box-shadow:none !important}
html.rooom-ipad-portrait .howtoSlide5Desc{position:absolute !important;left:7.3% !important;top:42.0% !important;width:78% !important;margin:0 !important;padding:0 !important;display:block !important;visibility:visible !important;opacity:1 !important;color:rgba(255,255,255,.86) !important;font-size:clamp(12px,1.95vw,16px) !important;line-height:1.48 !important;font-weight:400 !important;letter-spacing:-.02em !important;text-align:left !important;white-space:pre-line !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
@media (min-width:761px){.howtoModalBox{width:min(430px,calc((100vh - 124px) * 9 / 16),calc(100vw - 44px)) !important;height:auto !important;max-height:calc(100vh - 54px) !important;aspect-ratio:auto !important;border-radius:30px !important;background:#070b14 !important}
.howtoViewport{width:100% !important;height:auto !important;aspect-ratio:9 / 16 !important;max-height:calc(100vh - 124px) !important;flex:0 0 auto !important;background:#070b14 !important}
.howtoTrack{height:100% !important}
.howtoSlide{background:#070b14 !important}
.howtoSlide::before{background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important;background-color:#070b14 !important}
.howtoTrack .howtoSlide:nth-child(1)::before{background-image:url('./rooom_howto_assets_webp/allphone1_result.webp?v=howto_webp_v1') !important}
.howtoTrack .howtoSlide:nth-child(2)::before{background-image:url('./rooom_howto_assets_webp/allphone2_result.webp?v=howto_webp_v1') !important}
.howtoTrack .howtoSlide:nth-child(3)::before{background-image:url('./rooom_howto_assets_webp/allphone3_result.webp?v=howto_webp_v1') !important}
.howtoTrack .howtoSlide:nth-child(4)::before{background-image:url('./rooom_howto_assets_webp/allphone4_result.webp?v=howto_webp_v1') !important}
.howtoTrack .howtoSlide:nth-child(5)::before{background-image:url('./rooom_howto_assets_webp/allphone5_result.webp?v=howto_webp_v1') !important}
.howtoControls{flex:0 0 auto !important;min-height:58px !important}
}
@media (min-width:761px){.howtoModalBox{width:min(430px,calc((100vh - 124px) * 0.571428),calc(100vw - 44px)) !important;height:auto !important;max-height:calc(100vh - 54px) !important;aspect-ratio:auto !important;border-radius:30px !important;background:#070b14 !important}
.howtoViewport{width:100% !important;height:auto !important;aspect-ratio:4 / 7 !important;max-height:calc(100vh - 124px) !important;flex:0 0 auto !important;background:#070b14 !important}
.howtoTrack{height:100% !important}
.howtoSlide{background:#070b14 !important}
.howtoSlide::before{content:"" !important;position:absolute !important;inset:0 !important;z-index:0 !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important;background-color:#070b14 !important}
.howtoTrack .howtoSlide:nth-child(1)>.howtoCopy,.howtoTrack .howtoSlide:nth-child(1)>.howtoVisual,.howtoTrack .howtoSlide:nth-child(2)>.howtoCopy,.howtoTrack .howtoSlide:nth-child(2)>.howtoVisual,.howtoTrack .howtoSlide:nth-child(3)>.howtoCopy,.howtoTrack .howtoSlide:nth-child(3)>.howtoVisual,.howtoTrack .howtoSlide:nth-child(4)>.howtoCopy,.howtoTrack .howtoSlide:nth-child(4)>.howtoVisual,.howtoTrack .howtoSlide:nth-child(5)>.howtoCopy,.howtoTrack .howtoSlide:nth-child(5)>.howtoVisual{display:none !important}
.howtoControls{flex:0 0 auto !important;min-height:58px !important;padding:7px 12px 10px !important;gap:8px !important}
}
@media(min-width:761px){.howtoTrack .howtoSlide:nth-child(1)::before{background-image:url('./rooom_howto_assets_webp/allphone1_result.webp?v=howto_webp_v1') !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important}
.howtoTrack .howtoSlide:nth-child(1) .howtoTextLayer{opacity:1 !important;pointer-events:none !important;position:absolute !important;inset:0 !important;z-index:5 !important;color:#050505 !important;font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;letter-spacing:-.035em !important;text-rendering:geometricPrecision !important;-webkit-font-smoothing:antialiased !important}
.howtoTextLayerStep{display:none !important}
.howtoTextLayerTitle{position:absolute !important;left:7.2% !important;top:13.4% !important;width:68% !important;font-size:clamp(31px,8.9vw,45px) !important;line-height:1.18 !important;font-weight:950 !important;letter-spacing:-.055em !important;text-align:left !important;white-space:pre-line !important}
.howtoTextLayerAccent{position:absolute !important;left:7.3% !important;top:27.2% !important;width:20.0% !important;height:6px !important;border-radius:999px !important;background:#31c56a !important;box-shadow:0 1px 0 rgba(255,255,255,.15) inset !important}
.howtoTextLayerDesc{position:absolute !important;left:7.3% !important;top:31.5% !important;width:72% !important;font-size:clamp(12px,3.15vw,16px) !important;line-height:1.48 !important;font-weight:800 !important;letter-spacing:-.03em !important;text-align:left !important;white-space:pre-line !important}
.howtoTextLayerBtn{position:absolute !important;left:31.0% !important;width:50.5% !important;transform:translateY(-50%) !important;text-align:left !important;font-size:clamp(12px,3.35vw,17px) !important;line-height:1.05 !important;font-weight:950 !important;letter-spacing:-.04em !important;white-space:nowrap !important}
.howtoTextLayerBtn1{top:75.10% !important}
.howtoTextLayerBtn2{top:82.55% !important}
.howtoTextLayerBtn3{top:89.95% !important}
html[lang="en"] .howtoTextLayerTitle{width:68% !important;font-size:clamp(30px,8.5vw,43px) !important;line-height:1.12 !important;letter-spacing:-.035em !important}
html[lang="en"] .howtoTextLayerDesc{width:72% !important;font-size:clamp(10px,2.8vw,14px) !important;line-height:1.42 !important;letter-spacing:-.02em !important}
html[lang="en"] .howtoTextLayerBtn{left:30.0% !important;width:57.5% !important;font-size:clamp(9px,2.55vw,13px) !important;letter-spacing:-.02em !important}
html[lang="ko"] .howtoTextLayerTitle{width:70% !important;font-size:clamp(29px,8.25vw,42px) !important;line-height:1.20 !important;letter-spacing:-.045em !important}
html[lang="ko"] .howtoTextLayerDesc{width:74% !important;font-size:clamp(10px,2.9vw,14px) !important;line-height:1.45 !important;letter-spacing:-.025em !important}
html[lang="ko"] .howtoTextLayerBtn{left:30.0% !important;width:57.5% !important;font-size:clamp(10px,2.85vw,14px) !important;letter-spacing:-.03em !important}
html[lang="zh-CN"] .howtoTextLayerTitle{width:70% !important;font-size:clamp(30px,8.4vw,43px) !important;line-height:1.18 !important;letter-spacing:-.035em !important}
html[lang="zh-CN"] .howtoTextLayerDesc{width:74% !important;font-size:clamp(11px,3.05vw,15px) !important;line-height:1.45 !important;letter-spacing:-.02em !important}
html[lang="zh-CN"] .howtoTextLayerBtn{left:30.0% !important;width:57.5% !important;font-size:clamp(11px,3.0vw,15px) !important;letter-spacing:-.025em !important}
}
@media(min-width:761px){.howtoTrack .howtoSlide:nth-child(2)::before{background-image:url('./rooom_howto_assets_webp/allphone2_result.webp?v=howto_webp_v1') !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important}
.howtoTrack .howtoSlide:nth-child(2) .howtoSlide2TextLayer{opacity:1 !important;pointer-events:none !important;position:absolute !important;inset:0 !important;z-index:6 !important;color:#fff !important;font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;letter-spacing:-.035em !important;text-rendering:geometricPrecision !important;-webkit-font-smoothing:antialiased !important}
.howtoSlide2Title{position:absolute !important;left:7.2% !important;top:13.2% !important;width:70% !important;font-size:clamp(37px,10.8vw,55px) !important;line-height:1.18 !important;font-weight:950 !important;letter-spacing:-.06em !important;text-align:left !important;white-space:pre-line !important;text-shadow:0 3px 12px rgba(0,0,0,.40) !important}
.howtoSlide2Accent{position:absolute !important;left:7.3% !important;top:27.6% !important;width:33.5% !important;height:6px !important;border-radius:999px !important;background:linear-gradient(90deg,#9b38ff 0%,#2d9cff 100%) !important;box-shadow:0 1px 0 rgba(255,255,255,.15) inset !important}
.howtoSlide2Desc{position:absolute !important;left:7.3% !important;top:31.7% !important;width:62% !important;font-size:clamp(16px,4.7vw,24px) !important;line-height:1.62 !important;font-weight:850 !important;letter-spacing:-.035em !important;text-align:left !important;white-space:pre-line !important;text-shadow:0 2px 10px rgba(0,0,0,.42) !important}
.howtoSlide2Feature{position:absolute !important;left:7.2% !important;width:60% !important;height:5.35% !important;min-height:42px !important;display:flex !important;align-items:center !important;gap:14px !important;padding:0 16px !important;border-radius:16px !important;background:rgba(10,14,22,.78) !important;border:1px solid rgba(255,255,255,.18) !important;box-shadow:0 10px 24px rgba(0,0,0,.22) !important;backdrop-filter:blur(5px) !important;-webkit-backdrop-filter:blur(5px) !important}
.howtoSlide2Feature1{top:66.8% !important}
.howtoSlide2Feature2{top:74.2% !important}
.howtoSlide2Feature3{top:81.6% !important}
.howtoSlide2Feature4{top:89.0% !important}
.howtoSlide2Icon{flex:0 0 auto !important;width:27px !important;height:27px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;color:#6f5cff !important}
.howtoSlide2Icon svg{display:block !important;width:27px !important;height:27px !important;fill:currentColor !important}
.howtoSlide2FeatureText{min-width:0 !important;color:#fff !important;font-size:clamp(14px,4.1vw,21px) !important;line-height:1.05 !important;font-weight:900 !important;letter-spacing:-.04em !important;text-align:left !important;white-space:nowrap !important;text-shadow:0 2px 8px rgba(0,0,0,.30) !important}
html[lang="en"] .howtoSlide2Title{width:72% !important;font-size:clamp(36px,10.0vw,52px) !important;line-height:1.12 !important;letter-spacing:-.045em !important}
html[lang="en"] .howtoSlide2Desc{width:64% !important;font-size:clamp(13px,3.7vw,19px) !important;line-height:1.45 !important;letter-spacing:-.025em !important}
html[lang="en"] .howtoSlide2Feature{width:60% !important;gap:10px !important;padding:0 13px !important}
html[lang="en"] .howtoSlide2FeatureText{font-size:clamp(11px,3.15vw,16px) !important;letter-spacing:-.025em !important}
html[lang="ko"] .howtoSlide2Title{width:74% !important;font-size:clamp(24px,6.8vw,35px) !important;line-height:1.18 !important;letter-spacing:-.05em !important}
html[lang="ko"] .howtoSlide2Desc{width:66% !important;font-size:clamp(10px,2.85vw,15px) !important;line-height:1.48 !important;letter-spacing:-.03em !important}
html[lang="ko"] .howtoSlide2Feature{width:60% !important;gap:10px !important;padding:0 13px !important}
html[lang="ko"] .howtoSlide2FeatureText{font-size:clamp(11px,3.25vw,16px) !important;letter-spacing:-.035em !important}
html[lang="zh-CN"] .howtoSlide2Title{width:72% !important;font-size:clamp(26px,7.3vw,37px) !important;line-height:1.16 !important;letter-spacing:-.04em !important}
html[lang="zh-CN"] .howtoSlide2Desc{width:66% !important;font-size:clamp(11px,3.05vw,15px) !important;line-height:1.46 !important;letter-spacing:-.025em !important}
html[lang="zh-CN"] .howtoSlide2Feature{width:60% !important;gap:10px !important;padding:0 13px !important}
html[lang="zh-CN"] .howtoSlide2FeatureText{font-size:clamp(12px,3.35vw,17px) !important;letter-spacing:-.03em !important}
}
@media(min-width:761px){.howtoTrack .howtoSlide:nth-child(3)::before{content:"" !important;position:absolute !important;inset:0 !important;z-index:0 !important;background-image:url('./rooom_howto_assets_webp/allphone3_result.webp?v=howto_webp_v1') !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important}
.howtoTrack .howtoSlide:nth-child(3){padding:0 !important;background:#050817 !important;color:#fff !important}
.howtoTrack .howtoSlide:nth-child(3)>.howtoStarField,.howtoTrack .howtoSlide:nth-child(3)>.howtoCopy,.howtoTrack .howtoSlide:nth-child(3)>.howtoVisual{display:none !important}
.howtoTrack .howtoSlide:nth-child(3) .howtoSlide3TextLayer{opacity:1 !important;pointer-events:none !important;position:absolute !important;inset:0 !important;z-index:6 !important;color:#fff !important;font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;letter-spacing:-.035em !important;text-rendering:geometricPrecision !important;-webkit-font-smoothing:antialiased !important}
.howtoSlide3Title{position:absolute !important;left:7.2% !important;top:12.2% !important;width:42% !important;font-size:clamp(31px,8.7vw,44px) !important;line-height:1.18 !important;font-weight:950 !important;letter-spacing:-.06em !important;text-align:left !important;white-space:pre-line !important;text-shadow:0 3px 13px rgba(0,0,0,.44) !important}
.howtoSlide3Accent{position:absolute !important;left:7.3% !important;top:31.9% !important;width:36.8% !important;height:5px !important;border-radius:999px !important;background:linear-gradient(90deg,#a735ff 0%,#c044ff 100%) !important;box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 0 14px rgba(180,54,255,.28) !important}
.howtoSlide3Desc{position:absolute !important;left:7.3% !important;top:36.9% !important;width:41% !important;font-size:clamp(12px,3.35vw,17px) !important;line-height:1.55 !important;font-weight:750 !important;letter-spacing:-.035em !important;text-align:left !important;white-space:pre-line !important;text-shadow:0 2px 10px rgba(0,0,0,.42) !important}
.howtoSlide3TimerLabel{position:absolute !important;left:73.0% !important;top:31.8% !important;transform:translateX(-50%) !important;width:24% !important;color:rgba(255,255,255,.92) !important;font-size:clamp(10px,2.65vw,15px) !important;line-height:1 !important;font-weight:850 !important;letter-spacing:-.02em !important;text-align:center !important;white-space:nowrap !important;text-shadow:0 2px 10px rgba(0,0,0,.46) !important}
.howtoSlide3Feature{position:absolute !important;left:7.2% !important;width:47.5% !important;height:6.25% !important;min-height:46px !important;display:flex !important;align-items:center !important;gap:14px !important;padding:0 17px !important;border-radius:17px !important;background:rgba(22,10,36,.74) !important;border:1px solid rgba(193,70,255,.34) !important;box-shadow:0 10px 26px rgba(0,0,0,.26) !important;backdrop-filter:blur(5px) !important;-webkit-backdrop-filter:blur(5px) !important}
.howtoSlide3Feature1{top:67.7% !important}
.howtoSlide3Feature2{top:75.2% !important}
.howtoSlide3Feature3{top:82.7% !important}
.howtoSlide3Icon{flex:0 0 auto !important;width:28px !important;height:28px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;color:#cf48ff !important;filter:drop-shadow(0 0 8px rgba(207,72,255,.26)) !important}
.howtoSlide3Icon svg{display:block !important;width:28px !important;height:28px !important;fill:none !important;stroke:currentColor !important;stroke-width:2.1 !important;stroke-linecap:round !important;stroke-linejoin:round !important}
.howtoSlide3FeatureText{min-width:0 !important;color:#fff !important;font-size:clamp(10px,2.85vw,15px) !important;line-height:1.16 !important;font-weight:850 !important;letter-spacing:-.04em !important;text-align:left !important;white-space:pre-line !important;text-shadow:0 2px 8px rgba(0,0,0,.32) !important}
html[lang="en"] .howtoSlide3Title{width:52% !important;font-size:clamp(26px,7.3vw,37px) !important;line-height:1.16 !important;letter-spacing:-.045em !important}
html[lang="en"] .howtoSlide3Desc{width:50% !important;font-size:clamp(10px,2.85vw,15px) !important;line-height:1.48 !important;letter-spacing:-.025em !important}
html[lang="en"] .howtoSlide3Feature{width:52% !important;gap:13px !important;padding:0 15px !important}
html[lang="en"] .howtoSlide3FeatureText{font-size:clamp(10px,2.8vw,14px) !important;letter-spacing:-.025em !important}
html[lang="ko"] .howtoSlide3Title{width:54% !important;font-size:clamp(24px,6.8vw,35px) !important;line-height:1.18 !important;letter-spacing:-.05em !important}
html[lang="ko"] .howtoSlide3Desc{width:54% !important;font-size:clamp(10px,2.75vw,14px) !important;line-height:1.50 !important;letter-spacing:-.035em !important}
html[lang="ko"] .howtoSlide3Feature{width:54% !important;gap:13px !important;padding:0 15px !important}
html[lang="ko"] .howtoSlide3FeatureText{font-size:clamp(10px,2.75vw,14px) !important;letter-spacing:-.035em !important}
html[lang="zh-CN"] .howtoSlide3Title{width:52% !important;font-size:clamp(26px,7.3vw,37px) !important;line-height:1.16 !important;letter-spacing:-.04em !important}
html[lang="zh-CN"] .howtoSlide3Desc{width:52% !important;font-size:clamp(11px,3.05vw,15px) !important;line-height:1.48 !important;letter-spacing:-.025em !important}
html[lang="zh-CN"] .howtoSlide3Feature{width:52% !important;gap:13px !important;padding:0 15px !important}
html[lang="zh-CN"] .howtoSlide3FeatureText{font-size:clamp(10px,2.9vw,15px) !important;letter-spacing:-.03em !important}
}
@media(min-width:761px){.howtoTrack .howtoSlide:nth-child(4)::before{content:"" !important;position:absolute !important;inset:0 !important;z-index:0 !important;background-image:url('./rooom_howto_assets_webp/allphone4_result.webp?v=howto_webp_v1') !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important}
.howtoTrack .howtoSlide:nth-child(4){padding:0 !important;background:#f7efe2 !important;color:#090909 !important}
.howtoTrack .howtoSlide:nth-child(4)>.howtoCopy,.howtoTrack .howtoSlide:nth-child(4)>.howtoVisual{display:none !important}
.howtoTrack .howtoSlide:nth-child(4) .howtoSlide4TextLayer{opacity:1 !important;pointer-events:none !important;position:absolute !important;inset:0 !important;z-index:6 !important;color:#070707 !important;font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;letter-spacing:-.035em !important;text-rendering:geometricPrecision !important;-webkit-font-smoothing:antialiased !important}
.howtoSlide4Title{position:absolute !important;left:7.2% !important;top:7.8% !important;width:70% !important;font-size:clamp(32px,9.25vw,47px) !important;line-height:1.17 !important;font-weight:950 !important;letter-spacing:-.06em !important;text-align:left !important;white-space:pre-line !important}
.howtoSlide4Accent{position:absolute !important;left:7.4% !important;top:21.35% !important;width:25.5% !important;height:5px !important;border-radius:999px !important;background:#e8ad1b !important;box-shadow:0 1px 0 rgba(255,255,255,.2) inset !important}
.howtoSlide4Desc{position:absolute !important;left:7.4% !important;top:24.6% !important;width:71% !important;font-size:clamp(11px,3.0vw,15px) !important;line-height:1.48 !important;font-weight:800 !important;letter-spacing:-.033em !important;text-align:left !important;white-space:pre-line !important}
.howtoSlide4PanelTitle{position:absolute !important;left:22% !important;top:42.55% !important;width:56% !important;font-size:clamp(10px,2.75vw,14px) !important;line-height:1 !important;font-weight:900 !important;letter-spacing:-.035em !important;text-align:center !important;white-space:nowrap !important}
.howtoSlide4CardTitle{position:absolute !important;top:68.45% !important;width:34% !important;font-size:clamp(16px,4.45vw,23px) !important;line-height:1.05 !important;font-weight:950 !important;letter-spacing:-.055em !important;text-align:center !important;white-space:nowrap !important}
.howtoSlide4LeftTitle{left:10.0% !important}
.howtoSlide4RightTitle{left:55.6% !important}
.howtoSlide4CardDesc{position:absolute !important;top:72.45% !important;width:34% !important;font-size:clamp(10px,2.85vw,14px) !important;line-height:1.30 !important;font-weight:850 !important;letter-spacing:-.04em !important;text-align:center !important;white-space:pre-line !important}
.howtoSlide4LeftDesc{left:10.0% !important}
.howtoSlide4RightDesc{left:55.6% !important}
.howtoSlide4PillText{position:absolute !important;top:80.55% !important;width:34.5% !important;transform:translateY(-50%) !important;font-size:clamp(6px,1.95vw,10px) !important;line-height:1 !important;font-weight:900 !important;letter-spacing:-.055em !important;color:#745833 !important;text-align:center !important;white-space:nowrap !important}
.howtoSlide4LeftPill{left:9.8% !important}
.howtoSlide4RightPill{left:54.8% !important}
.howtoSlide4BottomText{position:absolute !important;left:26.0% !important;top:85.15% !important;width:64.5% !important;font-size:clamp(6px,1.75vw,9px) !important;line-height:1.18 !important;font-weight:850 !important;letter-spacing:-.035em !important;text-align:left !important;white-space:pre-line !important}
html[lang="en"] .howtoSlide4Title{width:80% !important;font-size:clamp(23px,6.8vw,34px) !important;line-height:1.10 !important;letter-spacing:-.04em !important}
html[lang="en"] .howtoSlide4Desc{width:80% !important;font-size:clamp(8px,2.15vw,11px) !important;line-height:1.34 !important;letter-spacing:-.015em !important}
html[lang="en"] .howtoSlide4PanelTitle{font-size:clamp(9px,2.45vw,12px) !important}
html[lang="en"] .howtoSlide4CardTitle{font-size:clamp(10px,2.85vw,15px) !important;letter-spacing:-.02em !important}
html[lang="en"] .howtoSlide4CardDesc{font-size:clamp(7px,1.95vw,10px) !important;line-height:1.22 !important;letter-spacing:-.01em !important}
html[lang="en"] .howtoSlide4PillText{font-size:clamp(5px,1.55vw,8px) !important;letter-spacing:-.005em !important}
html[lang="en"] .howtoSlide4BottomText{font-size:clamp(4px,1.25vw,7px) !important;line-height:1.14 !important;letter-spacing:-.005em !important}
html[lang="ko"] .howtoSlide4Title{width:80% !important;font-size:clamp(24px,6.9vw,35px) !important;line-height:1.12 !important;letter-spacing:-.05em !important}
html[lang="ko"] .howtoSlide4Desc{width:80% !important;font-size:clamp(8px,2.2vw,11px) !important;line-height:1.34 !important;letter-spacing:-.03em !important}
html[lang="ko"] .howtoSlide4CardTitle{font-size:clamp(12px,3.35vw,17px) !important}
html[lang="ko"] .howtoSlide4CardDesc{font-size:clamp(7px,2.05vw,10px) !important;line-height:1.22 !important}
html[lang="ko"] .howtoSlide4PillText{font-size:clamp(5px,1.65vw,8px) !important;letter-spacing:-.03em !important}
html[lang="ko"] .howtoSlide4RightPill{left:53.8% !important;width:35.8% !important}
html[lang="ko"] .howtoSlide4BottomText{font-size:clamp(5px,1.45vw,7.5px) !important;line-height:1.14 !important}
html[lang="zh-CN"] .howtoSlide4Title{width:80% !important;font-size:clamp(25px,7.0vw,36px) !important;line-height:1.12 !important;letter-spacing:-.035em !important}
html[lang="zh-CN"] .howtoSlide4Desc{width:80% !important;font-size:clamp(8px,2.25vw,11.5px) !important;line-height:1.34 !important;letter-spacing:-.02em !important}
html[lang="zh-CN"] .howtoSlide4CardTitle{font-size:clamp(12px,3.45vw,18px) !important}
html[lang="zh-CN"] .howtoSlide4CardDesc{font-size:clamp(8px,2.15vw,11px) !important;line-height:1.24 !important}
html[lang="zh-CN"] .howtoSlide4PillText{font-size:clamp(6px,1.75vw,9px) !important;letter-spacing:-.025em !important}
html[lang="zh-CN"] .howtoSlide4BottomText{font-size:clamp(5px,1.55vw,8px) !important;line-height:1.14 !important}
}
@media(min-width:761px){.howtoTrack .howtoSlide:nth-child(1) .howtoTextLayer,.howtoTrack .howtoSlide:nth-child(2) .howtoSlide2TextLayer,.howtoTrack .howtoSlide:nth-child(3) .howtoSlide3TextLayer,.howtoTrack .howtoSlide:nth-child(4) .howtoSlide4TextLayer{font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;letter-spacing:-.02em !important;-webkit-font-smoothing:antialiased !important;text-rendering:geometricPrecision !important}
.howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerTitle,.howtoSlide2Title,.howtoSlide3Title,.howtoSlide4Title{font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;font-size:clamp(31px,8.9vw,45px) !important;line-height:1.10 !important;font-weight:400 !important;letter-spacing:-.02em !important;text-align:left !important;white-space:pre-line !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
.howtoTrack .howtoSlide:nth-child(1) .howtoTextLayerTitle{left:7.2% !important;top:13.4% !important;max-width:8.6em !important}
.howtoSlide2Title{left:7.2% !important;top:13.4% !important;width:72% !important;max-width:8.6em !important}
.howtoSlide3Title{left:7.2% !important;top:12.8% !important;width:48% !important;max-width:8.6em !important}
.howtoSlide4Title{left:7.2% !important;top:8.4% !important;width:72% !important;max-width:8.6em !important}
.howtoSlide2Accent,.howtoSlide3Accent,.howtoSlide4Accent{display:none !important;visibility:hidden !important;opacity:0 !important;width:0 !important;height:0 !important;margin:0 !important;padding:0 !important;overflow:hidden !important}
.howtoSlide2Title::after,.howtoSlide3Title::after,.howtoSlide4Title::after{content:"" !important;display:block !important;width:2.08em !important;height:.14em !important;min-height:5px !important;max-height:7px !important;margin-top:.18em !important;margin-left:0 !important;border-radius:999px !important;box-shadow:none !important}
.howtoSlide2Title::after{background:linear-gradient(90deg,#9b38ff 0%,#2d9cff 100%) !important}
.howtoSlide3Title::after{background:linear-gradient(90deg,#a735ff 0%,#c044ff 100%) !important}
.howtoSlide4Title::after{background:#e8ad1b !important}
.howtoTextLayerDesc,.howtoSlide2Desc,.howtoSlide3Desc,.howtoSlide4Desc{font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;font-size:clamp(12px,3.15vw,16px) !important;line-height:1.48 !important;font-weight:400 !important;letter-spacing:-.02em !important;text-align:left !important;white-space:pre-line !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
.howtoTextLayerDesc{left:7.3% !important;top:31.5% !important;width:72% !important}
.howtoSlide2Desc{left:7.3% !important;top:34.0% !important;width:64% !important}
.howtoSlide3Desc{left:7.3% !important;top:34.8% !important;width:43% !important}
.howtoSlide4Desc{left:7.4% !important;top:25.6% !important;width:71% !important}
.howtoTextLayerBtn,.howtoSlide2FeatureText,.howtoSlide3FeatureText,.howtoSlide4PanelTitle,.howtoSlide4CardTitle,.howtoSlide4CardDesc,.howtoSlide4PillText,.howtoSlide4BottomText{font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;font-weight:400 !important;letter-spacing:-.02em !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
.howtoTextLayerBtn,.howtoSlide2FeatureText{font-size:clamp(12px,3.35vw,17px) !important;line-height:1.05 !important}
.howtoSlide3FeatureText{font-size:clamp(10px,2.85vw,15px) !important;line-height:1.16 !important}
.howtoSlide4PanelTitle{font-size:clamp(10px,2.75vw,14px) !important}
.howtoSlide4CardTitle{font-size:clamp(16px,4.45vw,23px) !important;line-height:1.05 !important}
.howtoSlide4CardDesc{font-size:clamp(10px,2.85vw,14px) !important;line-height:1.30 !important}
.howtoSlide4PillText{font-size:clamp(6px,1.95vw,10px) !important;line-height:1 !important}
.howtoSlide4BottomText{font-size:clamp(6px,1.75vw,9px) !important;line-height:1.18 !important}
.howtoBigTitle,.howtoText,.howtoBadge{font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;font-weight:400 !important;letter-spacing:-.02em !important}
.howtoBigTitle{font-size:clamp(31px,8.9vw,45px) !important;line-height:1.10 !important;background-position:0 100% !important}
.howtoText{font-size:clamp(12px,3.15vw,16px) !important;line-height:1.48 !important}
.howtoBadge{font-size:clamp(12px,3.35vw,17px) !important;line-height:1.05 !important}
}
@media(min-width:761px){.howtoSlide4Title{top:10.4% !important}
.howtoSlide4Desc{top:27.6% !important}
.howtoSlide4BottomText{top:86.5% !important}
}
@media(min-width:761px){.howtoTrack .howtoSlide:nth-child(5)::before{content:"" !important;position:absolute !important;inset:0 !important;z-index:0 !important;background-image:url('./rooom_howto_assets_webp/allphone5_result.webp?v=howto_webp_v1') !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important}
.howtoTrack .howtoSlide:nth-child(5){padding:0 !important;background:#06112b !important;color:#fff !important}
.howtoTrack .howtoSlide:nth-child(5)>.howtoCopy,.howtoTrack .howtoSlide:nth-child(5)>.howtoVisual{display:none !important}
.howtoTrack .howtoSlide:nth-child(5) .howtoSlide5TextLayer{opacity:1 !important;pointer-events:none !important;position:absolute !important;inset:0 !important;z-index:6 !important;color:#fff !important;font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;text-rendering:geometricPrecision !important;-webkit-font-smoothing:antialiased !important}
.howtoSlide5CopyLayer{position:absolute !important;left:7.2% !important;top:13.4% !important;width:70% !important;max-width:10.2em !important;z-index:1 !important}
.howtoSlide5Title.howtoBigTitle{display:inline !important;margin:0 !important;padding:0 !important;font-size:clamp(28px,8.3vw,43px) !important;line-height:1.14 !important;font-weight:950 !important;letter-spacing:-.07em !important;color:#fff !important;text-align:left !important;white-space:pre-line !important;text-shadow:none !important;-webkit-text-stroke:0 !important;background:linear-gradient(transparent 58%,rgba(146,92,255,.86) 58% 84%,transparent 84%) !important;-webkit-box-decoration-break:clone !important;box-decoration-break:clone !important}
.howtoSlide5Desc.howtoText{display:block !important;margin:22px 0 0 !important;width:100% !important;color:rgba(255,255,255,.86) !important;font-size:clamp(12px,3.15vw,16px) !important;line-height:1.48 !important;font-weight:650 !important;letter-spacing:-.02em !important;text-align:left !important;white-space:pre-line !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
html[lang="en"] .howtoSlide5CopyLayer{width:76% !important;max-width:12.4em !important}
html[lang="en"] .howtoSlide5Title.howtoBigTitle{font-size:clamp(25px,7.2vw,38px) !important;line-height:1.16 !important;letter-spacing:-.045em !important}
html[lang="en"] .howtoSlide5Desc.howtoText{font-size:clamp(12px,3.1vw,16px) !important}
html[lang="ko"] .howtoSlide5CopyLayer,html[lang="zh-CN"] .howtoSlide5CopyLayer{width:74% !important;max-width:11.4em !important}
html[lang="ko"] .howtoSlide5Title.howtoBigTitle,html[lang="zh-CN"] .howtoSlide5Title.howtoBigTitle{font-size:clamp(26px,7.55vw,39px) !important;line-height:1.16 !important;letter-spacing:-.045em !important}
html[lang="ko"] .howtoSlide5Desc.howtoText,html[lang="zh-CN"] .howtoSlide5Desc.howtoText{font-size:clamp(12px,3.05vw,15px) !important}
}
html.rooom-ipad-portrait .howtoTrack .howtoSlide:nth-child(5)::before{content:"" !important;position:absolute !important;inset:0 !important;z-index:0 !important;background-image:url('./rooom_howto_assets_webp/allphone5_result.webp?v=howto_webp_v1') !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important}
@media(min-width:761px){.howtoTrack .howtoSlide:nth-child(5)>.howtoCopy{display:block !important;position:absolute !important;left:7.2% !important;top:13.4% !important;width:70% !important;max-width:10.2em !important;z-index:7 !important;color:#fff !important;pointer-events:none !important}
.howtoTrack .howtoSlide:nth-child(5)>.howtoCopy .howtoEyebrow{display:none !important}
.howtoTrack .howtoSlide:nth-child(5)>.howtoVisual{display:none !important}
.howtoTrack .howtoSlide:nth-child(5) .howtoBigTitle{display:inline !important;margin:0 !important;padding:0 !important;font-size:clamp(27px,8.0vw,42px) !important;line-height:1.20 !important;font-weight:950 !important;letter-spacing:-.07em !important;color:#fff !important;text-align:left !important;white-space:normal !important;text-shadow:none !important;-webkit-text-stroke:0 !important;background:linear-gradient(transparent 64%,rgba(146,92,255,.86) 64% 86%,transparent 86%) !important;-webkit-box-decoration-break:clone !important;box-decoration-break:clone !important}
.howtoTrack .howtoSlide:nth-child(5) .howtoText{display:block !important;visibility:visible !important;opacity:1 !important;margin:22px 0 0 !important;width:100% !important;color:rgba(255,255,255,.86) !important;font-size:clamp(12px,3.15vw,16px) !important;line-height:1.48 !important;font-weight:650 !important;letter-spacing:-.02em !important;text-align:left !important;white-space:normal !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
.howtoTrack .howtoSlide:nth-child(5) .howtoSlide5TextLayer,.howtoTrack .howtoSlide:nth-child(5) .howtoSlide5CopyLayer,.howtoTrack .howtoSlide:nth-child(5) .howtoSlide5Accent{display:none !important}
html[lang="en"] .howtoTrack .howtoSlide:nth-child(5)>.howtoCopy{width:76% !important;max-width:12.4em !important}
html[lang="en"] .howtoTrack .howtoSlide:nth-child(5) .howtoBigTitle{font-size:clamp(25px,7.2vw,38px) !important;line-height:1.18 !important;letter-spacing:-.045em !important}
html[lang="ko"] .howtoTrack .howtoSlide:nth-child(5)>.howtoCopy,html[lang="zh-CN"] .howtoTrack .howtoSlide:nth-child(5)>.howtoCopy{width:74% !important;max-width:11.4em !important}
html[lang="ko"] .howtoTrack .howtoSlide:nth-child(5) .howtoBigTitle,html[lang="zh-CN"] .howtoTrack .howtoSlide:nth-child(5) .howtoBigTitle{font-size:clamp(26px,7.55vw,39px) !important;line-height:1.18 !important;letter-spacing:-.045em !important}
}
@media(min-width:761px){.howtoTrack .howtoSlide:nth-child(5)::before{background-image:url('./rooom_howto_assets_webp/allphone5_result.webp?v=howto_webp_v1') !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important}
.howtoTrack .howtoSlide:nth-child(5)>.howtoCopy,.howtoTrack .howtoSlide:nth-child(5)>.howtoVisual,.howtoTrack .howtoSlide:nth-child(5) .howtoSlide5CopyLayer,.howtoTrack .howtoSlide:nth-child(5) .howtoSlide5Accent{display:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important}
.howtoTrack .howtoSlide:nth-child(5) .howtoSlide5TextLayer{display:block !important;visibility:visible !important;opacity:1 !important;pointer-events:none !important;position:absolute !important;inset:0 !important;z-index:9 !important;color:#fff !important;font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;letter-spacing:-.02em !important;-webkit-font-smoothing:antialiased !important;text-rendering:geometricPrecision !important}
.howtoSlide5Title{position:absolute !important;left:7.2% !important;top:13.4% !important;width:86% !important;max-width:none !important;margin:0 !important;padding:0 !important;font-size:clamp(31px,8.9vw,45px) !important;line-height:1.10 !important;font-weight:400 !important;letter-spacing:-.02em !important;color:#fff !important;text-align:left !important;white-space:pre-line !important;word-break:keep-all !important;overflow-wrap:normal !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
.howtoSlide5Title::after{content:"" !important;display:block !important;width:2.08em !important;height:.14em !important;min-height:5px !important;max-height:7px !important;margin-top:.18em !important;margin-left:0 !important;border-radius:999px !important;background:linear-gradient(90deg,#a735ff 0%,#c044ff 100%) !important;box-shadow:none !important}
.howtoSlide5Desc{position:absolute !important;left:7.3% !important;top:42.0% !important;width:78% !important;margin:0 !important;padding:0 !important;display:block !important;visibility:visible !important;opacity:1 !important;color:rgba(255,255,255,.86) !important;font-size:clamp(12px,3.15vw,16px) !important;line-height:1.48 !important;font-weight:400 !important;letter-spacing:-.02em !important;text-align:left !important;white-space:pre-line !important;text-shadow:none !important;-webkit-text-stroke:0 !important}
html[lang="en"] .howtoSlide5Title{width:88% !important;font-size:clamp(27px,7.65vw,39px) !important;line-height:1.12 !important;letter-spacing:-.02em !important}
html[lang="en"] .howtoSlide5Desc{top:42.0% !important;font-size:clamp(12px,3.05vw,16px) !important}
html[lang="ko"] .howtoSlide5Title,html[lang="zh-CN"] .howtoSlide5Title{width:88% !important;font-size:clamp(29px,8.1vw,41px) !important;line-height:1.12 !important;letter-spacing:-.02em !important}
html[lang="ko"] .howtoSlide5Desc,html[lang="zh-CN"] .howtoSlide5Desc{top:42.0% !important;font-size:clamp(12px,3.05vw,15px) !important}
}
@media (min-width:761px){.howtoTrack .howtoSlide:nth-child(1) .howtoTextLayer,.howtoTrack .howtoSlide:nth-child(2) .howtoSlide2TextLayer,.howtoTrack .howtoSlide:nth-child(3) .howtoSlide3TextLayer,.howtoTrack .howtoSlide:nth-child(4) .howtoSlide4TextLayer,.howtoTrack .howtoSlide:nth-child(5) .howtoSlide5TextLayer{display:block !important;visibility:visible !important;opacity:1 !important;pointer-events:none !important}
.howtoTrack .howtoSlide:nth-child(1)::before{background-image:url('./rooom_howto_assets_webp/allphone1_result.webp?v=howto_webp_v1') !important}
.howtoTrack .howtoSlide:nth-child(2)::before{background-image:url('./rooom_howto_assets_webp/allphone2_result.webp?v=howto_webp_v1') !important}
.howtoTrack .howtoSlide:nth-child(3)::before{background-image:url('./rooom_howto_assets_webp/allphone3_result.webp?v=howto_webp_v1') !important}
.howtoTrack .howtoSlide:nth-child(4)::before{background-image:url('./rooom_howto_assets_webp/allphone4_result.webp?v=howto_webp_v1') !important}
.howtoTrack .howtoSlide:nth-child(5)::before{background-image:url('./rooom_howto_assets_webp/allphone5_result.webp?v=howto_webp_v1') !important}
}
@media (min-width:761px){.howtoTrack .howtoSlide:nth-child(1) .howtoTextLayer,.howtoTrack .howtoSlide:nth-child(2) .howtoSlide2TextLayer,.howtoTrack .howtoSlide:nth-child(3) .howtoSlide3TextLayer,.howtoTrack .howtoSlide:nth-child(4) .howtoSlide4TextLayer,.howtoTrack .howtoSlide:nth-child(5) .howtoSlide5TextLayer{display:block !important;visibility:visible !important;opacity:1 !important}
.howtoSlide3Title{top:12.0% !important;width:41% !important;font-size:34px !important;line-height:1.12 !important;letter-spacing:-.055em !important}
.howtoSlide3Accent{top:31.0% !important;width:31% !important;height:4px !important}
.howtoSlide3Desc{top:33.8% !important;width:42% !important;font-size:12px !important;line-height:1.45 !important;letter-spacing:-.025em !important}
.howtoSlide3TimerLabel{top:31.5% !important;font-size:11px !important}
.howtoSlide3Feature{left:7.2% !important;width:47.5% !important;height:5.9% !important;min-height:38px !important;gap:10px !important;padding:0 13px !important;border-radius:15px !important}
.howtoSlide3Feature1{top:68.0% !important}
.howtoSlide3Feature2{top:75.1% !important}
.howtoSlide3Feature3{top:82.2% !important}
.howtoSlide3Icon,.howtoSlide3Icon svg{width:22px !important;height:22px !important}
.howtoSlide3FeatureText{font-size:12px !important;line-height:1.12 !important;letter-spacing:-.035em !important}
.howtoSlide4Title{top:7.4% !important;width:68% !important;font-size:34px !important;line-height:1.10 !important;letter-spacing:-.055em !important}
.howtoSlide4Accent{top:21.1% !important;width:24% !important;height:4px !important}
.howtoSlide4Desc{top:23.3% !important;width:68% !important;font-size:11px !important;line-height:1.36 !important;letter-spacing:-.025em !important}
.howtoSlide4PanelTitle{top:42.6% !important;font-size:11px !important}
.howtoSlide4CardTitle{top:68.2% !important;font-size:18px !important;line-height:1.02 !important;letter-spacing:-.045em !important}
.howtoSlide4CardDesc{top:72.0% !important;font-size:10px !important;line-height:1.22 !important;letter-spacing:-.03em !important}
.howtoSlide4PillText{top:80.3% !important;font-size:7px !important;letter-spacing:-.03em !important}
.howtoSlide4BottomText{top:85.0% !important;font-size:6.5px !important;line-height:1.10 !important;letter-spacing:-.02em !important}
html[lang="en"] .howtoSlide3Title,html[lang="ko"] .howtoSlide3Title,html[lang="zh-CN"] .howtoSlide3Title{font-size:30px !important;line-height:1.12 !important;width:50% !important}
html[lang="en"] .howtoSlide3Desc,html[lang="ko"] .howtoSlide3Desc,html[lang="zh-CN"] .howtoSlide3Desc{font-size:11px !important;line-height:1.38 !important;width:50% !important}
html[lang="en"] .howtoSlide3Feature,html[lang="ko"] .howtoSlide3Feature,html[lang="zh-CN"] .howtoSlide3Feature{width:52% !important}
html[lang="en"] .howtoSlide3FeatureText,html[lang="ko"] .howtoSlide3FeatureText,html[lang="zh-CN"] .howtoSlide3FeatureText{font-size:11px !important}
html[lang="en"] .howtoSlide4Title,html[lang="ko"] .howtoSlide4Title,html[lang="zh-CN"] .howtoSlide4Title{font-size:27px !important;line-height:1.08 !important;width:80% !important}
html[lang="en"] .howtoSlide4Desc,html[lang="ko"] .howtoSlide4Desc,html[lang="zh-CN"] .howtoSlide4Desc{font-size:8.5px !important;line-height:1.25 !important;width:80% !important}
html[lang="en"] .howtoSlide4PanelTitle,html[lang="ko"] .howtoSlide4PanelTitle,html[lang="zh-CN"] .howtoSlide4PanelTitle{font-size:9.5px !important}
html[lang="en"] .howtoSlide4CardTitle,html[lang="ko"] .howtoSlide4CardTitle,html[lang="zh-CN"] .howtoSlide4CardTitle{font-size:13px !important}
html[lang="en"] .howtoSlide4CardDesc,html[lang="ko"] .howtoSlide4CardDesc,html[lang="zh-CN"] .howtoSlide4CardDesc{font-size:7.2px !important;line-height:1.15 !important}
html[lang="en"] .howtoSlide4PillText,html[lang="ko"] .howtoSlide4PillText,html[lang="zh-CN"] .howtoSlide4PillText{font-size:5.6px !important}
html[lang="en"] .howtoSlide4BottomText,html[lang="ko"] .howtoSlide4BottomText,html[lang="zh-CN"] .howtoSlide4BottomText{font-size:5.2px !important;line-height:1.08 !important}
}
@media (min-width:761px){.howtoSlide4Title{top:9.4% !important}
.howtoSlide4Accent{top:23.3% !important}
.howtoSlide4Desc{top:25.7% !important}
.howtoSlide4PanelTitle{top:43.7% !important}
.howtoSlide4BottomText{top:87.2% !important}
html[lang="en"] .howtoSlide4Title,html[lang="ko"] .howtoSlide4Title,html[lang="zh-CN"] .howtoSlide4Title{top:9.2% !important}
html[lang="en"] .howtoSlide4Accent,html[lang="ko"] .howtoSlide4Accent,html[lang="zh-CN"] .howtoSlide4Accent{top:22.8% !important}
html[lang="en"] .howtoSlide4Desc,html[lang="ko"] .howtoSlide4Desc,html[lang="zh-CN"] .howtoSlide4Desc{top:25.1% !important}
html[lang="en"] .howtoSlide4PanelTitle,html[lang="ko"] .howtoSlide4PanelTitle,html[lang="zh-CN"] .howtoSlide4PanelTitle{top:43.7% !important}
html[lang="en"] .howtoSlide4BottomText,html[lang="ko"] .howtoSlide4BottomText,html[lang="zh-CN"] .howtoSlide4BottomText{top:87.4% !important}
}
.noticeModalOverlay{z-index:30000 !important}
.noticeModalBox{position:relative !important;width:min(430px,calc(100vw - 24px)) !important;height:auto !important;max-height:calc(100dvh - 54px) !important;aspect-ratio:9 / 16 !important;padding:0 !important;overflow:hidden !important;border-radius:28px !important;background:#f5ead6 !important;color:#2b241e !important;box-shadow:0 30px 90px rgba(0,0,0,.30) !important;border:1px solid rgba(255,255,255,.72) !important;text-align:left !important}
.noticeLetterBg{position:absolute !important;inset:0 !important;z-index:1 !important;background-image:url('./rooom_howto_assets_webp/massagenoword_result.webp?v=notice_webp_v1') !important;background-size:100% 100% !important;background-position:center center !important;background-repeat:no-repeat !important}
.noticeLetterTextLayer{position:absolute !important;inset:0 !important;z-index:2 !important;pointer-events:none !important;font-family:"Hiragino Sans","Yu Gothic","Meiryo",system-ui,-apple-system,sans-serif !important}
.noticeTitle,.noticeHeadline,.noticeBody,.noticeBottom,.noticeFooter{position:absolute !important;margin:0 !important;padding:0 !important;white-space:pre-line !important;color:#302720 !important;letter-spacing:.02em !important;text-shadow:0 1px 0 rgba(255,255,255,.28) !important}
.noticeTitle{top:6.0% !important;left:13.5% !important;width:73% !important;text-align:center !important;font-size:clamp(12px,3.8vw,17px) !important;line-height:1.1 !important;font-weight:700 !important;letter-spacing:.07em !important}
.noticeHeadline{top:14.7% !important;left:18.6% !important;width:69% !important;font-size:clamp(23px,6.25vw,28px) !important;line-height:1.30 !important;font-weight:800 !important;letter-spacing:.01em !important}
.noticeBody{width:51.5% !important;font-size:clamp(11.2px,2.82vw,13.1px) !important;line-height:1.68 !important;font-weight:600 !important}
.noticeBody1{top:28.2% !important;left:20.0% !important;width:55.5% !important}
.noticeBody2{top:41.4% !important;left:37.0% !important}
.noticeBody3{top:55.6% !important;left:37.0% !important}
.noticeBody4{top:69.6% !important;left:37.0% !important}
.noticeBottom{top:85.2% !important;left:10.6% !important;width:73% !important;font-size:clamp(11.2px,2.88vw,13.2px) !important;line-height:1.62 !important;font-weight:600 !important}
.noticeFooter{left:0 !important;right:0 !important;bottom:3.0% !important;text-align:center !important;color:#78984f !important;font-size:clamp(15px,4.15vw,20px) !important;line-height:1 !important;font-weight:800 !important;letter-spacing:.06em !important}
.noticeLangEn{color:#5f93b8 !important;font-weight:800 !important}
.noticeLangZh{color:#d97956 !important;font-weight:800 !important}
.noticeLangKo{color:#5e9a69 !important;font-weight:800 !important}
.noticeLangJa{color:#8b775d !important;font-weight:800 !important}
.noticeModalCloseIcon{position:absolute !important;right:10px !important;top:10px !important;z-index:5 !important;width:44px !important;height:44px !important;border:0 !important;border-radius:999px !important;background:rgba(255,255,255,.92) !important;color:#111 !important;box-shadow:0 10px 28px rgba(0,0,0,.13) !important;font-size:28px !important;font-weight:800 !important;line-height:1 !important;cursor:pointer !important}
.noticeModalCloseIcon:active{transform:scale(.96) !important}
html[lang="en"] .noticeTitle{font-size:clamp(11px,3.45vw,16px) !important;letter-spacing:.04em !important}
html[lang="en"] .noticeHeadline{top:14.5% !important;left:18.2% !important;width:68% !important;font-size:clamp(22px,6.15vw,29px) !important;line-height:1.30 !important}
html[lang="en"] .noticeBody,html[lang="en"] .noticeBottom{font-size:clamp(9.9px,2.45vw,11.5px) !important;line-height:1.48 !important}
html[lang="en"] .noticeBody1{top:29.5% !important}
html[lang="en"] .noticeBody2{top:43.5% !important}
html[lang="en"] .noticeBody3{top:57.8% !important}
html[lang="en"] .noticeBody4{top:71.8% !important}
html[lang="en"] .noticeBottom{top:86.9% !important}
html[lang="zh-CN"] .noticeTitle,html[lang="ko"] .noticeTitle{font-size:clamp(11.5px,3.6vw,16.5px) !important}
html[lang="zh-CN"] .noticeHeadline,html[lang="ko"] .noticeHeadline{top:14.2% !important;font-size:clamp(23px,6.65vw,30px) !important;line-height:1.32 !important}
html[lang="zh-CN"] .noticeBody,html[lang="ko"] .noticeBody,html[lang="zh-CN"] .noticeBottom,html[lang="ko"] .noticeBottom{font-size:clamp(10.4px,2.62vw,12.2px) !important;line-height:1.55 !important}
html[lang="zh-CN"] .noticeBody1,html[lang="ko"] .noticeBody1{top:29.5% !important}
html[lang="zh-CN"] .noticeBody2,html[lang="ko"] .noticeBody2{top:43.2% !important}
html[lang="zh-CN"] .noticeBody3,html[lang="ko"] .noticeBody3{top:57.2% !important}
html[lang="zh-CN"] .noticeBody4,html[lang="ko"] .noticeBody4{top:71.2% !important}
html[lang="zh-CN"] .noticeBottom,html[lang="ko"] .noticeBottom{top:86.7% !important}
@media (max-width:420px){.noticeModalBox{width:min(360px,calc(100vw - 20px),calc((100dvh - 48px) * 9 / 16)) !important;max-height:calc(100dvh - 48px) !important;border-radius:24px !important}
.noticeTitle{top:6.1% !important;font-size:clamp(11px,3.45vw,15px) !important}
.noticeHeadline{top:14.9% !important;left:18.8% !important;width:69% !important;font-size:clamp(20px,5.75vw,23px) !important;line-height:1.30 !important}
.noticeBody{font-size:clamp(9.7px,2.78vw,11.2px) !important;line-height:1.58 !important}
.noticeBody1{top:28.0% !important;left:20.2% !important;width:55% !important}
.noticeBody2{top:41.5% !important;left:37.2% !important;width:50% !important}
.noticeBody3{top:55.7% !important;left:37.2% !important;width:50% !important}
.noticeBody4{top:69.8% !important;left:37.2% !important;width:50% !important}
.noticeBottom{top:85.4% !important;left:10.5% !important;width:74% !important;font-size:clamp(9.8px,2.8vw,11.3px) !important;line-height:1.48 !important}
.noticeFooter{bottom:2.8% !important;font-size:clamp(14px,4vw,17px) !important}
.noticeModalCloseIcon{right:8px !important;top:8px !important;width:38px !important;height:38px !important;font-size:25px !important}
}
.noticeLetterIntro{position:fixed !important;inset:0 !important;z-index:29999 !important;display:none !important;align-items:center !important;justify-content:center !important;pointer-events:none !important;background:rgba(0,0,0,.22) !important}
.noticeLetterIntro.show{display:flex !important}
.noticeFlyingEnvelope{position:relative !important;width:116px !important;height:76px !important;transform-origin:center center !important;animation:noticeEnvelopeFlyIn .66s cubic-bezier(.18,.82,.2,1) both,noticeEnvelopeSettle .28s ease .66s both !important;filter:drop-shadow(0 20px 28px rgba(0,0,0,.20)) !important}
.noticeFlyingEnvelopeBody{position:absolute !important;inset:0 !important;border-radius:10px !important;background:linear-gradient(180deg,#fff8ea 0%,#f3dfbc 100%) !important;border:1px solid rgba(132,94,48,.22) !important;overflow:hidden !important}
.noticeFlyingEnvelopeBody::before,.noticeFlyingEnvelopeBody::after{content:"" !important;position:absolute !important;inset:auto 0 0 0 !important;height:76px !important;background:linear-gradient(135deg,transparent 49%,rgba(210,165,95,.42) 50%,transparent 51%) !important;opacity:.8 !important}
.noticeFlyingEnvelopeBody::after{transform:scaleX(-1) !important}
.noticeFlyingEnvelopeFlap{position:absolute !important;left:0 !important;right:0 !important;top:0 !important;height:54px !important;transform-origin:top center !important;background:linear-gradient(180deg,#fff4dc 0%,#eacb97 100%) !important;clip-path:polygon(0 0,100% 0,50% 100%) !important;border-radius:10px 10px 4px 4px !important;animation:noticeEnvelopeOpen .30s ease .74s both !important}
.noticeFlyingEnvelopeSeal{position:absolute !important;left:50% !important;top:38px !important;width:21px !important;height:21px !important;border-radius:50% !important;transform:translateX(-50%) !important;background:linear-gradient(180deg,#d9a66b,#a46d3c) !important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.26) !important}
.noticeFlyingEnvelopeSeal::after{content:"R" !important;position:absolute !important;inset:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;color:rgba(255,255,255,.86) !important;font-size:11px !important;font-weight:900 !important;font-family:Georgia,serif !important}
.noticeFlyingEnvelopePaper{position:absolute !important;left:18px !important;right:18px !important;top:20px !important;height:50px !important;border-radius:7px !important;background:#fffdf6 !important;border:1px solid rgba(132,94,48,.12) !important;transform:translateY(16px) scale(.92) !important;opacity:0 !important;animation:noticePaperPeek .32s ease .78s both !important}
.noticeModalOverlay.show .noticeModalBox{animation:noticeModalReveal .28s ease both !important}
@keyframes noticeEnvelopeFlyIn{0%{opacity:0;transform:translate3d(-38vw,-32vh,0) scale(.34) rotate(-18deg)}
62%{opacity:1;transform:translate3d(0,0,0) scale(1.05) rotate(3deg)}
100%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0deg)}
}
@keyframes noticeEnvelopeSettle{0%{transform:translateY(0) scale(1)}
50%{transform:translateY(-8px) scale(1.03)}
100%{transform:translateY(0) scale(1)}
}
@keyframes noticeEnvelopeOpen{0%{transform:rotateX(0deg)}
100%{transform:rotateX(178deg)}
}
@keyframes noticePaperPeek{0%{opacity:0;transform:translateY(16px) scale(.92)}
100%{opacity:1;transform:translateY(-20px) scale(1)}
}
@keyframes noticeModalReveal{0%{opacity:0;transform:translateY(10px) scale(.965)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){.noticeFlyingEnvelope,.noticeFlyingEnvelopeFlap,.noticeFlyingEnvelopePaper,.noticeModalOverlay.show .noticeModalBox{animation:none !important}
}
html[lang="ja"] .noticeHeadline{top:14.7% !important;left:18.6% !important;width:69% !important;font-size:clamp(23px,6.25vw,28px) !important;line-height:1.30 !important}
html[lang="ja"] .noticeBody1{top:28.2% !important}
html[lang="ja"] .noticeBody2{top:41.4% !important}
html[lang="ja"] .noticeBody3{top:55.6% !important}
html[lang="ja"] .noticeBody4{top:69.6% !important}
html[lang="ja"] .noticeBottom{top:85.2% !important}
@media (max-width:420px){html[lang="ja"] .noticeHeadline{top:14.9% !important;left:18.8% !important;width:69% !important;font-size:clamp(20px,5.75vw,23px) !important;line-height:1.30 !important}
html[lang="ja"] .noticeBody1{top:28.0% !important}
html[lang="ja"] .noticeBody2{top:41.5% !important}
html[lang="ja"] .noticeBody3{top:55.7% !important}
html[lang="ja"] .noticeBody4{top:69.8% !important}
html[lang="ja"] .noticeBottom{top:85.4% !important}
}
html[lang="ja"] .noticeHeadline{top:15.0% !important;left:17.9% !important;width:72.5% !important;font-size:clamp(20px,5.35vw,24px) !important;line-height:1.23 !important;font-weight:800 !important;letter-spacing:.005em !important}
html[lang="ja"] .noticeBody1{top:29.7% !important;left:20.0% !important;width:56% !important}
html[lang="ja"] .noticeBody2{top:39.9% !important;left:37.0% !important;width:51.5% !important}
html[lang="ja"] .noticeBody3{top:53.9% !important;left:37.0% !important;width:51.5% !important}
html[lang="ja"] .noticeBody4{top:67.9% !important;left:37.0% !important;width:51.5% !important}
html[lang="ja"] .noticeBottom{top:83.9% !important}
@media (max-width:420px){html[lang="ja"] .noticeHeadline{top:15.2% !important;left:17.8% !important;width:73% !important;font-size:clamp(18px,5.05vw,21px) !important;line-height:1.23 !important;letter-spacing:.003em !important}
html[lang="ja"] .noticeBody1{top:29.4% !important;left:20.2% !important;width:56% !important}
html[lang="ja"] .noticeBody2{top:39.7% !important;left:37.2% !important;width:50.5% !important}
html[lang="ja"] .noticeBody3{top:53.9% !important;left:37.2% !important;width:50.5% !important}
html[lang="ja"] .noticeBody4{top:68.0% !important;left:37.2% !important;width:50.5% !important}
html[lang="ja"] .noticeBottom{top:84.2% !important}
}
html[lang="ja"] .noticeBody1{top:28.8% !important}
html[lang="en"] .noticeHeadline{top:15.2% !important;left:17.9% !important;width:73% !important;font-size:clamp(20px,5.25vw,24px) !important;line-height:1.24 !important;font-weight:800 !important;letter-spacing:.003em !important}
html[lang="en"] .noticeBody,html[lang="en"] .noticeBottom{font-size:clamp(9.9px,2.45vw,11.4px) !important;line-height:1.47 !important}
html[lang="en"] .noticeBody1{top:28.7% !important;left:20.0% !important;width:56% !important}
html[lang="en"] .noticeBody2{top:39.8% !important;left:37.0% !important;width:51.5% !important}
html[lang="en"] .noticeBody3{top:54.0% !important;left:37.0% !important;width:51.5% !important}
html[lang="en"] .noticeBody4{top:68.0% !important;left:37.0% !important;width:51.5% !important}
html[lang="en"] .noticeBottom{top:84.1% !important}
html[lang="zh-CN"] .noticeHeadline{top:15.1% !important;left:17.8% !important;width:73.5% !important;font-size:clamp(20px,5.25vw,24px) !important;line-height:1.25 !important;font-weight:800 !important;letter-spacing:.003em !important}
html[lang="ko"] .noticeHeadline{top:15.1% !important;left:17.8% !important;width:74% !important;font-size:clamp(19px,5.05vw,23px) !important;line-height:1.25 !important;font-weight:800 !important;letter-spacing:.001em !important}
html[lang="zh-CN"] .noticeBody,html[lang="ko"] .noticeBody,html[lang="zh-CN"] .noticeBottom,html[lang="ko"] .noticeBottom{font-size:clamp(10.2px,2.55vw,12px) !important;line-height:1.50 !important}
html[lang="zh-CN"] .noticeBody1,html[lang="ko"] .noticeBody1{top:28.7% !important;left:20.0% !important;width:56% !important}
html[lang="zh-CN"] .noticeBody2,html[lang="ko"] .noticeBody2{top:39.8% !important;left:37.0% !important;width:51.5% !important}
html[lang="zh-CN"] .noticeBody3,html[lang="ko"] .noticeBody3{top:54.0% !important;left:37.0% !important;width:51.5% !important}
html[lang="zh-CN"] .noticeBody4,html[lang="ko"] .noticeBody4{top:68.0% !important;left:37.0% !important;width:51.5% !important}
html[lang="zh-CN"] .noticeBottom,html[lang="ko"] .noticeBottom{top:84.1% !important}
@media (max-width:420px){html[lang="ja"] .noticeBody1{top:28.7% !important}
html[lang="en"] .noticeHeadline{top:15.3% !important;left:17.8% !important;width:73.5% !important;font-size:clamp(17px,4.75vw,20px) !important;line-height:1.24 !important}
html[lang="en"] .noticeBody,html[lang="en"] .noticeBottom{font-size:clamp(8.9px,2.55vw,10.4px) !important;line-height:1.45 !important}
html[lang="en"] .noticeBody1{top:28.6% !important;left:20.2% !important;width:56% !important}
html[lang="en"] .noticeBody2{top:39.6% !important;left:37.2% !important;width:50.5% !important}
html[lang="en"] .noticeBody3{top:53.8% !important;left:37.2% !important;width:50.5% !important}
html[lang="en"] .noticeBody4{top:68.0% !important;left:37.2% !important;width:50.5% !important}
html[lang="en"] .noticeBottom{top:84.2% !important}
html[lang="zh-CN"] .noticeHeadline{top:15.3% !important;left:17.8% !important;width:73.5% !important;font-size:clamp(17px,4.8vw,20px) !important;line-height:1.25 !important}
html[lang="ko"] .noticeHeadline{top:15.3% !important;left:17.6% !important;width:74.5% !important;font-size:clamp(16px,4.55vw,19px) !important;line-height:1.25 !important}
html[lang="zh-CN"] .noticeBody,html[lang="ko"] .noticeBody,html[lang="zh-CN"] .noticeBottom,html[lang="ko"] .noticeBottom{font-size:clamp(9.1px,2.6vw,10.6px) !important;line-height:1.47 !important}
html[lang="zh-CN"] .noticeBody1,html[lang="ko"] .noticeBody1{top:28.6% !important;left:20.2% !important;width:56% !important}
html[lang="zh-CN"] .noticeBody2,html[lang="ko"] .noticeBody2{top:39.6% !important;left:37.2% !important;width:50.5% !important}
html[lang="zh-CN"] .noticeBody3,html[lang="ko"] .noticeBody3{top:53.8% !important;left:37.2% !important;width:50.5% !important}
html[lang="zh-CN"] .noticeBody4,html[lang="ko"] .noticeBody4{top:68.0% !important;left:37.2% !important;width:50.5% !important}
html[lang="zh-CN"] .noticeBottom,html[lang="ko"] .noticeBottom{top:84.2% !important}
}
@media (max-height:720px){.noticeModalBox{width:min(390px,calc((100dvh - 54px) * 9 / 16),calc(100vw - 24px)) !important}
.noticeModalCloseIcon{width:40px !important;height:40px !important;font-size:26px !important}
}

/* RoooM notice modal viewport-stable text fit patch */
.noticeModalBox{
  width:min(430px,calc((100dvh - 34px) * .5625),calc(100vw - 24px)) !important;
  max-height:calc(100dvh - 34px) !important;
  aspect-ratio:9 / 16 !important;
}

@media (min-width:641px){
  .noticeHeadline{
    top:14.4% !important;
    font-size:clamp(20px,3.15vw,26px) !important;
    line-height:1.22 !important;
  }

  .noticeBody{
    width:56.5% !important;
    font-size:clamp(10.2px,1.42vw,12.0px) !important;
    line-height:1.48 !important;
  }

  .noticeBody1{
    top:28.4% !important;
    left:20.0% !important;
    width:58.0% !important;
  }

  .noticeBody2,
  .noticeBody3,
  .noticeBody4{
    left:35.4% !important;
    width:56.5% !important;
  }

  .noticeBody2{ top:42.0% !important; }
  .noticeBody3{ top:56.2% !important; }
  .noticeBody4{ top:70.4% !important; }

  .noticeBottom{
    top:85.3% !important;
    width:74.5% !important;
    font-size:clamp(10.2px,1.45vw,12.0px) !important;
    line-height:1.44 !important;
  }

  html[lang="en"] .noticeHeadline{
    top:14.3% !important;
    font-size:clamp(19px,3.05vw,26px) !important;
    line-height:1.20 !important;
  }

  html[lang="en"] .noticeBody,
  html[lang="en"] .noticeBottom{
    font-size:clamp(9.0px,1.22vw,10.8px) !important;
    line-height:1.38 !important;
  }

  html[lang="en"] .noticeBody1{ top:29.3% !important; }
  html[lang="en"] .noticeBody2{ top:43.1% !important; }
  html[lang="en"] .noticeBody3{ top:57.1% !important; }
  html[lang="en"] .noticeBody4{ top:71.0% !important; }
  html[lang="en"] .noticeBottom{ top:86.4% !important; }

  html[lang="zh-CN"] .noticeHeadline,
  html[lang="ko"] .noticeHeadline{
    top:14.2% !important;
    font-size:clamp(20px,3.25vw,27px) !important;
    line-height:1.22 !important;
  }

  html[lang="zh-CN"] .noticeBody,
  html[lang="ko"] .noticeBody,
  html[lang="zh-CN"] .noticeBottom,
  html[lang="ko"] .noticeBottom{
    font-size:clamp(9.6px,1.30vw,11.4px) !important;
    line-height:1.42 !important;
  }

  html[lang="zh-CN"] .noticeBody1,
  html[lang="ko"] .noticeBody1{ top:29.0% !important; }

  html[lang="zh-CN"] .noticeBody2,
  html[lang="ko"] .noticeBody2{ top:42.8% !important; }

  html[lang="zh-CN"] .noticeBody3,
  html[lang="ko"] .noticeBody3{ top:56.8% !important; }

  html[lang="zh-CN"] .noticeBody4,
  html[lang="ko"] .noticeBody4{ top:70.8% !important; }

  html[lang="zh-CN"] .noticeBottom,
  html[lang="ko"] .noticeBottom{ top:86.2% !important; }
}

@media (min-width:641px) and (max-height:820px){
  .noticeModalBox{
    width:min(410px,calc((100dvh - 30px) * .5625),calc(100vw - 24px)) !important;
    max-height:calc(100dvh - 30px) !important;
  }

  .noticeHeadline{
    font-size:clamp(19px,2.9vw,24px) !important;
    line-height:1.18 !important;
  }

  .noticeBody{
    font-size:clamp(9.4px,1.16vw,11.0px) !important;
    line-height:1.38 !important;
  }

  .noticeBottom{
    font-size:clamp(9.4px,1.18vw,11.0px) !important;
    line-height:1.36 !important;
  }

  .noticeFooter{
    bottom:2.5% !important;
    font-size:clamp(14px,2.45vw,18px) !important;
  }
}

/* RoooM notice modal headline 100% viewport baseline fix */
@media (min-width:641px){
  .noticeHeadline{
    top:14.7% !important;
    left:18.6% !important;
    width:69% !important;
    font-size:clamp(20px,2.7vw,24px) !important;
    line-height:1.22 !important;
    letter-spacing:.005em !important;
  }

  html[lang="en"] .noticeHeadline{
    top:14.6% !important;
    left:18.2% !important;
    width:68% !important;
    font-size:clamp(19px,2.55vw,24px) !important;
    line-height:1.20 !important;
  }

  html[lang="zh-CN"] .noticeHeadline,
  html[lang="ko"] .noticeHeadline{
    top:14.5% !important;
    font-size:clamp(20px,2.7vw,24px) !important;
    line-height:1.22 !important;
  }
}

@media (min-width:641px) and (max-height:820px){
  .noticeHeadline{
    top:14.7% !important;
    font-size:clamp(19px,2.45vw,23px) !important;
    line-height:1.18 !important;
  }

  html[lang="en"] .noticeHeadline{
    font-size:clamp(18px,2.35vw,23px) !important;
    line-height:1.17 !important;
  }

  html[lang="zh-CN"] .noticeHeadline,
  html[lang="ko"] .noticeHeadline{
    font-size:clamp(19px,2.45vw,23px) !important;
    line-height:1.18 !important;
  }
}

/* RoooM notice headline 2-line lock fix */
@media (min-width:641px){
  .noticeHeadline{
    top:14.7% !important;
    left:14.8% !important;
    width:77.5% !important;
    font-size:clamp(19px,2.28vw,22px) !important;
    line-height:1.25 !important;
    letter-spacing:-.015em !important;
    white-space:pre-line !important;
  }

  html[lang="ja"] .noticeHeadline{
    left:14.8% !important;
    width:77.5% !important;
    font-size:clamp(19px,2.28vw,22px) !important;
    line-height:1.25 !important;
    letter-spacing:-.018em !important;
  }

  html[lang="en"] .noticeHeadline{
    left:14.8% !important;
    width:77.5% !important;
    font-size:clamp(18px,2.15vw,21px) !important;
    line-height:1.22 !important;
    letter-spacing:-.018em !important;
  }

  html[lang="zh-CN"] .noticeHeadline,
  html[lang="ko"] .noticeHeadline{
    left:14.8% !important;
    width:77.5% !important;
    font-size:clamp(18px,2.18vw,21.5px) !important;
    line-height:1.24 !important;
    letter-spacing:-.02em !important;
  }
}

@media (min-width:641px) and (max-height:820px){
  .noticeHeadline,
  html[lang="ja"] .noticeHeadline{
    left:14.5% !important;
    width:78.0% !important;
    font-size:clamp(18px,2.05vw,20.5px) !important;
    line-height:1.22 !important;
    letter-spacing:-.025em !important;
  }

  html[lang="en"] .noticeHeadline{
    font-size:clamp(17px,1.95vw,20px) !important;
    line-height:1.20 !important;
  }

  html[lang="zh-CN"] .noticeHeadline,
  html[lang="ko"] .noticeHeadline{
    font-size:clamp(17.5px,2.0vw,20.5px) !important;
    line-height:1.21 !important;
  }
}

/* =========================================================
   RoooM archive view count card layout fix
   - Restore the original bottom HUD position.
   - Use the same 2-line meta block for live and archived cards.
   - Keep card titles clipped with ellipsis so they do not overlap stats.
   ========================================================= */
.card.cardImageRoom .cardImageBottom,
.card.cardPlainRoom .cardImageBottom{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:3 !important;
  height:54px !important;
  min-height:54px !important;
  padding:0 12px 8px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto 40px !important;
  grid-template-rows:17px 17px !important;
  grid-template-areas:
    "title people enter"
    "title time enter" !important;
  align-items:end !important;
  column-gap:8px !important;
  row-gap:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

.card.cardImageRoom .cardImageBottom{
  background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.54) 62%,rgba(0,0,0,0)) !important;
}

.card.cardPlainRoom .cardImageBottom{
  background:linear-gradient(to top,rgba(0,0,0,.22),rgba(0,0,0,.10) 58%,rgba(0,0,0,0)) !important;
}

.card.cardImageRoom .cardImageTitleRow{
  grid-area:title !important;
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  align-self:end !important;
  justify-self:start !important;
  padding:0 !important;
  margin:0 !important;
}

.card.cardImageRoom .cardImageTitle{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:34px !important;
  line-height:34px !important;
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
  font-size:16px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-shadow:0 1px 6px rgba(0,0,0,.50) !important;
}

.card.cardImageRoom .cardImagePeople,
.card.cardPlainRoom .cardImagePeople{
  grid-area:people !important;
}

.card.cardImageRoom .cardImageTime,
.card.cardPlainRoom .cardImageTime{
  grid-area:time !important;
}

.card.cardImageRoom .cardImagePeople,
.card.cardImageRoom .cardImageTime,
.card.cardPlainRoom .cardImagePeople,
.card.cardPlainRoom .cardImageTime{
  align-self:end !important;
  justify-self:end !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  width:max-content !important;
  min-width:max-content !important;
  max-width:max-content !important;
  height:17px !important;
  min-height:17px !important;
  line-height:17px !important;
  margin:0 !important;
  padding:0 !important;
  color:rgba(255,255,255,.96) !important;
  font-size:12px !important;
  white-space:nowrap !important;
  text-align:right !important;
  font-variant-numeric:tabular-nums !important;
  text-shadow:0 1px 5px rgba(0,0,0,.48) !important;
  pointer-events:none !important;
  transform:none !important;
}

.card.cardImageRoom .cardImagePeople .archiveStatsTop,
.card.cardPlainRoom .cardImagePeople .archiveStatsTop{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:5px !important;
  width:max-content !important;
  white-space:nowrap !important;
  line-height:17px !important;
}

.card.cardImageRoom .cardImageBottom .listEnterBtn.entryIconBtn,
.card.cardImageRoom .cardImageEnterBtn,
.card.cardPlainRoom .cardImageBottom .listEnterBtn.entryIconBtn,
.card.cardPlainRoom .cardImageEnterBtn{
  grid-area:enter !important;
  align-self:end !important;
  justify-self:end !important;
  width:40px !important;
  min-width:40px !important;
  max-width:40px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  color:#111 !important;
  font-size:0 !important;
  line-height:1 !important;
  pointer-events:auto !important;
  transform:none !important;
}

.card.cardImageRoom .cardImageBottom .entryDoorIcon,
.card.cardPlainRoom .cardImageBottom .entryDoorIcon,
.card.cardImageRoom .cardImageBottom .entryArchiveIcon,
.card.cardPlainRoom .cardImageBottom .entryArchiveIcon{
  margin:0 !important;
  transform:none !important;
}

.card.cardPlainRoom .cardPlainBottom{
  grid-template-areas:
    "spacer people enter"
    "spacer time enter" !important;
}

@media (max-width:640px){
  .card.cardImageRoom .cardImageBottom,
  .card.cardPlainRoom .cardImageBottom{
    height:52px !important;
    min-height:52px !important;
    grid-template-columns:minmax(0,1fr) auto 38px !important;
    grid-template-rows:16px 16px !important;
    column-gap:6px !important;
    padding:0 10px 7px !important;
  }

  .card.cardImageRoom .cardImageTitle{
    height:32px !important;
    line-height:32px !important;
    font-size:15px !important;
  }

  .card.cardImageRoom .cardImagePeople,
  .card.cardImageRoom .cardImageTime,
  .card.cardPlainRoom .cardImagePeople,
  .card.cardPlainRoom .cardImageTime{
    height:16px !important;
    min-height:16px !important;
    line-height:16px !important;
    font-size:11px !important;
  }

  .card.cardImageRoom .cardImagePeople .archiveStatsTop,
  .card.cardPlainRoom .cardImagePeople .archiveStatsTop{
    gap:4px !important;
    line-height:16px !important;
  }

  .card.cardImageRoom .cardImageBottom .listEnterBtn.entryIconBtn,
  .card.cardImageRoom .cardImageEnterBtn,
  .card.cardPlainRoom .cardImageBottom .listEnterBtn.entryIconBtn,
  .card.cardPlainRoom .cardImageEnterBtn{
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
  }
}

/* =========================================================
   RoooM bottom HUD vertical correction
   - Move the entire bottom information row down as one block.
   - Do not move only the 2-line stats.
   - Applies to both live and archive cards so the card HUD aligns.
   ========================================================= */
.card.cardImageRoom .cardImageBottom,
.card.cardPlainRoom .cardImageBottom{
  height:48px !important;
  min-height:48px !important;
  padding:0 12px 1px !important;
  align-items:end !important;
}

.card.cardImageRoom .cardImageTitleRow,
.card.cardPlainRoom .cardPlainTitleRow,
.card.cardImageRoom .cardImagePeople,
.card.cardImageRoom .cardImageTime,
.card.cardPlainRoom .cardImagePeople,
.card.cardPlainRoom .cardImageTime,
.card.cardImageRoom .cardImageBottom .listEnterBtn.entryIconBtn,
.card.cardImageRoom .cardImageEnterBtn,
.card.cardPlainRoom .cardImageBottom .listEnterBtn.entryIconBtn,
.card.cardPlainRoom .cardImageEnterBtn{
  align-self:end !important;
  transform:translateY(10px) !important;
}

.card.cardImageRoom .cardImageBottom .entryDoorIcon,
.card.cardPlainRoom .cardImageBottom .entryDoorIcon,
.card.cardImageRoom .cardImageBottom .entryArchiveIcon,
.card.cardPlainRoom .cardImageBottom .entryArchiveIcon{
  transform:none !important;
}

@media (max-width:640px){
  .card.cardImageRoom .cardImageBottom,
  .card.cardPlainRoom .cardImageBottom{
    height:47px !important;
    min-height:47px !important;
    padding:0 10px 1px !important;
  }

  .card.cardImageRoom .cardImageTitleRow,
  .card.cardPlainRoom .cardPlainTitleRow,
  .card.cardImageRoom .cardImagePeople,
  .card.cardImageRoom .cardImageTime,
  .card.cardPlainRoom .cardImagePeople,
  .card.cardPlainRoom .cardImageTime,
  .card.cardImageRoom .cardImageBottom .listEnterBtn.entryIconBtn,
  .card.cardImageRoom .cardImageEnterBtn,
  .card.cardPlainRoom .cardImageBottom .listEnterBtn.entryIconBtn,
  .card.cardPlainRoom .cardImageEnterBtn{
    transform:translateY(10px) !important;
  }
}


/* =========================================================
   RoooM card title / official icon final correction
   - Keep plain-card titles left aligned like descriptions.
   - Add stable styling for the official-room "公" badge.
   - Do not change the accepted bottom HUD position.
   ========================================================= */
.card.cardPlainRoom .cardPlainMain{
  align-items:flex-start !important;
  text-align:left !important;
  width:100% !important;
}

.card.cardPlainRoom .cardPlainTitleRow{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  text-align:left !important;
  margin:0 !important;
  padding:0 !important;
}

.card.cardPlainRoom .cardPlainTitleRow .roomName,
.card.cardPlainRoom .roomName{
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:left !important;
  align-self:flex-start !important;
  justify-self:start !important;
}

.cardOfficialBadge{
  font-weight:900 !important;
  font-size:15px !important;
  letter-spacing:0 !important;
  line-height:1 !important;
  color:#111 !important;
}

.cardOfficialBadge::before,
.cardOfficialBadge::after{
  display:none !important;
}

.cardOfficialBadge .officialShieldIcon{
  display:block !important;
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  overflow:visible !important;
}

.cardOfficialBadge .officialShieldIconBack{
  fill:#2f80ed !important;
}

.cardOfficialBadge .officialShieldIconFront{
  fill:#1769c2 !important;
}

.cardOfficialBadge .officialShieldIconShine{
  fill:#eef7ff !important;
}

@media (max-width:640px){
  .cardOfficialBadge{
    font-size:14px !important;
  }
}


/* ===== official badge unify: use the same visual size in card/list ===== */
.listCategorySlot .listOfficialBadge.cardOfficialBadge{
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  border-radius:10px !important;
  font-size:15px !important;
  font-weight:900 !important;
  line-height:1 !important;
  background:rgba(255,255,255,.88) !important;
  color:#111 !important;
  box-shadow:0 5px 12px rgba(0,0,0,.08) !important;
}
.listCategorySlot .listOfficialBadge.cardOfficialBadge .roomModeDotBadge,
.listCategorySlot .listOfficialBadge.cardOfficialBadge .roomModeDotTemporary,
.listCategorySlot .listOfficialBadge.cardOfficialBadge .roomModeDotArchive{
  left:-5px !important;
  top:-5px !important;
  width:12px !important;
  height:12px !important;
  border:1.5px solid rgba(255,255,255,.95) !important;
  box-shadow:0 2px 5px rgba(0,0,0,.20) !important;
}
@media (max-width:640px){
  .listCategorySlot .listOfficialBadge.cardOfficialBadge{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    border-radius:10px !important;
    font-size:14px !important;
  }
  .listCategorySlot .listOfficialBadge.cardOfficialBadge .roomModeDotBadge,
  .listCategorySlot .listOfficialBadge.cardOfficialBadge .roomModeDotTemporary,
  .listCategorySlot .listOfficialBadge.cardOfficialBadge .roomModeDotArchive{
    width:12px !important;
    height:12px !important;
    left:-5px !important;
    top:-5px !important;
  }
}

/* ===== RoooM index legend: room type + number meaning ===== */
.roomModeLegend{
  flex-wrap:wrap !important;
  row-gap:6px !important;
  column-gap:10px !important;
  max-width:min(520px,100%) !important;
}
.roomModeLegendBreak{
  flex:0 0 100% !important;
  width:100% !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}
.roomModeLegendIcon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:14px !important;
  min-width:14px !important;
  line-height:1 !important;
  font-size:12px !important;
}
@media (max-width:640px){
  .roomModeLegend{
    row-gap:6px !important;
    column-gap:8px !important;
    font-size:11px !important;
    line-height:1.15 !important;
    max-width:calc(100vw - 128px) !important;
  }
  .roomModeLegendIcon{
    width:13px !important;
    min-width:13px !important;
    font-size:11px !important;
  }
}

/* ===== RoooM index category/search one-line + full-width legend ===== */
.categoryFilterBar{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-areas:
    "category search"
    "legend legend" !important;
  align-items:center !important;
  gap:8px 10px !important;
  width:100% !important;
  margin:8px 0 12px !important;
}
.categoryFilterBar .categoryOpenBtn{
  grid-area:category !important;
  justify-self:start !important;
}
.categoryFilterBar .categorySearchWrap{
  grid-area:search !important;
  width:100% !important;
  min-width:0 !important;
  display:flex !important;
  justify-content:stretch !important;
}
.categoryFilterBar .categorySearchWrap .searchInput{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  border-radius:999px !important;
}
.categoryFilterBar .roomModeLegend{
  grid-area:legend !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  gap:clamp(5px,1.7vw,12px) !important;
  min-width:0 !important;
  overflow:visible !important;
  white-space:nowrap !important;
  font-size:clamp(10px,2.55vw,12px) !important;
  line-height:1.15 !important;
}
.categoryFilterBar .roomModeLegendBreak{
  display:none !important;
  flex:0 0 0 !important;
  width:0 !important;
}
.categoryFilterBar .roomModeLegendItem{
  flex:0 0 auto !important;
  gap:4px !important;
}
.categoryFilterBar .roomModeLegendDot{
  width:10px !important;
  height:10px !important;
}
.categoryFilterBar .roomModeLegendIcon{
  width:13px !important;
  min-width:13px !important;
  font-size:11px !important;
}
@media (max-width:640px){
  .categoryFilterBar{
    grid-template-columns:max-content minmax(0,1fr) !important;
    gap:7px 8px !important;
    margin:6px 0 10px !important;
  }
  .categoryFilterBar .categoryOpenBtn{
    padding:9px 11px !important;
    font-size:13px !important;
    max-width:42vw !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .categoryFilterBar .categorySearchWrap .searchInput{
    padding:10px 12px !important;
    font-size:13px !important;
  }
  .categoryFilterBar .roomModeLegend{
    justify-content:center !important;
    gap:clamp(4px,1.35vw,7px) !important;
    font-size:clamp(9.5px,2.6vw,11px) !important;
    letter-spacing:-.02em !important;
  }
  .categoryFilterBar .roomModeLegendItem{
    gap:3px !important;
  }
  .categoryFilterBar .roomModeLegendDot{
    width:9px !important;
    height:9px !important;
  }
  .categoryFilterBar .roomModeLegendIcon{
    width:12px !important;
    min-width:12px !important;
    font-size:10px !important;
  }
}
html.rooom-ipad-portrait .categoryFilterBar{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-areas:
    "category search"
    "legend legend" !important;
  align-items:center !important;
  gap:8px 10px !important;
  width:100% !important;
}
html.rooom-ipad-portrait .categoryFilterBar .categorySearchWrap{
  grid-area:search !important;
  width:100% !important;
  min-width:0 !important;
}
html.rooom-ipad-portrait .categoryFilterBar .roomModeLegend{
  grid-area:legend !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
}



/* =========================================================
   RoooM room count breakdown
   - Use the same compact disappearing / archive breakdown in
     official and user room headers.
   - Shared by card/list view and all device widths.
   ========================================================= */
.officialRoomsBar #roomCountText,
.userRoomsBar .userRoomsMeta{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:2px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
}

#roomCountText,
#userRoomCountText{
  margin:0 !important;
  padding:0 !important;
  line-height:1.15 !important;
}

.roomCountBreakdown{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:2px !important;
  font-size:12px !important;
  line-height:1.15 !important;
  color:var(--muted) !important;
  font-weight:700 !important;
  text-align:right !important;
  white-space:nowrap !important;
}

.roomCountBreakdownLine{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:4px !important;
  min-height:14px !important;
}

.roomCountBreakdownDot{
  display:inline-block !important;
  width:11px !important;
  height:11px !important;
  border-radius:999px !important;
  border:1.5px solid rgba(255,255,255,.95) !important;
  box-shadow:0 2px 5px rgba(0,0,0,.20) !important;
  flex:0 0 auto !important;
}

.roomCountBreakdownLabel{
  display:inline-block !important;
  max-width:7.5em !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  vertical-align:top !important;
}

.roomCountBreakdownNumber{
  display:inline-block !important;
  min-width:1.2em !important;
  color:#111 !important;
  font-weight:900 !important;
  text-align:right !important;
}

@media (max-width:640px){
  .officialRoomsBar #roomCountText,
  .userRoomsBar .userRoomsMeta{
    align-self:start !important;
    justify-self:end !important;
    margin:0 !important;
    font-size:12px !important;
    line-height:1.15 !important;
  }

  .roomCountBreakdown{
    font-size:11px !important;
    gap:2px !important;
  }

  .roomCountBreakdownLine{
    min-height:13px !important;
    gap:3px !important;
  }

  .roomCountBreakdownLabel{
    max-width:6.5em !important;
  }
}

html.rooom-ipad-portrait .officialRoomsBar #roomCountText,
html.rooom-ipad-portrait .userRoomsBar .userRoomsMeta{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:2px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
}

html.rooom-ipad-portrait .roomCountBreakdown{
  font-size:12px !important;
}

/* =========================================================
   RoooM official room breakdown position fix
   - Keep the official room count breakdown at the far right,
     same as the previous current-room count position.
   - Does not change room logic, card/list rendering, or labels.
   ========================================================= */
@media (min-width:641px){
  .officialRoomsBar{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
  }

  .officialRoomsBar #roomCountText{
    margin-left:auto !important;
    align-self:center !important;
    justify-self:end !important;
  }
}


/* ===== Android browser app notification guide route ===== */
.topRefreshNoticeActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
}
.rooomAndroidBrowserAppNotice{
  align-items:center;
}
.rooomAndroidBrowserAppNotice .topRefreshNoticeMain{
  flex:0 0 auto;
}
.rooomAndroidBrowserAppNotice .topRefreshNoticeTitle{
  white-space:nowrap;
}
.rooomAndroidBrowserAppNotice .topRefreshNoticeActions{
  margin-left:auto;
}

.rooomAndroidBrowserAppNotice #pwaInstallBtn{
  width:32px;
  min-width:32px;
  height:32px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:900;
  line-height:1;
}
@media (max-width:640px){
  .rooomAndroidBrowserAppNotice #pwaInstallBtn{
    width:30px;
    min-width:30px;
    height:30px;
    padding:0;
    font-size:17px;
  }
}
@media (max-width:640px){
  .rooomAndroidBrowserAppNotice{
    gap:8px;
    padding:9px 10px;
  }
  .rooomAndroidBrowserAppNotice .topRefreshNoticeTitle{
    font-size:13px;
  }
  .rooomAndroidBrowserAppNotice .topRefreshNoticeActions{
    gap:6px;
  }
  .rooomAndroidBrowserAppNotice .topRefreshNoticeBtn{
    padding:7px 9px;
    font-size:11px;
  }
}


/* ===== Android browser app notification route: flat help + real download icon ===== */
.rooomAndroidBrowserAppNotice .topRefreshNoticeActions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:12px !important;
  flex:0 0 auto !important;
}
.rooomAndroidBrowserAppNotice #pwaInstallBtn{
  appearance:none !important;
  -webkit-appearance:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#111 !important;
  width:26px !important;
  min-width:26px !important;
  height:26px !important;
  min-height:26px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
}
.rooomAndroidBrowserAppNotice #pwaInstallBtn .rooomDownloadIconSvg{
  width:22px !important;
  height:22px !important;
  display:block !important;
  stroke:currentColor !important;
  stroke-width:2.8 !important;
  fill:none !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.rooomAndroidBrowserAppNotice #pwaInstallBtn:active{
  opacity:.62 !important;
}
@media (max-width:640px){
  .rooomAndroidBrowserAppNotice .topRefreshNoticeActions{
    gap:10px !important;
  }
  .rooomAndroidBrowserAppNotice #pwaInstallBtn{
    width:25px !important;
    min-width:25px !important;
    height:25px !important;
    min-height:25px !important;
  }
  .rooomAndroidBrowserAppNotice #pwaInstallBtn .rooomDownloadIconSvg{
    width:21px !important;
    height:21px !important;
  }
}


/* ===== Android browser notification guide modal: image base + translated text overlay ===== */
.pwaGuideOverlay.androidTwaNoticeGuideOverlay{
  padding:10px !important;
  background:rgba(0,0,0,.48) !important;
}
.pwaGuideOverlay.androidTwaNoticeGuideOverlay .pwaGuideModal{
  width:min(520px,calc(100vw - 20px)) !important;
  max-height:calc(100dvh - 20px) !important;
  overflow:visible !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#111 !important;
}
.pwaGuideOverlay.androidTwaNoticeGuideOverlay .pwaGuideTitle,
.pwaGuideOverlay.androidTwaNoticeGuideOverlay .pwaGuideLead,
.pwaGuideOverlay.androidTwaNoticeGuideOverlay .pwaGuideActions{
  display:none !important;
}
.pwaGuideOverlay.androidTwaNoticeGuideOverlay .pwaGuideSteps{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
}
.androidTwaNoticeGuide{
  position:relative;
  width:min(520px,calc(100vw - 20px));
  aspect-ratio:2 / 3;
  max-height:calc(100dvh - 20px);
  margin:0 auto;
  font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  color:#111;
  user-select:none;
}
.androidTwaNoticeGuideBg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
}
.androidTwaNoticeText{
  position:absolute;
  z-index:2;
  font-weight:800;
  line-height:1.38;
  letter-spacing:-.02em;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:normal;
  text-align:left;
  pointer-events:none;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.androidTwaNoticeTitle{
  top:7.0%;
  left:25%;
  width:50%;
  text-align:center;
  font-size:clamp(17px,4.2vw,25px);
  font-weight:950;
  letter-spacing:-.04em;
}
.androidTwaNoticeWarning{
  top:12.9%;
  left:24.8%;
  width:62%;
  font-size:clamp(14px,3.3vw,20px);
  line-height:1.45;
  font-weight:950;
}
.androidTwaNoticeInstall{
  top:24.0%;
  left:25.7%;
  width:64%;
  color:#088d86;
  font-size:clamp(11px,2.65vw,16px);
  line-height:1.48;
  font-weight:900;
}
.androidTwaNoticeInstall::first-line{
  color:#111;
  font-weight:800;
}
.androidTwaNoticeApp{
  top:35.0%;
  left:25.5%;
  width:65%;
  font-size:clamp(11px,2.55vw,16px);
  line-height:1.56;
  font-weight:800;
}
.androidTwaNoticeOnTitle,
.androidTwaNoticeOffTitle{
  top:51.0%;
  font-size:clamp(13px,3vw,18px);
  line-height:1.2;
  font-weight:950;
}
.androidTwaNoticeOnTitle{
  left:13.2%;
  width:32%;
  color:#13803a;
}
 .androidTwaNoticeOffTitle{
  left:61.0%;
  width:31%;
  color:#d83a42;
}
.androidTwaNoticeOnItem,
.androidTwaNoticeOffItem{
  font-size:clamp(9px,2.35vw,14px);
  line-height:1.42;
  font-weight:800;
}
.androidTwaNoticeOnItem{
  left:19.3%;
  width:27.0%;
}
.androidTwaNoticeOffItem{
  left:66.0%;
  width:26.5%;
}
.androidTwaNoticeOn1,.androidTwaNoticeOff1{top:58.2%;}
.androidTwaNoticeOn2,.androidTwaNoticeOff2{top:66.7%;}
.androidTwaNoticeOn3,.androidTwaNoticeOff3{top:75.1%;}
.androidTwaNoticeInfo{
  top:85.4%;
  left:16.8%;
  width:73%;
  color:#3265a0;
  font-size:clamp(10px,2.55vw,16px);
  line-height:1.42;
  font-weight:850;
}
.androidTwaNoticeClose{
  position:absolute;
  z-index:5;
  right:4.0%;
  top:1.9%;
  width:9.5%;
  height:7.0%;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
}
.androidTwaNoticeNext{
  position:absolute;
  z-index:5;
  right:8.0%;
  bottom:2.95%;
  width:22.5%;
  height:6.0%;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  padding:0 6% 0 0;
  font-size:clamp(15px,3.7vw,22px);
  font-weight:950;
  line-height:1;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.androidTwaNoticeClose:active,
.androidTwaNoticeNext:active{
  opacity:.62;
}
html[lang="en"] .androidTwaNoticeTitle{font-size:clamp(15px,3.65vw,22px);}
html[lang="en"] .androidTwaNoticeWarning{font-size:clamp(11px,2.75vw,17px);}
html[lang="en"] .androidTwaNoticeInstall{font-size:clamp(9px,2.18vw,13px);line-height:1.38;}
html[lang="en"] .androidTwaNoticeApp{font-size:clamp(8.8px,2.1vw,13px);line-height:1.38;}
html[lang="en"] .androidTwaNoticeOnTitle,
html[lang="en"] .androidTwaNoticeOffTitle{font-size:clamp(10px,2.35vw,14px);}
html[lang="en"] .androidTwaNoticeOnItem,
html[lang="en"] .androidTwaNoticeOffItem{font-size:clamp(7.4px,1.82vw,11px);line-height:1.28;}
html[lang="en"] .androidTwaNoticeInfo{font-size:clamp(8.2px,2vw,12px);line-height:1.32;}
html[lang="zh-CN"] .androidTwaNoticeText{word-break:normal;}
html[lang="ko"] .androidTwaNoticeText{word-break:keep-all;overflow-wrap:anywhere;}
@media (max-width:420px){
  .pwaGuideOverlay.androidTwaNoticeGuideOverlay{
    padding:6px !important;
  }
  .pwaGuideOverlay.androidTwaNoticeGuideOverlay .pwaGuideModal,
  .androidTwaNoticeGuide{
    width:calc(100vw - 12px) !important;
    max-height:calc(100dvh - 12px) !important;
  }
  .androidTwaNoticeTitle{font-size:clamp(15px,4.4vw,18px);}
  .androidTwaNoticeWarning{font-size:clamp(12px,3.5vw,15px);}
  .androidTwaNoticeInstall{font-size:clamp(9.5px,2.8vw,12px);}
  .androidTwaNoticeApp{font-size:clamp(9px,2.65vw,11.5px);}
  .androidTwaNoticeOnTitle,
  .androidTwaNoticeOffTitle{font-size:clamp(11px,3.15vw,13px);}
  .androidTwaNoticeOnItem,
  .androidTwaNoticeOffItem{font-size:clamp(7.8px,2.28vw,9.8px);line-height:1.34;}
  .androidTwaNoticeInfo{font-size:clamp(8.4px,2.45vw,10.5px);}
}

/* ===== Android browser app notification guide: twa1 new base position fix ===== */
/* New base image already contains the step pill, dots, close icon, and next label.
   Keep JS text overlay only for the translated explanation text. */
.pwaGuideOverlay.androidTwaNoticeGuideOverlay{
  padding:10px !important;
}
.pwaGuideOverlay.androidTwaNoticeGuideOverlay .pwaGuideModal{
  width:min(520px,calc(100vw - 20px)) !important;
  max-height:calc(100dvh - 20px) !important;
  overflow:visible !important;
}
.androidTwaNoticeGuide{
  width:min(520px,calc(100vw - 20px)) !important;
  aspect-ratio:2 / 3 !important;
  max-height:calc(100dvh - 20px) !important;
}
.androidTwaNoticeBg{
  object-fit:contain !important;
}
.androidTwaNoticeText{
  letter-spacing:-.035em !important;
  text-shadow:0 1px 0 rgba(255,255,255,.32) !important;
}
.androidTwaNoticeTitle{
  top:6.85% !important;
  left:22.5% !important;
  width:55% !important;
  text-align:center !important;
  font-size:clamp(16px,4.05vw,24px) !important;
  line-height:1.15 !important;
  font-weight:950 !important;
}
.androidTwaNoticeWarning{
  top:14.1% !important;
  left:24.0% !important;
  width:59.5% !important;
  font-size:clamp(13px,3.2vw,19px) !important;
  line-height:1.48 !important;
}
.androidTwaNoticeInstall{
  top:26.0% !important;
  left:24.3% !important;
  width:60.8% !important;
  font-size:clamp(10.6px,2.56vw,15.4px) !important;
  line-height:1.47 !important;
}
.androidTwaNoticeApp{
  top:37.2% !important;
  left:24.3% !important;
  width:61.0% !important;
  font-size:clamp(10.4px,2.5vw,15.2px) !important;
  line-height:1.52 !important;
}
.androidTwaNoticeOnTitle,
.androidTwaNoticeOffTitle{
  top:51.3% !important;
  font-size:clamp(12px,2.8vw,17px) !important;
  line-height:1.16 !important;
}
.androidTwaNoticeOnTitle{
  left:13.0% !important;
  width:31.5% !important;
}
.androidTwaNoticeOffTitle{
  left:59.3% !important;
  width:32.8% !important;
}
.androidTwaNoticeOnItem,
.androidTwaNoticeOffItem{
  font-size:clamp(8.4px,2.14vw,12.8px) !important;
  line-height:1.36 !important;
  font-weight:850 !important;
}
.androidTwaNoticeOnItem{
  left:20.2% !important;
  width:25.5% !important;
}
.androidTwaNoticeOffItem{
  left:65.6% !important;
  width:26.8% !important;
}
.androidTwaNoticeOn1,.androidTwaNoticeOff1{top:58.2% !important;}
.androidTwaNoticeOn2,.androidTwaNoticeOff2{top:66.7% !important;}
.androidTwaNoticeOn3,.androidTwaNoticeOff3{top:75.2% !important;}
.androidTwaNoticeInfo{
  top:85.55% !important;
  left:16.0% !important;
  width:75% !important;
  font-size:clamp(9.8px,2.42vw,14.6px) !important;
  line-height:1.38 !important;
}
.androidTwaNoticeClose{
  right:4.2% !important;
  top:1.85% !important;
  width:9.2% !important;
  height:7.0% !important;
}
.androidTwaNoticeNext{
  right:8.2% !important;
  bottom:3.0% !important;
  width:22.8% !important;
  height:6.0% !important;
  color:transparent !important;
  font-size:0 !important;
  text-shadow:none !important;
}
html[lang="en"] .androidTwaNoticeTitle{font-size:clamp(14px,3.45vw,20.5px) !important;}
html[lang="en"] .androidTwaNoticeWarning{font-size:clamp(10px,2.55vw,15.4px) !important;line-height:1.38 !important;}
html[lang="en"] .androidTwaNoticeInstall{font-size:clamp(8px,1.98vw,12px) !important;line-height:1.32 !important;}
html[lang="en"] .androidTwaNoticeApp{font-size:clamp(7.8px,1.95vw,11.8px) !important;line-height:1.32 !important;}
html[lang="en"] .androidTwaNoticeOnTitle,
html[lang="en"] .androidTwaNoticeOffTitle{font-size:clamp(8.8px,2.15vw,12.8px) !important;}
html[lang="en"] .androidTwaNoticeOnItem,
html[lang="en"] .androidTwaNoticeOffItem{font-size:clamp(6.8px,1.65vw,9.8px) !important;line-height:1.24 !important;}
html[lang="en"] .androidTwaNoticeInfo{font-size:clamp(7.8px,1.9vw,11.4px) !important;line-height:1.26 !important;}
@media (max-width:420px){
  .pwaGuideOverlay.androidTwaNoticeGuideOverlay{padding:6px !important;}
  .pwaGuideOverlay.androidTwaNoticeGuideOverlay .pwaGuideModal,
  .androidTwaNoticeGuide{
    width:calc(100vw - 12px) !important;
    max-height:calc(100dvh - 12px) !important;
  }
  .androidTwaNoticeTitle{font-size:clamp(14px,4.15vw,17px) !important;}
  .androidTwaNoticeWarning{font-size:clamp(11px,3.25vw,14.5px) !important;}
  .androidTwaNoticeInstall{font-size:clamp(8.7px,2.55vw,11.4px) !important;}
  .androidTwaNoticeApp{font-size:clamp(8.4px,2.47vw,11px) !important;}
  .androidTwaNoticeOnTitle,
  .androidTwaNoticeOffTitle{font-size:clamp(9.7px,2.85vw,12.4px) !important;}
  .androidTwaNoticeOnItem,
  .androidTwaNoticeOffItem{font-size:clamp(7.1px,2.08vw,9.2px) !important;line-height:1.29 !important;}
  .androidTwaNoticeInfo{font-size:clamp(7.6px,2.24vw,9.9px) !important;line-height:1.28 !important;}
}


/* v27: expanded list text must stay inside the card on every language/device */
.listItem.open .listMain,
.listItem.open.longText .listMain,
.listItem.open:not(.longText) .listMain{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}
.listItem.open .listName,
.listItem.open .listDesc,
.listItem.open.longText .listName,
.listItem.open.longText .listDesc,
.listItem.open:not(.longText) .listName,
.listItem.open:not(.longText) .listDesc{
  max-width:100% !important;
  min-width:0 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  text-overflow:clip !important;
}


/* ===== v28: unified list collapse/expand for official + user rooms ===== */
/* 縮小時は全カードを必ず「タイトル1行 + 説明1行」に統一する。 */
.listItem:not(.open) .listName{
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-line-clamp:unset !important;
  max-height:1.2em !important;
}
.listItem:not(.open) .listDesc{
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-line-clamp:unset !important;
  max-height:1.35em !important;
}
/* 展開時だけ全文表示。連続英字などもカード幅内で強制改行する。 */
.listItem.open .listMain{min-width:0 !important;width:100% !important;}
.listItem.open .listName,.listItem.open .listDesc{
  display:block !important;
  max-height:none !important;
  -webkit-line-clamp:unset !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}


/* ===== v29: collapsed list must fully clip every hidden line ===== */
/* 展開後に縮小しても、2行目以降の文字片を1pxも残さない。 */
#roomList .listItem:not(.open) .listMain,
:is(#userRoomList,#prepOpenCloneList) .listItem:not(.open) .listMain{
  min-width:0 !important;
  overflow:hidden !important;
}
#roomList .listItem:not(.open) .listTitleRow,
:is(#userRoomList,#prepOpenCloneList) .listItem:not(.open) .listTitleRow{
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  line-height:17px !important;
  overflow:hidden !important;
}
#roomList .listItem:not(.open) .listName,
:is(#userRoomList,#prepOpenCloneList) .listItem:not(.open) .listName{
  display:block !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  line-height:17px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-line-clamp:unset !important;
  clip-path:inset(0) !important;
}
#roomList .listItem:not(.open) .listDesc,
:is(#userRoomList,#prepOpenCloneList) .listItem:not(.open) .listDesc{
  display:block !important;
  height:15px !important;
  min-height:15px !important;
  max-height:15px !important;
  line-height:15px !important;
  margin:2px 0 0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-line-clamp:unset !important;
  clip-path:inset(0) !important;
}
/* 展開時は従来どおり全文を縦方向に表示する。 */
#roomList .listItem.open .listTitleRow,
:is(#userRoomList,#prepOpenCloneList) .listItem.open .listTitleRow,
#roomList .listItem.open .listName,
:is(#userRoomList,#prepOpenCloneList) .listItem.open .listName,
#roomList .listItem.open .listDesc,
:is(#userRoomList,#prepOpenCloneList) .listItem.open .listDesc{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  clip-path:none !important;
}

/* ===== RoooM initial Terms consent gate ===== */
.rooomTermsConsentGate{
  position:fixed;
  inset:0;
  z-index:2147483645;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.58);
  font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
}
.rooomTermsConsentModal{
  width:min(560px,100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  background:#fff;
  color:#111;
  border-radius:24px;
  padding:26px 24px 24px;
  box-shadow:0 28px 80px rgba(0,0,0,.30);
}
.rooomTermsConsentTitle{margin:0 0 12px;font-size:24px;line-height:1.35;font-weight:800}
.rooomTermsConsentLead,.rooomTermsConsentSafety{margin:0;color:#555;font-size:14px;line-height:1.8}
.rooomTermsConsentSafety{margin-top:12px}
.rooomTermsConsentLinks{display:flex;flex-wrap:wrap;gap:8px 14px;margin:18px 0 16px}
.rooomTermsConsentLinks a{color:#111;text-decoration:underline;text-underline-offset:3px;font-size:14px;font-weight:700}
.rooomTermsConsentCheckRow{display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border:1px solid rgba(0,0,0,.12);border-radius:14px;background:#f7f7f7;color:#222;font-size:14px;line-height:1.55;cursor:pointer}
.rooomTermsConsentCheckRow input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:#141414}
.rooomTermsConsentAcceptBtn{width:100%;margin-top:16px;border:0;border-radius:14px;padding:13px 16px;background:#141414;color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.rooomTermsConsentAcceptBtn:disabled{opacity:.36;cursor:not-allowed}
@media (max-width:640px){
  .rooomTermsConsentGate{padding:14px}
  .rooomTermsConsentModal{max-height:calc(100vh - 28px);border-radius:20px;padding:22px 17px 18px}
  .rooomTermsConsentTitle{font-size:21px}
  .rooomTermsConsentLead,.rooomTermsConsentSafety,.rooomTermsConsentLinks a,.rooomTermsConsentCheckRow{font-size:13px}
}



/* ===== RoooM Terms consent: header-only pre-use view + language switch ===== */
html.rooom-terms-consent-required .rooomTermsProtectedContent{
  visibility:hidden !important;
  pointer-events:none !important;
}
html.rooom-terms-consent-required .rooomTermsConsentGate{
  top:var(--rooom-consent-header-clearance, 0px);
  background:rgba(245,246,248,.96);
}
.rooomTermsConsentLang{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 14px;
}
.rooomTermsConsentLangBtn{
  min-width:46px;
  height:34px;
  padding:0 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  background:#f4f4f4;
  color:#333;
  font:700 12px/1 system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;
  cursor:pointer;
}
.rooomTermsConsentLangBtn.active{
  background:#141414;
  color:#fff;
  border-color:#141414;
}
@media (max-width:640px){
  .rooomTermsConsentLang{gap:6px;margin-bottom:12px}
  .rooomTermsConsentLangBtn{min-width:42px;height:32px;padding:0 10px;font-size:11px}
}


/* ===== 2026-08-24: アーカイブ部屋を独立セクション化 ===== */
.archiveRoomsBar{display:flex;align-items:center;gap:14px;margin-top:2px}
.archiveRoomsBar .topbarLeft{min-width:0}
.archiveRoomsBar h2{white-space:nowrap}
.archiveRoomsBar #archiveRoomCountText{margin-left:auto;white-space:nowrap;color:var(--muted);font-size:13px}
@media (max-width:640px){
  .archiveRoomsBar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}
  .archiveRoomsBar h2{font-size:18px;line-height:1.1;margin:0}
  .archiveRoomsBar #archiveRoomCountText{margin-left:0;justify-self:end;font-size:12px}
}


/* ===== 2026-08-24: 利用規約未同意時はヘッダー右側操作のみ非表示 ===== */
html.rooom-terms-consent-required .topRefreshRight{
  display:none !important;
}

/* =========================================================
   RoooM card color unification 2026-08-24
   - Official rooms: blue-gray, unified including Admin-created official rooms
   - Other rooms/archive: common gray
   - All cards/list rows: subtle lighter top vertical gradient
   ========================================================= */
:root{
  --rooom-official-top:#7f93a8;
  --rooom-official-bottom:#667a91;
  --rooom-common-top:#8a8a8a;
  --rooom-common-bottom:#777777;
}

/* All rooms default to the common gray gradient. */
.card.card-main,
.card.card-solo,
.card.card-midnight,
.card.card-chat,
.card.card-user{
  background:linear-gradient(180deg,var(--rooom-common-top) 0%,var(--rooom-common-bottom) 100%) !important;
}

.listItem.card-main,
.listItem.card-solo,
.listItem.card-midnight,
.listItem.card-chat,
.listItem.card-user{
  background:linear-gradient(180deg,var(--rooom-common-top) 0%,var(--rooom-common-bottom) 100%) !important;
}

/* Anything rendered inside the official-room section uses one official color.
   This also covers Admin-created official rooms that currently carry card-user. */
#officialGrid .card,
.officialGrid .card,
#officialRooms .card,
.officialRooms .card,
#officialList .listItem,
.officialList .listItem,
#officialRooms .listItem,
.officialRooms .listItem{
  background:linear-gradient(180deg,var(--rooom-official-top) 0%,var(--rooom-official-bottom) 100%) !important;
}

/* =========================================================
   RoooM card gradient correction 2026-08-24
   - Match the actual official container: #roomList
   - Top edge is near-white on every non-image card/list row
   - Official section gets a visible blue-gray tint
   - User/open/archive share the same neutral gray
   ========================================================= */
:root{
  --rooom-official-top:#f7f9fc;
  --rooom-official-bottom:#c4d2e2;
  --rooom-common-top:#fafafa;
  --rooom-common-bottom:#d6d6d6;
  --rooom-card-text:#262626;
  --rooom-card-subtext:#555;
  --rooom-card-meta:#555;
}

/* Default: user/open/archive = neutral gray gradient. */
:is(#userRoomList,#prepOpenCloneList) .listItem,
#archiveRoomList .listItem,
:is(#userRoomList,#prepOpenCloneList) .card.cardPlainRoom,
#archiveRoomList .card.cardPlainRoom{
  background:linear-gradient(180deg,var(--rooom-common-top) 0%,var(--rooom-common-bottom) 100%) !important;
  color:var(--rooom-card-text) !important;
  border-color:rgba(0,0,0,.07) !important;
}

/* Official: every room rendered in the actual official section, including Admin-created official rooms. */
#roomList .listItem,
#roomList .card.cardPlainRoom{
  background:linear-gradient(180deg,var(--rooom-official-top) 0%,var(--rooom-official-bottom) 100%) !important;
  color:var(--rooom-card-text) !important;
  border-color:rgba(74,101,128,.14) !important;
}

/* Light backgrounds need dark readable text. */
#roomList .listName,
:is(#userRoomList,#prepOpenCloneList) .listName,
#archiveRoomList .listName,
#roomList .cardPlainRoom .roomName,
:is(#userRoomList,#prepOpenCloneList) .cardPlainRoom .roomName,
#archiveRoomList .cardPlainRoom .roomName{
  color:var(--rooom-card-text) !important;
}

#roomList .listDesc,
:is(#userRoomList,#prepOpenCloneList) .listDesc,
#archiveRoomList .listDesc,
#roomList .cardPlainRoom .desc,
:is(#userRoomList,#prepOpenCloneList) .cardPlainRoom .desc,
#archiveRoomList .cardPlainRoom .desc{
  color:var(--rooom-card-subtext) !important;
}

#roomList .listMeta,
:is(#userRoomList,#prepOpenCloneList) .listMeta,
#archiveRoomList .listMeta,
#roomList .cardPlainRoom .cardImagePeople,
#roomList .cardPlainRoom .cardImageTime,
:is(#userRoomList,#prepOpenCloneList) .cardPlainRoom .cardImagePeople,
:is(#userRoomList,#prepOpenCloneList) .cardPlainRoom .cardImageTime,
#archiveRoomList .cardPlainRoom .cardImagePeople,
#archiveRoomList .cardPlainRoom .cardImageTime{
  color:var(--rooom-card-meta) !important;
}

/* Accent stays visible on the light gradient. */
#roomList .listAccent,
:is(#userRoomList,#prepOpenCloneList) .listAccent,
#archiveRoomList .listAccent{
  background:rgba(80,80,80,.42) !important;
}


/* =========================================================
   RoooM compact list rows 2026-08-24
   - Short title/description rows stay compact
   - Only genuinely clipped text grows when expanded
   ========================================================= */
#roomList .listItem:not(.open),
:is(#userRoomList,#prepOpenCloneList) .listItem:not(.open),
#archiveRoomList .listItem:not(.open){
  min-height:44px !important;
  padding-top:6px !important;
  padding-bottom:6px !important;
}

@media (max-width:640px){
  #roomList .listItem:not(.open),
  :is(#userRoomList,#prepOpenCloneList) .listItem:not(.open),
  #archiveRoomList .listItem:not(.open){
    min-height:42px !important;
    padding-top:5px !important;
    padding-bottom:5px !important;
  }
}

#roomList .listItem.open.hasOverflow,
:is(#userRoomList,#prepOpenCloneList) .listItem.open.hasOverflow,
#archiveRoomList .listItem.open.hasOverflow{
  min-height:0 !important;
  height:auto !important;
}

/* ===== エントリーRoooM（募集部屋）大枠：2026-08-27 ===== */
.entryRoomsSection{
  margin:0;
  padding:16px 18px 18px;
  border:1px solid rgba(74,144,226,.32);
  border-radius:20px;
  background:rgba(255,255,255,.34);
  box-shadow:0 10px 26px rgba(0,0,0,.035);
}
.entryRoomsBar{
  margin-bottom:12px;
}
.entryRoomsBar .topbarLeft{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.entryRoomsBar h2{
  margin:0;
}
.entryRoomsBadge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(74,144,226,.12);
  border:1px solid rgba(74,144,226,.24);
  color:#356da8;
  font-size:11px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
.entryRoomCountText{
  margin-left:auto;
  color:#777;
  font-size:12px;
  white-space:nowrap;
}
.entryRoomList{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.entryRoomsEmpty{
  width:100%;
  padding:20px 12px;
  text-align:center;
  color:#777;
  font-size:13px;
  line-height:1.5;
}
@media (max-width:640px){
  .entryRoomsSection{
    padding:13px 12px 14px;
    border-radius:18px;
  }
  .entryRoomsBar{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
  }
  .entryRoomsBar .topbarLeft{
    min-width:0;
    gap:7px;
    flex-wrap:nowrap;
  }
  .entryRoomsBar h2{
    font-size:18px;
    line-height:1.1;
    white-space:nowrap;
  }
  .entryRoomsBadge{
    font-size:10px;
    padding:4px 7px;
  }
  .entryRoomCountText{
    font-size:11px;
  }
  .entryRoomList{
    min-height:58px;
  }
  .entryRoomsEmpty{
    padding:14px 8px;
    font-size:12px;
  }
}



/* ===== TOP機能整理 / 募集部屋フラット化：2026-08-27 ===== */
.topPrimaryControls{
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
}
.topPrimaryControls .topCategoryBtn{
  grid-column:1;
  grid-row:1;
  margin:0;
  white-space:nowrap;
}
.topPrimaryControls .topRoomSearchWrap{
  grid-column:2;
  grid-row:1;
  min-width:0;
  width:100%;
  display:flex;
}
.topPrimaryControls .topRoomSearchWrap .searchInput{
  width:100%;
  max-width:none;
  border-radius:999px;
}
.topPrimaryControls .topCreateRoomBtn{
  grid-column:3;
  grid-row:1;
  margin:0;
  white-space:nowrap;
  border-radius:999px;
}
.topPrimaryControls .topCategoryActiveText{
  grid-column:1 / 4;
  grid-row:2;
  justify-self:start;
  margin:-4px 0 0;
  min-height:0;
  font-size:11px;
  line-height:1.2;
  color:#777;
}
.topUtilityRow{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  margin:0 0 6px;
}
#pwaBanner.topCompactNotice{
  width:min(520px,100%) !important;
  margin:0 !important;
  min-height:0;
  padding:8px 11px !important;
  border-radius:15px !important;
  gap:8px !important;
}
#pwaBanner.topCompactNotice .topRefreshNoticeTitle{
  font-size:12px !important;
  line-height:1.2 !important;
}
#pwaBanner.topCompactNotice .topRefreshNoticeText{
  font-size:10px !important;
  line-height:1.25 !important;
  margin-top:1px !important;
}
#pwaBanner.topCompactNotice .pwaStepBadge{
  margin-top:3px !important;
  padding:3px 7px !important;
  font-size:10px !important;
}
#pwaBanner.topCompactNotice .topRefreshNoticeBtn{
  padding:7px 10px !important;
  font-size:11px !important;
}
.topRoomModeLegend{
  width:100%;
  margin:0 0 16px !important;
  justify-content:flex-start !important;
  flex-wrap:wrap;
}
.entryRoomsSection{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.entryRoomsBar{
  margin-bottom:8px !important;
}
.entryRoomsBadge{
  display:none !important;
}
.entryRoomList{
  min-height:62px !important;
}
.entryRoomsEmpty{
  padding:18px 8px !important;
}
.categoryFilterBar{
  display:none !important;
}
.userRoomsBar #createRoomBtn,
.userRoomsBar .searchWrap{
  display:none !important;
}
@media (max-width:640px){
  .topPrimaryControls{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:7px;
    margin-bottom:8px;
  }
  .topPrimaryControls .topCategoryBtn{
    min-width:0;
    padding-left:11px !important;
    padding-right:11px !important;
    font-size:11px !important;
  }
  .topPrimaryControls .topRoomSearchWrap .searchInput{
    min-width:0;
    padding:10px 12px !important;
    font-size:12px !important;
  }
  .topPrimaryControls .topCreateRoomBtn{
    padding:10px 12px !important;
    font-size:12px !important;
  }
  .topPrimaryControls .topCategoryActiveText{
    font-size:10px;
  }
  #pwaBanner.topCompactNotice{
    width:min(430px,100%) !important;
    padding:7px 9px !important;
    border-radius:14px !important;
  }
  .topRoomModeLegend{
    margin-bottom:13px !important;
    gap:7px !important;
    font-size:10px !important;
  }
  .entryRoomsSection{
    padding:0 !important;
  }
  .entryRoomsBar{
    margin-bottom:6px !important;
  }
}

/* 選択中カテゴリ名はカテゴリボタン自体に反映されるため、重複表示は隠す */
.topPrimaryControls .topCategoryActiveText{display:none !important}


/* ===== TOP設定統合 / 大枠開閉：2026-08-27 ===== */
.topUtilityRow{
  width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(240px,320px) minmax(0,1fr) !important;
  gap:10px !important;
  align-items:stretch !important;
  margin:0 0 7px !important;
}
.topUtilityRow .topCompactNotice{
  width:100% !important;
  max-width:320px !important;
  margin:0 !important;
  min-height:46px !important;
  padding:7px 10px !important;
  border-radius:15px !important;
}
.topUtilityRow .topCompactNotice .topRefreshNoticeTitle{font-size:12px !important;}
.topUtilityRow .topCompactNotice .topRefreshNoticeText{font-size:10px !important;line-height:1.2 !important;}
.topUtilityRow .topCompactNotice .pwaStepBadge{font-size:9px !important;margin-top:2px !important;padding:2px 5px !important;}

.topRoomSettingsStrip{
  min-width:0;
  min-height:46px;
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:5px 7px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:15px;
  background:rgba(255,255,255,.68);
  box-shadow:0 8px 18px rgba(0,0,0,.035);
  scrollbar-width:thin;
}
.topSettingCell{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:4px;
  min-height:34px;
  padding:3px 5px;
  border-right:1px solid rgba(0,0,0,.07);
}
.topSettingCell:last-child{border-right:0;}
.topSettingLabel{font-size:10px;color:#666;white-space:nowrap;}
.topSettingInline{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;}
.topSettingSelect,.topSettingInput,.topSettingButton{
  height:28px;
  min-height:28px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:8px;
  background:#fff;
  color:#222;
  font:11px/1.1 "Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
}
.topSettingSelect{padding:0 21px 0 7px;max-width:132px;}
.topSettingButton{padding:0 8px;cursor:pointer;font-weight:700;white-space:nowrap;}
.topSettingInput{width:88px;padding:0 7px;outline:none;}
.topOfficialNameSuffix{width:62px;}
.topNameModeSelect{max-width:68px;}
.topSettingSendSelect{max-width:118px;}
.topSettingOnOff{max-width:58px;}
.topSettingNameCell{gap:5px;}
.topCurrentName{font-size:10px;color:#666;white-space:nowrap;}
.topCurrentName b{color:#222;font-weight:800;}

/* 意味アイコンは常に1列。狭い画面では折り返さず横スクロール。 */
.topRoomModeLegend{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  white-space:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none;
  margin:0 0 8px !important;
}
.topRoomModeLegend::-webkit-scrollbar{display:none;}
.topRoomModeLegend .roomModeLegendBreak{display:none !important;}

/* 募集部屋の空表示を「みんなが作った部屋」と同じ文字サイズ・余白へ。 */
.entryRoomList{min-height:0 !important;display:block !important;}
.entryRoomsEmpty{
  width:100% !important;
  padding:30px !important;
  text-align:center !important;
  color:inherit !important;
  font-size:inherit !important;
  line-height:normal !important;
}

/* 大枠タイトルをタップして収納 / 展開。 */
.roomSectionToggleTitle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  outline:none;
}
.roomSectionToggleTitle::after{
  content:"⌃";
  display:inline-block;
  font-size:11px;
  line-height:1;
  color:#777;
  transform:translateY(1px);
  transition:transform .16s ease;
}
.roomSectionToggleTitle[aria-expanded="false"]::after{
  content:"⌄";
}
.roomSectionToggleTitle:focus-visible{
  outline:2px solid rgba(45,115,210,.30);
  outline-offset:4px;
  border-radius:6px;
}
.roomSectionBody{
  display:block;
}
.roomSectionBody.is-collapsed{
  display:none !important;
}

@media (max-width:900px){
  .topUtilityRow{
    grid-template-columns:minmax(205px,280px) minmax(0,1fr) !important;
  }
  .topUtilityRow .topCompactNotice{max-width:280px !important;}
}
@media (max-width:640px){
  .topUtilityRow{
    display:flex !important;
    align-items:stretch !important;
    gap:7px !important;
    overflow-x:auto !important;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .topUtilityRow::-webkit-scrollbar{display:none;}
  .topUtilityRow .topCompactNotice{
    flex:0 0 210px !important;
    width:210px !important;
    max-width:210px !important;
  }
  .topRoomSettingsStrip{
    flex:0 0 auto;
    width:max-content;
    max-width:none;
    overflow:visible;
  }
  .topSettingLabel{font-size:9px;}
  .topSettingSelect,.topSettingInput,.topSettingButton{font-size:10px;height:27px;min-height:27px;}
  .entryRoomsEmpty{padding:30px 10px !important;}
}


/* ===== TOP設定パネル開閉・通知統合：2026-08-27 ===== */
.topPrimaryControls{
  grid-template-columns:auto minmax(0,1fr) auto auto !important;
}
.topSettingsToggleBtn{
  appearance:none;
  -webkit-appearance:none;
  width:36px;
  height:36px;
  min-width:36px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  background:#fff;
  color:#222;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.035);
}
.topSettingsToggleBtn[aria-expanded="true"]{
  background:#141414;
  color:#fff;
}
.topSettingsPanel{
  width:100% !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
  gap:7px !important;
  margin:0 0 7px !important;
  padding:7px !important;
  border:1px solid rgba(0,0,0,.08);
  border-radius:15px;
  background:rgba(255,255,255,.68);
  box-shadow:0 8px 18px rgba(0,0,0,.035);
}
.topSettingsPanel.is-collapsed{display:none !important;}
.topSettingsPanel .topCompactNotice{
  flex:0 1 auto !important;
  width:auto !important;
  min-width:210px !important;
  max-width:300px !important;
  margin:0 !important;
  min-height:40px !important;
  padding:5px 8px !important;
  border:0 !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:none !important;
}
.topSettingsPanel .topRoomSettingsStrip{
  flex:1 1 620px !important;
  width:auto !important;
  min-width:0 !important;
  min-height:40px !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  align-content:center !important;
  gap:5px 6px !important;
  overflow:visible !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.topSettingsPanel .topSettingCell{
  flex:0 1 auto !important;
  border-right:0 !important;
  border:1px solid rgba(0,0,0,.07);
  border-radius:10px;
  background:rgba(255,255,255,.72);
  padding:4px 6px;
}
@media (max-width:640px){
  .topPrimaryControls{
    grid-template-columns:auto minmax(0,1fr) auto auto !important;
  }
  .topSettingsToggleBtn{width:34px;height:34px;min-width:34px;font-size:16px;}
  .topSettingsPanel{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    padding:6px !important;
    overflow:visible !important;
  }
  .topSettingsPanel.is-collapsed{display:none !important;}
  .topSettingsPanel .topCompactNotice{
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
  .topSettingsPanel .topRoomSettingsStrip{
    flex:0 0 auto !important;
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:5px !important;
  }
  .topSettingsPanel .topSettingCell{
    max-width:100%;
  }
  .topSettingNameCell{flex:1 1 100% !important;}
  .topNameControls{flex-wrap:wrap;}
}

/* ===== TOP設定パネル再整理：通知も各設定と同サイズ / 自動段組み ===== */
.topSettingsPanel{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  align-items:stretch !important;
  gap:7px !important;
  padding:7px !important;
  overflow:visible !important;
}
.topSettingsPanel.is-collapsed{display:none !important;}

/* 通知だけ大きな別枠にせず、設定セル1個分として扱う */
.topSettingsPanel .topCompactNotice{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:52px !important;
  margin:0 !important;
  padding:7px 8px !important;
  border:1px solid rgba(0,0,0,.07) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.78) !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:6px !important;
}
.topSettingsPanel .topCompactNotice .topRefreshNoticeMain{
  min-width:0 !important;
  flex:1 1 auto !important;
}
.topSettingsPanel .topCompactNotice .topRefreshNoticeTitle{
  font-size:10px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}
.topSettingsPanel .topCompactNotice .topRefreshNoticeText,
.topSettingsPanel .topCompactNotice .pwaStepBadge{
  display:none !important;
}
.topSettingsPanel .topCompactNotice .topRefreshNoticeActions{
  flex:0 0 auto !important;
}

/* 中間ラッパーは段組みに参加させず、各設定を直接グリッドに乗せる */
.topSettingsPanel .topRoomSettingsStrip{
  display:contents !important;
}

.topSettingsPanel .topSettingCell{
  min-width:0 !important;
  min-height:52px !important;
  width:auto !important;
  max-width:none !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  align-content:center !important;
  gap:5px !important;
  padding:7px 8px !important;
  border:1px solid rgba(0,0,0,.07) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.78) !important;
  overflow:visible !important;
}
.topSettingsPanel .topSettingLabel{
  flex:0 0 auto !important;
  font-size:10px !important;
  line-height:1.15 !important;
  color:#666 !important;
  white-space:nowrap !important;
}
.topSettingsPanel .topSettingInline{
  min-width:0 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:4px !important;
  white-space:normal !important;
}
.topSettingsPanel .topSettingSelect,
.topSettingsPanel .topSettingInput,
.topSettingsPanel .topSettingButton{
  flex:0 1 auto !important;
  max-width:100% !important;
  height:28px !important;
  min-height:28px !important;
  font-size:10px !important;
}
.topSettingsPanel .topSettingSelect{min-width:62px !important;}
.topSettingsPanel .topSettingSendSelect{min-width:100px !important;}
.topSettingsPanel .topSettingInput{width:82px !important;min-width:64px !important;}
.topSettingsPanel .topSettingOnOff{min-width:52px !important;}

/* 名前だけは入力欄が潰れないよう少し広く使う */
.topSettingsPanel .topSettingNameCell{
  grid-column:span 2;
}
.topSettingsPanel .topNameControls{
  flex:1 1 210px !important;
}
.topSettingsPanel .topCurrentName{
  flex:0 0 auto !important;
  font-size:10px !important;
  white-space:nowrap !important;
}

@media (max-width:760px){
  .topSettingsPanel{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .topSettingsPanel .topSettingNameCell{
    grid-column:1 / -1;
  }
}

@media (max-width:430px){
  .topSettingsPanel{
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
    padding:6px !important;
  }
  .topSettingsPanel .topCompactNotice,
  .topSettingsPanel .topSettingCell{
    min-height:50px !important;
    padding:6px 7px !important;
  }
  .topSettingsPanel .topSettingSoundCell,
  .topSettingsPanel .topSettingNameCell,
  .topSettingsPanel .topSettingCell:has(.topSettingSendSelect){
    grid-column:1 / -1;
  }
}

/* ===== TOP設定パネル最終整理：内容幅で詰める / 言語は上部切替に統合 ===== */
/* 上部ヘッダーに言語切替があるため、設定パネル内の言語は非表示 */
.topSettingsPanel .topSettingCell:has(#topRoomLangSelect){
  display:none !important;
}

/* 均等割りをやめ、各機能の必要幅だけで横並び。足りなければ自動で次段へ */
.topSettingsPanel{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:6px !important;
  padding:6px !important;
}
.topSettingsPanel.is-collapsed{display:none !important;}
.topSettingsPanel .topRoomSettingsStrip{display:contents !important;}

/* 通知も他の設定と同じ「1セル」。余白を持たせない */
.topSettingsPanel .topCompactNotice{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:118px !important;
  max-width:none !important;
  min-height:46px !important;
  padding:6px 8px !important;
  gap:6px !important;
}
.topSettingsPanel .topCompactNotice .topRefreshNoticeMain{
  flex:0 0 auto !important;
  min-width:0 !important;
}
.topSettingsPanel .topCompactNotice .topRefreshNoticeActions{
  flex:0 0 auto !important;
  margin-left:0 !important;
}

/* 通常設定も均等幅ではなく内容に合わせる */
.topSettingsPanel .topSettingCell{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:46px !important;
  padding:6px 8px !important;
  gap:5px !important;
}
.topSettingsPanel .topSettingSoundCell{min-width:205px !important;}
.topSettingsPanel .topSettingCell:has(.topSettingSendSelect){min-width:180px !important;}
.topSettingsPanel .topSettingCell:has(#topThemeSelect){min-width:135px !important;}

/* 名前は残り幅を使う。入らなければ次段へ自然に落ちる */
.topSettingsPanel .topSettingNameCell{
  flex:1 1 300px !important;
  min-width:285px !important;
  max-width:100% !important;
}
.topSettingsPanel .topNameControls{
  flex:0 1 auto !important;
  min-width:0 !important;
}

/* タブレット以下：無理に一段へ押し込まず2段以降へ折り返す */
@media (max-width:760px){
  .topSettingsPanel{
    display:flex !important;
    flex-wrap:wrap !important;
  }
  .topSettingsPanel .topCompactNotice{min-width:112px !important;}
  .topSettingsPanel .topSettingSoundCell{flex:1 1 210px !important;}
  .topSettingsPanel .topSettingCell:has(.topSettingSendSelect){flex:1 1 180px !important;}
  .topSettingsPanel .topSettingCell:has(#topThemeSelect){flex:1 1 130px !important;}
  .topSettingsPanel .topSettingNameCell{
    flex:1 1 100% !important;
    min-width:0 !important;
  }
}

/* 細いスマホ：各操作を読める幅で2列中心、必要なものだけ全幅 */
@media (max-width:430px){
  .topSettingsPanel{gap:5px !important;padding:5px !important;}
  .topSettingsPanel .topCompactNotice,
  .topSettingsPanel .topSettingCell{
    min-height:44px !important;
    padding:5px 6px !important;
  }
  .topSettingsPanel .topCompactNotice{flex:1 1 42% !important;min-width:110px !important;}
  .topSettingsPanel .topSettingCell:has(#topThemeSelect){flex:1 1 42% !important;min-width:110px !important;}
  .topSettingsPanel .topSettingSoundCell,
  .topSettingsPanel .topSettingCell:has(.topSettingSendSelect),
  .topSettingsPanel .topSettingNameCell{
    flex:1 1 100% !important;
    min-width:0 !important;
  }
}

/* ===== 2026-08-27 設定パネル幅配分調整 =====
   PCは1列優先。通知等は必要最小限、名前変更・現在名は20文字表示を優先。
   狭い画面だけ自然に折り返す。
*/
#homeSettingsPanel,
.homeSettingsPanel,
.home-settings-panel,
.topSettingsPanel,
.top-settings-panel {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}

/* 設定項目は内容幅を基本にして、無意味な均等幅を持たせない */
#homeSettingsPanel > *,
.homeSettingsPanel > *,
.home-settings-panel > *,
.topSettingsPanel > *,
.top-settings-panel > * {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

/* 通知設定は必要最小限 */
.homeNotifySetting,
.home-notify-setting,
.topNotifySetting,
.top-notify-setting,
.notificationSetting,
.notification-setting {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

/* 名前変更・現在名は最大20文字を想定して優先的に幅を確保 */
.homeNameSetting,
.home-name-setting,
.topNameSetting,
.top-name-setting,
.nameSetting,
.name-setting {
  flex: 1 1 250px !important;
  min-width: 230px !important;
}

.homeCurrentName,
.home-current-name,
.topCurrentName,
.top-current-name,
.currentNameSetting,
.current-name-setting {
  flex: 1 1 220px !important;
  min-width: 200px !important;
}

/* 名前入力そのものを十分広くする */
.homeNameSetting input,
.home-name-setting input,
.topNameSetting input,
.top-name-setting input,
.nameSetting input,
.name-setting input {
  width: 20ch !important;
  min-width: 20ch !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* PC幅では極力1列に収める */
@media (min-width: 900px) {
  #homeSettingsPanel,
  .homeSettingsPanel,
  .home-settings-panel,
  .topSettingsPanel,
  .top-settings-panel {
    flex-wrap: nowrap !important;
  }
}

/* 狭い画面ではここで初めて折り返す */
@media (max-width: 899px) {
  #homeSettingsPanel,
  .homeSettingsPanel,
  .home-settings-panel,
  .topSettingsPanel,
  .top-settings-panel {
    flex-wrap: wrap !important;
  }

  .homeNameSetting,
  .home-name-setting,
  .topNameSetting,
  .top-name-setting,
  .nameSetting,
  .name-setting,
  .homeCurrentName,
  .home-current-name,
  .topCurrentName,
  .top-current-name,
  .currentNameSetting,
  .current-name-setting {
    flex: 1 1 260px !important;
  }
}

/* ===== 2026-08-27 部屋通知セルを実寸まで縮小 ===== */
/* 設定パネル先頭の「部屋通知」は余白を持たせず、内容幅だけにする */
#homeSettingsPanel > :first-child,
.homeSettingsPanel > :first-child,
.home-settings-panel > :first-child,
.topSettingsPanel > :first-child,
.top-settings-panel > :first-child {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* 先頭セル内部も横に必要最小限で並べる */
#homeSettingsPanel > :first-child > *,
.homeSettingsPanel > :first-child > *,
.home-settings-panel > :first-child > *,
.topSettingsPanel > :first-child > *,
.top-settings-panel > :first-child > * {
  flex: 0 0 auto !important;
}

/* 通知ラベルとスイッチの間だけ最低限の間隔 */
#homeSettingsPanel > :first-child,
.homeSettingsPanel > :first-child,
.home-settings-panel > :first-child,
.topSettingsPanel > :first-child,
.top-settings-panel > :first-child {
  gap: 6px !important;
}


/* ===== 2026-08-27 部屋通知の外枠を実際に縮小（#pwaBanner旧指定を上書き） ===== */
#topUtilityRow #pwaBanner.topRefreshNotice.topCompactNotice{
  flex:0 0 auto !important;
  width:max-content !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:6px 8px !important;
  gap:6px !important;
  min-height:46px !important;
  justify-content:flex-start !important;
}
#topUtilityRow #pwaBanner.topRefreshNotice.topCompactNotice .topRefreshNoticeMain{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
}
#topUtilityRow #pwaBanner.topRefreshNotice.topCompactNotice .topRefreshNoticeActions{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
}
@media (max-width:640px){
  #topUtilityRow #pwaBanner.topRefreshNotice.topCompactNotice{
    width:max-content !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
  }
}

/* ===== 2026-08-27 設定パネル：画面幅別の最終レスポンシブ整理 =====
   目的：
   - 広いPCは1列を維持
   - 中間幅は「一部だけ落ちる」のではなく全体を2段へ切替
   - 狭い幅は2列ベースで整列
   - 名前変更 / 現在名は読みやすい幅を優先
   - 上部に言語切替があるため設定内の言語は非表示
*/

/* これまでのflex指定をここで最終的にリセットして、設定欄だけGridで制御する */
#topUtilityRow.topSettingsPanel{
  display:grid !important;
  grid-template-columns:max-content max-content max-content max-content minmax(0,1fr) !important;
  grid-template-areas:"notice sound send theme name" !important;
  align-items:stretch !important;
  gap:6px !important;
  width:100% !important;
  max-width:none !important;
  padding:6px !important;
  margin:6px 0 4px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
#topUtilityRow.topSettingsPanel.is-collapsed{display:none !important;}
#topUtilityRow.topSettingsPanel #topRoomSettingsStrip{display:contents !important;}

/* 設定内の言語は、ヘッダーにあるため非表示 */
#topUtilityRow .topSettingCell:has(#topRoomLangSelect){display:none !important;}

/* 各論理セルの配置 */
#topUtilityRow #pwaBanner.topCompactNotice{grid-area:notice !important;}
#topUtilityRow .topSettingSoundCell{grid-area:sound !important;}
#topUtilityRow .topSettingCell:has(.topSettingSendSelect){grid-area:send !important;}
#topUtilityRow .topSettingCell:has(#topThemeSelect){grid-area:theme !important;}
#topUtilityRow .topSettingNameCell{grid-area:name !important;}

/* 全セル共通：中身以上の無意味な幅を持たせない */
#topUtilityRow #pwaBanner.topCompactNotice,
#topUtilityRow .topSettingCell{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:38px !important;
  margin:0 !important;
  padding:5px 7px !important;
  border:1px solid rgba(0,0,0,.07) !important;
  border-radius:9px !important;
  box-sizing:border-box !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:none !important;
}

/* 通知はラベル＋スイッチ分だけ */
#topUtilityRow #pwaBanner.topCompactNotice{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  flex:none !important;
  white-space:nowrap !important;
}
#topUtilityRow #pwaBanner.topCompactNotice .topRefreshNoticeMain,
#topUtilityRow #pwaBanner.topCompactNotice .topRefreshNoticeActions{
  width:auto !important;
  min-width:0 !important;
  flex:0 0 auto !important;
  margin:0 !important;
}

/* 一般設定セル */
#topUtilityRow .topSettingCell{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:5px !important;
  white-space:nowrap !important;
  flex:none !important;
}
#topUtilityRow .topSettingLabel{flex:0 0 auto !important;}
#topUtilityRow .topSettingInline{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}
#topUtilityRow .topSettingSelect,
#topUtilityRow .topSettingButton,
#topUtilityRow .topSettingInput{
  flex:0 0 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* 名前欄：PCでは名前変更と現在名を同じセル内で横並び */
#topUtilityRow .topSettingNameCell{
  display:grid !important;
  grid-template-columns:max-content minmax(150px,1fr) max-content !important;
  grid-template-areas:"nameLabel nameControls currentName" !important;
  align-items:center !important;
  column-gap:6px !important;
  row-gap:3px !important;
  min-width:0 !important;
  overflow:hidden !important;
}
#topUtilityRow .topSettingNameCell > .topSettingLabel{grid-area:nameLabel !important;}
#topUtilityRow .topSettingNameCell > .topNameControls{grid-area:nameControls !important;min-width:0 !important;}
#topUtilityRow .topSettingNameCell > .topCurrentName{
  grid-area:currentName !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#topUtilityRow #topNameInput{
  width:20ch !important;
  min-width:12ch !important;
  max-width:20ch !important;
}

/* -----------------------------
   広いPC：完成形。全部1列。
   ----------------------------- */
@media (min-width:980px){
  #topUtilityRow.topSettingsPanel{
    grid-template-columns:max-content max-content max-content max-content minmax(330px,1fr) !important;
    grid-template-areas:"notice sound send theme name" !important;
  }
}

/* -----------------------------
   中間幅：1個だけ落とさず、設定全体を2段へ切替。
   1段目：通知 / 通知音 / 送信方法
   2段目：背景色 / 名前変更＋現在名
   ----------------------------- */
@media (min-width:640px) and (max-width:979px){
  #topUtilityRow.topSettingsPanel{
    grid-template-columns:max-content max-content minmax(180px,1fr) !important;
    grid-template-areas:
      "notice sound send"
      "theme name name" !important;
  }
  #topUtilityRow .topSettingNameCell{
    grid-template-columns:max-content minmax(190px,1fr) minmax(120px,max-content) !important;
    grid-template-areas:"nameLabel nameControls currentName" !important;
  }
}

/* -----------------------------
   スマホ～細い中間幅：2列ベース。
   1段目：通知 / 通知音
   2段目：送信方法 / 背景色
   3段目：名前変更＋現在名
   ----------------------------- */
@media (max-width:639px){
  #topUtilityRow.topSettingsPanel{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "notice sound"
      "send theme"
      "name name" !important;
    gap:5px !important;
    padding:5px !important;
  }

  #topUtilityRow #pwaBanner.topCompactNotice,
  #topUtilityRow .topSettingCell{
    width:100% !important;
    max-width:100% !important;
  }

  #topUtilityRow .topSettingSoundCell,
  #topUtilityRow .topSettingCell:has(.topSettingSendSelect),
  #topUtilityRow .topSettingCell:has(#topThemeSelect){
    justify-content:flex-start !important;
  }

  /* 各コントロールを小さくし過ぎず、セル内だけで収める */
  #topUtilityRow .topSettingSoundCell .topSettingInline{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  #topUtilityRow .topSettingSoundCell .topSettingSelect{
    flex:1 1 0 !important;
    width:auto !important;
  }
  #topUtilityRow .topSettingSoundCell .topSettingButton{
    flex:0 0 auto !important;
  }
  #topUtilityRow .topSettingCell:has(.topSettingSendSelect) .topSettingSendSelect,
  #topUtilityRow .topSettingCell:has(#topThemeSelect) #topThemeSelect{
    flex:1 1 auto !important;
    width:auto !important;
  }

  /* 名前変更と現在名は、同じ大枠の中で縦2段にして20文字幅を確保 */
  #topUtilityRow .topSettingNameCell{
    grid-template-columns:max-content minmax(0,1fr) !important;
    grid-template-areas:
      "nameLabel nameControls"
      "currentName currentName" !important;
    overflow:visible !important;
  }
  #topUtilityRow .topNameControls{width:100% !important;}
  #topUtilityRow #topNameInput{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }
  #topUtilityRow .topCurrentName{
    width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
}

/* かなり細い端末でも、各機能を見失わないようラベルと操作部を縦に積む */
@media (max-width:380px){
  #topUtilityRow .topSettingSoundCell,
  #topUtilityRow .topSettingCell:has(.topSettingSendSelect),
  #topUtilityRow .topSettingCell:has(#topThemeSelect){
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:3px !important;
  }
  #topUtilityRow .topSettingSoundCell .topSettingInline,
  #topUtilityRow .topSettingCell:has(.topSettingSendSelect) .topSettingSendSelect,
  #topUtilityRow .topSettingCell:has(#topThemeSelect) #topThemeSelect{
    width:100% !important;
  }
}

/* ===== 2026-08-27 settings responsive rebuild v2 =====
   Width rules are based on the actual settings panel width.
   Wide: one row. Medium: whole panel switches to two/three rows.
   Narrowest: one setting per row. No single orphan item or text collision.
*/
#topUtilityRow.topSettingsPanel{
  container-type:inline-size !important;
  container-name:rooom-settings !important;
  display:grid !important;
  align-items:stretch !important;
  width:100% !important;
  max-width:none !important;
  gap:5px !important;
  padding:5px !important;
  overflow:visible !important;
}
#topUtilityRow.topSettingsPanel.is-collapsed{display:none !important;}
#topUtilityRow.topSettingsPanel #topRoomSettingsStrip{display:contents !important;}
#topUtilityRow .topSettingCell:has(#topRoomLangSelect){display:none !important;}

/* Shared compact cells */
#topUtilityRow #pwaBanner.topCompactNotice,
#topUtilityRow .topSettingCell{
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  min-height:38px !important;
  margin:0 !important;
  padding:5px 7px !important;
  border:1px solid rgba(0,0,0,.07) !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}

/* Notification: only the label and toggle, no empty space */
#topUtilityRow #pwaBanner.topCompactNotice{
  grid-area:notice !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:5px !important;
  white-space:nowrap !important;
}
#topUtilityRow #pwaBanner.topCompactNotice .topRefreshNoticeMain,
#topUtilityRow #pwaBanner.topCompactNotice .topRefreshNoticeActions{
  width:auto !important;
  min-width:0 !important;
  flex:0 0 auto !important;
  margin:0 !important;
}
#topUtilityRow #pwaBanner.topCompactNotice .topRefreshNoticeText,
#topUtilityRow #pwaBanner.topCompactNotice .pwaStepBadge{
  display:none !important;
}

#topUtilityRow .topSettingSoundCell{grid-area:sound !important;}
#topUtilityRow .topSettingCell:has(.topSettingSendSelect){grid-area:send !important;}
#topUtilityRow .topSettingCell:has(#topThemeSelect){grid-area:theme !important;}
#topUtilityRow .topSettingNameCell{grid-area:name !important;}

#topUtilityRow .topSettingCell{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:5px !important;
  white-space:nowrap !important;
}
#topUtilityRow .topSettingLabel{flex:0 0 auto !important;}
#topUtilityRow .topSettingInline{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  min-width:0 !important;
  flex-wrap:nowrap !important;
}

/* Do not shrink controls until their text disappears. */
#topUtilityRow #topSoundTypeSelect{min-width:5.8em !important;}
#topUtilityRow #topSoundTestBtn{min-width:3.6em !important;}
#topUtilityRow #topSoundEnabledSelect{min-width:4.5em !important;}
#topUtilityRow #topSendModeSelect{min-width:9.6em !important;}
#topUtilityRow #topThemeSelect{min-width:5.8em !important;}

/* Name area: current name sits directly after the Change button whenever one row fits. */
#topUtilityRow .topSettingNameCell{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:5px !important;
  min-width:0 !important;
  overflow:visible !important;
}
#topUtilityRow .topNameControls{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}
#topUtilityRow #topNameInput{
  width:20ch !important;
  min-width:12ch !important;
  max-width:20ch !important;
  flex:1 1 20ch !important;
  box-sizing:border-box !important;
}
#topUtilityRow #topNameSaveBtn{flex:0 0 auto !important;}
#topUtilityRow .topCurrentName{
  display:inline-flex !important;
  align-items:center !important;
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:24ch !important;
  margin:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#topUtilityRow .topCurrentName #topCurrentName{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* Default/fallback: medium-small two-column layout. */
#topUtilityRow.topSettingsPanel{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  grid-template-areas:
    "notice sound"
    "send theme"
    "name name" !important;
}

/* Wide PC: the proven one-row layout. */
@container rooom-settings (min-width: 930px){
  #topUtilityRow.topSettingsPanel{
    grid-template-columns:max-content max-content max-content max-content minmax(360px,1fr) !important;
    grid-template-areas:"notice sound send theme name" !important;
  }
  #topUtilityRow .topSettingNameCell{
    flex-wrap:nowrap !important;
  }
  #topUtilityRow .topCurrentName{
    flex:0 0 auto !important;
    max-width:24ch !important;
  }
}

/* Medium desktop/tablet landscape: switch the whole settings area to two rows,
   instead of letting just the current name fall by itself. */
@container rooom-settings (min-width: 650px) and (max-width: 929px){
  #topUtilityRow.topSettingsPanel{
    grid-template-columns:max-content max-content minmax(0,1fr) !important;
    grid-template-areas:
      "notice sound send"
      "theme name name" !important;
  }
  #topUtilityRow .topSettingNameCell{
    flex-wrap:nowrap !important;
  }
  #topUtilityRow #topNameInput{
    width:min(20ch,100%) !important;
    min-width:12ch !important;
    max-width:20ch !important;
  }
  #topUtilityRow .topCurrentName{
    max-width:24ch !important;
  }
}

/* Narrow tablet / wide phone: keep notification and sound together,
   then send/theme, then give the name row the full width. */
@container rooom-settings (min-width: 430px) and (max-width: 649px){
  #topUtilityRow.topSettingsPanel{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "notice sound"
      "send theme"
      "name name" !important;
  }
  #topUtilityRow #pwaBanner.topCompactNotice,
  #topUtilityRow .topSettingCell{
    width:100% !important;
  }
  #topUtilityRow .topSettingNameCell{
    flex-wrap:wrap !important;
    row-gap:4px !important;
  }
  #topUtilityRow .topNameControls{
    flex:1 1 auto !important;
  }
  #topUtilityRow #topNameInput{
    width:auto !important;
    min-width:12ch !important;
    max-width:none !important;
    flex:1 1 16ch !important;
  }
  #topUtilityRow .topCurrentName{
    flex:0 1 auto !important;
    max-width:100% !important;
  }
}

/* Small phone: one logical setting per row. */
@container rooom-settings (max-width: 429px){
  #topUtilityRow.topSettingsPanel{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:
      "notice"
      "sound"
      "send"
      "theme"
      "name" !important;
  }
  #topUtilityRow #pwaBanner.topCompactNotice,
  #topUtilityRow .topSettingCell{
    width:100% !important;
  }
  #topUtilityRow .topSettingSoundCell,
  #topUtilityRow .topSettingCell:has(.topSettingSendSelect),
  #topUtilityRow .topSettingCell:has(#topThemeSelect){
    justify-content:space-between !important;
  }
  #topUtilityRow .topSettingSoundCell .topSettingInline{
    flex:1 1 auto !important;
    justify-content:flex-end !important;
  }
  #topUtilityRow .topSettingNameCell{
    flex-wrap:wrap !important;
  }
  #topUtilityRow .topNameControls{
    width:100% !important;
    flex:1 1 100% !important;
  }
  #topUtilityRow #topNameInput{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    flex:1 1 auto !important;
  }
  #topUtilityRow .topCurrentName{
    width:100% !important;
    max-width:100% !important;
    flex:1 1 100% !important;
  }
}

/* Very narrow screens: keep every label/control readable, never crush select text. */
@container rooom-settings (max-width: 310px){
  #topUtilityRow .topSettingSoundCell,
  #topUtilityRow .topSettingCell:has(.topSettingSendSelect),
  #topUtilityRow .topSettingCell:has(#topThemeSelect),
  #topUtilityRow .topSettingNameCell{
    align-items:stretch !important;
    flex-direction:column !important;
  }
  #topUtilityRow .topSettingSoundCell .topSettingInline{
    width:100% !important;
    justify-content:flex-start !important;
  }
  #topUtilityRow #topSendModeSelect,
  #topUtilityRow #topThemeSelect{
    width:100% !important;
  }
}

/* =========================================================
   2026-08-27 SETTINGS RESPONSIVE HOTFIX
   container query で #topUtilityRow 自身を切り替える方式を廃止。
   viewport幅で「広いPC -> 中間 -> 狭幅 -> 最小幅」を明示的に切り替える。
   ========================================================= */

/* 共通：既存container-queryのデフォルト2列指定をまず打ち消す */
#topUtilityRow.topSettingsPanel{
  display:grid !important;
  align-items:center !important;
  gap:5px !important;
  padding:5px !important;
  width:100% !important;
  max-width:none !important;
}

/* 名前欄は「入力 -> 変更 -> 現在名」を左から連続配置 */
#topUtilityRow .topSettingNameCell{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:5px !important;
  min-width:0 !important;
}
#topUtilityRow .topNameControls{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  min-width:0 !important;
}
#topUtilityRow #topNameInput{
  box-sizing:border-box !important;
}
#topUtilityRow #topNameSaveBtn{
  flex:0 0 auto !important;
}
#topUtilityRow .topCurrentName{
  margin:0 !important;
  flex:0 1 auto !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* ---------------------------------------------------------
   広いPC
   完成形を固定：通知 | 通知音 | 送信方法 | 背景色 | 名前変更+現在名
   --------------------------------------------------------- */
@media (min-width: 980px){
  #topUtilityRow.topSettingsPanel{
    grid-template-columns:max-content max-content max-content max-content minmax(0,1fr) !important;
    grid-template-areas:"notice sound send theme name" !important;
  }

  #topUtilityRow #pwaBanner.topCompactNotice{
    width:auto !important;
    min-width:0 !important;
    max-width:max-content !important;
  }

  #topUtilityRow .topSettingSoundCell,
  #topUtilityRow .topSettingCell:has(.topSettingSendSelect),
  #topUtilityRow .topSettingCell:has(#topThemeSelect){
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }

  #topUtilityRow .topSettingNameCell{
    flex-wrap:nowrap !important;
    overflow:hidden !important;
  }

  #topUtilityRow .topNameControls{
    flex:0 1 auto !important;
  }

  #topUtilityRow #topNameInput{
    width:20ch !important;
    min-width:14ch !important;
    max-width:20ch !important;
    flex:0 1 20ch !important;
  }

  #topUtilityRow .topCurrentName{
    max-width:22ch !important;
  }
}

/* ---------------------------------------------------------
   中間幅
   全体を2段へ切替。1個だけ孤立して落とさない。
   1段目：通知 | 通知音 | 送信方法
   2段目：背景色 | 名前変更+現在名
   --------------------------------------------------------- */
@media (min-width: 650px) and (max-width: 979px){
  #topUtilityRow.topSettingsPanel{
    grid-template-columns:max-content max-content minmax(0,1fr) !important;
    grid-template-areas:
      "notice sound send"
      "theme name name" !important;
  }

  #topUtilityRow #pwaBanner.topCompactNotice{
    width:auto !important;
    min-width:0 !important;
    max-width:max-content !important;
  }

  #topUtilityRow .topSettingNameCell{
    flex-wrap:nowrap !important;
    overflow:hidden !important;
  }

  #topUtilityRow .topNameControls{
    flex:0 1 auto !important;
  }

  #topUtilityRow #topNameInput{
    width:20ch !important;
    min-width:12ch !important;
    max-width:20ch !important;
    flex:0 1 20ch !important;
  }

  #topUtilityRow .topCurrentName{
    max-width:20ch !important;
  }
}

/* ---------------------------------------------------------
   狭めの端末
   1段目：通知 | 通知音
   2段目：送信方法 | 背景色
   3段目：名前変更+現在名
   --------------------------------------------------------- */
@media (min-width: 430px) and (max-width: 649px){
  #topUtilityRow.topSettingsPanel{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "notice sound"
      "send theme"
      "name name" !important;
  }

  #topUtilityRow #pwaBanner.topCompactNotice,
  #topUtilityRow .topSettingCell{
    width:100% !important;
    max-width:100% !important;
  }

  #topUtilityRow .topSettingNameCell{
    flex-wrap:nowrap !important;
    overflow:hidden !important;
  }

  #topUtilityRow .topNameControls{
    flex:1 1 auto !important;
  }

  #topUtilityRow #topNameInput{
    width:auto !important;
    min-width:10ch !important;
    max-width:none !important;
    flex:1 1 16ch !important;
  }

  #topUtilityRow .topCurrentName{
    max-width:18ch !important;
  }
}

/* ---------------------------------------------------------
   スマホ
   1段目：通知 | 通知音
   2段目：送信方法 | 背景色
   3段目：名前変更
   4段目：現在名
   --------------------------------------------------------- */
@media (min-width: 320px) and (max-width: 429px){
  #topUtilityRow.topSettingsPanel{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "notice sound"
      "send theme"
      "name name" !important;
  }

  #topUtilityRow #pwaBanner.topCompactNotice,
  #topUtilityRow .topSettingCell{
    width:100% !important;
    max-width:100% !important;
  }

  #topUtilityRow .topSettingNameCell{
    flex-wrap:wrap !important;
    row-gap:4px !important;
  }

  #topUtilityRow .topNameControls{
    width:100% !important;
    flex:1 1 100% !important;
  }

  #topUtilityRow #topNameInput{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    flex:1 1 auto !important;
  }

  #topUtilityRow .topCurrentName{
    width:100% !important;
    max-width:100% !important;
    flex:1 1 100% !important;
  }
}

/* ---------------------------------------------------------
   最小幅
   1項目1行。文字を潰さず縦積み。
   --------------------------------------------------------- */
@media (max-width: 319px){
  #topUtilityRow.topSettingsPanel{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:
      "notice"
      "sound"
      "send"
      "theme"
      "name" !important;
  }

  #topUtilityRow #pwaBanner.topCompactNotice,
  #topUtilityRow .topSettingCell{
    width:100% !important;
    max-width:100% !important;
  }

  #topUtilityRow .topSettingSoundCell,
  #topUtilityRow .topSettingCell:has(.topSettingSendSelect),
  #topUtilityRow .topSettingCell:has(#topThemeSelect){
    width:100% !important;
    justify-content:space-between !important;
  }

  #topUtilityRow .topSettingNameCell{
    width:100% !important;
    flex-wrap:wrap !important;
  }

  #topUtilityRow .topNameControls{
    width:100% !important;
    flex:1 1 100% !important;
  }

  #topUtilityRow #topNameInput{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    flex:1 1 auto !important;
  }

  #topUtilityRow .topCurrentName{
    width:100% !important;
    max-width:100% !important;
    flex:1 1 100% !important;
  }
}

/* =========================================================
   2026-08-27 TOP SETTINGS CLEAN VERTICAL STRUCTURE
   設定欄を旧横詰め構造から完全分離。
   1機能 = 1行を全画面幅の基本とし、各行内部だけレスポンシブ。
   ========================================================= */

/* 親：旧grid/flex/container-queryを無効化して単純な縦スタックに固定 */
#topUtilityRow.topSettingsPanel{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 0 7px !important;
  padding:6px !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.68) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.035) !important;
  overflow:visible !important;
  container-type:normal !important;
}
#topUtilityRow.topSettingsPanel.is-collapsed{display:none !important;}

#topUtilityRow .topSettingsStack{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:5px !important;
  width:100% !important;
  min-width:0 !important;
}

/* 1機能 = 1行 */
#topUtilityRow .topSettingsRow{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:40px !important;
  margin:0 !important;
  padding:5px 8px !important;
  border:1px solid rgba(0,0,0,.07) !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.76) !important;
  box-shadow:none !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

/* 左ラベルを揃える */
#topUtilityRow .topSettingsRowLabel,
#topUtilityRow .topSettingsRowLabelWrap{
  flex:0 0 74px !important;
  width:74px !important;
  min-width:74px !important;
  max-width:74px !important;
  margin:0 !important;
  padding:0 !important;
  font-size:10px !important;
  line-height:1.2 !important;
  color:#666 !important;
  white-space:nowrap !important;
}

/* 右操作エリア */
#topUtilityRow .topSettingsRowControls{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:5px !important;
  flex:0 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

#topUtilityRow .topSettingsRow .topSettingSelect,
#topUtilityRow .topSettingsRow .topSettingInput,
#topUtilityRow .topSettingsRow .topSettingButton{
  height:28px !important;
  min-height:28px !important;
  margin:0 !important;
  font-size:10px !important;
  line-height:1 !important;
  box-sizing:border-box !important;
}

/* 通知：旧pwaBannerの横幅・中央寄せ・丸枠を完全解除 */
#topUtilityRow #pwaBanner.topSettingsNotifyRow{
  display:flex !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:40px !important;
  margin:0 !important;
  padding:5px 8px !important;
  gap:10px !important;
  justify-content:flex-start !important;
  border:1px solid rgba(0,0,0,.07) !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.76) !important;
  box-shadow:none !important;
}
#topUtilityRow #pwaBanner .topRefreshNoticeMain{
  flex:0 0 74px !important;
  width:74px !important;
  min-width:74px !important;
  max-width:74px !important;
}
#topUtilityRow #pwaBanner .topRefreshNoticeTitle{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  font-size:10px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  color:#666 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
#topUtilityRow #pwaBanner .topRefreshNoticeText,
#topUtilityRow #pwaBanner .pwaStepBadge{display:none !important;}
#topUtilityRow #pwaBanner .topRefreshNoticeActions{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}
#topUtilityRow #pwaInstallBtn.rooomNotifySwitch{
  flex:0 0 auto !important;
  margin:0 !important;
}

/* 通知音 */
#topUtilityRow .topSettingsSoundControls{
  flex-wrap:nowrap !important;
}
#topUtilityRow #topSoundTypeSelect{min-width:82px !important;}
#topUtilityRow #topSoundEnabledSelect{min-width:54px !important;}

/* 送信・背景 */
#topUtilityRow #topSendModeSelect{min-width:140px !important;}
#topUtilityRow #topThemeSelect{min-width:92px !important;}

/* 名前変更：20文字を優先。現在名とは別行なので衝突しない */
#topUtilityRow .topSettingsNameRow .topNameControls{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:520px !important;
}
#topUtilityRow #topNameInput{
  width:20ch !important;
  min-width:14ch !important;
  max-width:20ch !important;
  flex:0 1 20ch !important;
}
#topUtilityRow #topOfficialNameSuffix{
  width:8ch !important;
  min-width:6ch !important;
  max-width:8ch !important;
}
#topUtilityRow #topNameSaveBtn{flex:0 0 auto !important;}

/* 現在名：最大20文字表示用に独立行 */
#topUtilityRow .topSettingsCurrentNameRow .topSettingsRowControls{
  flex:1 1 auto !important;
  min-width:0 !important;
}
#topUtilityRow .topSettingsCurrentNameRow .topCurrentName{
  display:inline-flex !important;
  align-items:center !important;
  gap:3px !important;
  min-width:0 !important;
  max-width:24ch !important;
  margin:0 !important;
  font-size:10px !important;
  color:#666 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#topUtilityRow .topSettingsCurrentNameRow .topCurrentName b{
  color:#222 !important;
  font-weight:800 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* 互換用言語selectは完全非表示 */
#topUtilityRow .topSettingsCompatLang,
#topUtilityRow #topSettingLangLabel[hidden]{display:none !important;}

/* スマホ：行は縦のまま。行内部だけ必要時に折り返す */
@media (max-width:520px){
  #topUtilityRow.topSettingsPanel{padding:5px !important;}
  #topUtilityRow .topSettingsStack{gap:4px !important;}
  #topUtilityRow .topSettingsRow,
  #topUtilityRow #pwaBanner.topSettingsNotifyRow{
    gap:7px !important;
    padding:5px 6px !important;
  }
  #topUtilityRow .topSettingsRowLabel,
  #topUtilityRow .topSettingsRowLabelWrap,
  #topUtilityRow #pwaBanner .topRefreshNoticeMain{
    flex-basis:62px !important;
    width:62px !important;
    min-width:62px !important;
    max-width:62px !important;
  }
  #topUtilityRow .topSettingsSoundControls,
  #topUtilityRow .topSettingsNameRow .topNameControls{
    flex-wrap:wrap !important;
  }
  #topUtilityRow #topNameInput{
    width:auto !important;
    min-width:10ch !important;
    max-width:none !important;
    flex:1 1 14ch !important;
  }
}

/* 最小幅：ラベルも上、操作を下。1機能1行は維持 */
@media (max-width:330px){
  #topUtilityRow .topSettingsRow,
  #topUtilityRow #pwaBanner.topSettingsNotifyRow{
    flex-wrap:wrap !important;
    align-items:flex-start !important;
  }
  #topUtilityRow .topSettingsRowLabel,
  #topUtilityRow .topSettingsRowLabelWrap,
  #topUtilityRow #pwaBanner .topRefreshNoticeMain{
    flex:1 1 100% !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
  #topUtilityRow .topSettingsRowControls,
  #topUtilityRow #pwaBanner .topRefreshNoticeActions{
    flex:1 1 100% !important;
    width:100% !important;
  }
  #topUtilityRow #topSendModeSelect,
  #topUtilityRow #topThemeSelect{max-width:100% !important;}
}



/* ===== 2026-08-27 初回通知案内モーダル ===== */
html.rooom-first-push-open,html.rooom-first-push-open body{overflow:hidden!important;}
.rooomFirstPushGate{display:none;position:fixed;inset:0;z-index:2147483645;align-items:center;justify-content:center;padding:20px;background:rgba(7,11,20,.58);box-sizing:border-box;}
.rooomFirstPushGate.show{display:flex;}
.rooomFirstPushModal{width:min(560px,100%);max-height:min(760px,calc(100vh - 40px));overflow:auto;box-sizing:border-box;padding:24px;border-radius:18px;background:#fff;color:#171717;box-shadow:0 22px 60px rgba(0,0,0,.22);}
.rooomFirstPushTitle{margin:0 0 18px;font-size:21px;line-height:1.35;font-weight:900;}
.rooomFirstPushBody{font-size:14px;line-height:1.8;color:#333;}
.rooomFirstPushBody p{margin:0 0 12px;}
.rooomFirstPushBody p:last-child{margin-bottom:0;}
.rooomFirstPushBody strong{font-weight:850;color:#111;}
.rooomFirstPushActions{display:flex;align-items:center;gap:10px;margin-top:22px;}
.rooomFirstPushOnBtn,.rooomFirstPushLaterBtn{min-height:42px;border-radius:12px;padding:9px 15px;font:inherit;font-weight:800;cursor:pointer;}
.rooomFirstPushOnBtn{border:1px solid #111;background:#111;color:#fff;}
.rooomFirstPushLaterBtn{border:1px solid rgba(0,0,0,.16);background:#fff;color:#333;}
.rooomFirstPushOnBtn:disabled{opacity:.38;cursor:not-allowed;}
.rooomFirstPushGate.is-busy .rooomFirstPushOnBtn,.rooomFirstPushGate.is-busy .rooomFirstPushLaterBtn{pointer-events:none;}
@media(max-width:520px){.rooomFirstPushGate{padding:14px}.rooomFirstPushModal{max-height:calc(100vh - 28px);padding:20px 17px;border-radius:16px}.rooomFirstPushTitle{font-size:19px;margin-bottom:15px}.rooomFirstPushBody{font-size:13px;line-height:1.75}.rooomFirstPushActions{flex-direction:column;align-items:stretch}.rooomFirstPushOnBtn,.rooomFirstPushLaterBtn{width:100%}}

/* =========================================================
   2026-08-27 常設「＋ 部屋を作る」
   検索バー横から外し、画面左下に小さく固定表示する。
   createRoomBtn のIDは維持し、既存JS/クールタイム処理をそのまま使う。
   ========================================================= */
.rooomFloatingCreateBtn{
  position:fixed !important;
  left:max(12px, var(--rooom-safe-left)) !important;
  bottom:max(14px, calc(var(--rooom-safe-bottom) + 10px)) !important;
  z-index:25000 !important;
  width:auto !important;
  min-width:0 !important;
  height:38px !important;
  min-height:38px !important;
  margin:0 !important;
  padding:0 13px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(255,255,255,.20) !important;
  border-radius:999px !important;
  background:#141414 !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-shadow:0 7px 20px rgba(0,0,0,.20) !important;
  cursor:pointer !important;
  opacity:.94 !important;
}
.rooomFloatingCreateBtn:hover{
  transform:translateY(-1px);
  opacity:1 !important;
}
.rooomFloatingCreateBtn:active{
  transform:translateY(0) scale(.97);
}
.rooomFloatingCreateBtn:disabled{
  opacity:.42 !important;
  cursor:not-allowed !important;
  transform:none !important;
}

/* 旧レイアウトで createRoomBtn に指定していた grid-area / grid-column 等を完全解除 */
.topPrimaryControls #createRoomBtn,
.userRoomsBar #createRoomBtn{
  position:fixed !important;
  grid-area:auto !important;
  grid-column:auto !important;
  grid-row:auto !important;
}

@media (max-width:640px){
  .rooomFloatingCreateBtn{
    left:max(8px, var(--rooom-safe-left)) !important;
    bottom:max(10px, calc(var(--rooom-safe-bottom) + 8px)) !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 11px !important;
    font-size:12px !important;
    box-shadow:0 6px 18px rgba(0,0,0,.18) !important;
  }
}

/* =========================================================
   2026-08-27 QUICK ACTION DOCK
   「＋ 部屋を作る」と設定を画面下に常設。
   - 上部検索列から設定を撤去
   - 作成ボタンは白地・黒枠・黒文字
   - 左右位置はJSの保存設定に追従
   - 設定パネルも現在のドック側に固定表示
   - 通常モーダル(z-index:10000)より必ず下
   - 最下部カードと被らないようページ下余白を確保
   ========================================================= */

/* 上部はカテゴリ + 検索だけ */
.topPrimaryControls{
  grid-template-columns:auto minmax(0,1fr) !important;
}
.topPrimaryControls .topCategoryBtn{
  grid-column:1 !important;
}
.topPrimaryControls .topRoomSearchWrap{
  grid-column:2 !important;
}

/* 最下部の部屋カードを固定ボタンの下に隠さない */
.wrap{
  padding-bottom:104px !important;
}

.rooomFloatingActionDock{
  position:fixed !important;
  left:max(12px, var(--rooom-safe-left)) !important;
  right:auto !important;
  bottom:max(14px, calc(var(--rooom-safe-bottom) + 10px)) !important;
  z-index:8000 !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:6px !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  pointer-events:auto !important;
}

html.rooom-create-dock-right .rooomFloatingActionDock{
  left:auto !important;
  right:max(12px, var(--rooom-safe-right)) !important;
  flex-direction:row-reverse !important;
}

/* 作成ボタン：小さめ、白ベース・黒枠・黒文字 */
.rooomFloatingActionDock .rooomFloatingCreateBtn{
  position:static !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:auto !important;
  width:auto !important;
  min-width:0 !important;
  height:38px !important;
  min-height:38px !important;
  margin:0 !important;
  padding:0 13px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #111 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#111 !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-shadow:0 6px 18px rgba(0,0,0,.13) !important;
  cursor:pointer !important;
  opacity:1 !important;
}
.rooomFloatingActionDock .rooomFloatingCreateBtn:hover{
  background:#f7f7f7 !important;
  transform:translateY(-1px) !important;
}
.rooomFloatingActionDock .rooomFloatingCreateBtn:active{
  transform:scale(.97) !important;
}
.rooomFloatingActionDock .rooomFloatingCreateBtn:disabled{
  opacity:.42 !important;
  cursor:not-allowed !important;
  transform:none !important;
}

/* 設定ボタン：作成ボタンの隣に小さく常設 */
.rooomFloatingActionDock .rooomFloatingSettingsBtn{
  position:static !important;
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #111 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#111 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.13) !important;
  font-size:17px !important;
}
.rooomFloatingActionDock .rooomFloatingSettingsBtn[aria-expanded="true"]{
  background:#111 !important;
  color:#fff !important;
}

/* 設定はドックのすぐ上に固定展開。下まで見ている時でもその場で使える。 */
#topUtilityRow.topSettingsPanel{
  position:fixed !important;
  left:max(12px, var(--rooom-safe-left)) !important;
  right:auto !important;
  bottom:calc(62px + var(--rooom-safe-bottom)) !important;
  z-index:8500 !important;
  width:min(420px, calc(100vw - 24px)) !important;
  max-width:min(420px, calc(100vw - 24px)) !important;
  max-height:calc(100dvh - 86px - var(--rooom-safe-bottom)) !important;
  margin:0 !important;
  padding:7px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  background:rgba(255,255,255,.98) !important;
  border:1px solid rgba(0,0,0,.12) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.18) !important;
}
html.rooom-create-dock-right #topUtilityRow.topSettingsPanel{
  left:auto !important;
  right:max(12px, var(--rooom-safe-right)) !important;
}
#topUtilityRow.topSettingsPanel.is-collapsed{
  display:none !important;
}

/* 追加設定「部屋作成ボタン位置」だけラベル幅を少し広げる */
#topUtilityRow .topSettingsCreateButtonPositionRow .topSettingsRowLabel{
  flex:0 0 104px !important;
  width:104px !important;
  min-width:104px !important;
  max-width:104px !important;
}
#topUtilityRow #topCreateButtonPositionSelect{
  min-width:72px !important;
}

@media (max-width:640px){
  .wrap{
    padding-bottom:96px !important;
  }
  .rooomFloatingActionDock{
    left:max(8px, var(--rooom-safe-left)) !important;
    bottom:max(10px, calc(var(--rooom-safe-bottom) + 8px)) !important;
    gap:5px !important;
  }
  html.rooom-create-dock-right .rooomFloatingActionDock{
    left:auto !important;
    right:max(8px, var(--rooom-safe-right)) !important;
  }
  .rooomFloatingActionDock .rooomFloatingCreateBtn{
    height:36px !important;
    min-height:36px !important;
    padding:0 11px !important;
    font-size:12px !important;
  }
  .rooomFloatingActionDock .rooomFloatingSettingsBtn{
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    font-size:16px !important;
  }
  #topUtilityRow.topSettingsPanel{
    left:max(8px, var(--rooom-safe-left)) !important;
    bottom:calc(56px + var(--rooom-safe-bottom)) !important;
    width:min(390px, calc(100vw - 16px)) !important;
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 76px - var(--rooom-safe-bottom)) !important;
  }
  html.rooom-create-dock-right #topUtilityRow.topSettingsPanel{
    left:auto !important;
    right:max(8px, var(--rooom-safe-right)) !important;
  }
  #topUtilityRow .topSettingsCreateButtonPositionRow .topSettingsRowLabel{
    flex-basis:96px !important;
    width:96px !important;
    min-width:96px !important;
    max-width:96px !important;
  }
}

@media (max-width:330px){
  #topUtilityRow .topSettingsCreateButtonPositionRow .topSettingsRowLabel{
    flex:1 1 100% !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
}



/* ===== 2026-08-27 設定項目整理 ===== */
/* 部屋通知を他項目と同じ書式へ。トグルは少し小さくする。 */
#topUtilityRow #pwaBanner .topRefreshNoticeTitle{font-weight:400 !important;}
#topUtilityRow #pwaInstallBtn.rooomNotifySwitch{
  transform:scale(.88) !important;
  transform-origin:left center !important;
  margin-right:-6px !important;
}
/* 現在名も他項目と同じ枠内表示に統一 */
#topUtilityRow .topSettingsCurrentNameRow{
  border:1px solid rgba(0,0,0,.07) !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.76) !important;
}
/* 部屋作成ボタンの短いラベルに合わせる */
#topUtilityRow .topSettingsCreateButtonPositionRow .topSettingsRowLabel{
  flex:0 0 74px !important;width:74px !important;min-width:74px !important;max-width:74px !important;
}
@media (max-width:520px){
  #topUtilityRow .topSettingsCreateButtonPositionRow .topSettingsRowLabel{
    flex-basis:62px !important;width:62px !important;min-width:62px !important;max-width:62px !important;
  }
}
@media (max-width:330px){
  #topUtilityRow .topSettingsCreateButtonPositionRow .topSettingsRowLabel{
    flex:1 1 100% !important;width:100% !important;min-width:0 !important;max-width:none !important;
  }
}


/* ===== 2026-08-27 設定表示統一 2 ===== */
/* 部屋通知：他の設定行と同じ枠・高さ・ラベル位置に揃える。通知ロジックは変更しない。 */
#topUtilityRow #pwaBanner.topSettingsNotifyRow{
  min-height:40px !important;
  padding:5px 8px !important;
  gap:5px !important;
  border:1px solid rgba(0,0,0,.07) !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.76) !important;
  box-shadow:none !important;
}
#topUtilityRow #pwaBanner .topRefreshNoticeMain{
  flex:0 0 74px !important;
  width:74px !important;
  min-width:74px !important;
  max-width:74px !important;
}
#topUtilityRow #pwaBanner .topRefreshNoticeTitle{
  font-size:10px !important;
  font-weight:400 !important;
  line-height:1.2 !important;
  color:#666 !important;
}
#topUtilityRow #pwaInstallBtn.rooomNotifySwitch{
  transform:scale(.82) !important;
  transform-origin:left center !important;
  margin-left:0 !important;
  margin-right:-8px !important;
}


/* 現在名：値にも枠を付け、最大20文字を省略せず表示する。 */
#topUtilityRow .topSettingsCurrentNameRow .topSettingsRowControls{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:visible !important;
}
#topUtilityRow .topSettingsCurrentNameRow .topCurrentName{
  display:inline-flex !important;
  align-items:center !important;
  width:22ch !important;
  min-width:22ch !important;
  max-width:22ch !important;
  height:28px !important;
  min-height:28px !important;
  padding:0 8px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  border:1px solid rgba(0,0,0,.12) !important;
  border-radius:7px !important;
  background:#fff !important;
  color:#222 !important;
  font-size:10px !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
#topUtilityRow .topSettingsCurrentNameRow .topCurrentName b{
  display:block !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  font-weight:400 !important;
}
@media (max-width:360px){
  #topUtilityRow .topSettingsCurrentNameRow .topCurrentName{
    width:20ch !important;
    min-width:20ch !important;
    max-width:20ch !important;
    font-size:9.5px !important;
    padding:0 6px !important;
  }
}


/* ===== 2026-08-27 部屋通知・現在名 最終固定修正 =====
   通知ロジックは触らず、表示構造だけ他の設定行に統一する。 */
#topUtilityRow #pwaBanner.topSettingsNotifyRow{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:40px !important;
  height:auto !important;
  margin:0 !important;
  padding:5px 6px !important;
  gap:7px !important;
  box-sizing:border-box !important;
  border:1px solid rgba(0,0,0,.07) !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.76) !important;
  box-shadow:none !important;
}
#topUtilityRow #pwaBanner .topSettingsNotifyFixedLabel{
  flex:0 0 62px !important;
  width:62px !important;
  min-width:62px !important;
  max-width:62px !important;
  margin:0 !important;
  padding:0 !important;
  font-size:10px !important;
  font-weight:400 !important;
  line-height:1.2 !important;
  color:#666 !important;
  white-space:nowrap !important;
}
#topUtilityRow #pwaBanner .topRefreshNoticeActions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}
#topUtilityRow #pwaBanner .topSettingsNotifyCompat{
  display:none !important;
}
#topUtilityRow #pwaInstallBtn.rooomNotifySwitch{
  transform:none !important;
  width:46px !important;
  min-width:46px !important;
  max-width:46px !important;
  height:26px !important;
  min-height:26px !important;
  margin:0 !important;
}

/* 現在名の値枠。20文字の全角名でも省略しない。 */
#topUtilityRow .topSettingsCurrentNameRow{
  overflow:visible !important;
}
#topUtilityRow .topSettingsCurrentNameRow .topSettingsRowControls{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:visible !important;
}
#topUtilityRow .topSettingsCurrentNameRow .topCurrentName{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:calc(20em + 16px) !important;
  min-width:calc(20em + 16px) !important;
  max-width:calc(20em + 16px) !important;
  height:28px !important;
  min-height:28px !important;
  margin:0 !important;
  padding:0 8px !important;
  box-sizing:border-box !important;
  border:1px solid rgba(0,0,0,.12) !important;
  border-radius:7px !important;
  background:#fff !important;
  color:#222 !important;
  font-size:10px !important;
  font-weight:400 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
#topUtilityRow .topSettingsCurrentNameRow .topCurrentName #topCurrentName{
  display:block !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  color:#222 !important;
  font-weight:400 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
@media (max-width:330px){
  #topUtilityRow .topSettingsCurrentNameRow{
    align-items:flex-start !important;
    flex-wrap:wrap !important;
  }
  #topUtilityRow .topSettingsCurrentNameRow .topSettingsRowControls{
    flex:1 1 100% !important;
    width:100% !important;
  }
  #topUtilityRow .topSettingsCurrentNameRow .topCurrentName{
    width:calc(20em + 14px) !important;
    min-width:calc(20em + 14px) !important;
    max-width:100% !important;
    padding:0 7px !important;
  }
}


/* ===== 2026-08-27 固定3ボタン + 通知select + cooldown移動 ===== */
/* 保存済み左右位置がJSで確定するまでドックを描画しない（右設定時の左→右チラつき防止） */
.rooomFloatingActionDock.rooomDockPending{visibility:hidden !important;}

/* 3操作は同じ外形サイズ */
.rooomFloatingActionDock{align-items:flex-end !important;}
.rooomFloatingActionDock .rooomDockSlot,
.rooomFloatingActionDock .rooomDockCreateWrap{
  width:118px !important;
  min-width:118px !important;
  max-width:118px !important;
  box-sizing:border-box !important;
}
.rooomFloatingActionDock .rooomDockSlot{
  height:40px !important;
  min-height:40px !important;
  border:1px solid #111 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#111 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.13) !important;
}
.rooomFloatingActionDock .rooomFloatingSettingsBtn,
.rooomFloatingActionDock .rooomFloatingCreateBtn{
  width:118px !important; min-width:118px !important; max-width:118px !important;
  height:40px !important; min-height:40px !important; padding:0 8px !important;
  font-size:12px !important; font-weight:700 !important;
}
.rooomFloatingActionDock .rooomFloatingSettingsBtn{font-size:12px !important;}
.rooomFloatingActionDock .rooomDockViewSlot{padding:3px !important; display:flex !important; align-items:center !important;}
.rooomFloatingActionDock .rooomFloatingViewToggle{
  width:100% !important; height:32px !important; margin:0 !important; display:flex !important;
  border:0 !important; background:transparent !important; box-shadow:none !important;
}
.rooomFloatingActionDock .rooomFloatingViewToggle .viewBtn{flex:1 1 50% !important; min-width:0 !important; height:32px !important;}

/* クールタイムは作成ボタン直上。元の見出し位置からDOMごと移動済み */
.rooomDockCreateWrap{position:relative !important;}
.rooomDockCooldown{
  position:absolute !important; left:50% !important; bottom:calc(100% + 5px) !important; transform:translateX(-50%) !important;
  width:max-content !important; max-width:180px !important; margin:0 !important; padding:3px 7px !important;
  border-radius:7px !important; background:rgba(255,255,255,.96) !important; color:#555 !important;
  font-size:11px !important; line-height:1.25 !important; white-space:nowrap !important; box-shadow:0 3px 10px rgba(0,0,0,.10) !important;
}
.rooomDockCooldown:empty{display:none !important;}

/* 部屋通知は独自トグルを使わず、通知音と同じselect外観 */
#topUtilityRow #topNotifyEnabledSelect{min-width:68px !important;}
#topUtilityRow #pwaBanner.topSettingsNotifyRow #pwaInstallBtn.rooomNotifySwitch{display:none !important;}

/* 3個が横に入らない狭幅だけ均等縮小。高さは統一維持 */
@media (max-width:390px){
  .rooomFloatingActionDock{left:max(6px, var(--rooom-safe-left)) !important; right:auto !important; gap:4px !important;}
  html.rooom-create-dock-right .rooomFloatingActionDock{left:auto !important; right:max(6px, var(--rooom-safe-right)) !important;}
  .rooomFloatingActionDock .rooomDockSlot, .rooomFloatingActionDock .rooomDockCreateWrap,
  .rooomFloatingActionDock .rooomFloatingSettingsBtn, .rooomFloatingActionDock .rooomFloatingCreateBtn{
    width:calc((100vw - 20px) / 3) !important; min-width:0 !important; max-width:none !important;
  }
}


/* ===== 2026-08-27 FIX: dock order / cooldown inside / settings panel cleanup ===== */
/* 設定パネルの大外枠は廃止。各設定行の枠だけを使う。 */
#topUtilityRow.topSettingsPanel{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
#topUtilityRow .topSettingsStack{
  width:100% !important;
  padding:0 !important;
  gap:5px !important;
  background:transparent !important;
}
#topUtilityRow .topSettingsRow,
#topUtilityRow #pwaBanner.topSettingsNotifyRow{
  width:100% !important;
  max-width:none !important;
  min-height:40px !important;
  box-sizing:border-box !important;
  margin:0 !important;
  border:1px solid rgba(0,0,0,.07) !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.96) !important;
}

/* 部屋通知は通常selectだけを見せる。旧独自トグルは互換用DOMとして常時非表示。 */
#topUtilityRow #topNotifyEnabledSelect{
  min-width:68px !important;
}
#topUtilityRow #pwaInstallBtn.rooomNotifySwitch{
  display:none !important;
}

/* ドック：位置が左なら 作成→設定→表示、右なら 表示→設定→作成。 */
.rooomFloatingActionDock{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:6px !important;
}
html.rooom-create-dock-right .rooomFloatingActionDock{
  flex-direction:row-reverse !important;
}

/* 3つは高さを統一。作成だけ残り時間が入るよう横幅を広くする。 */
.rooomFloatingActionDock .rooomDockSlot{
  height:40px !important;
  min-height:40px !important;
  box-sizing:border-box !important;
  border:1px solid #111 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#111 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.13) !important;
}
.rooomFloatingActionDock .rooomDockCreateSlot{
  width:154px !important;
  min-width:154px !important;
  max-width:154px !important;
  padding:0 10px !important;
  font-size:11.5px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.rooomFloatingActionDock .rooomFloatingSettingsBtn{
  width:48px !important;
  min-width:48px !important;
  max-width:48px !important;
  padding:0 !important;
  font-size:18px !important;
  line-height:1 !important;
}
.rooomFloatingActionDock .rooomDockViewSlot{
  width:82px !important;
  min-width:82px !important;
  max-width:82px !important;
  padding:3px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
}
.rooomFloatingActionDock .rooomDockViewSlot:active{
  transform:scale(.97) !important;
}
/* 表示切替は枠のどこを押しても切り替わる。内部2ボタンは状態表示専用。 */
.rooomFloatingActionDock .rooomFloatingViewToggle{
  width:100% !important;
  height:32px !important;
  margin:0 !important;
  pointer-events:none !important;
}
.rooomFloatingActionDock .rooomFloatingViewToggle .viewBtn{
  pointer-events:none !important;
  height:32px !important;
}

/* クールタイム文字は外には出さない。 */
.rooomDockCooldown,
#createCooldownText{
  display:none !important;
}

/* disabledでも文言を読める程度の濃さを維持。 */
.rooomFloatingActionDock .rooomFloatingCreateBtn:disabled{
  opacity:.58 !important;
  cursor:not-allowed !important;
}

@media (max-width:390px){
  .rooomFloatingActionDock{gap:4px !important;}
  .rooomFloatingActionDock .rooomDockCreateSlot{
    width:146px !important;
    min-width:146px !important;
    max-width:146px !important;
    font-size:10.5px !important;
  }
  .rooomFloatingActionDock .rooomFloatingSettingsBtn{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
  }
  .rooomFloatingActionDock .rooomDockViewSlot{
    width:76px !important;
    min-width:76px !important;
    max-width:76px !important;
  }
}


/* ===== 2026-08-27 設定外枠復活 + 表示切替1ボタン ===== */
/* 設定は各行だけでなく、全体をひとつの白い外枠でまとめる。 */
#topUtilityRow.topSettingsPanel{
  background:rgba(255,255,255,.985) !important;
  border:1px solid rgba(0,0,0,.12) !important;
  border-radius:14px !important;
  box-shadow:0 16px 42px rgba(0,0,0,.18) !important;
  padding:7px !important;
}
#topUtilityRow .topSettingsStack{
  width:100% !important;
  padding:0 !important;
  gap:5px !important;
  background:transparent !important;
}

/* 表示切替は2択を並べず、正方形1ボタン。押すたびカード/リストを切替。 */
.rooomFloatingActionDock .rooomDockViewSlot{
  width:48px !important;
  min-width:48px !important;
  max-width:48px !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font:inherit !important;
  cursor:pointer !important;
}
.rooomFloatingActionDock .rooomDockViewIcon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  font-size:19px !important;
  line-height:1 !important;
  font-weight:700 !important;
  color:#111 !important;
  pointer-events:none !important;
}
.rooomFloatingActionDock .rooomDockViewCompat{
  display:none !important;
}
.rooomFloatingActionDock .rooomDockViewSlot:active{
  transform:scale(.97) !important;
}

@media (max-width:390px){
  .rooomFloatingActionDock .rooomDockViewSlot{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
  }
  .rooomFloatingActionDock .rooomDockViewIcon{
    font-size:18px !important;
  }
}


/* ===== 2026-08-27 部屋通知行を他設定行と完全同幅に固定 ===== */
#topUtilityRow .topSettingsStack > #pwaBanner.topRefreshNotice.topCompactNotice.topSettingsRow.topSettingsNotifyRow{
  align-self:stretch !important;
  flex:1 1 100% !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
#topUtilityRow #pwaBanner.topSettingsNotifyRow{
  border-radius:9px !important;
}


/* ===== 2026-08-27 設定操作ワンタップ化 / 名前20文字 / ダークテーマ ===== */
#topUtilityRow .topTapToggle{
  min-width:62px !important;
  height:32px !important;
  padding:0 12px !important;
  border:1px solid rgba(0,0,0,.12) !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#111 !important;
  font-size:12px !important;
  font-weight:500 !important;
  cursor:pointer !important;
}
#topUtilityRow .topTapToggle:active{transform:scale(.97) !important;}
#topUtilityRow .topTapToggle[aria-pressed="true"]{font-weight:700 !important;}

/* 名前入力は確定アイコン分だけ残して最大限広く使う。 */
#topUtilityRow .topSettingsNameRow{flex-wrap:wrap !important;}
#topUtilityRow .topSettingsNameRow .topNameControls{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:5px !important;
}
#topUtilityRow #topNameInput{
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
}
#topUtilityRow #topNameSaveBtn.topNameSaveIconBtn{
  flex:0 0 34px !important;
  width:34px !important;
  min-width:34px !important;
  height:32px !important;
  padding:0 !important;
  font-size:19px !important;
  line-height:1 !important;
}
#topUtilityRow .topNameRemaining{
  flex:0 0 100% !important;
  width:100% !important;
  margin:2px 0 0 70px !important;
  color:#777 !important;
  font-size:10px !important;
  line-height:1.2 !important;
}

/* カード表示は1枚を表す四角1個。 */
.rooomFloatingActionDock .rooomDockViewIcon{font-family:Arial,sans-serif !important;}

/* ダークテーマ：画像自体は反転せず、UI面だけ暗色化。 */
html.rooom-dark-theme{--bg:#171717;--text:#f2f2f2;--muted:#b6b6b6;--line:rgba(255,255,255,.13);}
html.rooom-dark-theme,
html.rooom-dark-theme body{background:#171717 !important;color:#f2f2f2 !important;}
html.rooom-dark-theme .wrap,
html.rooom-dark-theme .topRefreshHeader,
html.rooom-dark-theme .topRefreshBrand,
html.rooom-dark-theme .topbar,
html.rooom-dark-theme .roomSectionBody{color:#f2f2f2 !important;}
html.rooom-dark-theme #topUtilityRow.topSettingsPanel{
  background:rgba(28,28,28,.985) !important;
  border-color:rgba(255,255,255,.16) !important;
}
html.rooom-dark-theme #topUtilityRow .topSettingsRow{
  background:#232323 !important;
  border-color:rgba(255,255,255,.12) !important;
  color:#f2f2f2 !important;
}
html.rooom-dark-theme #topUtilityRow .topSettingsRowLabel,
html.rooom-dark-theme #topUtilityRow .topCurrentName,
html.rooom-dark-theme #topUtilityRow .topNameRemaining{color:#e9e9e9 !important;}
html.rooom-dark-theme #topUtilityRow select,
html.rooom-dark-theme #topUtilityRow input,
html.rooom-dark-theme #topUtilityRow button{
  background:#2d2d2d !important;
  color:#f5f5f5 !important;
  border-color:rgba(255,255,255,.18) !important;
}
html.rooom-dark-theme .topPrimaryControls input,
html.rooom-dark-theme .topPrimaryControls button,
html.rooom-dark-theme .rooomFloatingActionDock .rooomDockSlot{
  background:#252525 !important;
  color:#f4f4f4 !important;
  border-color:rgba(255,255,255,.28) !important;
}
html.rooom-dark-theme .rooomFloatingActionDock .rooomFloatingSettingsBtn[aria-expanded="true"]{
  background:#f2f2f2 !important;
  color:#111 !important;
}
html.rooom-dark-theme .loading,
html.rooom-dark-theme .resultMeta,
html.rooom-dark-theme .entryRoomCountText,
html.rooom-dark-theme #archiveRoomCountText{color:#c8c8c8 !important;}


/* ===== 2026-08-27 ダーク統一 / 2択ボタン統一 / 送信方法ワンタップ 最終上書き ===== */
/* ON/OFF は共通サイズ。 */
#topUtilityRow #topNotifyEnabledSelect,
#topUtilityRow #topSoundEnabledSelect,
#topUtilityRow #topHelpEnabledSelect{
  width:62px !important;
  min-width:62px !important;
  max-width:62px !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 8px !important;
}
/* 送信方法も2択ボタン。文字が入る分だけ横長。 */
#topUtilityRow #topSendModeSelect.topSettingSendToggle{
  width:auto !important;
  min-width:126px !important;
  max-width:none !important;
  height:32px !important;
  padding:0 12px !important;
  white-space:nowrap !important;
}

/* ダークはトップ画面全体の「面」を統一。画像そのものは加工しない。 */
html.rooom-dark-theme,
html.rooom-dark-theme body,
html.rooom-dark-theme #pageFade,
html.rooom-dark-theme .pageFade,
html.rooom-dark-theme .wrap{
  background:#171717 !important;
  color:#f2f2f2 !important;
}
html.rooom-dark-theme .topRefreshHeader,
html.rooom-dark-theme .topRefreshBrand,
html.rooom-dark-theme .topPrimaryControls,
html.rooom-dark-theme .topbar,
html.rooom-dark-theme .roomSectionBody,
html.rooom-dark-theme #entryRoomsSection,
html.rooom-dark-theme #userRoomsBody,
html.rooom-dark-theme #archiveRoomsBody{
  background:transparent !important;
  color:#f2f2f2 !important;
}
html.rooom-dark-theme .topRefreshLogo,
html.rooom-dark-theme h1,
html.rooom-dark-theme h2,
html.rooom-dark-theme .roomSectionToggleTitle,
html.rooom-dark-theme .topRefreshTagline,
html.rooom-dark-theme .roomModeLegend,
html.rooom-dark-theme .roomModeLegendItem{
  color:#f2f2f2 !important;
}
html.rooom-dark-theme .searchWrap,
html.rooom-dark-theme .searchInput,
html.rooom-dark-theme .topCategoryBtn,
html.rooom-dark-theme .topRefreshNavLink,
html.rooom-dark-theme .topRefreshMenuBtn{
  background:#252525 !important;
  color:#f4f4f4 !important;
  border-color:rgba(255,255,255,.18) !important;
}
html.rooom-dark-theme .searchInput::placeholder{color:#aaa !important;}

/* 文字カード / リストも暗色へ。画像カードの画像はそのまま。 */
html.rooom-dark-theme .card.cardPlainRoom,
html.rooom-dark-theme .listItem,
html.rooom-dark-theme .entryRoomItem,
html.rooom-dark-theme .archiveRoomItem{
  background:#242424 !important;
  color:#f2f2f2 !important;
  border-color:rgba(255,255,255,.12) !important;
}
html.rooom-dark-theme .card.cardPlainRoom .cardPlainMain,
html.rooom-dark-theme .listMain,
html.rooom-dark-theme .listName,
html.rooom-dark-theme .listDesc{
  color:#f2f2f2 !important;
}

/* 設定パネル：大外枠と全行を同じダーク系統に揃える。 */
html.rooom-dark-theme #topUtilityRow.topSettingsPanel{
  background:#1d1d1d !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.48) !important;
}
html.rooom-dark-theme #topUtilityRow .topSettingsRow,
html.rooom-dark-theme #topUtilityRow #pwaBanner.topSettingsNotifyRow{
  background:#252525 !important;
  color:#f2f2f2 !important;
  border-color:rgba(255,255,255,.13) !important;
}
html.rooom-dark-theme #topUtilityRow .topSettingsRowLabel,
html.rooom-dark-theme #topUtilityRow .topCurrentName,
html.rooom-dark-theme #topUtilityRow .topNameRemaining{
  color:#ededed !important;
}
html.rooom-dark-theme #topUtilityRow .topSettingSelect,
html.rooom-dark-theme #topUtilityRow .topSettingInput,
html.rooom-dark-theme #topUtilityRow .topSettingButton,
html.rooom-dark-theme #topUtilityRow .topTapToggle{
  background:#303030 !important;
  color:#f5f5f5 !important;
  border-color:rgba(255,255,255,.20) !important;
  box-shadow:none !important;
}
html.rooom-dark-theme #topUtilityRow .topSettingInput::placeholder{color:#aaa !important;}
html.rooom-dark-theme #topUtilityRow .topCurrentName{
  background:#303030 !important;
  border-color:rgba(255,255,255,.20) !important;
}

/* 下部3ボタンはすべて同じダーク面。開いている設定だけ色反転させない。 */
html.rooom-dark-theme .rooomFloatingActionDock .rooomDockSlot,
html.rooom-dark-theme .rooomFloatingActionDock .rooomDockViewSlot,
html.rooom-dark-theme .rooomFloatingActionDock .rooomFloatingSettingsBtn,
html.rooom-dark-theme .rooomFloatingActionDock .rooomFloatingCreateBtn{
  background:#292929 !important;
  color:#f4f4f4 !important;
  border-color:rgba(255,255,255,.34) !important;
  box-shadow:0 7px 20px rgba(0,0,0,.40) !important;
}
html.rooom-dark-theme .rooomFloatingActionDock .rooomFloatingSettingsBtn[aria-expanded="true"]{
  background:#3a3a3a !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.45) !important;
}
html.rooom-dark-theme .rooomFloatingActionDock .rooomFloatingCreateBtn:disabled{
  background:#242424 !important;
  color:#aaa !important;
  border-color:rgba(255,255,255,.18) !important;
}

/* 初回モーダルもダーク中は同じトーンにする。 */
html.rooom-dark-theme .rooomFirstPushModal,
html.rooom-dark-theme .rooomTermsConsentCard{
  background:#202020 !important;
  color:#f2f2f2 !important;
  border-color:rgba(255,255,255,.16) !important;
}
html.rooom-dark-theme .rooomFirstPushBody,
html.rooom-dark-theme .rooomFirstPushBody strong,
html.rooom-dark-theme .rooomTermsConsentCard a,
html.rooom-dark-theme .rooomTermsConsentCheckRow{
  color:#ededed !important;
}


/* =========================================================
   2026-08-27 SAFE UI DETAIL PATCH
   崩れ防止: 既存モーダル/設定構造は触らず、必要箇所だけ上書き。
   ========================================================= */

/* 意味アイコン列: 狭幅でも各項目が重ならないよう適切な間隔を確保 */
#roomModeLegend.roomModeLegend,
.topRoomModeLegend.roomModeLegend{
  gap:10px !important;
  row-gap:6px !important;
}
#roomModeLegend .roomModeLegendItem,
.topRoomModeLegend .roomModeLegendItem{
  gap:5px !important;
  margin-right:2px !important;
}
@media (max-width:640px){
  #roomModeLegend.roomModeLegend,
  .topRoomModeLegend.roomModeLegend{
    gap:8px !important;
    row-gap:5px !important;
  }
  #roomModeLegend .roomModeLegendItem,
  .topRoomModeLegend .roomModeLegendItem{
    gap:4px !important;
    margin-right:1px !important;
  }
}

/* ダーク: ハンバーガーを開いたメニュー本体も暗色で統一 */
html.rooom-dark-theme #topPolicyMenu.topPolicyMenu{
  background:#202020 !important;
  color:#f2f2f2 !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.48) !important;
}
html.rooom-dark-theme #topPolicyMenu .topPolicyMenuSection{
  border-color:rgba(255,255,255,.12) !important;
}
html.rooom-dark-theme #topPolicyMenu .topPolicyMenuTitle,
html.rooom-dark-theme #topPolicyMenu .topPolicyMenuLink{
  color:#ededed !important;
}
html.rooom-dark-theme #topPolicyMenu .topPolicyMenuLink:hover,
html.rooom-dark-theme #topPolicyMenu .topPolicyMenuLink:focus-visible{
  background:#303030 !important;
  color:#fff !important;
}
html.rooom-dark-theme #topPolicyMenu .topPolicyLangBtn{
  background:#2b2b2b !important;
  color:#f3f3f3 !important;
  border-color:rgba(255,255,255,.18) !important;
}
html.rooom-dark-theme #topPolicyMenu .topPolicyLangBtn.active{
  background:#f2f2f2 !important;
  color:#111 !important;
  border-color:#f2f2f2 !important;
}

/* ダーク: 表示切替(サムネ)アイコンは必ず白系で見える */
html.rooom-dark-theme #rooomDockViewSlot,
html.rooom-dark-theme #rooomDockViewIcon{
  color:#f5f5f5 !important;
}
html.rooom-dark-theme #rooomDockViewIcon{
  opacity:1 !important;
  filter:none !important;
}

/* ダーク: 現在名の値枠も他の入力欄と同じ暗色へ */
html.rooom-dark-theme #topUtilityRow .topSettingsCurrentNameRow .topSettingsRowControls,
html.rooom-dark-theme #topUtilityRow .topSettingsCurrentNameRow .topCurrentName,
html.rooom-dark-theme #topUtilityRow #topCurrentName{
  background:#303030 !important;
  color:#f5f5f5 !important;
  border-color:rgba(255,255,255,.20) !important;
}
html.rooom-dark-theme #topUtilityRow .topSettingsCurrentNameRow .topCurrentName{
  box-shadow:none !important;
}

/* =========================================================
   2026-08-27 DARK UI FINAL 4-POINT PATCH
   1) hamburger background transparent in dark
   2) card-view square icon visually larger
   3) create-room modal fully dark
   4) current-name value fully dark-theme compatible
   ========================================================= */

/* 1) ダーク時もハンバーガーはライト時と同じ「三本線だけ」。黒い四角背景を出さない。 */
html.rooom-dark-theme .topRefreshMenuBtn,
html.rooom-dark-theme #topPolicyMenuBtn.topRefreshMenuBtn{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#f5f5f5 !important;
}

/* 2) カード表示の□は、リストの三本線と同程度の視覚サイズへ。 */
.rooomFloatingActionDock #rooomDockViewIcon.rooomDockViewIcon{
  font-size:24px !important;
  font-weight:800 !important;
  line-height:1 !important;
  transform:scale(1.08) !important;
  transform-origin:center !important;
}
@media (max-width:390px){
  .rooomFloatingActionDock #rooomDockViewIcon.rooomDockViewIcon{
    font-size:22px !important;
  }
}
html.rooom-dark-theme .rooomFloatingActionDock #rooomDockViewIcon.rooomDockViewIcon{
  color:#f7f7f7 !important;
}

/* 3) 部屋作成モーダルをダークテーマへ統一。画像サムネそのものは加工しない。 */
html.rooom-dark-theme #createRoomModal.modalOverlay{
  background:rgba(0,0,0,.68) !important;
}
html.rooom-dark-theme #createRoomModal .modal{
  background:#1f1f1f !important;
  color:#f3f3f3 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 24px 64px rgba(0,0,0,.58) !important;
}
html.rooom-dark-theme #createRoomModal .modalTitle,
html.rooom-dark-theme #createRoomModal .formRow label,
html.rooom-dark-theme #createRoomModal .formLabelLike,
html.rooom-dark-theme #createRoomModal .roomModeTitle,
html.rooom-dark-theme #createRoomModal .createRoomImagePreviewName{
  color:#f3f3f3 !important;
}
html.rooom-dark-theme #createRoomModal .modalSub,
html.rooom-dark-theme #createRoomModal .formNote,
html.rooom-dark-theme #createRoomModal .roomModeDesc,
html.rooom-dark-theme #createRoomModal .createRoomImagePreviewSize,
html.rooom-dark-theme #createRoomModal #notifyCreateNote{
  color:#bdbdbd !important;
}
html.rooom-dark-theme #createRoomModal .formRow input,
html.rooom-dark-theme #createRoomModal .formRow select,
html.rooom-dark-theme #createRoomModal .createRoomCategoryTrigger{
  background:#2a2a2a !important;
  color:#f3f3f3 !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:none !important;
}
html.rooom-dark-theme #createRoomModal .formRow input::placeholder{
  color:#989898 !important;
}
html.rooom-dark-theme #createRoomModal .formRow select option{
  background:#2a2a2a !important;
  color:#f3f3f3 !important;
}
html.rooom-dark-theme #createRoomModal .roomModeCard{
  background:#272727 !important;
  color:#f3f3f3 !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:none !important;
}
html.rooom-dark-theme #createRoomModal .roomModeChoice input:checked + .roomModeCard{
  background:#203128 !important;
  border-color:rgba(89,190,121,.68) !important;
  box-shadow:inset 0 0 0 1px rgba(89,190,121,.26) !important;
}
html.rooom-dark-theme #createRoomModal .createRoomImagePicker{
  background:#262626 !important;
  color:#dedede !important;
  border-color:rgba(255,255,255,.24) !important;
}
html.rooom-dark-theme #createRoomModal .createRoomImagePicker:hover{
  background:#2d2d2d !important;
  border-color:rgba(255,255,255,.36) !important;
}
html.rooom-dark-theme #createRoomModal .createRoomImagePreview{
  background:#292929 !important;
  color:#f2f2f2 !important;
}
html.rooom-dark-theme #createRoomModal #pushSetupStatus{
  background:#243129 !important;
  color:#bfe7cc !important;
  border:1px solid rgba(89,190,121,.18) !important;
}
html.rooom-dark-theme #createRoomModal .cancelBtn{
  background:#303030 !important;
  color:#f1f1f1 !important;
  border:1px solid rgba(255,255,255,.14) !important;
}
html.rooom-dark-theme #createRoomModal .submitBtn{
  background:#f0f0f0 !important;
  color:#151515 !important;
  border:1px solid #f0f0f0 !important;
}
html.rooom-dark-theme #createRoomModal .modalError{
  color:#ff9b9b !important;
}

/* 4) 現在名：外側の行だけでなく、実際の値表示も確実に反転。 */
html.rooom-dark-theme #topUtilityRow .topSettingsCurrentNameRow .topSettingsRowControls{
  background:transparent !important;
  border:0 !important;
}
html.rooom-dark-theme #topUtilityRow .topSettingsCurrentNameRow .topCurrentName{
  background:#303030 !important;
  color:#f5f5f5 !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:none !important;
}
html.rooom-dark-theme #topUtilityRow .topSettingsCurrentNameRow .topCurrentName #topCurrentName,
html.rooom-dark-theme #topUtilityRow #topCurrentName{
  background:transparent !important;
  color:#f5f5f5 !important;
  border:0 !important;
  box-shadow:none !important;
  opacity:1 !important;
}


/* =========================================================
   2026-08-27 VIEW ICON / LEGEND FINAL ALIGNMENT PATCH
   - カード□とリスト三本線をCSS図形で同じ中心・同程度の視覚量に統一
   - 意味アイコン列は横スクロールではなく、狭幅でも1行内に全項目を収める
   ========================================================= */

/* 表示切替は文字グリフを使わず、ボタン中央にCSS図形を描く。 */
.rooomFloatingActionDock #rooomDockViewSlot.rooomDockViewSlot{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.rooomFloatingActionDock #rooomDockViewIcon.rooomDockViewIcon{
  position:relative !important;
  display:block !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  font-size:0 !important;
  line-height:0 !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  color:currentColor !important;
}
.rooomFloatingActionDock #rooomDockViewIcon.rooomDockViewIcon::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  box-sizing:border-box;
}
/* カード表示: 15px四角。 */
.rooomFloatingActionDock #rooomDockViewSlot[data-view-mode="card"] #rooomDockViewIcon::before{
  width:15px;
  height:15px;
  border:2px solid currentColor;
  border-radius:2px;
  background:transparent;
  box-shadow:none;
}
/* リスト表示: 18pxの三本線。従来より少し小さくする。 */
.rooomFloatingActionDock #rooomDockViewSlot[data-view-mode="list"] #rooomDockViewIcon::before{
  width:18px;
  height:2px;
  border:0;
  border-radius:2px;
  background:currentColor;
  box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;
}
html.rooom-dark-theme .rooomFloatingActionDock #rooomDockViewIcon.rooomDockViewIcon{
  color:#f5f5f5 !important;
}

/* 意味アイコンライン: 右端が切れないよう、全幅を使って1行に収める。 */
#roomModeLegend.topRoomModeLegend,
.topRoomModeLegend.roomModeLegend{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:0 !important;
  padding:0 1px !important;
  margin:0 0 8px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  font-size:clamp(9px,2.55vw,11px) !important;
  letter-spacing:-.015em !important;
}
#roomModeLegend.topRoomModeLegend .roomModeLegendItem,
.topRoomModeLegend.roomModeLegend .roomModeLegendItem{
  flex:0 1 auto !important;
  min-width:0 !important;
  gap:2px !important;
  margin:0 !important;
}
#roomModeLegend.topRoomModeLegend .roomModeLegendDot,
.topRoomModeLegend.roomModeLegend .roomModeLegendDot{
  width:9px !important;
  height:9px !important;
  flex:0 0 9px !important;
}
#roomModeLegend.topRoomModeLegend .roomModeLegendIcon,
.topRoomModeLegend.roomModeLegend .roomModeLegendIcon{
  width:11px !important;
  min-width:11px !important;
  font-size:10px !important;
  flex:0 0 11px !important;
}
@media (max-width:390px){
  #roomModeLegend.topRoomModeLegend,
  .topRoomModeLegend.roomModeLegend{
    font-size:9px !important;
    letter-spacing:-.025em !important;
  }
  #roomModeLegend.topRoomModeLegend .roomModeLegendItem,
  .topRoomModeLegend.roomModeLegend .roomModeLegendItem{
    gap:1px !important;
  }
}
html[lang="en"] #roomModeLegend.topRoomModeLegend,
html[lang="en"] .topRoomModeLegend.roomModeLegend{
  font-size:8.5px !important;
}
html[lang="ko"] #roomModeLegend.topRoomModeLegend,
html[lang="ko"] .topRoomModeLegend.roomModeLegend{
  font-size:9px !important;
}


/* =========================================================
   2026-08-27 settings alignment follow-up
   - dark notify label contrast
   - name row one-line
   - desktop notify toggle alignment
   - desktop legend spacing
   ========================================================= */
html.rooom-dark-theme #topUtilityRow #topSettingNotifyLabel,
html.rooom-dark-theme #topUtilityRow .topSettingsNotifyFixedLabel{
  color:#f2f2f2 !important;
  opacity:1 !important;
}

/* 名前変更は20文字入力 + 更新ボタンを常に1段で表示 */
#topUtilityRow .topSettingsNameRow{
  display:grid !important;
  grid-template-columns:max-content minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:10px !important;
  row-gap:0 !important;
  flex-wrap:nowrap !important;
}
#topUtilityRow .topSettingsNameRow .topSettingsRowLabel{
  grid-column:1 !important;
  white-space:nowrap !important;
}
#topUtilityRow .topSettingsNameRow .topNameControls{
  grid-column:2 !important;
  min-width:0 !important;
  width:100% !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:6px !important;
}
#topUtilityRow .topSettingsNameRow #topNameInput{
  flex:1 1 auto !important;
  min-width:0 !important;
  width:auto !important;
  max-width:22ch !important;
}
#topUtilityRow .topSettingsNameRow .topNameSaveIconBtn{
  flex:0 0 34px !important;
  width:34px !important;
  min-width:34px !important;
  padding:0 !important;
}
#topUtilityRow .topSettingsNameRow .topNameRemaining{
  grid-column:2 !important;
  margin:3px 0 0 !important;
}

/* PC/タブレット広幅: 部屋通知のONを他行と同じ右端ラインへ */
@media (min-width: 861px){
  #topUtilityRow #pwaBanner.topSettingsNotifyRow{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
  }
  #topUtilityRow #pwaBanner.topSettingsNotifyRow .topSettingsRowControls{
    grid-column:2 !important;
    justify-self:end !important;
    margin:0 !important;
    padding:0 !important;
  }
  #topUtilityRow #pwaBanner.topSettingsNotifyRow #topSettingNotifyLabel{
    grid-column:1 !important;
  }

  /* 意味凡例は画面いっぱいに散らさず中央で自然な間隔にする */
  #roomModeLegend.topRoomModeLegend,
  .topRoomModeLegend.roomModeLegend{
    width:auto !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    justify-content:center !important;
    gap:18px !important;
  }
  #roomModeLegend.topRoomModeLegend .roomModeLegendItem,
  .topRoomModeLegend.roomModeLegend .roomModeLegendItem{
    flex:0 0 auto !important;
  }
}

@media (max-width: 560px){
  #topUtilityRow .topSettingsNameRow{
    grid-template-columns:72px minmax(0,1fr) !important;
    column-gap:7px !important;
  }
  #topUtilityRow .topSettingsNameRow #topNameInput{
    max-width:none !important;
  }
}


/* =========================================================
   2026-08-28 変更名行の位置統一
   - 他の設定行と同じ74pxラベル列
   - 外枠の幅/位置も完全に同一
   ========================================================= */
#topUtilityRow .topSettingsNameRow{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
  grid-template-columns:74px minmax(0,1fr) !important;
  column-gap:10px !important;
}
#topUtilityRow .topSettingsNameRow .topSettingsRowLabel{
  width:74px !important;
  min-width:74px !important;
  max-width:74px !important;
}
@media (max-width:560px){
  #topUtilityRow .topSettingsNameRow{
    grid-template-columns:74px minmax(0,1fr) !important;
    column-gap:10px !important;
  }
}


/* 2026-08-28 通知音：試聴ボタン廃止。ON + 強さの2操作に統一 */
#topUtilityRow .topSettingsSoundControls{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}
#topUtilityRow #topSoundEnabledSelect{
  flex:0 0 auto !important;
}
#topUtilityRow #topSoundTypeSelect{
  flex:0 1 auto !important;
  min-width:0 !important;
}

/* =========================================================
   2026-08-28 FINAL: top settings responsive alignment
   - 画面幅ごとに Notify / Sound / Name だけ別位置へ動く旧指定を上書き
   - ラベルは現位置のまま、右側操作エリアの開始位置を全行で統一
   - 345px / 528px / 865px 付近を同一ルールで安定させる
   ========================================================= */
#topUtilityRow .topSettingsRow,
#topUtilityRow #pwaBanner.topSettingsNotifyRow,
#topUtilityRow .topSettingsNameRow{
  display:grid !important;
  grid-template-columns:58px minmax(0,1fr) !important;
  column-gap:6px !important;
  align-items:center !important;
  justify-content:stretch !important;
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

#topUtilityRow .topSettingsRowLabel,
#topUtilityRow .topSettingsRowLabelWrap,
#topUtilityRow #pwaBanner .topRefreshNoticeMain,
#topUtilityRow .topSettingsNameRow .topSettingsRowLabel{
  grid-column:1 !important;
  width:58px !important;
  min-width:58px !important;
  max-width:58px !important;
  flex:none !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
}

#topUtilityRow .topSettingsRowControls,
#topUtilityRow #pwaBanner.topSettingsNotifyRow .topSettingsRowControls,
#topUtilityRow #pwaBanner .topRefreshNoticeActions,
#topUtilityRow .topSettingsNameRow .topNameControls{
  grid-column:2 !important;
  justify-self:start !important;
  align-self:center !important;
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

/* 名前行も他行と同じ開始位置。入力欄は残り幅を最大限使用 */
#topUtilityRow .topSettingsNameRow .topNameControls{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:6px !important;
  width:100% !important;
}
#topUtilityRow .topSettingsNameRow #topNameInput{
  flex:1 1 20ch !important;
  width:auto !important;
  min-width:0 !important;
  max-width:20ch !important;
}

/* Current も同じ操作開始線から表示し、可能な限り20文字を見せる */
#topUtilityRow .topSettingsCurrentNameRow .topSettingsRowControls{
  width:100% !important;
}
#topUtilityRow .topSettingsCurrentNameRow .topCurrentName{
  max-width:100% !important;
}

/* 以前の広幅専用「通知ONを右端へ送る」指定を完全に打ち消す */
@media (min-width:861px){
  #topUtilityRow #pwaBanner.topSettingsNotifyRow{
    grid-template-columns:58px minmax(0,1fr) !important;
    column-gap:6px !important;
  }
  #topUtilityRow #pwaBanner.topSettingsNotifyRow .topSettingsRowControls{
    grid-column:2 !important;
    justify-self:start !important;
  }
  #topUtilityRow #pwaBanner.topSettingsNotifyRow #topSettingNotifyLabel{
    grid-column:1 !important;
  }
}

/* 極小幅でも同じ基準線を維持。項目名は動かさず操作側の幅を優先 */
@media (max-width:420px){
  #topUtilityRow .topSettingsRow,
  #topUtilityRow #pwaBanner.topSettingsNotifyRow,
  #topUtilityRow .topSettingsNameRow{
    grid-template-columns:54px minmax(0,1fr) !important;
    column-gap:5px !important;
  }
  #topUtilityRow .topSettingsRowLabel,
  #topUtilityRow .topSettingsRowLabelWrap,
  #topUtilityRow #pwaBanner .topRefreshNoticeMain,
  #topUtilityRow .topSettingsNameRow .topSettingsRowLabel{
    width:54px !important;
    min-width:54px !important;
    max-width:54px !important;
  }
}

/* =========================================================
   2026-08-28 FINAL: 名前入力幅を残り幅いっぱいまで使用
   - ラベル位置は維持
   - 更新ボタンは右端
   - 入力欄がその間を最大限使用
   - 現在名も20文字表示を優先
   ========================================================= */
#topUtilityRow .topSettingsNameRow .topNameControls{
  width:100% !important;
  max-width:none !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
}
#topUtilityRow .topSettingsNameRow #topNameInput{
  flex:1 1 auto !important;
  width:0 !important;
  min-width:0 !important;
  max-width:none !important;
}
#topUtilityRow .topSettingsNameRow #topNameSaveBtn{
  flex:0 0 34px !important;
  width:34px !important;
  min-width:34px !important;
  margin-left:auto !important;
}
#topUtilityRow .topSettingsCurrentNameRow .topSettingsRowControls,
#topUtilityRow .topSettingsCurrentNameRow .topCurrentName{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
}
#topUtilityRow .topSettingsCurrentNameRow .topCurrentName{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}


/* ===== 2026-08-28 セクション件数表示：アイコン＋実数のみ ===== */
.roomCountBreakdownLabel{display:none !important;}
.entryRoomCountText .roomCountBreakdown{margin:0 !important;}
html.rooom-dark-theme .roomCountBreakdownNumber{color:#f4f4f4 !important;}

/* ===== 2026-08-28 オープン部屋：縦余白を公式部屋基準へ統一 ===== */
/* 検索・作成ボタンをトップへ移した後も残っていた空のgrid行を消す */
.userRoomsBar{
  grid-template-areas:"title meta" !important;
  grid-template-rows:auto !important;
  row-gap:0 !important;
}
/* 旧検索行は空要素なので高さ・余白を持たせない */
#userRoomsBody .sectionControlsCompact{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}
#userSearchResultMeta:empty{
  display:none !important;
}

/* ===== 準備部屋：作成モーダル試作（通知処理には触れない） ===== */
#createRoomModal .modal{padding-top:18px !important}
.createTimingChoices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px}
.createTimingChoice{position:relative;display:block;cursor:pointer}
.createTimingChoice input{position:absolute;opacity:0;pointer-events:none}
.createTimingChoice span{display:flex;align-items:center;justify-content:center;min-height:42px;border:1px solid rgba(0,0,0,.16);border-radius:14px;background:#fff;color:#333;font-size:14px;font-weight:700}
.createTimingChoice input:checked + span{border-color:#111;background:#111;color:#fff}
.prepRoomScheduleFields{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:8px;margin:0 0 14px}
.prepRoomScheduleFields[hidden]{display:none !important}
.prepRoomScheduleFields .formRow{margin:0 !important}
.prepRoomScheduleFields label{font-size:12px !important;line-height:1 !important;color:#555 !important}
.prepRoomScheduleFields select{width:100%;height:40px;min-height:40px;border:1px solid rgba(0,0,0,.14);border-radius:13px;background:#fff;color:#111;padding:0 8px;font-size:13px}
.prepStartControls{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:6px}
.createRoomModeLast{margin-top:2px !important}
html.rooom-dark-theme .createTimingChoice span{background:#171717;color:#eee;border-color:rgba(255,255,255,.18)}
html.rooom-dark-theme .createTimingChoice input:checked + span{background:#eee;color:#111;border-color:#eee}
html.rooom-dark-theme .prepRoomScheduleFields label{color:#bbb !important}
html.rooom-dark-theme .prepRoomScheduleFields select{background:#171717;color:#eee;border-color:rgba(255,255,255,.18)}
@media (max-width:420px){.createTimingChoices{margin-bottom:12px}.createTimingChoice span{min-height:39px}.prepRoomScheduleFields{grid-template-columns:minmax(0,.72fr) minmax(0,1.58fr);gap:6px;margin-bottom:12px}.prepStartControls{gap:4px}.prepRoomScheduleFields select{padding:0 5px;font-size:12px}}


/* ===== 2026-08-28 準備部屋UI compact cards ===== */
.createTimingChoice .createTimingCard{display:flex !important;flex-direction:column;align-items:flex-start !important;justify-content:center !important;min-height:52px !important;padding:7px 10px !important;gap:2px}
.createTimingChoice .createTimingTitle{display:block !important;min-height:0 !important;padding:0 !important;border:0 !important;background:transparent !important;color:inherit !important;font-size:13px !important;font-weight:800 !important}
.createTimingChoice .createTimingDesc{display:block !important;min-height:0 !important;padding:0 !important;border:0 !important;background:transparent !important;color:inherit !important;font-size:10px !important;font-weight:500 !important;opacity:.72}
.fieldLimit{margin-left:5px;font-size:10px;font-weight:500;opacity:.62}
@media (max-width:420px){.createTimingChoice .createTimingCard{min-height:48px !important;padding:6px 8px !important}.createTimingChoice .createTimingTitle{font-size:12px !important}.createTimingChoice .createTimingDesc{font-size:9px !important}}


/* ===== 2026-08-28 作成モーダル：説明文省略・文字数カウント ===== */
#createRoomModal .createTimingDesc,
#createRoomModal .roomModeDesc{display:none !important;}
#createRoomModal .createTimingChoice .createTimingCard{min-height:40px !important;padding:6px 10px !important;}
#createRoomModal .roomModeCard{min-height:42px !important;padding:8px 10px !important;justify-content:center !important;}
#createRoomModal .fieldLimit{white-space:nowrap;}
@media (max-width:420px){
  #createRoomModal .createTimingChoice .createTimingCard{min-height:38px !important;padding:5px 8px !important;}
  #createRoomModal .roomModeCard{min-height:40px !important;padding:7px 8px !important;}
}


/* ===== 2026-08-28 作成モーダル：選択表現統一・省スペース化 ===== */
#createRoomModal .createTimingChoice input:checked + .createTimingCard{
  border-color:rgba(52,145,84,.58) !important;
  background:rgba(238,250,242,.95) !important;
  color:#111 !important;
  box-shadow:0 8px 18px rgba(52,145,84,.12),inset 0 0 0 1px rgba(52,145,84,.28) !important;
}
html.rooom-dark-theme #createRoomModal .createTimingChoice input:checked + .createTimingCard{
  background:#203128 !important;
  color:#f3f3f3 !important;
  border-color:rgba(89,190,121,.68) !important;
  box-shadow:inset 0 0 0 1px rgba(89,190,121,.26) !important;
}
#createRoomModal .createRoomModeLabelRow{display:flex;align-items:baseline;gap:7px;min-width:0;margin-bottom:8px;}
#createRoomModal .createRoomModeInlineNote{font-size:10px;line-height:1.2;color:#777;white-space:nowrap;}
html.rooom-dark-theme #createRoomModal .createRoomModeInlineNote{color:#aaa;}
#createRoomModal .modalActions{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;margin-top:6px !important;}
#createRoomModal .modalActions button{width:100% !important;min-width:0 !important;padding:11px 7px !important;font-size:12px !important;white-space:nowrap !important;}
@media (max-width:420px){
  #createRoomModal .createRoomModeLabelRow{gap:5px;margin-bottom:7px;}
  #createRoomModal .createRoomModeInlineNote{font-size:9px;}
  #createRoomModal .modalActions{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:5px !important;}
  #createRoomModal .modalActions button{padding:10px 4px !important;font-size:10px !important;}
}


/* ===== 2026-08-28: 検索バー角のダーク背景統一 ===== */
html.rooom-dark-theme .topPrimaryControls .topRoomSearchWrap{
  background:transparent !important;
}

/* ===== 2026-08-28: 部屋作成前確認（4言語 / ダーク対応） ===== */
#createConfirmModal.modalOverlay{z-index:10020;}
#createConfirmModal.modalOverlay.show{
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  padding:16px !important;
}
#createConfirmModal .createConfirmBox{
  width:min(390px,calc(100vw - 32px));
  max-width:390px;
  padding:20px;
}
#createConfirmModal .modalTitle{margin:0 0 10px;}
#createConfirmModal .createConfirmText{
  margin:0;
  line-height:1.65;
  font-size:14px;
  color:#444;
}
#createConfirmModal .createConfirmActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}
#createConfirmModal .createConfirmActions button{
  width:100%;
  min-width:0;
  padding:11px 12px;
}
html.rooom-dark-theme #createConfirmModal.modalOverlay{
  background:rgba(0,0,0,.66) !important;
}
html.rooom-dark-theme #createConfirmModal .createConfirmBox{
  background:#202020 !important;
  color:#f2f2f2 !important;
  border:1px solid rgba(255,255,255,.12) !important;
}
html.rooom-dark-theme #createConfirmModal .modalTitle{color:#f4f4f4 !important;}
html.rooom-dark-theme #createConfirmModal .createConfirmText{color:#d4d4d4 !important;}
@media (max-width:640px){
  #createConfirmModal .createConfirmBox{padding:18px 16px;}
  #createConfirmModal .createConfirmActions{gap:8px;margin-top:16px;}
}


/* ===== 準備部屋 phase1：開始予定一本化・カード表示 ===== */
.prepRoomScheduleFields{
  grid-template-columns:minmax(0,1fr) !important;
}
.prepRoomScheduleFields .prepStartCell{
  width:100% !important;
}
.entryRoomGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.entryRoomItem{
  display:flex;
  gap:12px;
  min-width:0;
  padding:14px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:16px;
  background:#fff;
  box-sizing:border-box;
}
.entryRoomThumb{
  width:72px;
  height:72px;
  flex:0 0 72px;
  border-radius:12px;
  overflow:hidden;
  background:#f3f3f3;
}
.entryRoomThumb img{width:100%;height:100%;object-fit:cover;display:block;}
.entryRoomMain{min-width:0;flex:1;}
.entryRoomTitleRow{display:flex;align-items:center;gap:7px;min-width:0;}
.entryRoomTitle{font-size:15px;line-height:1.35;overflow-wrap:anywhere;}
.entryRoomMine,.entryRoomRecruiting{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  padding:2px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  line-height:1.35;
  background:rgba(0,0,0,.07);
}
.entryRoomDesc{margin-top:5px;font-size:12px;line-height:1.45;color:#666;overflow-wrap:anywhere;}
.entryRoomMeta{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:9px;font-size:11px;line-height:1.4;color:#555;}
.entryRoomRecruiting{background:rgba(34,153,84,.12);color:#18713d;}
html.rooom-dark-theme .entryRoomDesc,
html.rooom-dark-theme .entryRoomMeta{color:#cfcfcf !important;}
html.rooom-dark-theme .entryRoomMine{background:rgba(255,255,255,.10);color:#f4f4f4;}
html.rooom-dark-theme .entryRoomRecruiting{background:rgba(76,210,122,.15);color:#8ee7aa;}

/* 確認モーダル：既存ボタン装飾の疑似要素が枠外へ出ないよう固定 */
.createConfirmActions .submitBtn,
.createConfirmActions .cancelBtn{overflow:hidden;position:relative;}
.createConfirmActions .submitBtn::before,
.createConfirmActions .submitBtn::after,
.createConfirmActions .cancelBtn::before,
.createConfirmActions .cancelBtn::after{content:none !important;display:none !important;}

@media (max-width:900px){.entryRoomGrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){
  .entryRoomGrid{grid-template-columns:minmax(0,1fr);gap:8px;}
  .entryRoomItem{padding:11px;border-radius:14px;}
  .entryRoomThumb{width:60px;height:60px;flex-basis:60px;}
}


/* ===== 準備部屋：カード常時展開 / リスト2行＋タップ展開 ===== */
.entryRoomCard{min-height:118px;}
.entryRoomCard .entryRoomDesc{white-space:normal;overflow:visible;display:block;}
.entryRoomList{display:grid;grid-template-columns:1fr;gap:8px;width:100%;}
.entryRoomListItem{width:100%;min-width:0;border:1px solid rgba(0,0,0,.10);border-radius:16px;background:#fff;color:#111;overflow:hidden;box-sizing:border-box;}
.entryRoomListToggle{width:100%;min-width:0;border:0;background:transparent;color:inherit;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px;text-align:left;cursor:pointer;font:inherit;}
.entryRoomListMain{display:block;min-width:0;}
.entryRoomListTitleRow{display:flex;align-items:center;gap:7px;min-width:0;}
.entryRoomListTitle{display:block;min-width:0;font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.entryRoomListChevron{display:inline-block;flex:0 0 auto;font-size:12px;transition:transform .18s ease;opacity:.72;}
.entryRoomListDesc{display:block;margin-top:4px;font-size:12px;line-height:1.3;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.entryRoomListMetaCompact{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:11px;color:#555;}
.entryRoomListDetails{display:none;padding:0 14px 12px;border-top:1px solid rgba(0,0,0,.07);}
.entryRoomListItem.open .entryRoomListDetails{display:block;}
.entryRoomListItem.open .entryRoomListChevron{transform:rotate(180deg);}
.entryRoomListItem.open .entryRoomListTitle{white-space:normal;overflow:visible;text-overflow:clip;}
.entryRoomListFullDesc{padding-top:10px;font-size:12px;line-height:1.5;color:#666;white-space:normal;overflow-wrap:anywhere;}
html.rooom-dark-theme .entryRoomListItem{background:#222;color:#f2f2f2;border-color:rgba(255,255,255,.12);}
html.rooom-dark-theme .entryRoomListDesc,
html.rooom-dark-theme .entryRoomListFullDesc,
html.rooom-dark-theme .entryRoomListMetaCompact{color:#cfcfcf;}
html.rooom-dark-theme .entryRoomListDetails{border-top-color:rgba(255,255,255,.09);}
@media (max-width:640px){
  .entryRoomListToggle{padding:9px 11px;gap:8px;}
  .entryRoomListTitle{font-size:14px;}
  .entryRoomListMetaCompact{gap:6px;font-size:10px;}
  .entryRoomListDetails{padding:0 11px 10px;}
}

/* 表示切替ボタンは「押した後の表示」を示す：カード中=三本線、リスト中=四角 */
.rooomFloatingActionDock #rooomDockViewSlot[data-view-mode="card"] #rooomDockViewIcon::before{
  width:18px;height:2px;border:0;border-radius:2px;background:currentColor;
  box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;
}
.rooomFloatingActionDock #rooomDockViewSlot[data-view-mode="list"] #rooomDockViewIcon::before{
  width:15px;height:15px;border:2px solid currentColor;border-radius:2px;background:transparent;box-shadow:none;
}

/* ===== 準備部屋：既存RoooMと外寸・PC列数を統一 2026-08-29 ===== */
/* カード表示：外側は通常カードと同じ高さ・角丸・余白。情報は準備部屋仕様のまま常時表示 */
.entryRoomGrid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.entryRoomCard{
  min-height:240px;
  padding:16px;
  border-radius:var(--radius);
}
.entryRoomCard .entryRoomMain{
  display:flex;
  min-height:100%;
  flex-direction:column;
}
.entryRoomCard .entryRoomMeta{
  margin-top:auto;
  padding-top:12px;
}

/* リスト表示：PCでは既存の見え方に合わせて1行2部屋 */
.entryRoomList{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 14px;
  width:100%;
  align-items:start;
}
.entryRoomListItem{
  min-height:58px;
  border-radius:18px;
}

/* 通常カードと同じレスポンシブ段階 */
@media (max-width:980px){
  .entryRoomGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:640px){
  .entryRoomGrid,
  .entryRoomList{
    grid-template-columns:minmax(0,1fr);
  }
  .entryRoomGrid{gap:14px;}
  .entryRoomCard{
    min-height:240px;
    padding:16px;
    border-radius:var(--radius);
  }
  .entryRoomListItem{
    min-height:50px;
    border-radius:16px;
  }
}

/* ===== 準備部屋：リスト表示の2列を確実に適用 2026-08-29 ===== */
/* 既存の古い .entryRoomList { display:block !important; } を、内側の実リストだけ上書きする。 */
#entryRoomList > .entryRoomList{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px 12px !important;
  width:100% !important;
  min-height:0 !important;
  align-items:start !important;
  justify-content:stretch !important;
}
#entryRoomList > .entryRoomList > .entryRoomListItem{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
@media (max-width:640px){
  #entryRoomList > .entryRoomList{
    grid-template-columns:minmax(0,1fr) !important;
    gap:7px !important;
  }
}


/* ===== 準備部屋：アーカイブ基準のリスト展開 + 通報UI 2026-08-29 ===== */
/* 閉じた時はタイトル/説明をコンパクト表示。展開時は同じ説明欄そのものを全文表示し、二重表示しない。 */
.entryRoomListHead{
  position:relative;
  display:flex;
  align-items:stretch;
  min-width:0;
}
.entryRoomListHead .entryRoomListToggle{
  flex:1 1 auto;
  width:auto;
  padding-right:10px;
}
.entryRoomListItem.open .entryRoomListDesc{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
}
.entryRoomListItem.open .entryRoomListDetails{
  padding-top:0;
}
/* 旧「全文説明」欄は使わない。JS側でも出力しないが旧キャッシュ対策として隠す。 */
.entryRoomListItem.open .entryRoomListFullDesc{display:none !important;}

/* 準備部屋は入室前の公開情報だけで判断するため、閲覧者には一覧上で通報UIを常時表示する。 */
.entryRoomReportUi{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  color:#777;
  font:inherit;
  font-size:11px;
  font-weight:700;
  line-height:1;
  padding:6px 4px;
  margin-top:8px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
  align-self:flex-end;
}
.entryRoomReportUi:hover{opacity:.72;}
.entryRoomListReportUi{
  flex:0 0 auto;
  align-self:center;
  margin:0 9px 0 0;
  padding:7px 5px;
  white-space:nowrap;
}
html.rooom-dark-theme .entryRoomReportUi{color:#bdbdbd;}
@media (max-width:640px){
  .entryRoomListHead .entryRoomListToggle{padding-right:6px;}
  .entryRoomListReportUi{margin-right:6px;font-size:10px;padding:6px 3px;}
  .entryRoomReportUi{font-size:10px;}
}


/* ===== 準備部屋：カード表示をアーカイブカード基準へ統一 2026-08-29 ===== */
/* カテゴリアイコンは通常/アーカイブカードと同じ左上位置。 */
.entryRoomCard{
  position:relative !important;
}
.entryRoomCard > .cardCategoryCornerBadge{
  position:absolute !important;
  top:12px !important;
  left:22px !important;
  z-index:8 !important;
  margin-right:0 !important;
  pointer-events:none !important;
}
.entryRoomCard .entryRoomMain{
  padding-top:22px !important;
}

/* タイトル/説明の文字サイズ・太さは既存アーカイブのプレーンカード基準。 */
.entryRoomCard .entryRoomTitle{
  font-size:26px !important;
  font-weight:300 !important;
  line-height:1.2 !important;
  margin:0 0 6px !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;
  text-overflow:clip !important;
}
.entryRoomCard .entryRoomDesc{
  margin:0 0 14px !important;
  font-size:13px !important;
  line-height:1.45 !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  text-overflow:clip !important;
}

@media (max-width:640px){
  .entryRoomCard > .cardCategoryCornerBadge{
    top:10px !important;
    left:20px !important;
  }
  .entryRoomCard .entryRoomMain{
    padding-top:22px !important;
  }
  .entryRoomCard .entryRoomTitle{
    font-size:26px !important;
  }
}


/* ===== 準備部屋：主表示固定 / 件数表示 / 取消UI（2026-08-29） ===== */
/* リストの外形は既存2列レイアウトを維持。カテゴリ枠・本文・右メタ・操作を分離する。 */
.entryRoomListHead{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:8px !important;
}
.entryRoomListHead > .listCategoryBadge{
  grid-column:1 !important;
  align-self:center !important;
  margin-left:10px !important;
}
.entryRoomListHead > .entryRoomListToggle{
  grid-column:2 !important;
  min-width:0 !important;
  padding-left:0 !important;
}
.entryRoomListHead > .entryRoomListReportUi,
.entryRoomListHead > .entryRoomListCancelUi{
  grid-column:3 !important;
  margin-right:10px !important;
}
.entryRoomListToggle{
  grid-template-columns:minmax(0,1fr) auto !important;
}
.entryRoomListOwnerMeta{
  min-width:118px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
}
.entryRoomListMine{
  margin:0 !important;
  white-space:nowrap;
}
.entryRoomListMetaCompact{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.entryRoomListItem.open .entryRoomListDesc{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.entryRoomListDetailsMeta{
  margin-top:8px !important;
}
.entryRoomCancelUi{
  border:1px solid rgba(190,55,55,.34);
  background:rgba(190,55,55,.08);
  color:#a42c2c;
  border-radius:999px;
  padding:5px 9px;
  font-size:10px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
}
html.rooom-dark-theme .entryRoomCancelUi{
  border-color:rgba(255,125,125,.34);
  background:rgba(255,95,95,.10);
  color:#ffb2b2;
}
@media (max-width:640px){
  .entryRoomListHead{gap:6px !important;}
  .entryRoomListHead > .listCategoryBadge{margin-left:8px !important;}
  .entryRoomListHead > .entryRoomListReportUi,
  .entryRoomListHead > .entryRoomListCancelUi{margin-right:8px !important;}
  .entryRoomListOwnerMeta{min-width:104px;gap:3px;}
  .entryRoomCancelUi{font-size:9px;padding:4px 7px;}
}


/* ===== 準備部屋リスト：既存リスト形を維持 / 右側だけ主操作化 ===== */
#entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListHead{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
}
#entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListToggle{
  grid-column:2 !important;
  display:block !important;
  padding:10px 0 !important;
  min-width:0 !important;
}
#entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListSide{
  grid-column:3 !important;
  min-width:154px;
  margin-right:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
}
.entryRoomListSideActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  min-height:22px;
}
.entryRoomListSide .entryRoomListMetaCompact{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  font-size:10px !important;
  white-space:nowrap !important;
}
.entryRoomEarlyOpenUi,
.entryRoomListSide .entryRoomCancelUi{
  border-radius:999px;
  padding:4px 7px;
  font-size:9px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
}
.entryRoomEarlyOpenUi{
  border:1px solid rgba(35,145,75,.35);
  background:rgba(35,145,75,.10);
  color:#18713d;
}
html.rooom-dark-theme .entryRoomEarlyOpenUi{
  border-color:rgba(76,210,122,.34);
  background:rgba(76,210,122,.12);
  color:#8ee7aa;
}
/* 展開は左のタイトル・説明だけ。下段は作らない。 */
#entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListDetails{display:none !important;}
#entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListSide{align-self:start;margin-top:7px;}
@media (max-width:640px){
  #entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListHead{gap:6px !important;}
  #entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListSide{min-width:138px;margin-right:8px;gap:3px;}
  .entryRoomEarlyOpenUi,.entryRoomListSide .entryRoomCancelUi{font-size:8px;padding:3px 6px;}
  .entryRoomListSide .entryRoomListMetaCompact{font-size:9px !important;gap:5px !important;}
}


/* ===== 2026-08-29: アーカイブ既存リスト矢印・元構造復元 =====
   buildListMarkup() が .listToggle 内へ直接出力する「▾」を、そのまま表示する。
   疑似要素は使わず、準備部屋には影響させない。 */
#archiveRoomList .listItem .listToggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  min-height:16px !important;
  max-width:16px !important;
  max-height:16px !important;
  margin:0 0 0 4px !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:inherit !important;
  font-size:10px !important;
  line-height:16px !important;
  opacity:.82 !important;
  visibility:visible !important;
  overflow:visible !important;
  vertical-align:middle !important;
  transform:none !important;
}
#archiveRoomList .listItem .listToggle::before,
#archiveRoomList .listItem .listToggle::after{
  content:none !important;
  display:none !important;
}
#archiveRoomList .listItem.open .listToggle{
  transform:rotate(180deg) !important;
}


/* ===== 2026-08-29: リストUI統一 / 展開時固定 / ダーク矢印 / 準備部屋共通外観 ===== */
/* 1) ダークテーマでも、明るい共通グラデカード上の展開矢印を確実に見せる。 */
html.rooom-dark-theme #roomList .listToggle,
html.rooom-dark-theme :is(#userRoomList,#prepOpenCloneList) .listToggle,
html.rooom-dark-theme #archiveRoomList .listToggle{
  color:#4a4a4a !important;
  opacity:.88 !important;
  visibility:visible !important;
}

/* 2) 既存リスト共通：展開してもカテゴリ・右メタ・入室/アーカイブボタンは縮小時の位置に固定。
      展開で変わるのはタイトル/説明の表示領域とカードの下方向の高さだけ。 */
html:not(.rooom-ipad-portrait) #roomList .listItem.open,
html:not(.rooom-ipad-portrait) :is(#userRoomList,#prepOpenCloneList) .listItem.open,
html:not(.rooom-ipad-portrait) #archiveRoomList .listItem.open{
  grid-template-columns:44px minmax(0,1fr) 76px 44px !important;
  grid-template-areas:"accent main meta button" !important;
  align-items:start !important;
  padding:8px 10px !important;
  gap:10px !important;
}
html:not(.rooom-ipad-portrait) #roomList .listItem.open .listCategorySlot,
html:not(.rooom-ipad-portrait) :is(#userRoomList,#prepOpenCloneList) .listItem.open .listCategorySlot,
html:not(.rooom-ipad-portrait) #archiveRoomList .listItem.open .listCategorySlot{
  grid-area:accent !important;
  align-self:start !important;
  justify-self:center !important;
  width:44px !important;
  min-width:44px !important;
  height:42px !important;
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
html:not(.rooom-ipad-portrait) #roomList .listItem.open .listMain,
html:not(.rooom-ipad-portrait) :is(#userRoomList,#prepOpenCloneList) .listItem.open .listMain,
html:not(.rooom-ipad-portrait) #archiveRoomList .listItem.open .listMain{
  grid-area:main !important;
  align-self:start !important;
  justify-self:stretch !important;
  margin:0 !important;
  padding:0 !important;
}
html:not(.rooom-ipad-portrait) #roomList .listItem.open .listMeta,
html:not(.rooom-ipad-portrait) :is(#userRoomList,#prepOpenCloneList) .listItem.open .listMeta,
html:not(.rooom-ipad-portrait) #archiveRoomList .listItem.open .listMeta{
  grid-area:meta !important;
  align-self:start !important;
  justify-self:end !important;
  margin-top:6px !important;
}
html:not(.rooom-ipad-portrait) #roomList .listItem.open .listEnterBtn.entryIconBtn,
html:not(.rooom-ipad-portrait) :is(#userRoomList,#prepOpenCloneList) .listItem.open .listEnterBtn.entryIconBtn,
html:not(.rooom-ipad-portrait) #archiveRoomList .listItem.open .listEnterBtn.entryIconBtn{
  grid-area:button !important;
  align-self:start !important;
  justify-self:end !important;
  margin-top:1px !important;
}

/* 3) 準備部屋：公式以外の既存部屋と同じ共通グラデ背景。ダークでもこの共通外観を維持。 */
#entryRoomList > .entryRoomList > .entryRoomListItem,
html.rooom-dark-theme #entryRoomList > .entryRoomList > .entryRoomListItem{
  background:linear-gradient(180deg,var(--rooom-common-top) 0%,var(--rooom-common-bottom) 100%) !important;
  color:var(--rooom-card-text) !important;
  border-color:rgba(0,0,0,.07) !important;
}
html.rooom-dark-theme #entryRoomList .entryRoomListTitle,
html.rooom-dark-theme #entryRoomList .entryRoomListChevron{
  color:var(--rooom-card-text) !important;
}
html.rooom-dark-theme #entryRoomList .entryRoomListDesc,
html.rooom-dark-theme #entryRoomList .entryRoomListMetaCompact{
  color:var(--rooom-card-subtext) !important;
}

/* 4) 準備部屋：3大枠の既存リスト外観を正本にする（見た目のみ）
      DOM・クリック処理・取消・早期OPEN・通報・日時/人数の値や処理には触れない。 */
#entryRoomList > .entryRoomList > .entryRoomListItem,
html.rooom-dark-theme #entryRoomList > .entryRoomList > .entryRoomListItem{
  min-height:58px !important;
  height:auto !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* 既存3大枠の listItem と同じ「左44px / 本文 / 右差分」の起点・余白。 */
#entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListHead{
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) 154px !important;
  grid-template-rows:auto !important;
  align-items:center !important;
  gap:10px !important;
  min-height:58px !important;
  padding:8px 10px !important;
  box-sizing:border-box !important;
}

/* 左カテゴリ枠は3大枠と同寸。 */
#entryRoomList .entryRoomListCategorySlot{
  grid-column:1 !important;
  width:44px !important;
  min-width:44px !important;
  min-height:42px !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  align-self:stretch !important;
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
#entryRoomList .entryRoomListCategorySlot .listCategoryBadge{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  margin:0 !important;
  transform:none !important;
  border-radius:12px !important;
  font-size:17px !important;
}

/* 本文側も3大枠の listMain / listTitleRow / listName / listDesc の寸法感へ。 */
#entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListToggle{
  grid-column:2 !important;
  align-self:center !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}
#entryRoomList .entryRoomListMain{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:0 !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}
#entryRoomList .entryRoomListTitleRow{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}
#entryRoomList .entryRoomListTitle{
  display:block !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#entryRoomList .entryRoomListDesc{
  display:block !important;
  min-width:0 !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  font-size:12px !important;
  line-height:1.18 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#entryRoomList .entryRoomListChevron{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  margin:0 0 0 4px !important;
  padding:0 !important;
  font-size:10px !important;
  line-height:16px !important;
  opacity:.82 !important;
  transition:transform .18s ease !important;
  transform:none !important;
}
#entryRoomList .entryRoomListItem.open .entryRoomListChevron{
  transform:rotate(180deg) !important;
}

/* 準備だけの右操作は機能を変えず、既存リストの右ブロック位置へ固定。 */
#entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListSide{
  grid-column:3 !important;
  align-self:center !important;
  justify-self:end !important;
  min-width:154px !important;
  width:154px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:4px !important;
}
#entryRoomList .entryRoomListSideActions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:5px !important;
  min-height:22px !important;
}
#entryRoomList .entryRoomListSide .entryRoomListMetaCompact{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  margin:0 !important;
  padding:0 !important;
  font-size:10px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}

/* 展開時も3大枠と同じ思想：外枠は下へ伸び、固定物は横位置を変えない。 */
#entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListHead{
  align-items:start !important;
}
#entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListCategorySlot{
  align-self:start !important;
  height:42px !important;
  min-height:42px !important;
  margin:0 !important;
}
#entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListToggle{
  align-self:start !important;
  margin:0 !important;
}
#entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListSide{
  align-self:start !important;
  margin:0 !important;
}
#entryRoomList .entryRoomListItem.open .entryRoomListTitle{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.25 !important;
}
#entryRoomList .entryRoomListItem.open .entryRoomListDesc{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  height:auto !important;
  max-height:none !important;
  margin:6px 0 0 !important;
  padding:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  line-height:1.35 !important;
}

/* ダーク時もカード自体は明るい共通グラデなので、文字・矢印はカード背景基準。 */
html.rooom-dark-theme #entryRoomList .entryRoomListTitle,
html.rooom-dark-theme #entryRoomList .entryRoomListChevron{
  color:var(--rooom-card-text) !important;
}
html.rooom-dark-theme #entryRoomList .entryRoomListDesc,
html.rooom-dark-theme #entryRoomList .entryRoomListMetaCompact{
  color:var(--rooom-card-subtext) !important;
}

@media (max-width:640px){
  #entryRoomList > .entryRoomList > .entryRoomListItem{
    min-height:50px !important;
    border-radius:16px !important;
  }
  #entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListHead{
    grid-template-columns:38px minmax(0,1fr) 138px !important;
    gap:7px !important;
    min-height:50px !important;
    padding:7px 8px !important;
  }
  #entryRoomList .entryRoomListCategorySlot{
    width:38px !important;
    min-width:38px !important;
    min-height:40px !important;
  }
  #entryRoomList .entryRoomListCategorySlot .listCategoryBadge{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    border-radius:11px !important;
    font-size:16px !important;
  }
  #entryRoomList .entryRoomListTitle{
    font-size:15px !important;
  }
  #entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListSide{
    min-width:138px !important;
    width:138px !important;
  }
  #entryRoomList .entryRoomEarlyOpenUi,
  #entryRoomList .entryRoomListSide .entryRoomCancelUi{
    font-size:8px !important;
    padding:3px 6px !important;
  }
  #entryRoomList .entryRoomListSide .entryRoomListMetaCompact{
    font-size:9px !important;
    gap:5px !important;
  }
}


/* ===== 2026-08-29: リスト展開矢印を「くるん」に統一（見た目のみ） ===== */
/* 展開/縮小ロジック・タイトル/説明表示・アーカイブ既存挙動には触れない。 */
#roomList .listToggle,
:is(#userRoomList,#prepOpenCloneList) .listToggle,
#archiveRoomList .listToggle{
  transition:transform .22s ease !important;
  transform-origin:center center !important;
}

#roomList .listItem:not(.open) .listToggle,
:is(#userRoomList,#prepOpenCloneList) .listItem:not(.open) .listToggle,
#archiveRoomList .listItem:not(.open) .listToggle{
  transform:rotate(0deg) !important;
}

#roomList .listItem.open .listToggle,
:is(#userRoomList,#prepOpenCloneList) .listItem.open .listToggle,
#archiveRoomList .listItem.open .listToggle{
  transform:rotate(180deg) !important;
}


/* ===== 2026-08-29: 準備部屋だけ本文幅をアーカイブ基準に固定し、操作類を別レイヤー化 ===== */
/* 見た目のみ。アーカイブ/公式/オープン/JS/通知/作成処理/クリック処理には触れない。
   目的: 同じタイトル・説明なら、準備とアーカイブで同じ本文幅・同じ切れ方にする。
   取消/早期OPEN/日時/人数/通報は本文幅を削らない独立配置にする。 */

#entryRoomList > .entryRoomList > .entryRoomListItem{
  position:relative !important;
  overflow:hidden !important;
}

/* 本文の基礎レイアウトはアーカイブと同じ:
   左44px + 本文 + 右120px相当の余白を確保。
   右操作ブロックはこの余白の上に絶対配置して、本文列幅には影響させない。 */
#entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListHead{
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) 120px !important;
  align-items:center !important;
  gap:10px !important;
  min-height:58px !important;
  padding:8px 10px !important;
  box-sizing:border-box !important;
  position:relative !important;
}

/* 左アイコン */
#entryRoomList .entryRoomListCategorySlot{
  grid-column:1 !important;
  align-self:center !important;
  justify-self:center !important;
}

/* 本文 */
#entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListToggle{
  grid-column:2 !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  align-self:center !important;
}

#entryRoomList .entryRoomListMain{
  width:100% !important;
  min-width:0 !important;
}

/* 右操作類は本文幅計算から切り離す */
#entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListSide,
#entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListSide{
  position:absolute !important;
  right:10px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:120px !important;
  min-width:120px !important;
  max-width:120px !important;
  margin:0 !important;
  padding:0 !important;
  z-index:3 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:4px !important;
}

/* ボタンは将来クリック機能を持つ前提なので、クリック可能領域を保持 */
#entryRoomList .entryRoomListSideActions{
  width:100% !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:5px !important;
}

#entryRoomList .entryRoomEarlyOpenUi,
#entryRoomList .entryRoomListSide .entryRoomCancelUi{
  white-space:nowrap !important;
  flex:0 0 auto !important;
}

/* 日時/人数も独立ブロック */
#entryRoomList .entryRoomListSide .entryRoomListMetaCompact{
  width:100% !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:6px !important;
  white-space:nowrap !important;
}

/* 縮小時の本文表示はアーカイブと同じく1行ずつ。
   同じ本文幅なので、同じ文字なら同じ位置で切れる。 */
#entryRoomList .entryRoomListItem:not(.open) .entryRoomListTitle,
#entryRoomList .entryRoomListItem:not(.open) .entryRoomListDesc{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  -webkit-line-clamp:unset !important;
}

/* 展開時はタイトル/説明だけ全文表示。
   右操作類の位置は変えない。 */
#entryRoomList .entryRoomListItem.open .entryRoomListTitle,
#entryRoomList .entryRoomListItem.open .entryRoomListDesc{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  -webkit-line-clamp:unset !important;
  overflow-wrap:anywhere !important;
}

#entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListHead{
  align-items:start !important;
}

#entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListToggle{
  align-self:start !important;
}

#entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListSide{
  top:8px !important;
  transform:none !important;
}

/* スマホ */
@media (max-width:640px){
  #entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListHead{
    grid-template-columns:38px minmax(0,1fr) 120px !important;
    gap:7px !important;
    min-height:50px !important;
    padding:7px 8px !important;
  }

  #entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListSide,
  #entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListSide{
    right:8px !important;
    width:120px !important;
    min-width:120px !important;
    max-width:120px !important;
  }

  #entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListSide{
    top:7px !important;
  }
}


/* ===== 2026-08-29: 準備部屋の展開表示をアーカイブと同じ縦配置へ統一 ===== */
/* 見た目のみ。
   アーカイブ/公式/オープン/JS/通知/作成処理/クリック処理には触れない。
   展開時は、左アイコン・右操作ブロックをカード高の中央へ置き、
   タイトル/説明だけが縦に伸びる見え方へ揃える。 */

/* 準備部屋の行全体は常に中央基準 */
#entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListHead,
#entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListHead{
  align-items:center !important;
}

/* 左カテゴリ位置を展開時も中央へ */
#entryRoomList .entryRoomListCategorySlot,
#entryRoomList .entryRoomListItem.open .entryRoomListCategorySlot{
  align-self:center !important;
  justify-self:center !important;
  margin:0 !important;
}

/* 本文だけは展開時に上から伸ばす */
#entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListToggle{
  align-self:center !important;
}

#entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListToggle{
  align-self:start !important;
}

/* 右側の取消/早期OPEN/日時/人数/通報は
   展開してもカード中央位置を維持 */
#entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListSide,
#entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListSide{
  top:50% !important;
  transform:translateY(-50%) !important;
  align-self:center !important;
  margin:0 !important;
}

/* 展開時の本文は全文表示 */
#entryRoomList .entryRoomListItem.open .entryRoomListTitle,
#entryRoomList .entryRoomListItem.open .entryRoomListDesc{
  display:block !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  -webkit-line-clamp:unset !important;
  max-height:none !important;
  overflow-wrap:anywhere !important;
}

/* スマホも同じ思想 */
@media (max-width:640px){
  #entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListHead,
  #entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListHead{
    align-items:center !important;
  }

  #entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListSide,
  #entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListSide{
    top:50% !important;
    transform:translateY(-50%) !important;
  }
}


/* ===== 2026-08-29: 準備部屋の共通部分をアーカイブ配置へ統一（見た目のみ） ===== */
/* 対象：左カテゴリ枠 / 本文枠 / タイトル / 説明 / 展開矢印 / 展開時の縦配置
   差分として残す：取消 / 早期OPEN / 日時 / 人数 / 通報
   JS・通知・作成処理・クリック処理・アーカイブ/公式/オープン側CSSには触れない。 */

/* 外側の基本配置：
   左カテゴリ44px + 本文 + 準備専用右操作154px。
   左～本文のルールはアーカイブと同じ寸法・中央基準にする。 */
#entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListHead,
#entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListHead{
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) 154px !important;
  grid-template-areas:"accent main side" !important;
  grid-template-rows:auto !important;
  align-items:center !important;
  gap:10px !important;
  row-gap:0 !important;
  min-height:50px !important;
  height:auto !important;
  padding:8px 10px !important;
  box-sizing:border-box !important;
}

/* 左カテゴリ枠をアーカイブ .listCategorySlot と同じ扱いにする */
#entryRoomList .entryRoomListCategorySlot,
#entryRoomList .entryRoomListItem.open .entryRoomListCategorySlot{
  grid-area:accent !important;
  width:44px !important;
  min-width:44px !important;
  min-height:42px !important;
  height:auto !important;
  align-self:stretch !important;
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}

#entryRoomList .entryRoomListCategorySlot .listCategoryBadge{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  margin:0 !important;
  transform:none !important;
  border-radius:12px !important;
  font-size:17px !important;
}

/* 本文枠をアーカイブ .listMain と同じ中央基準にする */
#entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListToggle,
#entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListToggle{
  grid-area:main !important;
  width:100% !important;
  min-width:0 !important;
  align-self:center !important;
  justify-self:stretch !important;
  margin:0 !important;
  padding:0 !important;
}

#entryRoomList .entryRoomListMain,
#entryRoomList .entryRoomListItem.open .entryRoomListMain{
  min-width:0 !important;
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* タイトル行・文字寸法をアーカイブ側と同じ基準にする */
#entryRoomList .entryRoomListTitleRow,
#entryRoomList .entryRoomListItem.open .entryRoomListTitleRow{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  min-width:0 !important;
  line-height:1 !important;
  margin:0 !important;
  padding:0 !important;
}

#entryRoomList .entryRoomListTitle{
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1.08 !important;
  margin:0 !important;
  padding:0 !important;
}

#entryRoomList .entryRoomListDesc{
  font-size:12px !important;
  line-height:1.16 !important;
  margin:2px 0 0 !important;
  padding:0 !important;
}

/* 縮小時：アーカイブと同じ2行クランプ基準 */
#entryRoomList .entryRoomListItem:not(.open) .entryRoomListTitle,
#entryRoomList .entryRoomListItem:not(.open) .entryRoomListDesc{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  white-space:normal !important;
  overflow:hidden !important;
  text-overflow:clip !important;
}

/* 展開時：タイトル/説明だけ全文表示 */
#entryRoomList .entryRoomListItem.open .entryRoomListTitle,
#entryRoomList .entryRoomListItem.open .entryRoomListDesc{
  display:block !important;
  -webkit-line-clamp:unset !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  max-height:none !important;
  overflow-wrap:anywhere !important;
}

#entryRoomList .entryRoomListItem.open .entryRoomListDesc{
  margin-top:4px !important;
  line-height:1.26 !important;
}

/* 矢印もアーカイブと同じサイズ感 + くるん回転 */
#entryRoomList .entryRoomListChevron{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  min-height:16px !important;
  margin:0 0 0 4px !important;
  padding:0 !important;
  font-size:10px !important;
  line-height:1 !important;
  opacity:.82 !important;
  transform:rotate(0deg) !important;
  transform-origin:center center !important;
  transition:transform .22s ease !important;
}

#entryRoomList .entryRoomListItem.open .entryRoomListChevron{
  transform:rotate(180deg) !important;
}

/* 準備固有の右側だけ差分として残す */
#entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListSide,
#entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListSide{
  grid-area:side !important;
  position:static !important;
  width:154px !important;
  min-width:154px !important;
  max-width:154px !important;
  align-self:center !important;
  justify-self:end !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:4px !important;
}

/* スマホ：アーカイブの38px左枠と同じ */
@media (max-width:640px){
  #entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListHead,
  #entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListHead{
    grid-template-columns:38px minmax(0,1fr) 138px !important;
    gap:8px !important;
    min-height:50px !important;
    padding:8px 10px !important;
  }

  #entryRoomList .entryRoomListCategorySlot,
  #entryRoomList .entryRoomListItem.open .entryRoomListCategorySlot{
    width:38px !important;
    min-width:38px !important;
    min-height:40px !important;
  }

  #entryRoomList .entryRoomListCategorySlot .listCategoryBadge{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    border-radius:11px !important;
    font-size:16px !important;
  }

  #entryRoomList > .entryRoomList > .entryRoomListItem .entryRoomListSide,
  #entryRoomList > .entryRoomList > .entryRoomListItem.open .entryRoomListSide{
    width:138px !important;
    min-width:138px !important;
    max-width:138px !important;
  }
}



/* ===== 2026-08-29 一時5枠目：オープン部屋完全共有テスト =====
   #prepOpenCloneList は #userRoomList と同じCSSルールだけを共有する。
   アーカイブ専用CSSは共有しない。
   旧準備部屋は残したまま。比較完了後、この5枠目だけ削除可能。 */


/* ===== 2026-08-29 新準備：オープン構造そのまま / 見える右情報だけ準備化 =====
   外側は #userRoomList と同じ4列構造を完全共有する。
   grid-template-columns / grid-template-areas / 左アイコン / 本文 / 展開挙動は準備専用で上書きしない。
*/

/* listMeta はオープンと同じ3番目のスロット。
   右端の4番目スロットまで視覚的に使って、準備の情報を表示する。
   グリッド自体の幅は一切変えないので、本文幅はオープンと同じ。 */
#prepOpenCloneList .prepListMeta{
  position:relative !important;
  z-index:2 !important;
  width:130px !important;
  min-width:130px !important;
  max-width:130px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  margin-right:-54px !important;
  display:grid !important;
  grid-template-rows:18px 14px !important;
  align-content:center !important;
  align-items:center !important;
  justify-items:end !important;
  gap:2px !important;
  overflow:visible !important;
  white-space:nowrap !important;
}

/* 4番目の listEnterBtn はオープンと同じ場所・同じサイズで残す。
   準備では入室アイコンを見せず、3番目スロットの準備表示に場所だけ譲る。 */
#prepOpenCloneList .prepListEnterSlot{
  visibility:hidden !important;
  pointer-events:none !important;
}

/* 上段：取消 / 早期OPEN または 通報 */
#prepOpenCloneList .prepListMetaTop{
  width:100% !important;
  height:18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:4px !important;
  font-size:8px !important;
  line-height:18px !important;
}

#prepOpenCloneList .prepVisualCancel,
#prepOpenCloneList .prepVisualEarly,
#prepOpenCloneList .prepVisualReserve,
#prepOpenCloneList .prepVisualReport{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:18px !important;
  padding:0 6px !important;
  border-radius:999px !important;
  font-weight:800 !important;
  line-height:18px !important;
  box-sizing:border-box !important;
}

#prepOpenCloneList .prepVisualCancel{
  border:1px solid rgba(202,72,72,.30) !important;
  background:rgba(202,72,72,.09) !important;
  color:#b54444 !important;
}

#prepOpenCloneList .prepVisualEarly{
  border:1px solid rgba(35,145,75,.35) !important;
  background:rgba(35,145,75,.10) !important;
  color:#18713d !important;
}

#prepOpenCloneList .prepVisualReport{
  padding:0 2px !important;
  color:#666 !important;
}

/* 下段：開始予定 / 人数 */
#prepOpenCloneList .prepListMetaBottom{
  width:100% !important;
  height:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:6px !important;
  font-size:9px !important;
  line-height:14px !important;
  color:#666 !important;
}

/* スマホでも外側構造はオープン共通のまま。
   右表示だけ少し縮める。 */
@media (max-width:640px){
  #prepOpenCloneList .prepListMeta{
    width:120px !important;
    min-width:120px !important;
    max-width:120px !important;
    margin-right:-50px !important;
  }

  #prepOpenCloneList .prepListMetaTop{
    gap:3px !important;
    font-size:7px !important;
  }

  #prepOpenCloneList .prepVisualCancel,
  #prepOpenCloneList .prepVisualEarly,
  #prepOpenCloneList .prepVisualReserve,
  #prepOpenCloneList .prepVisualReport{
    padding:0 5px !important;
  }

  #prepOpenCloneList .prepListMetaBottom{
    gap:4px !important;
    font-size:8px !important;
  }
}

html.rooom-dark-theme #prepOpenCloneList .prepListMetaBottom,
html.rooom-dark-theme #prepOpenCloneList .prepVisualReport{
  color:#666 !important;
}


/* ===== 2026-08-29 新準備カード：オープンカード構造完全共有 =====
   card / cardImageRoom / cardPlainRoom / cardImageBottom / cardPlainBottom など
   オープン部屋の標準構造・レスポンシブ・画像オーバーレイをそのまま使う。
   準備専用で変えるのは右下に見える語句だけ。
*/

#prepOpenCloneList .prepCardPeople,
#prepOpenCloneList .prepCardTime{
  overflow:visible !important;
}

#prepOpenCloneList .prepCardActions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:4px !important;
  white-space:nowrap !important;
}

#prepOpenCloneList .prepCardMeta{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:6px !important;
  white-space:nowrap !important;
  font-size:10px !important;
}

#prepOpenCloneList .prepCardPeople .prepVisualCancel,
#prepOpenCloneList .prepCardPeople .prepVisualEarly,
#prepOpenCloneList .prepCardPeople .prepVisualReserve,
#prepOpenCloneList .prepCardPeople .prepVisualReport{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:18px !important;
  height:18px !important;
  padding:0 6px !important;
  border-radius:999px !important;
  font-size:8px !important;
  font-weight:800 !important;
  line-height:18px !important;
  box-sizing:border-box !important;
}

#prepOpenCloneList .prepCardEnterSlot{
  visibility:hidden !important;
  pointer-events:none !important;
}

@media (max-width:640px){
  #prepOpenCloneList .prepCardMeta{
    gap:4px !important;
    font-size:9px !important;
  }

  #prepOpenCloneList .prepCardPeople .prepVisualCancel,
  #prepOpenCloneList .prepCardPeople .prepVisualEarly,
  #prepOpenCloneList .prepCardPeople .prepVisualReserve,
  #prepOpenCloneList .prepCardPeople .prepVisualReport{
    padding:0 5px !important;
    font-size:7px !important;
  }
}

/* ===== 2026-08-29 仮実装：作成ボタン2段 + オープンクールタイムだけモーダルロック ===== */
.rooomFloatingActionDock .rooomDockCreateSlot{
  width:210px !important;
  min-width:210px !important;
  max-width:210px !important;
  height:54px !important;
  min-height:54px !important;
  padding:5px 11px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  line-height:1 !important;
}
.rooomFloatingActionDock .rooomDockCreateSlot .rooomCreateDockMain{
  display:block;
  font-size:14px;
  font-weight:800;
  line-height:1.05;
  white-space:nowrap;
}
.rooomFloatingActionDock .rooomDockCreateSlot .rooomCreateDockStatus{
  display:block;
  font-size:10px;
  font-weight:650;
  line-height:1;
  opacity:.72;
  white-space:nowrap;
}
.rooomFloatingActionDock .rooomDockCreateSlot .rooomCreateDockDivider{opacity:.45;}

#createRoomModal .createTimingChoice .createTimingCard{position:relative;}
#createRoomModal .createTimingChoice.is-open-cooldown{cursor:not-allowed;}
#createRoomModal .createTimingChoice.is-open-cooldown .createTimingCard{
  overflow:hidden;
  opacity:.62;
}
#createRoomModal .createTimingChoice .createTimingCooldownOverlay{
  position:absolute !important;
  inset:0 !important;
  z-index:5 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:inherit !important;
  background:rgba(255,255,255,.68) !important;
  color:#111 !important;
  font-size:17px !important;
  font-weight:900 !important;
  line-height:1 !important;
  pointer-events:none !important;
}
html.rooom-dark-theme #createRoomModal .createTimingChoice .createTimingCooldownOverlay{
  background:rgba(18,18,18,.68) !important;
  color:#fff !important;
}
@media (max-width:390px){
  .rooomFloatingActionDock .rooomDockCreateSlot{
    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;
    height:52px !important;
    min-height:52px !important;
    padding:4px 8px !important;
  }
  .rooomFloatingActionDock .rooomDockCreateSlot .rooomCreateDockMain{font-size:12px;}
  .rooomFloatingActionDock .rooomDockCreateSlot .rooomCreateDockStatus{font-size:8.8px;}
}

/* ===== 2026-08-30 準備部屋 操作UI統一：取消 / 早期OPEN / 通報 ===== */
#prepOpenCloneList .prepVisualCancel,
#prepOpenCloneList .prepVisualEarly,
#prepOpenCloneList .prepVisualReserve,
#prepOpenCloneList .prepVisualReport{
  appearance:none !important;
  -webkit-appearance:none !important;
  height:18px !important;
  min-height:18px !important;
  padding:0 6px !important;
  border-radius:999px !important;
  font-family:inherit !important;
  font-size:8px !important;
  font-weight:800 !important;
  line-height:16px !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
  cursor:pointer !important;
  text-decoration:none !important;
}
#prepOpenCloneList .prepVisualReserve{
  border:1px solid rgba(74,120,210,.34) !important;
  background:rgba(74,120,210,.09) !important;
  color:#315fba !important;
}
#prepOpenCloneList .prepVisualReserve:hover:not(:disabled){
  background:rgba(74,120,210,.15) !important;
}
#prepOpenCloneList .prepVisualReserve.is-reserved{
  border-color:rgba(160,110,40,.34) !important;
  background:rgba(210,155,70,.10) !important;
  color:#8a5a18 !important;
}
#prepOpenCloneList .prepVisualReserve.is-full,
#prepOpenCloneList .prepVisualReserve:disabled{
  border-color:rgba(120,120,120,.24) !important;
  background:rgba(120,120,120,.08) !important;
  color:#888 !important;
  cursor:default !important;
  opacity:.78 !important;
}

#prepOpenCloneList .prepVisualReport{
  border:1px solid rgba(202,72,72,.30) !important;
  background:rgba(202,72,72,.07) !important;
  color:#b54444 !important;
}
#prepOpenCloneList .prepVisualReport:hover:not(:disabled){
  background:rgba(202,72,72,.12) !important;
}
#prepOpenCloneList .prepVisualReport.is-reported,
#prepOpenCloneList .prepVisualReport:disabled{
  border-color:rgba(120,120,120,.24) !important;
  background:rgba(120,120,120,.08) !important;
  color:#888 !important;
  cursor:default !important;
  opacity:.78 !important;
  pointer-events:none !important;
}
html.rooom-dark-theme #prepOpenCloneList .prepVisualReserve{
  border-color:rgba(125,165,255,.34) !important;
  background:rgba(95,130,255,.10) !important;
  color:#b9ccff !important;
}
html.rooom-dark-theme #prepOpenCloneList .prepVisualReserve.is-reserved{
  border-color:rgba(230,185,105,.30) !important;
  background:rgba(230,185,105,.09) !important;
  color:#e5c88f !important;
}
html.rooom-dark-theme #prepOpenCloneList .prepVisualReserve.is-full,
html.rooom-dark-theme #prepOpenCloneList .prepVisualReserve:disabled{
  border-color:rgba(190,190,190,.18) !important;
  background:rgba(190,190,190,.07) !important;
  color:#929292 !important;
}
html.rooom-dark-theme #prepOpenCloneList .prepVisualReport{
  border-color:rgba(255,125,125,.34) !important;
  background:rgba(255,95,95,.10) !important;
  color:#ffb2b2 !important;
}
html.rooom-dark-theme #prepOpenCloneList .prepVisualReport.is-reported,
html.rooom-dark-theme #prepOpenCloneList .prepVisualReport:disabled{
  border-color:rgba(190,190,190,.18) !important;
  background:rgba(190,190,190,.07) !important;
  color:#929292 !important;
}
@media (max-width:640px){
  #prepOpenCloneList .prepVisualCancel,
  #prepOpenCloneList .prepVisualEarly,
  #prepOpenCloneList .prepVisualReserve,
  #prepOpenCloneList .prepVisualReport{
    font-size:7px !important;
    padding:0 5px !important;
  }
}

/* =========================================================
   2026-08-31 TOP 4大枠タブ
   - 説明アイコン列の直下
   - 公式 / オープン / 準備 / アーカイブを横幅4等分
   - 選択した区分だけ下に表示
   ========================================================= */
.rooomSectionHeaderHidden{
  display:none !important;
}

.rooomSectionTabs{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:0 !important;
  margin:0 0 14px !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid rgba(0,0,0,.13) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.66) !important;
}

.rooomSectionTab{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  min-width:0 !important;
  min-height:58px !important;
  margin:0 !important;
  padding:8px 6px !important;
  border:0 !important;
  border-right:1px solid rgba(0,0,0,.10) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#333 !important;
  cursor:pointer !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  text-align:center !important;
  font-family:inherit !important;
  box-shadow:none !important;
  transition:background .15s ease,color .15s ease !important;
}

.rooomSectionTab:last-child{
  border-right:0 !important;
}

.rooomSectionTab:hover{
  background:rgba(255,255,255,.72) !important;
}

.rooomSectionTab.active,
.rooomSectionTab[aria-selected="true"]{
  background:#141414 !important;
  color:#fff !important;
}

.rooomSectionTabLabel{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:14px !important;
  font-weight:850 !important;
  line-height:1.1 !important;
}

.rooomSectionTabSummary{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  width:100% !important;
  min-height:14px !important;
  color:#666 !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.rooomSectionTab.active .rooomSectionTabSummary,
.rooomSectionTab[aria-selected="true"] .rooomSectionTabSummary{
  color:rgba(255,255,255,.88) !important;
}

.rooomSectionTabCount{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
}

.rooomSectionTabDot{
  display:inline-block !important;
  width:9px !important;
  height:9px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.92) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18) !important;
  flex:0 0 auto !important;
}

html.rooom-dark-theme .rooomSectionTabs{
  border-color:rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.06) !important;
}
html.rooom-dark-theme .rooomSectionTab{
  color:#eee !important;
  border-right-color:rgba(255,255,255,.12) !important;
}
html.rooom-dark-theme .rooomSectionTab:hover{
  background:rgba(255,255,255,.08) !important;
}
html.rooom-dark-theme .rooomSectionTab.active,
html.rooom-dark-theme .rooomSectionTab[aria-selected="true"]{
  background:#f0f0f0 !important;
  color:#111 !important;
}
html.rooom-dark-theme .rooomSectionTab.active .rooomSectionTabSummary,
html.rooom-dark-theme .rooomSectionTab[aria-selected="true"] .rooomSectionTabSummary{
  color:#555 !important;
}

@media (max-width:640px){
  .rooomSectionTabs{
    margin-bottom:10px !important;
    border-radius:12px !important;
  }
  .rooomSectionTab{
    min-height:54px !important;
    padding:7px 3px !important;
    gap:4px !important;
  }
  .rooomSectionTabLabel{
    font-size:12px !important;
    letter-spacing:-.03em !important;
  }
  .rooomSectionTabSummary{
    gap:7px !important;
    font-size:10px !important;
  }
  .rooomSectionTabDot{
    width:8px !important;
    height:8px !important;
  }
  html[lang="en"] .rooomSectionTabLabel{
    font-size:10.5px !important;
    letter-spacing:-.04em !important;
  }
}

/* =========================================================
   2026-08-31 TOP 4大枠タブ 余白統一
   - 旧縦並び4セクションの間に置かれていた .sectionGap が、
     後ろのタブほど累積して余白を広げていたため無効化。
   - 公式タブと同じ「タブ直下 -> 先頭カード」の距離に全区分を統一。
   ========================================================= */
html.rooom-section-tabs-active .sectionGap{
  display:none !important;
  width:0 !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* =========================================================
   2026-08-31 TOP 4大枠 独立カード化
   - 4等分は維持
   - 連結タブではなく各枠を独立表示
   - 説明アイコン列を将来削除しても、この4枠はそのまま上へ詰まる
   ========================================================= */
.rooomSectionTabs{
  gap:6px !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}
.rooomSectionTab{
  border:1px solid rgba(0,0,0,.13) !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.72) !important;
  overflow:hidden !important;
}
.rooomSectionTab:last-child{
  border-right:1px solid rgba(0,0,0,.13) !important;
}
.rooomSectionTab.active,
.rooomSectionTab[aria-selected="true"]{
  border-color:#141414 !important;
  background:#141414 !important;
}
html.rooom-dark-theme .rooomSectionTabs{
  border:0 !important;
  background:transparent !important;
}
html.rooom-dark-theme .rooomSectionTab{
  border:1px solid rgba(255,255,255,.14) !important;
  border-right-color:rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.06) !important;
}
html.rooom-dark-theme .rooomSectionTab.active,
html.rooom-dark-theme .rooomSectionTab[aria-selected="true"]{
  border-color:#f0f0f0 !important;
  background:#f0f0f0 !important;
}
@media (max-width:640px){
  .rooomSectionTabs{gap:5px !important;}
  .rooomSectionTab{border-radius:10px !important;}
}


/* ===== 2026-08-31 準備予約：満員競合案内モーダル ===== */
.prepReservationNoticeModal{
  position:fixed;inset:0;z-index:10020;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.42);
}
.prepReservationNoticeModal.show{display:flex;}
.prepReservationNoticePanel{
  width:min(420px,calc(100vw - 32px));box-sizing:border-box;padding:22px 20px 18px;
  border-radius:18px;background:#fff;color:#111;box-shadow:0 18px 50px rgba(0,0,0,.25);text-align:center;
}
.prepReservationNoticeTitle{font-size:18px;font-weight:900;line-height:1.35;margin:0 0 10px;}
.prepReservationNoticeBody{font-size:14px;font-weight:600;line-height:1.65;color:#444;margin:0 0 18px;}
.prepReservationNoticeOk{
  min-width:112px;min-height:40px;padding:9px 20px;border:0;border-radius:12px;
  background:#111;color:#fff;font-size:14px;font-weight:800;cursor:pointer;
}
html.rooom-dark-theme .prepReservationNoticePanel{background:#202020;color:#fff;}
html.rooom-dark-theme .prepReservationNoticeBody{color:#d2d2d2;}
html.rooom-dark-theme .prepReservationNoticeOk{background:#fff;color:#111;}


/* =========================================================
   2026-08-31 募集中リスト：右端を主操作「予約 / 取消」に統一（試作）
   - 他大枠と同じく、一番右を主操作スロットとして使う
   - 右メタは「人数 / 予定時間」の2段
   - 通報は通常時は隠し、カード展開時だけ表示
   - 作成者側の「取り消す / 早期OPEN」は現行を維持
   ========================================================= */

#prepOpenCloneList .listItem:not(.open) .prepListExpandedReport{
  display:none !important;
}
#prepOpenCloneList .listItem.open .prepListExpandedReport{
  display:flex !important;
  width:100% !important;
  justify-content:flex-end !important;
  align-items:center !important;
  margin-top:2px !important;
}

/* 他人の募集：右メタは人数 / 時間だけを読みやすく2段にする */
#prepOpenCloneList .prepListMetaInfo{
  width:100% !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  color:#666 !important;
  white-space:nowrap !important;
}

/* 右端の主操作。開催中の入室・アーカイブの読むと同じ「一番右」の位置 */
#prepOpenCloneList .prepListPrimaryReserve{
  grid-area:button !important;
  align-self:center !important;
  justify-self:end !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:10px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
  cursor:pointer !important;
}

/* 「予約取消」は長いので、右端ボタンでは表示を短い「取消」に見せる。
   aria-label / title はJS側の正式な「予約取消」を保持する。 */
#prepOpenCloneList .prepListPrimaryReserve.is-reserved{
  font-size:0 !important;
}
#prepOpenCloneList .prepListPrimaryReserve.is-reserved::after{
  content:"取消";
  font-size:10px !important;
  font-weight:900 !important;
  line-height:1 !important;
}
html[lang="en"] #prepOpenCloneList .prepListPrimaryReserve.is-reserved::after{content:"Cancel";font-size:8px !important;}
html[lang="zh-CN"] #prepOpenCloneList .prepListPrimaryReserve.is-reserved::after{content:"取消";}
html[lang="ko"] #prepOpenCloneList .prepListPrimaryReserve.is-reserved::after{content:"취소";}

/* 満員も主操作スロット内に固定 */
#prepOpenCloneList .prepListPrimaryReserve.is-full{
  font-size:9px !important;
}

/* 他人の募集では、旧「右端を隠してメタを食い込ませる」幅取りを解除。
   3列目=人数/時間、4列目=予約/取消 の標準4列に戻す。 */
#prepOpenCloneList .listItem:has(.prepListPrimaryReserve) .prepListMeta{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:34px !important;
  min-height:34px !important;
  max-height:none !important;
  margin-right:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:1px !important;
  overflow:visible !important;
}
#prepOpenCloneList .listItem:has(.prepListPrimaryReserve) .prepListMetaTop,
#prepOpenCloneList .listItem:has(.prepListPrimaryReserve) .prepListMetaBottom{
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  line-height:1.1 !important;
  font-size:9px !important;
  justify-content:flex-end !important;
}

/* 展開しても人数・時間・予約ボタンの位置は中央固定 */
#prepOpenCloneList .listItem.open:has(.prepListPrimaryReserve) .prepListMeta,
#prepOpenCloneList .listItem.open:has(.prepListPrimaryReserve) .prepListPrimaryReserve{
  align-self:center !important;
  margin-top:0 !important;
}

@media (max-width:640px){
  #prepOpenCloneList .prepListPrimaryReserve{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:32px !important;
    min-height:32px !important;
    font-size:9px !important;
  }
  #prepOpenCloneList .prepListPrimaryReserve.is-reserved::after{
    font-size:9px !important;
  }
  html[lang="en"] #prepOpenCloneList .prepListPrimaryReserve.is-reserved::after{
    content:"Cancel";
    font-size:7px !important;
  }
  #prepOpenCloneList .listItem:has(.prepListPrimaryReserve) .prepListMetaTop,
  #prepOpenCloneList .listItem:has(.prepListPrimaryReserve) .prepListMetaBottom{
    font-size:8px !important;
  }
}

html.rooom-dark-theme #prepOpenCloneList .prepListMetaInfo{
  color:#bdbdbd !important;
}


/* =========================================================
   2026-08-31 募集中リスト：作成者の右端を「管理」1ボタンへ
   - 一覧上の「取り消す / 早期OPEN」直置きをやめる
   - 人数 / 時間 + 右端「管理」で他ユーザーの予約枠と骨格を統一
   - 管理を押すと十分な大きさの選択メニューを表示
   ========================================================= */
#prepOpenCloneList .prepListManageButton{
  grid-area:button !important;
  align-self:center !important;
  justify-self:end !important;
  width:44px !important; min-width:44px !important; max-width:44px !important;
  height:34px !important; min-height:34px !important;
  margin:0 !important; padding:0 !important;
  border:1px solid #b9b9b9 !important; border-radius:999px !important;
  background:#f3f3f3 !important; color:#333 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  font-size:10px !important; font-weight:900 !important; line-height:1 !important;
  white-space:nowrap !important; box-sizing:border-box !important; cursor:pointer !important;
}
#prepOpenCloneList .listItem:has(.prepListManageButton) .prepListMeta{
  width:auto !important; min-width:0 !important; max-width:none !important;
  height:34px !important; min-height:34px !important; margin-right:0 !important;
  display:flex !important; flex-direction:column !important; align-items:flex-end !important;
  justify-content:center !important; gap:1px !important; overflow:visible !important;
}
#prepOpenCloneList .listItem:has(.prepListManageButton) .prepListMetaTop,
#prepOpenCloneList .listItem:has(.prepListManageButton) .prepListMetaBottom{
  width:auto !important; height:auto !important; min-height:0 !important;
  line-height:1.1 !important; font-size:9px !important; justify-content:flex-end !important;
}
#prepOpenCloneList .listItem.open:has(.prepListManageButton) .prepListMeta,
#prepOpenCloneList .listItem.open:has(.prepListManageButton) .prepListManageButton{
  align-self:center !important; margin-top:0 !important;
}
.prepManageModal{
  position:fixed; inset:0; z-index:10050; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(0,0,0,.42); box-sizing:border-box;
}
.prepManageModal.show{display:flex;}
.prepManagePanel{
  width:min(360px,calc(100vw - 36px)); padding:20px; border-radius:18px;
  background:#fff; color:#111; box-shadow:0 18px 50px rgba(0,0,0,.28); box-sizing:border-box;
}
.prepManageTitle{font-size:17px; font-weight:900; text-align:center; margin:0 0 16px;}
.prepManageChoice,.prepManageClose{
  width:100%; min-height:48px; border-radius:13px; font-size:14px; font-weight:900;
  cursor:pointer; box-sizing:border-box;
}
.prepManageChoice{margin:0 0 10px;}
.prepManageEarlyChoice{border:1px solid #8fc8a7; background:#e9f8ef; color:#17633a;}
.prepManageCancelChoice{border:1px solid #e2a4a4; background:#fff0f0; color:#9b2c2c;}
.prepManageClose{border:1px solid #ccc; background:#f5f5f5; color:#333; margin-top:4px;}
@media (max-width:640px){
  #prepOpenCloneList .prepListManageButton{
    width:40px !important; min-width:40px !important; max-width:40px !important;
    height:32px !important; min-height:32px !important; font-size:9px !important;
  }
  #prepOpenCloneList .listItem:has(.prepListManageButton) .prepListMetaTop,
  #prepOpenCloneList .listItem:has(.prepListManageButton) .prepListMetaBottom{font-size:8px !important;}
}
html.rooom-dark-theme #prepOpenCloneList .prepListManageButton{background:#2d2d2d !important;color:#f2f2f2 !important;border-color:#666 !important;}
html.rooom-dark-theme .prepManagePanel{background:#202020;color:#fff;}
html.rooom-dark-theme .prepManageEarlyChoice{background:#183b29;color:#bff0cf;border-color:#3d7552;}
html.rooom-dark-theme .prepManageCancelChoice{background:#452323;color:#ffd0d0;border-color:#7d4848;}
html.rooom-dark-theme .prepManageClose{background:#303030;color:#eee;border-color:#666;}

/* =========================================================
   2026-08-31 管理ボタン：4言語で文字が枠内に確実に収まるよう微調整
   - ボタン外形は予約ボタンと同じ思想を維持
   - 英語 Manage のみ文字幅に合わせて少し縮小
   ========================================================= */
#prepOpenCloneList .prepListManageButton{
  overflow:hidden !important;
  text-overflow:clip !important;
  padding:0 2px !important;
  letter-spacing:-0.1px !important;
}
html[lang="en"] #prepOpenCloneList .prepListManageButton{
  font-size:8px !important;
  letter-spacing:-0.25px !important;
}
html[lang="zh-CN"] #prepOpenCloneList .prepListManageButton,
html[lang="ko"] #prepOpenCloneList .prepListManageButton,
html[lang="ja"] #prepOpenCloneList .prepListManageButton{
  font-size:10px !important;
  letter-spacing:0 !important;
}
@media (max-width:640px){
  #prepOpenCloneList .prepListManageButton{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    padding:0 2px !important;
  }
  html[lang="en"] #prepOpenCloneList .prepListManageButton{
    font-size:7.5px !important;
    letter-spacing:-0.3px !important;
  }
  html[lang="zh-CN"] #prepOpenCloneList .prepListManageButton,
  html[lang="ko"] #prepOpenCloneList .prepListManageButton,
  html[lang="ja"] #prepOpenCloneList .prepListManageButton{
    font-size:9px !important;
  }
}


/* =========================================================
   2026-08-31 4大枠：右上「？」＋機能説明ON/OFF
   - 各「？」はタブ本体と独立し、タブ切替を誤発火しない
   - 見た目は小さく、実タップ領域は確保
   ========================================================= */
.rooomSectionTabs{position:relative !important;}
.rooomFeatureHelpTrigger{
  appearance:none !important;-webkit-appearance:none !important;
  position:absolute !important;z-index:8 !important;
  width:22px !important;height:22px !important;
  margin:0 !important;padding:0 !important;
  border:0 !important;background:transparent !important;
  color:#666 !important;cursor:pointer !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  font:800 10px/1 inherit !important;
}
.rooomFeatureHelpTrigger::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:13px;height:13px;border:1px solid currentColor;border-radius:999px;
}
.rooomFeatureHelpTrigger[hidden],html.rooom-feature-help-off .rooomFeatureHelpTrigger{display:none !important;}
/* 各タブの右端から少し内側・上端から少し下へ。 */
.rooomSectionTabHelp{top:4px !important;}
.rooomSectionTabHelp1{left:calc(25% - 27px) !important;}
.rooomSectionTabHelp2{left:calc(50% - 27px) !important;}
.rooomSectionTabHelp3{left:calc(75% - 27px) !important;}
.rooomSectionTabHelp4{left:calc(100% - 27px) !important;}
html.rooom-dark-theme .rooomSectionTabHelp{color:#aaa !important;}
/* 選択中の黒タブ上だけ白系にする */
.rooomSectionTab:nth-child(1).active ~ .rooomSectionTabHelp1,
.rooomSectionTab:nth-child(1)[aria-selected="true"] ~ .rooomSectionTabHelp1,
.rooomSectionTab:nth-child(2).active ~ .rooomSectionTabHelp2,
.rooomSectionTab:nth-child(2)[aria-selected="true"] ~ .rooomSectionTabHelp2,
.rooomSectionTab:nth-child(3).active ~ .rooomSectionTabHelp3,
.rooomSectionTab:nth-child(3)[aria-selected="true"] ~ .rooomSectionTabHelp3,
.rooomSectionTab:nth-child(4).active ~ .rooomSectionTabHelp4,
.rooomSectionTab:nth-child(4)[aria-selected="true"] ~ .rooomSectionTabHelp4{color:rgba(255,255,255,.88) !important;}

.rooomFeatureHelpModal{
  position:fixed;inset:0;z-index:12050;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.46);
}
.rooomFeatureHelpPanel{
  width:min(360px,calc(100vw - 40px));padding:20px 18px 16px;border-radius:18px;
  background:#fff;color:#151515;box-shadow:0 18px 50px rgba(0,0,0,.28);text-align:center;
}
.rooomFeatureHelpTitle{font-size:17px;font-weight:850;line-height:1.3;margin:0 0 10px;}
.rooomFeatureHelpBody{font-size:13px;line-height:1.65;color:#555;white-space:pre-wrap;margin:0 0 16px;}
.rooomFeatureHelpClose{
  appearance:none;-webkit-appearance:none;width:100%;min-height:42px;border:0;border-radius:12px;
  background:#151515;color:#fff;font:800 14px/1 inherit;cursor:pointer;
}
html.rooom-dark-theme .rooomFeatureHelpPanel{background:#222;color:#f4f4f4;border:1px solid rgba(255,255,255,.14);}
html.rooom-dark-theme .rooomFeatureHelpBody{color:#ccc;}
html.rooom-dark-theme .rooomFeatureHelpClose{background:#f0f0f0;color:#111;}
@media (max-width:640px){
  .rooomSectionTabHelp{top:3px !important;}
  .rooomSectionTabHelp1{left:calc(25% - 26px) !important;}
  .rooomSectionTabHelp2{left:calc(50% - 26px) !important;}
  .rooomSectionTabHelp3{left:calc(75% - 26px) !important;}
  .rooomSectionTabHelp4{left:calc(100% - 26px) !important;}
  .rooomFeatureHelpTrigger{width:21px !important;height:21px !important;font-size:9px !important;}
  .rooomFeatureHelpTrigger::before{width:12px;height:12px;}
}


/* =========================================================
   2026-08-31 4大枠「？」最終位置 + 説明モーダル長文対応
   - ？は各タブ右上隅へ寄せ、アーカイブ等の長い見出しと重ねない
   - 見た目は小さく、タップ領域は維持
   - 長文はモーダル内だけスクロール
   ========================================================= */
.rooomSectionTabHelp{
  top:0 !important;
  width:22px !important;
  height:22px !important;
}
.rooomSectionTabHelp1{left:calc(25% - 14px) !important;}
.rooomSectionTabHelp2{left:calc(50% - 14px) !important;}
.rooomSectionTabHelp3{left:calc(75% - 14px) !important;}
.rooomSectionTabHelp4{left:calc(100% - 14px) !important;}
.rooomFeatureHelpTrigger::before{
  width:11px !important;
  height:11px !important;
}
.rooomFeatureHelpPanel{
  width:min(390px,calc(100vw - 28px)) !important;
  max-height:min(82vh,720px) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  text-align:left !important;
}
.rooomFeatureHelpTitle{
  flex:0 0 auto !important;
  text-align:center !important;
  margin-bottom:10px !important;
}
.rooomFeatureHelpBody{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  white-space:normal !important;
  margin:0 0 14px !important;
  padding:0 2px !important;
  text-align:left !important;
}
.rooomFeatureHelpBody p{
  margin:0 0 12px !important;
}
.rooomFeatureHelpBody p:last-child{
  margin-bottom:0 !important;
}
.rooomFeatureHelpBody small{
  font-size:11px !important;
  color:inherit !important;
  opacity:.78 !important;
}
.rooomFeatureHelpPager{
  flex:0 0 auto !important;
  display:flex !important;
  gap:8px !important;
  margin:0 0 8px !important;
}
.rooomFeatureHelpPager[hidden]{display:none !important;}
.rooomFeatureHelpPrev,
.rooomFeatureHelpNext{
  flex:1 1 0 !important;
  min-height:40px !important;
  border:1px solid rgba(20,20,20,.16) !important;
  border-radius:11px !important;
  background:#f2f2f2 !important;
  color:#151515 !important;
  font:800 13px/1 inherit !important;
  cursor:pointer !important;
}
.rooomFeatureHelpPrev[hidden],
.rooomFeatureHelpNext[hidden]{display:none !important;}
.rooomFeatureHelpPrev:disabled,
.rooomFeatureHelpNext:disabled{opacity:.45 !important;cursor:default !important;}
html.rooom-dark-theme .rooomFeatureHelpPrev,
html.rooom-dark-theme .rooomFeatureHelpNext{
  background:#303030 !important;
  color:#f4f4f4 !important;
  border-color:rgba(255,255,255,.16) !important;
}
@media (max-width:640px){
  .rooomSectionTabHelp{top:0 !important;width:21px !important;height:21px !important;}
  .rooomSectionTabHelp1{left:calc(25% - 13px) !important;}
  .rooomSectionTabHelp2{left:calc(50% - 13px) !important;}
  .rooomSectionTabHelp3{left:calc(75% - 13px) !important;}
  .rooomSectionTabHelp4{left:calc(100% - 13px) !important;}
  .rooomFeatureHelpTrigger::before{width:11px !important;height:11px !important;}
  .rooomFeatureHelpModal{padding:14px !important;}
  .rooomFeatureHelpPanel{
    width:100% !important;
    max-height:84vh !important;
    padding:18px 15px 14px !important;
  }
}

/* 2026-08-31 4大枠「？」：タイトル文字の右上＋上枠線に少しかぶせる */
.rooomSectionTabs,.rooomSectionTab{overflow:visible !important;}
.rooomSectionTabHelp{top:-6px !important;transform:translateX(-50%) !important;}
.rooomSectionTabHelp1{left:calc(12.5% + 17px) !important;}
.rooomSectionTabHelp2{left:calc(37.5% + 21px) !important;}
.rooomSectionTabHelp3{left:calc(62.5% + 21px) !important;}
.rooomSectionTabHelp4{left:calc(87.5% + 29px) !important;}

/* =========================================================
   2026-08-31 feature help: card/list inline ? + top-right X
   ========================================================= */
.rooomFeatureHelpPanel{
  position:relative !important;
  padding:18px 18px 16px !important;
}
.rooomFeatureHelpTitle{
  padding:0 28px !important;
  text-align:center !important;
  margin-bottom:12px !important;
}
.rooomFeatureHelpClose{
  position:absolute !important;
  top:8px !important;
  right:8px !important;
  width:32px !important;
  min-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:inherit !important;
  font-size:24px !important;
  font-weight:500 !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  z-index:3 !important;
}
.rooomFeatureHelpClose:hover{
  background:rgba(0,0,0,.06) !important;
}
html.rooom-dark-theme .rooomFeatureHelpClose{
  background:transparent !important;
  color:#f4f4f4 !important;
}
html.rooom-dark-theme .rooomFeatureHelpClose:hover{
  background:rgba(255,255,255,.08) !important;
}
.rooomFeatureHelpBody{
  margin-bottom:0 !important;
}
.rooomFeatureHelpPager:not([hidden]){
  margin-top:14px !important;
}

/* リスト内の「？」は見た目を小さく、タップ領域は確保 */
.listItem{
  position:relative !important;
}
.rooomInlineFeatureHelp{
  position:absolute !important;
  width:20px !important;
  min-width:20px !important;
  height:20px !important;
  min-height:20px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#777 !important;
  font-size:0 !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:8 !important;
  cursor:pointer !important;
}
.rooomInlineFeatureHelp::before{
  content:"?" !important;
  width:11px !important;
  height:11px !important;
  border:1px solid currentColor !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:8px !important;
  font-weight:800 !important;
  line-height:1 !important;
  background:rgba(255,255,255,.88) !important;
  box-sizing:border-box !important;
}
html.rooom-dark-theme .rooomInlineFeatureHelp{
  color:#aaa !important;
}
html.rooom-dark-theme .rooomInlineFeatureHelp::before{
  background:rgba(25,25,25,.9) !important;
}

/* 人数・時間は1つの「？」でまとめて説明。表示アイコンと重ならないよう少し左へ。 */
.rooomListMetaHelp{
  right:96px !important;
  top:4px !important;
}
.rooomListActionHelp{
  right:2px !important;
  top:1px !important;
}

/* 説明モーダル内でも、実画面と同じアイコンを見せて意味を対応させる。 */
.rooomHelpMetric{
  display:grid !important;
  grid-template-columns:22px minmax(0,1fr) !important;
  gap:8px !important;
  align-items:start !important;
  margin:0 0 14px !important;
}
.rooomHelpMetric:last-child{margin-bottom:0 !important;}
.rooomHelpMetricIcon{
  width:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  font-size:15px !important;
  line-height:1.25 !important;
}
.rooomHelpMetricIcon svg{
  width:14px !important;
  height:14px !important;
  margin-top:2px !important;
}
.rooomHelpMetric strong{display:block !important;margin:0 0 4px !important;}
.rooomHelpMetric p{margin:0 !important;}
.rooomHelpAction{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:4px 0 2px !important;
}
.rooomHelpAction p{margin:0 !important;}
.rooomHelpActionIcon{
  flex:0 0 auto !important;
  width:30px !important;
  height:30px !important;
}

@media (max-width:640px){
  .rooomFeatureHelpPanel{
    padding:16px 15px 14px !important;
  }
  .rooomFeatureHelpClose{
    top:6px !important;
    right:6px !important;
    width:30px !important;
    min-width:30px !important;
    height:30px !important;
    min-height:30px !important;
    font-size:22px !important;
  }
  .rooomFeatureHelpTitle{
    padding:0 25px !important;
  }
  .rooomListPeopleHelp{
    right:82px !important;
    top:4px !important;
  }
  .rooomListTimeHelp{
    right:82px !important;
    top:19px !important;
  }
  .rooomListActionHelp{
    right:1px !important;
    top:0 !important;
  }
}

/* 通常の説明は本文内スクロールを作らない。画面に収まらない時だけモーダル全体を退避スクロール。 */
.rooomFeatureHelpPanel{
  overflow:auto !important;
}
.rooomFeatureHelpBody{
  flex:0 1 auto !important;
  min-height:auto !important;
  overflow:visible !important;
  -webkit-overflow-scrolling:auto !important;
}


/* 2026-08-31 説明「？」最終微調整
   - 大枠と部屋カードの見た目サイズを統一
   - 人数・時間「？」を入室「？」と同じ高さに揃える
   - 人数表示アイコンと誤認しないよう、人数側「？」をさらに左へ離す
   - タップ領域は20pxのまま維持
*/
.rooomInlineFeatureHelp::before{
  width:13px !important;
  height:13px !important;
  font-size:9px !important;
  border-width:1px !important;
}
.rooomListMetaHelp{
  right:108px !important;
  top:0 !important;
}
.rooomListActionHelp{
  right:1px !important;
  top:0 !important;
}
.rooomHelpTimeLegend{
  display:inline-block !important;
  margin-top:4px !important;
  white-space:nowrap !important;
}
@media (max-width:640px){
  .rooomInlineFeatureHelp::before{
    width:12px !important;
    height:12px !important;
    font-size:8px !important;
  }
  .rooomListMetaHelp{
    right:104px !important;
    top:0 !important;
  }
  .rooomListActionHelp{
    right:1px !important;
    top:0 !important;
  }
}


/* =========================================================
   2026-08-31 検索 + 4大枠 sticky / 「？」見た目完全共通化
   - RoooMロゴ等は通常どおりスクロールアウト
   - カテゴリ + 検索 + 4大枠は常時操作可能
   - 大枠 / 人数時間 / 入室・読む の「？」は同一見た目定義
   - 個別CSSは位置だけを担当
   ========================================================= */
.rooomStickyTopControls{
  position:-webkit-sticky !important;
  position:sticky !important;
  top:var(--rooom-safe-top,0px) !important;
  z-index:9990 !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:6px 0 1px !important;
  margin:0 !important;
  background:var(--bg) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
}

/* 同じ「？」は、置き場所に関係なく同じ見た目。タップ枠サイズは各用途で維持。 */
.rooomFeatureHelpTrigger::before,
.rooomInlineFeatureHelp::before{
  width:13px !important;
  height:13px !important;
  min-width:13px !important;
  min-height:13px !important;
  box-sizing:border-box !important;
  border:1px solid currentColor !important;
  border-radius:999px !important;
  font-size:9px !important;
  font-weight:800 !important;
  line-height:11px !important;
}
.rooomInlineFeatureHelp::before{
  content:"?" !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* 人数・時間側は入室側の「？」とほぼ同じ高さへ。見分けやすいよう少し左へ離す。 */
.rooomListMetaHelp{
  right:116px !important;
  top:1px !important;
}
.rooomListActionHelp{
  right:1px !important;
  top:0 !important;
}

@media (max-width:640px){
  .rooomStickyTopControls{
    padding-top:5px !important;
  }
  .rooomFeatureHelpTrigger::before,
  .rooomInlineFeatureHelp::before{
    width:13px !important;
    height:13px !important;
    min-width:13px !important;
    min-height:13px !important;
    font-size:9px !important;
    line-height:11px !important;
  }
  .rooomListMetaHelp{
    right:112px !important;
    top:1px !important;
  }
  .rooomListActionHelp{
    right:1px !important;
    top:0 !important;
  }
}


/* =========================================================
   2026-08-31 説明「？」骨格完全共通化 + 検索/4大枠 fixed 化
   - 全「？」は同じ .rooomHelpMark 実DOMを使用
   - 疑似要素で「？」を描かない
   - 見た目は1か所だけで定義、各用途CSSは位置だけ担当
   - CSS sticky が位置の唯一の所有者。JSによる fixed 切替は行わない
   ========================================================= */
.rooomFeatureHelpTrigger::before,
.rooomInlineFeatureHelp::before{
  content:none !important;
  display:none !important;
}
.rooomHelpMark{
  width:13px !important;
  min-width:13px !important;
  height:13px !important;
  min-height:13px !important;
  box-sizing:border-box !important;
  border:1px solid currentColor !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  background:rgba(255,255,255,.88) !important;
  color:inherit !important;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif !important;
  font-size:9px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-indent:0 !important;
  pointer-events:none !important;
}
html.rooom-dark-theme .rooomHelpMark{
  background:rgba(25,25,25,.90) !important;
}
.rooomFeatureHelpTrigger,
.rooomInlineFeatureHelp{
  font-size:0 !important;
}
/* 見た目は共通。位置だけ用途別。 */
.rooomListMetaHelp{
  right:116px !important;
  top:0 !important;
}
.rooomListActionHelp{
  right:1px !important;
  top:0 !important;
}
@media (max-width:640px){
  .rooomHelpMark{
    width:13px !important;
    min-width:13px !important;
    height:13px !important;
    min-height:13px !important;
    font-size:9px !important;
  }
  .rooomListMetaHelp{
    right:112px !important;
    top:0 !important;
  }
  .rooomListActionHelp{
    right:1px !important;
    top:0 !important;
  }
}

.rooomStickyTopControlsAnchor{
  display:block !important;
  width:100% !important;
  height:0;
  margin:0 !important;
  padding:0 !important;
}

/* Only a stuck TOP toolbar may mask the upper safe area; the inactive mask would cover the RoooM logo. */
.rooomStickyTopControls.is-stuck::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:100%;
  height:var(--rooom-safe-top);
  background:var(--bg);
  pointer-events:none;
}

/* =========================================================
   2026-08-31 最終補正：？完全同一部品 / 4枠位置統一 / fixed幅・背景修正
   ========================================================= */
/* すべての「？」は同じ .rooomHelpMark だけで描画する。 */
.rooomFeatureHelpTrigger::before,
.rooomInlineFeatureHelp::before{
  content:none !important;
  display:none !important;
}
.rooomHelpMark{
  width:13px !important;
  min-width:13px !important;
  max-width:13px !important;
  height:13px !important;
  min-height:13px !important;
  max-height:13px !important;
  box-sizing:border-box !important;
  border:1px solid currentColor !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  background:var(--bg) !important;
  color:#666 !important;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif !important;
  font-size:9px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  transform:none !important;
  pointer-events:none !important;
}
html.rooom-dark-theme .rooomHelpMark{
  background:var(--bg) !important;
  color:#aaa !important;
}
/* 選択中4枠の？だけ、選択中タブと同じ配色にする。 */
.rooomSectionTabHelp.is-active-tab .rooomHelpMark{
  background:#141414 !important;
  color:#fff !important;
  border-color:#fff !important;
}
html.rooom-dark-theme .rooomSectionTabHelp.is-active-tab .rooomHelpMark{
  background:#f0f0f0 !important;
  color:#111 !important;
  border-color:#111 !important;
}
/* 4大枠の？は全枠まったく同じ相対位置。 */
.rooomSectionTabHelp{
  top:-6px !important;
  width:22px !important;
  height:22px !important;
  transform:translateX(-50%) !important;
}
.rooomSectionTabHelp1{left:calc(12.5% + 20px) !important;}
.rooomSectionTabHelp2{left:calc(37.5% + 20px) !important;}
.rooomSectionTabHelp3{left:calc(62.5% + 20px) !important;}
.rooomSectionTabHelp4{left:calc(87.5% + 20px) !important;}
/* カード内？も同じ部品。位置だけ用途別。 */
.rooomInlineFeatureHelp{
  width:22px !important;
  min-width:22px !important;
  height:22px !important;
  min-height:22px !important;
  transform:none !important;
}
.rooomListMetaHelp{right:116px !important;top:0 !important;}
.rooomListActionHelp{right:1px !important;top:0 !important;}

@media (max-width:640px){
  .rooomHelpMark{
    width:13px !important;min-width:13px !important;max-width:13px !important;
    height:13px !important;min-height:13px !important;max-height:13px !important;
    font-size:9px !important;
  }
  .rooomSectionTabHelp{top:-6px !important;width:22px !important;height:22px !important;}
  .rooomSectionTabHelp1{left:calc(12.5% + 20px) !important;}
  .rooomSectionTabHelp2{left:calc(37.5% + 20px) !important;}
  .rooomSectionTabHelp3{left:calc(62.5% + 20px) !important;}
  .rooomSectionTabHelp4{left:calc(87.5% + 20px) !important;}
  .rooomListMetaHelp{right:112px !important;top:0 !important;}
  .rooomListActionHelp{right:1px !important;top:0 !important;}
}


/* =========================================================
   2026-08-31 総合案内 / 言語設定 統一
   ========================================================= */
/* ヘッダー上の言語ボタンはPC/スマホとも撤去。 */
.topRefreshLangMini,
#langTop,
#topPolicyMenu .topPolicyMenuLangSection{
  display:none !important;
}

/* 設定内の言語行。背景色の直後に表示する。 */
#topUtilityRow #topSettingsLanguageRow.topSettingsLanguageRow{
  display:flex !important;
}
#topUtilityRow #topSettingsLanguageRow .topSettingsRowControls{
  flex:0 1 auto !important;
}
#topUtilityRow #topSettingsLanguageRow #topRoomLangSelect{
  display:block !important;
  min-width:112px !important;
  height:28px !important;
}
/* 旧DOMに言語selectが残っていても、縦設定スタック外の旧行だけは表示しない。 */
#topUtilityRow .topSettingCell:has(#topRoomLangSelect){
  display:none !important;
}

/* 総合案内アイコン本体。 */
#topPolicyMenuBtn.rooomGuideMenuBtn{
  position:fixed !important;
  top:calc(10px + var(--rooom-safe-top)) !important;
  right:14px !important;
  left:auto !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#222 !important;
  box-shadow:none !important;
  z-index:36020 !important;
}
#topPolicyMenuBtn.rooomGuideMenuBtn .rooomGuideMenuIcon{
  width:32px !important;
  height:32px !important;
  display:block !important;
  overflow:visible !important;
}
#topPolicyMenuBtn.rooomGuideMenuBtn .rooomGuideMenuIcon circle,
#topPolicyMenuBtn.rooomGuideMenuBtn .rooomGuideMenuIcon path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#topPolicyMenuBtn.rooomGuideMenuBtn .rooomGuideMenuIcon .rooomGuideDot{
  fill:currentColor;
  stroke:none;
}
html.rooom-dark-theme #topPolicyMenuBtn.rooomGuideMenuBtn{
  color:#f4f4f4 !important;
  background:transparent !important;
}

/* メニュー本体もボタンの固定位置に合わせる。 */
#topPolicyMenu.topPolicyMenu{
  position:fixed !important;
  top:calc(54px + var(--rooom-safe-top)) !important;
  right:12px !important;
  left:auto !important;
  z-index:36010 !important;
}

/* スマホだけ左上。PCは右上。 */
@media (max-width:640px){
  #topPolicyMenuBtn.rooomGuideMenuBtn{
    left:10px !important;
    right:auto !important;
  }
  #topPolicyMenu.topPolicyMenu{
    left:8px !important;
    right:auto !important;
    max-width:calc(100vw - 16px) !important;
  }
}


/* =========================================================
   2026-08-31 初回導線
   言語 -> 規約 -> 通知 -> 機能説明 -> 開始
   ========================================================= */
html.rooom-first-language-required,
html.rooom-first-help-open,
html.rooom-first-start-open{overflow:hidden !important;}
html.rooom-first-language-required .rooomTermsProtectedContent{visibility:hidden !important;pointer-events:none !important;}
.rooomFirstLanguageGate,.rooomFirstHelpGate,.rooomFirstStartGate{
  display:none;position:fixed;inset:0;z-index:2147483645;align-items:center;justify-content:center;
  padding:20px;box-sizing:border-box;background:rgba(245,246,248,.98);font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
}
.rooomFirstLanguageGate.show,.rooomFirstHelpGate.show,.rooomFirstStartGate.show{display:flex;}
.rooomFirstLanguageModal,.rooomFirstHelpModal,.rooomFirstStartModal{
  width:min(560px,100%);background:#fff;color:#111;border-radius:24px;padding:30px 24px;
  box-shadow:0 28px 80px rgba(0,0,0,.18);text-align:center;box-sizing:border-box;
}
.rooomFirstLanguageLogo,.rooomFirstStartLogo{font-size:36px;font-weight:900;letter-spacing:.02em;margin-bottom:22px;}
.rooomFirstLanguagePrompts{margin:0 0 24px;}
.rooomFirstLanguagePrompts p{margin:3px 0;font-size:15px;line-height:1.45;font-weight:700;}
.rooomFirstLanguageChoices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.rooomFirstLanguageChoices button{
  min-width:0;border:1px solid rgba(0,0,0,.14);border-radius:12px;background:#f7f7f7;color:#111;
  padding:12px 5px;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap;
}
.rooomFirstLanguageChoices button:active{transform:translateY(1px);}
.rooomFirstHelpModal h2,.rooomFirstStartModal h2{margin:0 0 18px;font-size:23px;line-height:1.35;}
.rooomFirstHelpMark{
  width:42px;height:42px;margin:0 auto 20px;border:2px solid currentColor;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:25px;font-weight:900;line-height:1;
}
.rooomFirstHelpModal p,.rooomFirstStartModal p{margin:9px 0;color:#555;font-size:14px;line-height:1.75;}
#rooomFirstHelpNextBtn,#rooomFirstStartBtn{
  width:100%;margin-top:22px;border:0;border-radius:14px;padding:13px 16px;background:#141414;color:#fff;
  font-size:15px;font-weight:800;cursor:pointer;
}
html.rooom-dark-theme .rooomFirstLanguageGate,
html.rooom-dark-theme .rooomFirstHelpGate,
html.rooom-dark-theme .rooomFirstStartGate{background:rgba(15,17,20,.98);}
html.rooom-dark-theme .rooomFirstLanguageModal,
html.rooom-dark-theme .rooomFirstHelpModal,
html.rooom-dark-theme .rooomFirstStartModal{background:#1d2025;color:#f5f5f5;}
html.rooom-dark-theme .rooomFirstLanguageChoices button{background:#292d33;color:#fff;border-color:rgba(255,255,255,.18);}
html.rooom-dark-theme .rooomFirstHelpModal p,
html.rooom-dark-theme .rooomFirstStartModal p{color:#c8cbd0;}
html.rooom-dark-theme #rooomFirstHelpNextBtn,
html.rooom-dark-theme #rooomFirstStartBtn{background:#fff;color:#111;}
@media(max-width:520px){
  .rooomFirstLanguageGate,.rooomFirstHelpGate,.rooomFirstStartGate{padding:14px;}
  .rooomFirstLanguageModal,.rooomFirstHelpModal,.rooomFirstStartModal{border-radius:20px;padding:25px 15px;}
  .rooomFirstLanguageLogo,.rooomFirstStartLogo{font-size:32px;margin-bottom:20px;}
  .rooomFirstLanguagePrompts p{font-size:13px;}
  .rooomFirstLanguageChoices{gap:5px;}
  .rooomFirstLanguageChoices button{font-size:12px;padding:11px 2px;border-radius:10px;}
  .rooomFirstHelpModal h2,.rooomFirstStartModal h2{font-size:20px;}
  .rooomFirstHelpModal p,.rooomFirstStartModal p{font-size:13px;}
}


/* =========================================================
   2026-08-31 初回導線 v2
   - 完了まで通常RoooMを完全非表示
   - 共通戻る
   - 最終ドア入室演出
   ========================================================= */
html.rooom-first-onboarding-active{
  overflow:hidden !important;
  background:#f5f6f8 !important;
  color-scheme:light;
}
html.rooom-first-onboarding-active body{
  overflow:hidden !important;
  background:#f5f6f8 !important;
}
/* First launch is a real pre-TOP surface, not a modal laid over TOP.
   Keep an opaque page-owned backdrop under every onboarding gate so
   translucent mobile browser chrome never samples the real TOP below. */
html.rooom-first-onboarding-active body::before{
  content:"";
  position:fixed;
  inset:-120px;
  z-index:2147483644;
  background:#f5f6f8;
  pointer-events:none;
}
html.rooom-first-onboarding-active #pageFade{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
html.rooom-dark-theme.rooom-first-onboarding-active,
html.rooom-dark-theme.rooom-first-onboarding-active body,
html.rooom-dark-theme.rooom-first-onboarding-active body::before{
  background:#0f1114 !important;
  color-scheme:dark;
}
.rooomTermsConsentModal,.rooomFirstPushModal,.rooomFirstHelpModal,.rooomFirstStartModal{position:relative !important;}
.rooomFirstBackBtn{
  position:absolute;left:14px;top:14px;border:0;background:transparent;color:inherit;padding:7px 9px;
  font:800 13px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;border-radius:10px;z-index:3;
}
.rooomFirstBackBtn:hover{background:rgba(127,127,127,.10);}
.rooomFirstBackBtn:active{transform:translateX(-1px);}

.rooomDoorTransition{
  display:none;position:fixed;inset:0;z-index:2147483647;background:rgba(3,3,3,0);overflow:hidden;
  align-items:center;justify-content:center;perspective:1400px;pointer-events:all;
}
.rooomDoorTransition.show{display:flex;}
.rooomDoorTransition.play{animation:rooomDoorBlackout 3s ease-in-out forwards;}
.rooomDoorScene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:scale(.42);opacity:0;transform-style:preserve-3d;}
.rooomDoorFrame{
  position:relative;width:min(30vw,190px);height:min(56vw,350px);max-height:58vh;
  border:9px solid #171717;border-bottom-width:5px;background:#070707;box-shadow:0 0 0 2px #222,0 0 34px rgba(255,240,190,.04);
  transform-style:preserve-3d;
}
.rooomDoorLeaf{
  position:absolute;inset:0;background:linear-gradient(90deg,#0b0b0b 0%,#171717 55%,#080808 100%);
  transform-origin:left center;transform:rotateY(0deg);box-shadow:inset -12px 0 22px rgba(0,0,0,.72);z-index:2;
}
.rooomDoorKnob{position:absolute;right:13px;top:51%;width:9px;height:9px;border-radius:50%;background:#8d7b50;box-shadow:0 0 7px rgba(255,230,160,.18);}
.rooomDoorGlow{
  position:absolute;left:50%;top:50%;width:min(35vw,220px);height:min(61vw,390px);transform:translate(-50%,-50%) scale(.45);
  background:radial-gradient(ellipse at center,rgba(255,255,255,1) 0%,rgba(255,250,220,.9) 28%,rgba(255,226,140,.34) 55%,rgba(255,255,255,0) 76%);
  filter:blur(15px);opacity:0;z-index:0;
}
.rooomDoorWhite{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:10;}
/* 0-3秒 暗転 / 3-6秒 小さなドアが浮かぶ / 6秒 ガチャ / 6-17秒 開きながら接近・白へ */
.rooomDoorTransition.play .rooomDoorScene{animation:rooomDoorApproach 14s cubic-bezier(.18,.62,.16,1) 3s forwards;}
.rooomDoorTransition.play .rooomDoorLeaf{animation:rooomDoorOpen 10.5s cubic-bezier(.18,.65,.2,1) 6s forwards;}
.rooomDoorTransition.play .rooomDoorGlow{animation:rooomDoorGlow 10.8s cubic-bezier(.18,.7,.16,1) 6.1s forwards;}
.rooomDoorTransition.play .rooomDoorWhite{animation:rooomDoorFlash 4.2s ease-in 12.8s forwards;}
.rooomDoorTransition.reveal{background:transparent;animation:none;}
.rooomDoorTransition.reveal .rooomDoorScene{display:none;}
.rooomDoorTransition.reveal .rooomDoorWhite{animation:rooomRoooMReveal 3s ease-out forwards;}
@keyframes rooomDoorBlackout{0%{background:rgba(3,3,3,0)}100%{background:rgba(3,3,3,1)}}
@keyframes rooomDoorApproach{
  0%{opacity:0;transform:scale(.38)}
  20%{opacity:.48;transform:scale(.46)}
  36%{opacity:.88;transform:scale(.62)}
  65%{opacity:1;transform:scale(1.35)}
  84%{opacity:1;transform:scale(2.5)}
  100%{opacity:1;transform:scale(5.2)}
}
@keyframes rooomDoorOpen{
  0%{transform:rotateY(0deg)}
  10%{transform:rotateY(-3deg)}
  45%{transform:rotateY(-30deg)}
  75%{transform:rotateY(-62deg)}
  100%{transform:rotateY(-88deg)}
}
@keyframes rooomDoorGlow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}
  18%{opacity:.16}
  48%{opacity:.5;transform:translate(-50%,-50%) scale(.9)}
  76%{opacity:.9;transform:translate(-50%,-50%) scale(2.4)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(8)}
}
@keyframes rooomDoorFlash{0%{opacity:0}48%{opacity:.04}72%{opacity:.28}100%{opacity:1}}
@keyframes rooomRoooMReveal{0%{opacity:1}100%{opacity:0}}
@media(max-width:520px){
  .rooomFirstBackBtn{left:8px;top:8px;font-size:12px;}
  .rooomDoorFrame{width:128px;height:238px;border-width:7px;border-bottom-width:4px;}
}


/* ===== 初回導線：動画版エントランス（2026-08-31） ===== */
.rooomDoorTransition.rooomVideoEntrance{
  display:none;position:fixed;inset:0;z-index:2147483647;background:transparent;overflow:hidden;
}
.rooomDoorTransition.rooomVideoEntrance.show{display:block;}
.rooomVideoEntrance .rooomVideoBlack{
  position:absolute;inset:0;background:#000;opacity:0;z-index:2;pointer-events:none;
  transition:opacity 3s ease-in-out;
}
.rooomVideoEntrance.blackout .rooomVideoBlack{opacity:1;}
.rooomVideoEntrance .rooomFirstEntryVideo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;
  opacity:0;z-index:1;pointer-events:none;
  transition:none;
}
/* 3秒暗転後は、完全な黒の裏で動画へ切り替え、黒だけをゆっくり抜く。
   これで開始フォームの文字が途中で透けない。 */
.rooomVideoEntrance.video-playing .rooomFirstEntryVideo{opacity:1;transition:none;}
.rooomVideoEntrance.video-playing .rooomVideoBlack{
  opacity:0;
  transition:opacity 1.2s ease-in-out;
}
.rooomVideoEntrance .rooomDoorWhite{
  position:absolute;inset:0;background:#fff;opacity:0;z-index:3;pointer-events:none;
  transition:none;
}
/* 動画末尾の白と同じ白を瞬時に前面へ固定。動画を裏で消しても継ぎ目を見せない。 */
.rooomVideoEntrance.whiteout .rooomDoorWhite{opacity:1;transition:none;}
.rooomVideoEntrance.reveal{background:transparent;}
.rooomVideoEntrance.reveal .rooomFirstEntryVideo,
.rooomVideoEntrance.reveal .rooomVideoBlack{opacity:0;}
/* 白から本物のトップまで、最後の1pxまで同じカーブで抜く。 */
.rooomVideoEntrance.whiteout.reveal .rooomDoorWhite{
  opacity:0;transition:opacity 1.55s cubic-bezier(.16,.72,.18,1);
}
@media(prefers-reduced-motion:reduce){
  .rooomVideoEntrance .rooomVideoBlack{transition-duration:.4s;}
  .rooomVideoEntrance .rooomDoorWhite{transition-duration:.5s;}
  .rooomVideoEntrance.reveal .rooomDoorWhite{transition-duration:.8s;}
}


/* =========================================================
   2026-08-31 初回導線 見た目統一 / 動画再生安定化補正
   ========================================================= */
/* 初回5画面の外側背景を完全に同じ色へ統一。 */
.rooomFirstLanguageGate,
.rooomTermsConsentGate,
.rooomFirstPushGate,
.rooomFirstHelpGate,
.rooomFirstStartGate{
  background:#f5f6f8 !important;
}
html.rooom-dark-theme .rooomFirstLanguageGate,
html.rooom-dark-theme .rooomTermsConsentGate,
html.rooom-dark-theme .rooomFirstPushGate,
html.rooom-dark-theme .rooomFirstHelpGate,
html.rooom-dark-theme .rooomFirstStartGate{
  background:#0f1114 !important;
}

/* 戻ると見出しが干渉しないよう、見出しは共通で中央配置。 */
.rooomTermsConsentTitle,
.rooomFirstPushTitle,
.rooomFirstHelpModal h2,
.rooomFirstStartModal h2{
  text-align:center !important;
  padding-left:64px !important;
  padding-right:64px !important;
  box-sizing:border-box !important;
}
.rooomFirstBackBtn{
  left:14px !important;
  top:14px !important;
}
@media(max-width:520px){
  .rooomTermsConsentTitle,
  .rooomFirstPushTitle,
  .rooomFirstHelpModal h2,
  .rooomFirstStartModal h2{
    padding-left:52px !important;
    padding-right:52px !important;
  }
  .rooomFirstBackBtn{left:8px !important;top:8px !important;}
}

/* =========================================================
   2026-08-31 初回導線：全ステップふわっと遷移
   言語 ⇄ 規約 ⇄ 通知 ⇄ 機能説明 ⇄ 開始
   ========================================================= */
.rooomFirstLanguageModal,
.rooomTermsConsentModal,
.rooomFirstPushModal,
.rooomFirstHelpModal,
.rooomFirstStartModal{
  will-change:opacity,transform;
}

.rooomStepLeaving .rooomFirstLanguageModal,
.rooomStepLeaving .rooomTermsConsentModal,
.rooomStepLeaving .rooomFirstPushModal,
.rooomStepLeaving .rooomFirstHelpModal,
.rooomStepLeaving .rooomFirstStartModal{
  animation:rooomOnboardingStepOut .5s cubic-bezier(.4,0,.2,1) both;
  pointer-events:none;
}

.rooomStepEntering .rooomFirstLanguageModal,
.rooomStepEntering .rooomTermsConsentModal,
.rooomStepEntering .rooomFirstPushModal,
.rooomStepEntering .rooomFirstHelpModal,
.rooomStepEntering .rooomFirstStartModal{
  animation:rooomOnboardingStepIn .5s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes rooomOnboardingStepOut{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-4px) scale(.985)}
}
@keyframes rooomOnboardingStepIn{
  0%{opacity:0;transform:translateY(5px) scale(.985)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

@media(prefers-reduced-motion:reduce){
  .rooomStepLeaving .rooomFirstLanguageModal,
  .rooomStepLeaving .rooomTermsConsentModal,
  .rooomStepLeaving .rooomFirstPushModal,
  .rooomStepLeaving .rooomFirstHelpModal,
  .rooomStepLeaving .rooomFirstStartModal,
  .rooomStepEntering .rooomFirstLanguageModal,
  .rooomStepEntering .rooomTermsConsentModal,
  .rooomStepEntering .rooomFirstPushModal,
  .rooomStepEntering .rooomFirstHelpModal,
  .rooomStepEntering .rooomFirstStartModal{
    animation-duration:.16s;
  }
}


/* ===== 初回機能説明：実UIと同じ「丸？」表記 ===== */
.rooomInlineHelpIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.45em;
  height:1.45em;
  border:1.6px solid currentColor;
  border-radius:50%;
  box-sizing:border-box;
  font-weight:800;
  font-size:.88em;
  line-height:1;
  vertical-align:middle;
  position:relative;
  top:-.04em;
  margin:0 .12em;
  flex:0 0 auto;
}
#rooomFirstHelpTitle .rooomInlineHelpIcon{
  width:1.4em;
  height:1.4em;
  font-size:.76em;
  vertical-align:middle;
  top:-.03em;
}


/* =========================================================
   2026-09-01 TOP整理：重複ナビ非表示 + 下部3機能の？説明
   ========================================================= */
/* お知らせ / 使い方 / お問い合わせ は総合案内へ一本化。画面幅に関係なく直リンクは出さない。 */
.topRefreshNav > .topRefreshNavLink{display:none !important;}

/* 下部ドック3機能は本体レイアウトを変えず、各ボタン右上に共通？を重ねる。 */
.rooomFloatingActionDock .rooomDockHelpWrap{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
}
.rooomFloatingActionDock .rooomDockFeatureHelp{
  position:absolute !important;
  z-index:4 !important;
  top:-8px !important;
  right:-7px !important;
  width:22px !important;
  min-width:22px !important;
  height:22px !important;
  min-height:22px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  box-shadow:none !important;
}
.rooomFloatingActionDock .rooomDockFeatureHelp[hidden],
html.rooom-feature-help-off .rooomFloatingActionDock .rooomDockFeatureHelp{display:none !important;}

/* 表示切替説明内のアイコンは、下部表示切替ボタンと同じCSS図形。 */
.rooomDockHelpBody .rooomDockHelpHeading{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:14px 0 6px !important;
}
.rooomDockHelpBody .rooomDockHelpHeading:first-child{margin-top:0 !important;}
.rooomHelpViewModeIcon{
  position:relative !important;
  display:inline-block !important;
  width:22px !important;
  min-width:22px !important;
  height:22px !important;
  color:currentColor !important;
}
.rooomHelpViewModeIcon::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  box-sizing:border-box !important;
}
.rooomHelpViewModeIcon.is-card::before{
  width:15px !important;height:15px !important;
  border:2px solid currentColor !important;border-radius:2px !important;
  background:transparent !important;box-shadow:none !important;
}
.rooomHelpViewModeIcon.is-list::before{
  width:18px !important;height:2px !important;border:0 !important;border-radius:2px !important;
  background:currentColor !important;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor !important;
}
.rooomHelpSettingsIcon{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  width:22px !important;height:22px !important;font-size:20px !important;line-height:1 !important;
}


/* =========================================================
   2026-09-01 TOP settings help / dock alignment / proper gear
   ========================================================= */
/* 下部3機能の？位置：表示切替・設定は少し左、部屋作成はボタン内側へ */
.rooomFloatingActionDock .rooomDockHelpWrap-viewSwitch .rooomDockFeatureHelp,
.rooomFloatingActionDock .rooomDockHelpWrap-settings .rooomDockFeatureHelp{
  top:-8px !important;
  right:2px !important;
}
.rooomFloatingActionDock .rooomDockHelpWrap-createRoom .rooomDockFeatureHelp{
  top:-8px !important;
  right:42px !important;
}

/* 表示切替説明内の図形は global .card と完全分離 */
.rooomFeatureHelpModal .rooomHelpViewModeIcon{
  display:inline-block !important;
  flex:0 0 22px !important;
  width:22px !important;
  min-width:22px !important;
  max-width:22px !important;
  height:22px !important;
  min-height:22px !important;
  max-height:22px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

/* フォントの⚙ではなく共通SVG歯車 */
.rooomGearSvg{
  display:block;
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#topSettingsToggleBtn .rooomGearSvg{width:22px;height:22px;}
.rooomHelpSettingsIcon .rooomGearSvg{width:21px;height:21px;}

/* 設定内？：操作欄の横幅を削らず、項目名エリア上端に重ねる */
#topUtilityRow .topSettingsRow,
#topUtilityRow #pwaBanner.topSettingsNotifyRow{
  position:relative !important;
}
#topUtilityRow .rooomSettingRowHelp{
  position:absolute !important;
  z-index:5 !important;
  top:2px !important;
  left:47px !important;
  width:18px !important;
  min-width:18px !important;
  height:18px !important;
  min-height:18px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#topUtilityRow .rooomSettingRowHelp .rooomHelpMark{
  width:14px !important;
  height:14px !important;
  font-size:9px !important;
  border-width:1px !important;
}
html.rooom-feature-help-off #topUtilityRow .rooomSettingRowHelp{display:none !important;}
@media(max-width:420px){
  #topUtilityRow .rooomSettingRowHelp{left:43px !important;}
}


/* =========================================================
   2026-09-01 SVG 3D trial: view switch + settings only
   - 画像ファイル不使用
   - 白〜薄グレーの立体ボタン + 黒アイコン
   - 押下時はCSSだけで沈む
   ========================================================= */
:root{
  --rooom-ui3d-face:#f8f8f8;
  --rooom-ui3d-face-hi:#ffffff;
  --rooom-ui3d-face-lo:#e7e7e7;
  --rooom-ui3d-ink:#111111;
}

/* まず試す2つだけを同じ3Dボタンにする。サイズと配置は既存値を維持。 */
.rooomFloatingActionDock #rooomDockViewSlot.rooomDockViewSlot,
.rooomFloatingActionDock #topSettingsToggleBtn.rooomFloatingSettingsBtn{
  position:relative !important;
  overflow:hidden !important;
  color:var(--rooom-ui3d-ink) !important;
  border:1px solid rgba(0,0,0,.14) !important;
  background:
    radial-gradient(circle at 30% 23%,rgba(255,255,255,.98) 0 18%,rgba(255,255,255,0) 42%),
    linear-gradient(145deg,var(--rooom-ui3d-face-hi) 0%,var(--rooom-ui3d-face) 52%,var(--rooom-ui3d-face-lo) 100%) !important;
  box-shadow:
    0 7px 14px rgba(0,0,0,.16),
    0 2px 4px rgba(0,0,0,.10),
    inset 1px 1px 1px rgba(255,255,255,.95),
    inset -2px -3px 5px rgba(0,0,0,.08) !important;
  transform:translateY(0) scale(1) !important;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease !important;
}
.rooomFloatingActionDock #rooomDockViewSlot.rooomDockViewSlot::after,
.rooomFloatingActionDock #topSettingsToggleBtn.rooomFloatingSettingsBtn::after{
  content:"";
  position:absolute;
  left:18%;right:18%;top:8%;height:28%;
  border-radius:999px;
  background:linear-gradient(to bottom,rgba(255,255,255,.86),rgba(255,255,255,0));
  pointer-events:none;
  opacity:.82;
}
.rooomFloatingActionDock #rooomDockViewSlot.rooomDockViewSlot:active,
.rooomFloatingActionDock #topSettingsToggleBtn.rooomFloatingSettingsBtn:active{
  transform:translateY(2px) scale(.95) !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,.12),
    inset 2px 3px 6px rgba(0,0,0,.14),
    inset -1px -1px 2px rgba(255,255,255,.80) !important;
}

/* カード表示は4枚タイル。リスト表示は3本線。どちらも画像ではなくCSS図形。 */
.rooomFloatingActionDock #rooomDockViewIcon.rooomDockViewIcon{
  width:22px !important;
  height:22px !important;
  color:var(--rooom-ui3d-ink) !important;
  z-index:2 !important;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.8)) drop-shadow(0 1px 1px rgba(0,0,0,.16));
}
.rooomFloatingActionDock #rooomDockViewSlot[data-view-mode="card"] #rooomDockViewIcon::before{
  width:7px !important;
  height:7px !important;
  left:4px !important;
  top:4px !important;
  transform:none !important;
  border:0 !important;
  border-radius:2px !important;
  background:currentColor !important;
  box-shadow:9px 0 0 currentColor,0 9px 0 currentColor,9px 9px 0 currentColor !important;
}
.rooomFloatingActionDock #rooomDockViewSlot[data-view-mode="list"] #rooomDockViewIcon::before{
  width:18px !important;
  height:3px !important;
  left:2px !important;
  top:4px !important;
  transform:none !important;
  border:0 !important;
  border-radius:999px !important;
  background:currentColor !important;
  box-shadow:0 7px 0 currentColor,0 14px 0 currentColor !important;
}

/* 設定歯車はSVGの形をそのまま使い、軽い立体感だけ追加。 */
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvg{
  position:relative;
  z-index:2;
  width:23px !important;
  height:23px !important;
  color:var(--rooom-ui3d-ink) !important;
  stroke:currentColor !important;
  stroke-width:2 !important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 2px 1px rgba(0,0,0,.16));
}

/* ダークテーマでも試験中の2ボタンだけは白ベースを維持。 */
html.rooom-dark-theme .rooomFloatingActionDock #rooomDockViewSlot.rooomDockViewSlot,
html.rooom-dark-theme .rooomFloatingActionDock #topSettingsToggleBtn.rooomFloatingSettingsBtn{
  color:var(--rooom-ui3d-ink) !important;
  background:
    radial-gradient(circle at 30% 23%,rgba(255,255,255,.98) 0 18%,rgba(255,255,255,0) 42%),
    linear-gradient(145deg,#fff 0%,#f6f6f6 52%,#e5e5e5 100%) !important;
  border-color:rgba(0,0,0,.16) !important;
}
html.rooom-dark-theme .rooomFloatingActionDock #rooomDockViewIcon.rooomDockViewIcon,
html.rooom-dark-theme .rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvg{
  color:#111 !important;
}

/* =========================================================
   2026-09-01 SVG/CSS 3D trial: create-room frame only
   - 文字 / カウント / JS挙動はそのまま
   - 外枠だけ表示切替・設定と同じ白い立体トーンへ
   ========================================================= */
.rooomFloatingActionDock .rooomFloatingCreateBtn{
  position:relative !important;
  overflow:hidden !important;
  color:#111 !important;
  border:1px solid rgba(0,0,0,.14) !important;
  background:
    radial-gradient(circle at 30% 23%,rgba(255,255,255,.98) 0 18%,rgba(255,255,255,0) 42%),
    linear-gradient(145deg,#ffffff 0%,#f8f8f8 52%,#e7e7e7 100%) !important;
  box-shadow:
    0 7px 14px rgba(0,0,0,.16),
    0 2px 4px rgba(0,0,0,.10),
    inset 1px 1px 1px rgba(255,255,255,.95),
    inset -2px -3px 5px rgba(0,0,0,.08) !important;
  transform:translateY(0) scale(1) !important;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease !important;
}
.rooomFloatingActionDock .rooomFloatingCreateBtn::after{
  content:"";
  position:absolute;
  left:10%;right:10%;top:7%;height:28%;
  border-radius:999px;
  background:linear-gradient(to bottom,rgba(255,255,255,.86),rgba(255,255,255,0));
  pointer-events:none;
  opacity:.82;
}
.rooomFloatingActionDock .rooomFloatingCreateBtn > *{
  position:relative;
  z-index:2;
}
.rooomFloatingActionDock .rooomFloatingCreateBtn:active{
  transform:translateY(2px) scale(.97) !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,.12),
    inset 2px 3px 6px rgba(0,0,0,.14),
    inset -1px -1px 2px rgba(255,255,255,.80) !important;
}
.rooomFloatingActionDock .rooomFloatingCreateBtn:disabled{
  opacity:.55 !important;
  filter:saturate(.75) !important;
}
html.rooom-dark-theme .rooomFloatingActionDock .rooomFloatingCreateBtn{
  color:#111 !important;
  background:
    radial-gradient(circle at 30% 23%,rgba(255,255,255,.98) 0 18%,rgba(255,255,255,0) 42%),
    linear-gradient(145deg,#fff 0%,#f6f6f6 52%,#e5e5e5 100%) !important;
  border-color:rgba(0,0,0,.16) !important;
}

/* =========================================================
   2026-09-01 総合案内：ヘッダー左上固定（画面追従はしない）
   + 3D SVG見た目 + モバイル青タップ枠抑止
   ========================================================= */
@media (max-width:640px){
  /* ヘッダーを基準に置く。viewport固定は禁止。 */
  .topRefreshHeader{
    position:relative !important;
  }
  .topRefreshRight{
    position:absolute !important;
    left:8px !important;
    top:8px !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    z-index:40000 !important;
    width:auto !important;
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }
  .topRefreshNav{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }

  /* 総合案内ボタン本体もfixedを完全解除。ヘッダーと一緒にスクロールして消える。 */
  #topPolicyMenuBtn.rooomGuideMenuBtn,
  #topPolicyMenuBtn.topRefreshMenuBtn{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 !important;
    margin:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    border:1px solid rgba(0,0,0,.14) !important;
    color:#222 !important;
    background:
      radial-gradient(circle at 30% 23%,rgba(255,255,255,.98) 0 18%,rgba(255,255,255,0) 42%),
      linear-gradient(145deg,#fff 0%,#f7f7f7 52%,#e6e6e6 100%) !important;
    box-shadow:
      0 6px 12px rgba(0,0,0,.15),
      0 2px 4px rgba(0,0,0,.09),
      inset 1px 1px 1px rgba(255,255,255,.95),
      inset -2px -3px 5px rgba(0,0,0,.07) !important;
    overflow:hidden !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    -webkit-tap-highlight-color:transparent !important;
    touch-action:manipulation !important;
  }
  #topPolicyMenuBtn.rooomGuideMenuBtn::after{
    content:"";
    position:absolute;
    left:18%;right:18%;top:8%;height:28%;
    border-radius:999px;
    background:linear-gradient(to bottom,rgba(255,255,255,.86),rgba(255,255,255,0));
    pointer-events:none;
    opacity:.82;
  }
  #topPolicyMenuBtn.rooomGuideMenuBtn .rooomGuideMenuIcon{
    position:relative !important;
    z-index:2 !important;
    width:24px !important;
    height:24px !important;
    color:#333 !important;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 1px 1px rgba(0,0,0,.14));
  }

  /* メニュー本体もviewport固定を解除し、ボタン直下に展開。 */
  #topPolicyMenu.topPolicyMenu{
    position:absolute !important;
    left:0 !important;
    right:auto !important;
    top:calc(100% + 8px) !important;
    bottom:auto !important;
  }

  /* Chrome/Androidなどでタップ時に出る青い四角枠を出さない。 */
  #topPolicyMenuBtn,
  #topPolicyMenuBtn *,
  .rooomFloatingActionDock button,
  .rooomFloatingActionDock button *{
    -webkit-tap-highlight-color:transparent !important;
    -webkit-touch-callout:none !important;
  }
  #topPolicyMenuBtn:focus,
  #topPolicyMenuBtn:focus-visible,
  #topPolicyMenuBtn:active,
  .rooomFloatingActionDock button:focus,
  .rooomFloatingActionDock button:focus-visible,
  .rooomFloatingActionDock button:active{
    outline:none !important;
  }
}

/* 歯車：本体グレー、中央の丸は白。 */
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvg path{
  fill:#8c8c8c !important;
  stroke:#666 !important;
}
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvg circle{
  fill:#fff !important;
  stroke:#666 !important;
}

/* =========================================================
   2026-09-01 UI icon final unification
   - guide menu: same 3D SVG look at every breakpoint
   - guide menu press effect without moving hit area
   - settings gear: grey body + white center
   - enter/read buttons: SVG + 3D frame
   - recruiting-room text buttons: matching 3D CSS frame
   ========================================================= */

/* ----- guide/company menu: one appearance for all widths ----- */
#topPolicyMenuBtn.rooomGuideMenuBtn,
#topPolicyMenuBtn.topRefreshMenuBtn.rooomGuideMenuBtn{
  position:relative !important;
  inset:auto !important;
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  border:1px solid rgba(0,0,0,.15) !important;
  color:#333 !important;
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.99) 0 18%,rgba(255,255,255,0) 43%),
    linear-gradient(145deg,#fff 0%,#f5f5f5 54%,#e3e3e3 100%) !important;
  box-shadow:
    0 7px 14px rgba(0,0,0,.16),
    0 2px 4px rgba(0,0,0,.08),
    inset 1px 1px 1px rgba(255,255,255,.96),
    inset -2px -3px 5px rgba(0,0,0,.07) !important;
  overflow:hidden !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation !important;
  outline:none !important;
  transform:none !important;
  transition:box-shadow .10s ease,background .10s ease !important;
}
#topPolicyMenuBtn.rooomGuideMenuBtn::after{
  content:"" !important;
  position:absolute !important;
  left:18% !important;
  right:18% !important;
  top:8% !important;
  height:28% !important;
  border-radius:999px !important;
  background:linear-gradient(to bottom,rgba(255,255,255,.88),rgba(255,255,255,0)) !important;
  pointer-events:none !important;
  opacity:.84 !important;
}
#topPolicyMenuBtn.rooomGuideMenuBtn .rooomGuideMenuIcon{
  position:relative !important;
  z-index:2 !important;
  width:25px !important;
  height:25px !important;
  color:#333 !important;
  transform:none !important;
  transition:transform .10s ease,filter .10s ease !important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 1px 1px rgba(0,0,0,.15)) !important;
}
#topPolicyMenuBtn.rooomGuideMenuBtn:active{
  transform:none !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,.11),
    inset 2px 3px 7px rgba(0,0,0,.15),
    inset -1px -1px 2px rgba(255,255,255,.82) !important;
}
#topPolicyMenuBtn.rooomGuideMenuBtn:active .rooomGuideMenuIcon{
  transform:translateY(2px) scale(.94) !important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.75)) !important;
}
#topPolicyMenuBtn.rooomGuideMenuBtn:focus,
#topPolicyMenuBtn.rooomGuideMenuBtn:focus-visible{
  outline:none !important;
}

/* keep placement responsive, but never viewport-fixed */
@media (max-width:640px){
  .topRefreshHeader{position:relative !important;}
  .topRefreshRight{
    position:absolute !important;
    left:8px !important;
    right:auto !important;
    top:8px !important;
    bottom:auto !important;
    transform:none !important;
  }
  #topPolicyMenuBtn.rooomGuideMenuBtn{position:relative !important;inset:auto !important;}
  #topPolicyMenu.topPolicyMenu{position:absolute !important;left:0 !important;right:auto !important;top:calc(100% + 8px) !important;bottom:auto !important;}
}
@media (min-width:641px){
  .topRefreshRight{position:relative !important;}
  #topPolicyMenuBtn.rooomGuideMenuBtn{position:relative !important;inset:auto !important;}
}

/* ----- settings gear: chunky grey body, white center ----- */
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvg{
  width:24px !important;
  height:24px !important;
  color:#707070 !important;
  stroke:#666 !important;
  stroke-width:1.7 !important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 2px 1px rgba(0,0,0,.16)) !important;
}
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvg path{
  fill:#8a8a8a !important;
  stroke:#666 !important;
}
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvg circle{
  fill:#fff !important;
  stroke:#666 !important;
  stroke-width:1.7 !important;
}

/* ----- enter/read: same 3D frame, SVG icon kept vector ----- */
.listEnterBtn.entryIconBtn,
.cardImageEnterBtn,
.cardPlainEnterBtn{
  border:1px solid rgba(0,0,0,.14) !important;
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.99) 0 18%,rgba(255,255,255,0) 43%),
    linear-gradient(145deg,#fff 0%,#f5f5f5 54%,#e3e3e3 100%) !important;
  color:#111 !important;
  box-shadow:
    0 6px 12px rgba(0,0,0,.15),
    0 2px 4px rgba(0,0,0,.08),
    inset 1px 1px 1px rgba(255,255,255,.96),
    inset -2px -3px 5px rgba(0,0,0,.07) !important;
  -webkit-tap-highlight-color:transparent !important;
  outline:none !important;
  transform:none !important;
  transition:box-shadow .10s ease !important;
}
.listEnterBtn.entryIconBtn:active,
.cardImageEnterBtn:active,
.cardPlainEnterBtn:active{
  transform:none !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,.11),
    inset 2px 3px 7px rgba(0,0,0,.15),
    inset -1px -1px 2px rgba(255,255,255,.82) !important;
}
.listEnterBtn.entryIconBtn:active .entryDoorIcon,
.listEnterBtn.entryIconBtn:active .entryArchiveIcon,
.cardImageEnterBtn:active .entryDoorIcon,
.cardImageEnterBtn:active .entryArchiveIcon,
.cardPlainEnterBtn:active .entryDoorIcon,
.cardPlainEnterBtn:active .entryArchiveIcon{
  transform:translateY(1px) scale(.94) !important;
}
.listEnterBtn.entryIconBtn:focus,
.listEnterBtn.entryIconBtn:focus-visible,
.cardImageEnterBtn:focus,
.cardImageEnterBtn:focus-visible,
.cardPlainEnterBtn:focus,
.cardPlainEnterBtn:focus-visible{
  outline:none !important;
}
.entryDoorIcon,
.entryArchiveIcon{
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.92)) drop-shadow(0 1px 1px rgba(0,0,0,.14)) !important;
  transition:transform .10s ease !important;
}

/* ----- recruiting/prep buttons are text, so keep HTML text and make only frame 3D ----- */
#prepOpenCloneList .prepListPrimaryReserve,
#prepOpenCloneList .prepListManageButton,
#prepOpenCloneList .prepVisualReserve{
  border:1px solid rgba(0,0,0,.14) !important;
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.99) 0 18%,rgba(255,255,255,0) 43%),
    linear-gradient(145deg,#fff 0%,#f5f5f5 54%,#e3e3e3 100%) !important;
  color:#333 !important;
  box-shadow:
    0 5px 10px rgba(0,0,0,.13),
    inset 1px 1px 1px rgba(255,255,255,.96),
    inset -2px -3px 5px rgba(0,0,0,.06) !important;
  -webkit-tap-highlight-color:transparent !important;
  outline:none !important;
  transform:none !important;
  transition:box-shadow .10s ease !important;
}
#prepOpenCloneList .prepListPrimaryReserve:active,
#prepOpenCloneList .prepListManageButton:active,
#prepOpenCloneList .prepVisualReserve:active{
  transform:none !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,.10),
    inset 2px 3px 6px rgba(0,0,0,.14),
    inset -1px -1px 2px rgba(255,255,255,.82) !important;
}

/* suppress Chromium/Android blue tap rectangle on this UI cluster */
#topPolicyMenuBtn,
#topPolicyMenuBtn *,
.rooomFloatingActionDock button,
.rooomFloatingActionDock button *,
.listEnterBtn.entryIconBtn,
.listEnterBtn.entryIconBtn *,
.cardImageEnterBtn,
.cardImageEnterBtn *,
.cardPlainEnterBtn,
.cardPlainEnterBtn *,
#prepOpenCloneList button,
#prepOpenCloneList button *{
  -webkit-tap-highlight-color:transparent !important;
  -webkit-touch-callout:none !important;
}

/* =========================================================
   2026-09-01 icon actual replacement
   - 設定: 文字⚙を廃止し、太いSVG歯車
   - 入室/読む: 旧アイコン絵を廃止し、CSSで着色できるSVG mask
   ========================================================= */
:root{
  --rooom-action-icon:#555;
  --rooom-gear-body:#8a8a8a;
  --rooom-gear-center:#fff;
}

/* 設定：JSで入れる太いSVGをそのまま立体表示 */
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvgSolid{
  display:block !important;
  width:25px !important;
  height:25px !important;
  overflow:visible !important;
  stroke:none !important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 2px 1.5px rgba(0,0,0,.18)) !important;
  transition:transform .10s ease,filter .10s ease !important;
}
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvgSolid .rooomGearBody,
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvgSolid .rooomGearBody *{
  fill:var(--rooom-gear-body) !important;
  stroke:none !important;
}
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvgSolid .rooomGearCenter{
  fill:var(--rooom-gear-center) !important;
  stroke:none !important;
}
.rooomFloatingActionDock #topSettingsToggleBtn:active .rooomGearSvgSolid{
  transform:translateY(2px) scale(.94) !important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.72)) !important;
}

/* 旧ドア/本のdata-imageを完全に切り、ベクターmaskへ置換 */
.entryDoorIcon,
.entryArchiveIcon{
  position:relative !important;
  display:inline-block !important;
  width:24px !important;
  height:24px !important;
  background:none !important;
  background-image:none !important;
  overflow:visible !important;
  color:var(--rooom-action-icon) !important;
}
.entryDoorIcon::after,
.entryArchiveIcon::after{
  content:none !important;
  display:none !important;
}
.entryDoorIcon::before,
.entryArchiveIcon::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background:currentColor !important;
  background-image:none !important;
  clip-path:none !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
  filter:none !important;
}
/* 入室：開いたドア＋右向き矢印。色は currentColor で変更可能。 */
.entryDoorIcon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23000'%3E%3Cpath d='M8 7h27v50H8V7Zm6 6v38h15V13H14Z'/%3E%3Cpath d='M17 12 32 8v48l-15-4V12Z'/%3E%3Ccircle cx='27' cy='33' r='2.4'/%3E%3Cpath d='M37 27h10v-6l11 11-11 11v-6H37V27Z'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23000'%3E%3Cpath d='M8 7h27v50H8V7Zm6 6v38h15V13H14Z'/%3E%3Cpath d='M17 12 32 8v48l-15-4V12Z'/%3E%3Ccircle cx='27' cy='33' r='2.4'/%3E%3Cpath d='M37 27h10v-6l11 11-11 11v-6H37V27Z'/%3E%3C/g%3E%3C/svg%3E") !important;
}
/* 読む：厚みのある開いた本。色は currentColor で変更可能。 */
.entryArchiveIcon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23000' d='M5 12c8-3 18-2 27 4 9-6 19-7 27-4v40c-8-3-18-2-27 4-9-6-19-7-27-4V12Zm6 7v25c6-1 12 0 17 3V22c-5-3-11-4-17-3Zm42 0c-6-1-12 0-17 3v25c5-3 11-4 17-3V19Z'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23000' d='M5 12c8-3 18-2 27 4 9-6 19-7 27-4v40c-8-3-18-2-27 4-9-6-19-7-27-4V12Zm6 7v25c6-1 12 0 17 3V22c-5-3-11-4-17-3Zm42 0c-6-1-12 0-17 3v25c5-3 11-4 17-3V19Z'/%3E%3C/svg%3E") !important;
}

/* 3種とも押した時の青い枠を出さず、立体押下だけ使う */
#topSettingsToggleBtn,
#topSettingsToggleBtn *,
.listEnterBtn.entryIconBtn,
.listEnterBtn.entryIconBtn *{
  -webkit-tap-highlight-color:transparent !important;
  outline:none !important;
}
#topSettingsToggleBtn:focus,
#topSettingsToggleBtn:focus-visible,
.listEnterBtn.entryIconBtn:focus,
.listEnterBtn.entryIconBtn:focus-visible{
  outline:none !important;
}

/* =========================================================
   2026-09-01 icon polish 4
   - settings: chunky/deformed gear, center white
   - enter: arrow points INTO the doorway
   - keep button hit area stable while icon alone depresses
   ========================================================= */
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvgSolid{
  width:26px !important;
  height:26px !important;
}
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvgSolid .rooomGearBody{
  fill:#8f8f8f !important;
  stroke:none !important;
}
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvgSolid .rooomGearInner{
  fill:#8f8f8f !important;
  stroke:none !important;
}
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvgSolid .rooomGearCenter{
  fill:#fff !important;
  stroke:none !important;
}

/* 入室：左側の矢印が右側の開いたドアへ入っていく向き。 */
.entryDoorIcon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23000'%3E%3Cpath d='M37 8h18v48H37V8Zm5 6v36h7V14h-7Z'/%3E%3Cpath d='M31 13 48 9v46l-17-4V13Z'/%3E%3Ccircle cx='43' cy='33' r='2.4'/%3E%3Cpath d='M5 27h18v-6l12 11-12 11v-6H5V27Z'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23000'%3E%3Cpath d='M37 8h18v48H37V8Zm5 6v36h7V14h-7Z'/%3E%3Cpath d='M31 13 48 9v46l-17-4V13Z'/%3E%3Ccircle cx='43' cy='33' r='2.4'/%3E%3Cpath d='M5 27h18v-6l12 11-12 11v-6H5V27Z'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* 押下時は外枠を縮めず中身だけ沈める。 */
.rooomFloatingActionDock #topSettingsToggleBtn:active{
  transform:none !important;
}
.rooomFloatingActionDock #topSettingsToggleBtn:active .rooomGearSvgSolid,
.listEnterBtn.entryIconBtn:active .entryDoorIcon,
.listEnterBtn.entryIconBtn:active .entryArchiveIcon{
  transform:translateY(2px) scale(.94) !important;
}


/* =========================================================
   2026-09-01 reference icon polish 5
   - gear: chunky 8-tooth silhouette like reference
   - enter: door on left, arrow from right points INTO doorway
   - settings click area remains stable
   ========================================================= */
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvgSolid{
  width:27px !important;
  height:27px !important;
  overflow:visible !important;
}
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvgSolid .rooomGearBody,
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvgSolid .rooomGearBody *{
  fill:#858585 !important;
  stroke:none !important;
}
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvgSolid .rooomGearCenter{
  fill:#fff !important;
  stroke:none !important;
}

/* 入室：参照どおり、右から左へ進む矢印がドアの中へ入る。 */
.entryDoorIcon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23000'%3E%3Cpath d='M7 10 29 5v54L7 54V10Z'/%3E%3Ccircle cx='23' cy='33' r='2.4' fill='%23fff'/%3E%3Cpath d='M31 9h19v18h-5V14H31V9Zm14 31h5v15H31v-5h14V40Z'/%3E%3Cpath d='M58 27H43v-7L31 32l12 12v-7h15V27Z'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23000'%3E%3Cpath d='M7 10 29 5v54L7 54V10Z'/%3E%3Ccircle cx='23' cy='33' r='2.4' fill='%23fff'/%3E%3Cpath d='M31 9h19v18h-5V14H31V9Zm14 31h5v15H31v-5h14V40Z'/%3E%3Cpath d='M58 27H43v-7L31 32l12 12v-7h15V27Z'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* 青いタップ枠は出さない。PCキーボード操作以外の視覚ノイズを抑える。 */
#topSettingsToggleBtn,
#topSettingsToggleBtn *,
.listEnterBtn.entryIconBtn,
.listEnterBtn.entryIconBtn *{
  -webkit-tap-highlight-color:transparent !important;
  -webkit-touch-callout:none !important;
}


/* 2026-09-01 gear reference shape final override */
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvgSolid{
  width:29px !important;
  height:29px !important;
  overflow:visible !important;
}
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvgSolid .rooomGearBody{
  fill:#858585 !important;
  stroke:none !important;
}
.rooomFloatingActionDock #topSettingsToggleBtn .rooomGearSvgSolid .rooomGearCenter{
  fill:#fff !important;
  stroke:none !important;
}


/* =========================================================
   2026-09-01 settings/list/header final polish
   - description rows always expandable when they have a description
   - settings language: JP/EN/CN/KO direct buttons
   - dark help marks: no square button chrome
   - lower-button help mark: no label overlap
   - guide button remains white 3D in dark mode
   - compact header vertical spacing
   ========================================================= */

/* settings language buttons */
#topUtilityRow #topSettingsLanguageRow.topSettingsLanguageRow{
  display:flex !important;
  align-items:center !important;
}
#topUtilityRow #topSettingsLanguageRow .topSettingsLanguageButtons{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(42px,1fr)) !important;
  gap:6px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
#topUtilityRow #topSettingsLanguageRow .topSettingsLanguageBtn{
  appearance:none !important;
  -webkit-appearance:none !important;
  min-width:42px !important;
  height:28px !important;
  padding:0 8px !important;
  border:1px solid rgba(0,0,0,.14) !important;
  border-radius:9px !important;
  background:#f6f6f6 !important;
  color:#333 !important;
  font-size:11px !important;
  font-weight:700 !important;
  line-height:1 !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  outline:none !important;
}
#topUtilityRow #topSettingsLanguageRow .topSettingsLanguageBtn.is-active{
  background:#151515 !important;
  color:#fff !important;
  border-color:#151515 !important;
}
html.rooom-dark-theme #topUtilityRow #topSettingsLanguageRow .topSettingsLanguageBtn{
  background:#303030 !important;
  color:#ddd !important;
  border-color:rgba(255,255,255,.14) !important;
}
html.rooom-dark-theme #topUtilityRow #topSettingsLanguageRow .topSettingsLanguageBtn.is-active{
  background:#f1f1f1 !important;
  color:#111 !important;
  border-color:#f1f1f1 !important;
}
@media(max-width:390px){
  #topUtilityRow #topSettingsLanguageRow .topSettingsLanguageButtons{gap:4px !important;}
  #topUtilityRow #topSettingsLanguageRow .topSettingsLanguageBtn{min-width:38px !important;padding:0 5px !important;font-size:10px !important;}
}

/* The ? itself is circular; its button must stay visually transparent, especially in dark mode. */
.rooomFeatureHelpTrigger,
.rooomInlineFeatureHelp,
#topUtilityRow .rooomSettingRowHelp,
html.rooom-dark-theme .rooomFeatureHelpTrigger,
html.rooom-dark-theme .rooomInlineFeatureHelp,
html.rooom-dark-theme #topUtilityRow .rooomSettingRowHelp{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  outline:none !important;
  border-radius:0 !important;
  -webkit-tap-highlight-color:transparent !important;
}

/* 下部ボタン: label終端から少し離して配置 */
#topUtilityRow .topSettingsCreateButtonPositionRow .rooomSettingRowHelp{
  left:59px !important;
  top:1px !important;
}
@media(max-width:420px){
  #topUtilityRow .topSettingsCreateButtonPositionRow .rooomSettingRowHelp{left:56px !important;}
}

/* Dark mode must keep the same white 3D guide/company button as light mode. */
html.rooom-dark-theme #topPolicyMenuBtn.rooomGuideMenuBtn,
html.rooom-dark-theme #topPolicyMenuBtn.topRefreshMenuBtn.rooomGuideMenuBtn{
  color:#333 !important;
  border:1px solid rgba(0,0,0,.15) !important;
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.99) 0 18%,rgba(255,255,255,0) 43%),
    linear-gradient(145deg,#fff 0%,#f5f5f5 54%,#e3e3e3 100%) !important;
  box-shadow:
    0 7px 14px rgba(0,0,0,.24),
    0 2px 4px rgba(0,0,0,.13),
    inset 1px 1px 1px rgba(255,255,255,.96),
    inset -2px -3px 5px rgba(0,0,0,.07) !important;
}
html.rooom-dark-theme #topPolicyMenuBtn.rooomGuideMenuBtn .rooomGuideMenuIcon{
  color:#333 !important;
}

/* Narrow/mobile header: keep top safe-area, remove excess space under tagline. */
@media(max-width:640px){
  .topRefreshHeader{
    padding:8px 44px 2px !important;
    margin-bottom:5px !important;
    min-height:0 !important;
  }
  .topRefreshBrand{
    gap:2px !important;
  }
  .topRefreshTagline{
    margin:0 !important;
    line-height:1.15 !important;
  }
  .topRefreshRight{
    left:8px !important;
    top:8px !important;
    transform:none !important;
  }
  .rooomStickyTopControls{
    padding-top:3px !important;
  }
}


/* =========================================================
   2026-09-01 settings label-help alignment final
   - every ? follows the end of the label text
   - notify ON control uses the same start line as every other row
   ========================================================= */
#topUtilityRow .topSettingsRowLabel{
  display:inline-flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:3px !important;
  overflow:visible !important;
}
#topUtilityRow .topSettingsRowLabel .topSettingLabelText{
  display:inline-block !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
#topUtilityRow .topSettingsRowLabel .rooomSettingRowHelp{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:-2px !important;
  width:14px !important;
  min-width:14px !important;
  height:14px !important;
  margin:0 !important;
  padding:0 !important;
  flex:0 0 14px !important;
  transform:none !important;
}
#topUtilityRow .topSettingsRowLabel .rooomSettingRowHelp .rooomHelpMark{
  width:12px !important;
  height:12px !important;
  min-width:12px !important;
  font-size:8px !important;
  line-height:10px !important;
}
/* previous per-row absolute offsets are cancelled */
#topUtilityRow .topSettingsCreateButtonPositionRow .rooomSettingRowHelp{
  left:auto !important;
  top:-2px !important;
}
/* Notify row: exactly the same label/control geometry as the other settings rows. */
#topUtilityRow #pwaBanner.topSettingsNotifyRow{
  padding:5px 8px !important;
  gap:5px !important;
}
#topUtilityRow #pwaBanner .topSettingsNotifyFixedLabel{
  flex:0 0 74px !important;
  width:74px !important;
  min-width:74px !important;
  max-width:74px !important;
}
#topUtilityRow #pwaBanner .topRefreshNoticeActions{
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
}

/* =========================================================
   2026-09-02 settings help mark micro alignment
   - ? sits just above the end of each setting label
   - cancel legacy per-row offsets, including bottom-button row
   ========================================================= */
#topUtilityRow .topSettingsRowLabel{
  position:relative !important;
  justify-content:flex-start !important;
  overflow:visible !important;
}
#topUtilityRow .topSettingsRowLabel .topSettingLabelText{
  position:relative !important;
  display:inline-block !important;
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
}
#topUtilityRow .topSettingsRowLabel .rooomSettingRowHelp,
#topUtilityRow .topSettingsCreateButtonPositionRow .topSettingsRowLabel .rooomSettingRowHelp{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:-6px !important;
  margin-left:-1px !important;
  margin-right:0 !important;
  width:13px !important;
  min-width:13px !important;
  height:13px !important;
  min-height:13px !important;
  flex:0 0 13px !important;
  transform:none !important;
}
#topUtilityRow .topSettingsRowLabel .rooomSettingRowHelp .rooomHelpMark{
  width:11px !important;
  min-width:11px !important;
  max-width:11px !important;
  height:11px !important;
  min-height:11px !important;
  max-height:11px !important;
  font-size:7.5px !important;
  line-height:9px !important;
}

/* =========================================================
   2026-09-02 settings help ON/OFF no-shift guard
   - 機能説明OFFでも設定行の「？」用レイアウト幅だけ保持
   - 見た目は消すが display:none にしないため項目名を1pxも動かさない
   ========================================================= */
html.rooom-feature-help-off #topUtilityRow .topSettingsRowLabel .rooomSettingRowHelp{
  display:flex !important;
  visibility:hidden !important;
  pointer-events:none !important;
  opacity:0 !important;
}

/* =========================================================
   2026-09-02 settings help mark left/up micro-adjustment
   - visual-only move: layout slot stays fixed, so ON/OFF never shifts labels
   - all setting-row ? marks use the exact same offset
   ========================================================= */
#topUtilityRow .topSettingsRowLabel .rooomSettingRowHelp,
#topUtilityRow .topSettingsCreateButtonPositionRow .topSettingsRowLabel .rooomSettingRowHelp{
  transform:translate(-4px,-2px) !important;
}

/* =========================================================
   2026-09-02 responsive shared-parts normalization
   - the smallest/mobile layout is the visual source of truth
   - shared parts keep the same geometry at every viewport width
   - responsive rules remain only where content flow/columns truly need them
   ========================================================= */

/* Header: one geometry for phone / tablet / PC. */
.topRefreshHeader{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px 44px 2px !important;
  margin-bottom:5px !important;
  min-height:0 !important;
}
.topRefreshBrand{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  text-align:center !important;
  min-width:0 !important;
}
.topRefreshLogo{
  font-size:48px !important;
  line-height:.95 !important;
  transform:scaleX(1.04) !important;
  transform-origin:center center !important;
}
.topRefreshTagline{
  display:block !important;
  width:100% !important;
  max-width:calc(100vw - 88px) !important;
  margin:0 !important;
  color:#666 !important;
  font-size:12px !important;
  line-height:1.15 !important;
  text-align:center !important;
  white-space:normal !important;
}
.topRefreshRight{
  position:absolute !important;
  left:8px !important;
  right:auto !important;
  top:8px !important;
  bottom:auto !important;
  transform:none !important;
  z-index:40000 !important;
  width:auto !important;
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
.topRefreshNav{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
#topPolicyMenuBtn.rooomGuideMenuBtn{
  position:relative !important;
  inset:auto !important;
}
#topPolicyMenu.topPolicyMenu{
  position:absolute !important;
  left:0 !important;
  right:auto !important;
  top:calc(100% + 8px) !important;
  bottom:auto !important;
}
.rooomStickyTopControls{
  padding-top:3px !important;
}

/* Help marks: one component size/position source of truth. */
.rooomHelpMark{
  width:13px !important;
  min-width:13px !important;
  max-width:13px !important;
  height:13px !important;
  min-height:13px !important;
  max-height:13px !important;
  font-size:9px !important;
}
.rooomSectionTabHelp{
  top:-6px !important;
  width:22px !important;
  height:22px !important;
  transform:translateX(-50%) !important;
}
.rooomSectionTabHelp1{left:calc(12.5% + 20px) !important;}
.rooomSectionTabHelp2{left:calc(37.5% + 20px) !important;}
.rooomSectionTabHelp3{left:calc(62.5% + 20px) !important;}
.rooomSectionTabHelp4{left:calc(87.5% + 20px) !important;}
.rooomListMetaHelp{right:112px !important;top:0 !important;}
.rooomListActionHelp{right:1px !important;top:0 !important;}

/* Settings label help: use one position instead of a separate <=420px value. */
#topUtilityRow .topSettingsCreateButtonPositionRow .rooomSettingRowHelp{
  left:56px !important;
  top:1px !important;
}

/* =========================================================
   2026-09-02 legacy section headers removed
   - Section navigation/counts are now handled by the top tabs.
   - Remove the obsolete Official/Open header rows on every device.
   - This intentionally overrides old iPad-portrait resurrection rules.
   ========================================================= */
.officialRoomsBar,
.userRoomsBar,
html.rooom-ipad-portrait .officialRoomsBar,
html.rooom-ipad-portrait .userRoomsBar{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  min-height:0 !important;
  height:0 !important;
  overflow:hidden !important;
}

/* =========================================================
   2026-09-02 募集中リスト：固定物をカード座標へ完全固定
   正本：未展開時の位置
   展開で変わるのは本文（タイトル/説明）の高さだけ。
   左カテゴリ / 人数・日時 / 予約・管理 / ? はカード座標固定。
   ========================================================= */

/* カード本体。
   旧 .listItem.open の grid 再配置を使わず、本文だけを通常フローに残す。 */
html body #prepOpenCloneList .listItem.prepStableListItem,
html body #prepOpenCloneList .listItem.prepStableListItem.open,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText,
html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText),
html.rooom-ipad-portrait body #prepOpenCloneList .listItem.prepStableListItem,
html.rooom-ipad-portrait body #prepOpenCloneList .listItem.prepStableListItem.open{
  position:relative !important;
  display:block !important;
  min-height:58px !important;
  height:auto !important;
  padding:8px 10px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

/* 左カテゴリ：カード左上を基準に完全固定 */
html body #prepOpenCloneList .listItem.prepStableListItem > .listCategorySlot,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .listCategorySlot,
html.rooom-ipad-portrait body #prepOpenCloneList .listItem.prepStableListItem > .listCategorySlot,
html.rooom-ipad-portrait body #prepOpenCloneList .listItem.prepStableListItem.open > .listCategorySlot{
  position:absolute !important;
  left:10px !important;
  top:4px !important;
  width:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* 本文だけ通常フロー。
   open/closeで左端・右端・上端は一切変えない。 */
html body #prepOpenCloneList .listItem.prepStableListItem > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .listMain,
html.rooom-ipad-portrait body #prepOpenCloneList .listItem.prepStableListItem > .listMain,
html.rooom-ipad-portrait body #prepOpenCloneList .listItem.prepStableListItem.open > .listMain{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 132px 0 44px !important;
  padding:1px 0 0 !important;
  transform:none !important;
  gap:0 !important;
}

/* タイトル行：矢印の座標も固定、回転だけ許可 */
html body #prepOpenCloneList .listItem.prepStableListItem .listTitleRow,
html body #prepOpenCloneList .listItem.prepStableListItem.open .listTitleRow{
  position:relative !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  min-height:17px !important;
  height:auto !important;
  margin:0 !important;
  padding:0 18px 0 0 !important;
  box-sizing:border-box !important;
}

html body #prepOpenCloneList .listItem.prepStableListItem .listToggle,
html body #prepOpenCloneList .listItem.prepStableListItem.open .listToggle{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  left:auto !important;
  width:16px !important;
  min-width:16px !important;
  height:17px !important;
  min-height:17px !important;
  margin:0 !important;
  padding:0 !important;
}

/* 未展開：タイトル/説明は各1行 */
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) .listName{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  line-height:17px !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-line-clamp:unset !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) .listDesc{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  min-width:0 !important;
  height:15px !important;
  min-height:15px !important;
  max-height:15px !important;
  line-height:15px !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-line-clamp:unset !important;
}

/* 展開：本文だけ下方向へ伸ばす */
html body #prepOpenCloneList .listItem.prepStableListItem.open .listName{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:17px !important;
  max-height:none !important;
  line-height:1.25 !important;
  margin:0 !important;
  padding:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  -webkit-line-clamp:unset !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem.open .listDesc{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:15px !important;
  max-height:none !important;
  line-height:1.35 !important;
  margin:4px 0 0 !important;
  padding:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  -webkit-line-clamp:unset !important;
}

/* 人数・日時：カード右上の固定座標。open/closeを参照しない */
html body #prepOpenCloneList .listItem.prepStableListItem > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem:has(.prepListPrimaryReserve) > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open:has(.prepListPrimaryReserve) > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem:has(.prepListManageButton) > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open:has(.prepListManageButton) > .prepListMeta{
  position:absolute !important;
  top:8px !important;
  right:60px !important;
  left:auto !important;
  width:76px !important;
  min-width:76px !important;
  max-width:76px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:1px !important;
  overflow:visible !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaInfo{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.1 !important;
  font-size:8px !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  white-space:nowrap !important;
}

/* 予約/管理：カード右上の固定座標。open/closeで絶対に動かさない */
html body #prepOpenCloneList .listItem.prepStableListItem > .prepListActionStack,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListActionStack{
  position:absolute !important;
  top:8px !important;
  right:10px !important;
  left:auto !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:2px !important;
  overflow:visible !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem .prepListPrimaryReserve,
html body #prepOpenCloneList .listItem.prepStableListItem .prepListManageButton,
html body #prepOpenCloneList .listItem.prepStableListItem.open .prepListPrimaryReserve,
html body #prepOpenCloneList .listItem.prepStableListItem.open .prepListManageButton{
  position:static !important;
  align-self:auto !important;
  justify-self:auto !important;
  flex:0 0 auto !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:34px !important;
  min-height:34px !important;
  margin:0 !important;
  transform:none !important;
}

/* ?：親列ではなくカード座標へ固定 */
html body #prepOpenCloneList .listItem.prepStableListItem .rooomListMetaHelp,
html body #prepOpenCloneList .listItem.prepStableListItem.open .rooomListMetaHelp{
  position:absolute !important;
  top:0 !important;
  right:116px !important;
  left:auto !important;
  margin:0 !important;
  transform:none !important;
  z-index:20 !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem .rooomListActionHelp,
html body #prepOpenCloneList .listItem.prepStableListItem.open .rooomListActionHelp{
  position:absolute !important;
  top:0 !important;
  right:1px !important;
  left:auto !important;
  margin:0 !important;
  transform:none !important;
  z-index:20 !important;
}

@media (max-width:640px){
  html body #prepOpenCloneList .listItem.prepStableListItem .rooomListMetaHelp,
  html body #prepOpenCloneList .listItem.prepStableListItem.open .rooomListMetaHelp{
    top:0 !important;
    right:112px !important;
  }
  html body #prepOpenCloneList .listItem.prepStableListItem .rooomListActionHelp,
  html body #prepOpenCloneList .listItem.prepStableListItem.open .rooomListActionHelp{
    top:0 !important;
    right:1px !important;
  }
}

/* 通報：閉じている時は非表示。開いた時だけ主操作の下へ出す。 */
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) .prepListReportUnderAction{
  display:none !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem.open .prepListReportUnderAction{
  display:inline-flex !important;
  position:static !important;
  flex:0 0 auto !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:13px !important;
  min-height:13px !important;
  margin:1px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:7px !important;
  font-weight:800 !important;
  line-height:13px !important;
  white-space:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  transform:none !important;
}

/* 641px以上：未展開時のPC幅をそのまま使う。固定物は座標だけ変更。 */
@media (min-width:641px){
  html body #prepOpenCloneList .listItem.prepStableListItem,
  html body #prepOpenCloneList .listItem.prepStableListItem.open{
    min-height:50px !important;
    padding:8px 10px !important;
  }

  html body #prepOpenCloneList .listItem.prepStableListItem > .listCategorySlot,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .listCategorySlot{
    left:10px !important;
    top:4px !important;
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
  }

  html body #prepOpenCloneList .listItem.prepStableListItem > .listMain,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .listMain{
    margin-left:52px !important;
    margin-right:136px !important;
  }

  html body #prepOpenCloneList .listItem.prepStableListItem > .prepListMeta,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListMeta,
  html body #prepOpenCloneList .listItem.prepStableListItem:has(.prepListPrimaryReserve) > .prepListMeta,
  html body #prepOpenCloneList .listItem.prepStableListItem.open:has(.prepListPrimaryReserve) > .prepListMeta,
  html body #prepOpenCloneList .listItem.prepStableListItem:has(.prepListManageButton) > .prepListMeta,
  html body #prepOpenCloneList .listItem.prepStableListItem.open:has(.prepListManageButton) > .prepListMeta{
    top:8px !important;
    right:62px !important;
  }

  html body #prepOpenCloneList .listItem.prepStableListItem > .prepListActionStack,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListActionStack{
    top:8px !important;
    right:10px !important;
  }
}


/* =========================================================
   2026-09-02 募集中リスト：通常時2行ぴったりの高さへ圧縮
   - 通常時カード高 50px
   - タイトル17px + 2px + 説明15px = 34px を上下8pxで配置
   - 左カテゴリ42pxは top:4px で縦中央
   - 人数/日時34px・予約/管理34pxは top:8px で縦中央
   - 展開時は本文だけ下へ伸び、固定物の座標は変えない
   ========================================================= */

/* =========================================================
   2026-09-02 募集中リスト：上下余白ほぼゼロ最終圧縮
   通常時は左アイコン42pxを基準にカード高44px。
   タイトル+説明の2行だけを中央に収める。
   固定物は通常時の縦中央位置を維持し、openでも座標を変えない。
   ========================================================= */
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open){
  min-height:44px !important;
  height:44px !important;
  padding:0 10px !important;
}

/* 本文：2行分だけ。上下の余白を作らない */
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) > .listMain{
  min-height:0 !important;
  height:34px !important;
  margin-top:5px !important;
  margin-bottom:5px !important;
  padding:0 !important;
  justify-content:flex-start !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) .listTitleRow{
  min-height:17px !important;
  height:17px !important;
  margin:0 !important;
  padding:0 !important;
  align-items:center !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) .listName{
  min-height:17px !important;
  height:17px !important;
  line-height:17px !important;
  margin:0 !important;
  padding:0 !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) .listDesc{
  display:block !important;
  min-height:15px !important;
  height:15px !important;
  line-height:15px !important;
  margin:2px 0 0 !important;
  padding:0 !important;
}

/* 左アイコン42px：44pxカードのど真ん中 */
html body #prepOpenCloneList .listItem.prepStableListItem > .listCategorySlot,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .listCategorySlot{
  top:1px !important;
}

/* 人数/日時34px：44pxカードのど真ん中 */
html body #prepOpenCloneList .listItem.prepStableListItem > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem:has(.prepListPrimaryReserve) > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open:has(.prepListPrimaryReserve) > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem:has(.prepListManageButton) > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open:has(.prepListManageButton) > .prepListMeta{
  top:5px !important;
}

/* 予約/管理34px：44pxカードのど真ん中 */
html body #prepOpenCloneList .listItem.prepStableListItem > .prepListActionStack,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListActionStack{
  top:5px !important;
}

/* open時は本文だけが下方向へ増える。開始位置は通常時と完全同一 */
html body #prepOpenCloneList .listItem.prepStableListItem.open{
  min-height:44px !important;
  height:auto !important;
  padding:0 10px !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem.open > .listMain{
  margin-top:5px !important;
  margin-bottom:5px !important;
  padding:0 !important;
}

@media (min-width:641px){
  html body #prepOpenCloneList .listItem.prepStableListItem:not(.open),
  html body #prepOpenCloneList .listItem.prepStableListItem.open{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  html body #prepOpenCloneList .listItem.prepStableListItem > .listCategorySlot,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .listCategorySlot{
    top:1px !important;
  }
  html body #prepOpenCloneList .listItem.prepStableListItem > .prepListMeta,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListMeta,
  html body #prepOpenCloneList .listItem.prepStableListItem:has(.prepListPrimaryReserve) > .prepListMeta,
  html body #prepOpenCloneList .listItem.prepStableListItem.open:has(.prepListPrimaryReserve) > .prepListMeta,
  html body #prepOpenCloneList .listItem.prepStableListItem:has(.prepListManageButton) > .prepListMeta,
  html body #prepOpenCloneList .listItem.prepStableListItem.open:has(.prepListManageButton) > .prepListMeta,
  html body #prepOpenCloneList .listItem.prepStableListItem > .prepListActionStack,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListActionStack{
    top:5px !important;
  }
}

/* =========================================================
   2026-09-02 募集中リスト：仕上げ調整
   1) 人数/日時をアーカイブ相当の文字サイズへ
   2) 管理/予約ボタンの縦タップ領域を拡大
   3) 展開時もタイトル/説明の開始Y座標を未展開と完全一致
   4) 長文の省略記号と展開矢印を分離し、矢印を少し大型化
   固定済みの左アイコン・右メタ・ヘルプ?の座標は維持する。
   ========================================================= */

/* 人数/日時：現行8px → アーカイブ相当の11px */
html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaInfo{
  font-size:11px !important;
  line-height:1.05 !important;
}

/* 44pxカード内で、管理/予約を38px高にして縦中央（top=3px） */
html body #prepOpenCloneList .listItem.prepStableListItem > .prepListActionStack,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListActionStack{
  top:3px !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem .prepListPrimaryReserve,
html body #prepOpenCloneList .listItem.prepStableListItem .prepListManageButton,
html body #prepOpenCloneList .listItem.prepStableListItem.open .prepListPrimaryReserve,
html body #prepOpenCloneList .listItem.prepStableListItem.open .prepListManageButton{
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* 本文開始位置：open/closeで同じ5px。文字の行高も同じにして基線ズレを消す */
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .listMain{
  margin-top:5px !important;
  padding-top:0 !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem.open .listName{
  line-height:17px !important;
  margin:0 !important;
  padding:0 !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem.open .listDesc{
  line-height:15px !important;
  margin:2px 0 0 !important;
  padding:0 !important;
}

/* 長文の「…」と矢印を重ねない。右側に矢印専用24px+余白を確保 */
html body #prepOpenCloneList .listItem.prepStableListItem .listTitleRow,
html body #prepOpenCloneList .listItem.prepStableListItem.open .listTitleRow{
  padding-right:30px !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem .listToggle,
html body #prepOpenCloneList .listItem.prepStableListItem.open .listToggle{
  top:0 !important;
  right:0 !important;
  width:24px !important;
  min-width:24px !important;
  height:17px !important;
  min-height:17px !important;
  font-size:14px !important;
  line-height:17px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
}

/* PC/iPad側でもボタンだけ同じ38px中央配置を維持 */
@media (min-width:641px){
  html body #prepOpenCloneList .listItem.prepStableListItem > .prepListActionStack,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListActionStack{
    top:3px !important;
  }
}

/* =========================================================
   2026-09-02 募集中リスト：本文上端完全固定 / 矢印を2行中央へ
   - カードの上paddingをopen/closeで完全共通化し、本文Y座標を固定
   - listMainはmargin-topを使わずカードpaddingで上端を決める
   - タイトル/説明は同じ本文幅を使う
   - ▼は本文2行の右中央へ独立固定し、長文の…と干渉させない
   - open時は本文が下方向にだけ伸びる
   ========================================================= */

/* カード本体：open/closeで上端基準を完全に同じにする。
   34pxの本文 + 上下5px = 未展開44px。 */
html body #prepOpenCloneList .listItem.prepStableListItem,
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open),
html body #prepOpenCloneList .listItem.prepStableListItem.open,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText,
html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText),
html.rooom-ipad-portrait body #prepOpenCloneList .listItem.prepStableListItem,
html.rooom-ipad-portrait body #prepOpenCloneList .listItem.prepStableListItem.open{
  position:relative !important;
  display:block !important;
  min-height:44px !important;
  height:auto !important;
  max-height:none !important;
  padding:5px 10px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

/* 本文：カードpaddingの直下から必ず開始。
   margin-topをゼロにしてopen/closeでY座標が変わる余地を消す。 */
html body #prepOpenCloneList .listItem.prepStableListItem > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText > .listMain,
html.rooom-ipad-portrait body #prepOpenCloneList .listItem.prepStableListItem > .listMain,
html.rooom-ipad-portrait body #prepOpenCloneList .listItem.prepStableListItem.open > .listMain{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-self:start !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 136px 0 44px !important;
  padding:0 30px 0 0 !important;
  transform:none !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  gap:0 !important;
  box-sizing:border-box !important;
}

/* タイトル行は文字だけ。矢印のレイアウト幅をここでは取らない。 */
html body #prepOpenCloneList .listItem.prepStableListItem .listTitleRow,
html body #prepOpenCloneList .listItem.prepStableListItem.open .listTitleRow{
  position:static !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  min-height:17px !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  line-height:17px !important;
  box-sizing:border-box !important;
}

/* 未展開タイトル：説明と同じ本文右端まで使い、最後だけellipsis。 */
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) .listName{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:17px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-line-clamp:unset !important;
  transform:none !important;
}

/* 展開タイトル：開始位置はそのまま、下方向にだけ折り返す。 */
html body #prepOpenCloneList .listItem.prepStableListItem.open .listName,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText .listName{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:17px !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  line-height:17px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  -webkit-line-clamp:unset !important;
  transform:none !important;
}

/* 説明：open/closeともタイトル直下2pxから開始。
   未展開は1行、展開は全文。 */
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) .listDesc{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  min-width:0 !important;
  height:15px !important;
  min-height:15px !important;
  max-height:15px !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  line-height:15px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-line-clamp:unset !important;
  transform:none !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem.open .listDesc,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText .listDesc{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:15px !important;
  max-height:none !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  line-height:15px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  -webkit-line-clamp:unset !important;
  transform:none !important;
}

/* ▼：タイトル行からレイアウト上切り離し、タイトル+説明34pxの中央へ。
   listMainがposition:relativeなので、openでも座標は変わらない。 */
html body #prepOpenCloneList .listItem.prepStableListItem .listToggle,
html body #prepOpenCloneList .listItem.prepStableListItem.open .listToggle{
  position:absolute !important;
  top:5px !important;
  right:0 !important;
  left:auto !important;
  width:24px !important;
  min-width:24px !important;
  max-width:24px !important;
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:16px !important;
  line-height:24px !important;
  opacity:.82 !important;
  z-index:6 !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) .listToggle{
  transform:none !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem.open .listToggle{
  transform:rotate(180deg) !important;
}


/* ===== 2026-09-02 準備部屋基準：展開矢印を右へ / メタ?を右上へ =====
   本文・固定物・展開時のY座標は変更しない。 */
html body #prepOpenCloneList .listItem.prepStableListItem .listToggle,
html body #prepOpenCloneList .listItem.prepStableListItem.open .listToggle{
  right:-8px !important;
}

/* 人数・日時側の?だけを少し右上へ。操作側?は現状維持。 */
html body #prepOpenCloneList .listItem.prepStableListItem .rooomListMetaHelp,
html body #prepOpenCloneList .listItem.prepStableListItem.open .rooomListMetaHelp{
  top:-3px !important;
  right:112px !important;
}

@media (max-width:640px){
  html body #prepOpenCloneList .listItem.prepStableListItem .rooomListMetaHelp,
  html body #prepOpenCloneList .listItem.prepStableListItem.open .rooomListMetaHelp{
    top:-3px !important;
    right:108px !important;
  }
}

/* =========================================================
   2026-09-02 準備部屋：完成基準 微調整
   - タイトル/説明は人数・日時エリア直前まで横幅を使う
   - ▼は本文の外側へさらに右寄せ
   - 人数・日時側の「？」も右へ逃がして▼と干渉させない
   - 未展開で収まらないタイトル/説明は ellipsis を維持
   - 通報は展開時のみ表示し、予約ボタン直下から少し左へ寄せる
   - 本文の上端固定、左アイコン、人数日時、管理/予約の固定位置は変更しない
   ========================================================= */

/* これまで矢印用に本文内へ確保していた30pxを返す。
   listMain自体の右端（人数・日時エリア直前）までタイトル/説明が使える。 */
html body #prepOpenCloneList .listItem.prepStableListItem > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText > .listMain,
html.rooom-ipad-portrait body #prepOpenCloneList .listItem.prepStableListItem > .listMain,
html.rooom-ipad-portrait body #prepOpenCloneList .listItem.prepStableListItem.open > .listMain{
  padding-right:0 !important;
}

/* ▼は本文右端のさらに外へ。タイトル/説明の文字領域を一切消費しない。 */
html body #prepOpenCloneList .listItem.prepStableListItem .listToggle,
html body #prepOpenCloneList .listItem.prepStableListItem.open .listToggle{
  right:-18px !important;
}

/* ▼が右へ来る分、人数・日時側の「？」もさらに右上へ逃がす。 */
html body #prepOpenCloneList .listItem.prepStableListItem .rooomListMetaHelp,
html body #prepOpenCloneList .listItem.prepStableListItem.open .rooomListMetaHelp{
  top:-3px !important;
  right:100px !important;
}
@media (max-width:640px){
  html body #prepOpenCloneList .listItem.prepStableListItem .rooomListMetaHelp,
  html body #prepOpenCloneList .listItem.prepStableListItem.open .rooomListMetaHelp{
    top:-3px !important;
    right:96px !important;
  }
}

/* 未展開は1行表示。横幅に収まらない時だけ末尾「…」。 */
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) .listName,
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) .listDesc{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* 見る側の通報は展開時だけ。予約ボタンより少し左へ寄せる。 */
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) .prepListReportUnderAction{
  display:none !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem.open .prepListReportUnderAction{
  display:inline-flex !important;
  position:relative !important;
  left:-10px !important;
  transform:none !important;
}



/* =========================================================
   2026-09-02 準備部屋：基準確定 v2
   - ▼はlistMainの外へ出し、カード本体基準で常時固定
   - タイトル/説明は▼のために幅を削らず、右端まで使う
   - 短文でも準備部屋は常に展開可能
   - 通報は展開時のみ、予約ボタン外枠の中心線に完全一致
   ========================================================= */

/* タイトル行にはもう▼が入っていないので余白を返す */
html body #prepOpenCloneList .listItem.prepStableListItem .listTitleRow,
html body #prepOpenCloneList .listItem.prepStableListItem.open .listTitleRow{
  padding-right:0 !important;
}

/* 本文は固定メタ列の直前まで。open/closeで同一幅・同一開始位置。 */
html body #prepOpenCloneList .listItem.prepStableListItem > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText > .listMain,
html.rooom-ipad-portrait body #prepOpenCloneList .listItem.prepStableListItem > .listMain,
html.rooom-ipad-portrait body #prepOpenCloneList .listItem.prepStableListItem.open > .listMain{
  margin-left:44px !important;
  margin-right:136px !important;
  padding-right:0 !important;
}

/* ▼：カード本体基準。本文2行の中央に置き、?の左側まで右寄せ。 */
html body #prepOpenCloneList .listItem.prepStableListItem > .prepListFixedToggle,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListFixedToggle{
  position:absolute !important;
  top:10px !important;
  right:112px !important;
  left:auto !important;
  width:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:15px !important;
  line-height:24px !important;
  opacity:.82 !important;
  z-index:25 !important;
  pointer-events:auto !important;
  visibility:visible !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) > .prepListFixedToggle{
  transform:none !important;
}
html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListFixedToggle{
  transform:rotate(180deg) !important;
}

/* 人数/日時側の?は▼より右上へ。 */
html body #prepOpenCloneList .listItem.prepStableListItem > .rooomListMetaHelp,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .rooomListMetaHelp{
  top:-3px !important;
  right:88px !important;
}

/* 通報：閉じている間は必ず非表示。 */
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) .prepListReportUnderAction{
  display:none !important;
}

/* 展開時は予約ボタンと同じ44px枠の中で中央揃え。
   left補正を完全撤去し、予約ボタンの中心線と通報の中心線を一致させる。 */
html body #prepOpenCloneList .listItem.prepStableListItem.open .prepListReportUnderAction{
  display:inline-flex !important;
  position:static !important;
  left:auto !important;
  right:auto !important;
  flex:0 0 auto !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:13px !important;
  min-height:13px !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  transform:none !important;
}

/* 小画面でも同じ基準。 */
@media (max-width:640px){
  html body #prepOpenCloneList .listItem.prepStableListItem > .prepListFixedToggle,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListFixedToggle{
    right:108px !important;
  }
  html body #prepOpenCloneList .listItem.prepStableListItem > .rooomListMetaHelp,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .rooomListMetaHelp{
    right:84px !important;
  }
}

/* =========================================================
   2026-09-02 準備部屋：矢印位置 / 短文展開 / 通報位置 微調整
   - ▼を現状より左へ戻し、本文右端寄りの基準位置へ
   - 短文でもopen時は通報表示ぶんカード高を確保
   - 通報は予約ボタン中心から少しだけ左へ
   - タイトル/説明の開始位置・固定物のY座標は変更しない
   ========================================================= */

/* ▼：カード右端基準。現状より左へ約14px。 */
html body #prepOpenCloneList .listItem.prepStableListItem > .prepListFixedToggle,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListFixedToggle{
  right:126px !important;
}

/* 短文でも展開したことが視覚的に分かり、通報がカード内に収まる高さを確保。
   左アイコン・人数日時・予約/管理はabsolute固定のため位置は動かない。 */
html body #prepOpenCloneList .listItem.prepStableListItem.open:has(.prepListReportUnderAction){
  min-height:61px !important;
  padding-bottom:17px !important;
}

/* 通報：予約ボタンの真下基準から、見た目だけ4px左へ。 */
html body #prepOpenCloneList .listItem.prepStableListItem.open .prepListReportUnderAction{
  position:relative !important;
  left:-4px !important;
  right:auto !important;
}

@media (max-width:640px){
  html body #prepOpenCloneList .listItem.prepStableListItem > .prepListFixedToggle,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListFixedToggle{
    right:122px !important;
  }
}

/* =========================================================
   2026-09-02 準備部屋：▼ / 人数日時ヘルプ 左寄せ微調整
   - 人数日時側の「？」を人アイコンと重ならない位置へ左移動
   - ▼も少し左へ移動
   - 展開・通報・本文・固定物の縦位置は変更しない
   ========================================================= */

/* ▼：現在位置からさらに約10px左へ */
html body #prepOpenCloneList .listItem.prepStableListItem > .prepListFixedToggle,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListFixedToggle{
  right:136px !important;
}

/* 人数/日時側の「？」：人アイコンとの重なりを避けて約12px左へ */
html body #prepOpenCloneList .listItem.prepStableListItem > .rooomListMetaHelp,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .rooomListMetaHelp{
  right:100px !important;
}

@media (max-width:640px){
  html body #prepOpenCloneList .listItem.prepStableListItem > .prepListFixedToggle,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListFixedToggle{
    right:132px !important;
  }

  html body #prepOpenCloneList .listItem.prepStableListItem > .rooomListMetaHelp,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .rooomListMetaHelp{
    right:96px !important;
  }
}

/* =========================================================
   2026-09-02 公式リスト：準備部屋の完成骨格へ統一
   - 公式の部屋データ / タイマー / 入室処理 / ヘルプ機能は変更しない
   - 左アイコン / 人数・残り時間 / 入室ボタン / ? はカード座標へ固定
   - 未展開はタイトル1行 + 説明1行
   - 展開時は本文だけ下方向へ伸び、固定物は動かさない
   ========================================================= */

html body #roomList .list{
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
  gap:7px !important;
  width:100% !important;
  align-items:stretch !important;
}

html body #roomList .listItem.officialStableListItem,
html body #roomList .listItem.officialStableListItem:not(.open),
html body #roomList .listItem.officialStableListItem.open,
html body #roomList .listItem.officialStableListItem.open.longText,
html body #roomList .listItem.officialStableListItem.open:not(.longText){
  position:relative !important;
  display:block !important;
  min-height:44px !important;
  height:auto !important;
  max-height:none !important;
  padding:0 10px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

html body #roomList .listItem.officialStableListItem > .listCategorySlot,
html body #roomList .listItem.officialStableListItem.open > .listCategorySlot{
  position:absolute !important;
  left:10px !important;
  top:1px !important;
  width:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

html body #roomList .listItem.officialStableListItem > .listMain,
html body #roomList .listItem.officialStableListItem:not(.open) > .listMain,
html body #roomList .listItem.officialStableListItem.open > .listMain,
html body #roomList .listItem.officialStableListItem.open.longText > .listMain{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-self:start !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  max-height:none !important;
  margin:5px 136px 5px 44px !important;
  padding:0 !important;
  gap:0 !important;
  box-sizing:border-box !important;
  transform:none !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
}

html body #roomList .listItem.officialStableListItem .listTitleRow,
html body #roomList .listItem.officialStableListItem.open .listTitleRow{
  position:static !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  min-height:17px !important;
  height:auto !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  line-height:17px !important;
  box-sizing:border-box !important;
}

html body #roomList .listItem.officialStableListItem:not(.open) .listName{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:17px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-line-clamp:unset !important;
  transform:none !important;
}

html body #roomList .listItem.officialStableListItem:not(.open) .listDesc{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  min-width:0 !important;
  height:15px !important;
  min-height:15px !important;
  max-height:15px !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  line-height:15px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-line-clamp:unset !important;
  transform:none !important;
}

html body #roomList .listItem.officialStableListItem.open .listName,
html body #roomList .listItem.officialStableListItem.open.longText .listName{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:17px !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  line-height:17px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  -webkit-line-clamp:unset !important;
  transform:none !important;
}

html body #roomList .listItem.officialStableListItem.open .listDesc,
html body #roomList .listItem.officialStableListItem.open.longText .listDesc{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:15px !important;
  max-height:none !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  line-height:15px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  -webkit-line-clamp:unset !important;
  transform:none !important;
}

html body #roomList .listItem.officialStableListItem > .officialListFixedToggle,
html body #roomList .listItem.officialStableListItem.open > .officialListFixedToggle{
  position:absolute !important;
  top:10px !important;
  right:136px !important;
  left:auto !important;
  width:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:15px !important;
  line-height:24px !important;
  opacity:.82 !important;
  z-index:25 !important;
  pointer-events:auto !important;
  visibility:visible !important;
}

html body #roomList .listItem.officialStableListItem:not(.open) > .officialListFixedToggle{
  transform:none !important;
}
html body #roomList .listItem.officialStableListItem.open > .officialListFixedToggle{
  transform:rotate(180deg) !important;
}

html body #roomList .listItem.officialStableListItem > .listMeta,
html body #roomList .listItem.officialStableListItem.open > .listMeta{
  position:absolute !important;
  top:5px !important;
  right:60px !important;
  left:auto !important;
  width:76px !important;
  min-width:76px !important;
  max-width:76px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:1px !important;
  overflow:visible !important;
  font-size:11px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
}

html body #roomList .listItem.officialStableListItem > .listMeta .listMetaTop,
html body #roomList .listItem.officialStableListItem > .listMeta .listMetaBottom{
  display:block !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.05 !important;
  text-align:right !important;
}

html body #roomList .listItem.officialStableListItem > .listEnterBtn.entryIconBtn,
html body #roomList .listItem.officialStableListItem.open > .listEnterBtn.entryIconBtn{
  position:absolute !important;
  top:3px !important;
  right:10px !important;
  left:auto !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  margin:0 !important;
  padding:0 !important;
  align-self:auto !important;
  justify-self:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:none !important;
  z-index:10 !important;
}

html body #roomList .listItem.officialStableListItem > .rooomListMetaHelp,
html body #roomList .listItem.officialStableListItem.open > .rooomListMetaHelp{
  position:absolute !important;
  top:-3px !important;
  right:100px !important;
  left:auto !important;
  margin:0 !important;
  transform:none !important;
  z-index:20 !important;
}

html body #roomList .listItem.officialStableListItem > .rooomListActionHelp,
html body #roomList .listItem.officialStableListItem.open > .rooomListActionHelp{
  position:absolute !important;
  top:0 !important;
  right:1px !important;
  left:auto !important;
  margin:0 !important;
  transform:none !important;
  z-index:20 !important;
}

@media (max-width:640px){
  html body #roomList .listItem.officialStableListItem > .officialListFixedToggle,
  html body #roomList .listItem.officialStableListItem.open > .officialListFixedToggle{
    right:132px !important;
  }

  html body #roomList .listItem.officialStableListItem > .rooomListMetaHelp,
  html body #roomList .listItem.officialStableListItem.open > .rooomListMetaHelp{
    right:96px !important;
  }
}

@media (min-width:641px){
  html body #roomList .listItem.officialStableListItem > .listCategorySlot,
  html body #roomList .listItem.officialStableListItem.open > .listCategorySlot{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
  }
}

/* =========================================================
   2026-09-02 開催中リスト：準備部屋の完成骨格へ統一
   - 開催中の部屋データ / 残り時間 / 入室処理 / ヘルプ機能は変更しない
   - 左アイコン / 人数・残り時間 / 入室ボタン / ? はカード座標へ固定
   - 未展開はタイトル1行 + 説明1行
   - 展開時は本文だけ下方向へ伸び、固定物は動かさない
   ========================================================= */

html body #userRoomList .list{
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
  gap:7px !important;
  width:100% !important;
  align-items:stretch !important;
}

html body #userRoomList .listItem.liveStableListItem,
html body #userRoomList .listItem.liveStableListItem:not(.open),
html body #userRoomList .listItem.liveStableListItem.open,
html body #userRoomList .listItem.liveStableListItem.open.longText,
html body #userRoomList .listItem.liveStableListItem.open:not(.longText),
html body #prepOpenCloneList .listItem.liveStableListItem,
html body #prepOpenCloneList .listItem.liveStableListItem:not(.open),
html body #prepOpenCloneList .listItem.liveStableListItem.open,
html body #prepOpenCloneList .listItem.liveStableListItem.open.longText,
html body #prepOpenCloneList .listItem.liveStableListItem.open:not(.longText)
{
  position:relative !important;
  display:block !important;
  min-height:44px !important;
  height:auto !important;
  max-height:none !important;
  padding:0 10px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

html body #userRoomList .listItem.liveStableListItem > .listCategorySlot,
html body #userRoomList .listItem.liveStableListItem.open > .listCategorySlot,
html body #prepOpenCloneList .listItem.liveStableListItem > .listCategorySlot,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .listCategorySlot
{
  position:absolute !important;
  left:10px !important;
  top:1px !important;
  width:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

html body #userRoomList .listItem.liveStableListItem > .listMain,
html body #userRoomList .listItem.liveStableListItem:not(.open) > .listMain,
html body #userRoomList .listItem.liveStableListItem.open > .listMain,
html body #userRoomList .listItem.liveStableListItem.open.longText > .listMain,
html body #prepOpenCloneList .listItem.liveStableListItem > .listMain,
html body #prepOpenCloneList .listItem.liveStableListItem:not(.open) > .listMain,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .listMain,
html body #prepOpenCloneList .listItem.liveStableListItem.open.longText > .listMain
{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-self:start !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  max-height:none !important;
  margin:5px 136px 5px 44px !important;
  padding:0 !important;
  gap:0 !important;
  box-sizing:border-box !important;
  transform:none !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
}

html body #userRoomList .listItem.liveStableListItem .listTitleRow,
html body #userRoomList .listItem.liveStableListItem.open .listTitleRow,
html body #prepOpenCloneList .listItem.liveStableListItem .listTitleRow,
html body #prepOpenCloneList .listItem.liveStableListItem.open .listTitleRow
{
  position:static !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  min-height:17px !important;
  height:auto !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  line-height:17px !important;
  box-sizing:border-box !important;
}

html body #userRoomList .listItem.liveStableListItem:not(.open) .listName,
html body #prepOpenCloneList .listItem.liveStableListItem:not(.open) .listName
{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:17px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-line-clamp:unset !important;
  transform:none !important;
}

html body #userRoomList .listItem.liveStableListItem:not(.open) .listDesc,
html body #prepOpenCloneList .listItem.liveStableListItem:not(.open) .listDesc
{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  min-width:0 !important;
  height:15px !important;
  min-height:15px !important;
  max-height:15px !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  line-height:15px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-line-clamp:unset !important;
  transform:none !important;
}

html body #userRoomList .listItem.liveStableListItem.open .listName,
html body #userRoomList .listItem.liveStableListItem.open.longText .listName,
html body #prepOpenCloneList .listItem.liveStableListItem.open .listName,
html body #prepOpenCloneList .listItem.liveStableListItem.open.longText .listName
{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:17px !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  line-height:17px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  -webkit-line-clamp:unset !important;
  transform:none !important;
}

html body #userRoomList .listItem.liveStableListItem.open .listDesc,
html body #userRoomList .listItem.liveStableListItem.open.longText .listDesc,
html body #prepOpenCloneList .listItem.liveStableListItem.open .listDesc,
html body #prepOpenCloneList .listItem.liveStableListItem.open.longText .listDesc
{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:15px !important;
  max-height:none !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  line-height:15px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  -webkit-line-clamp:unset !important;
  transform:none !important;
}

html body #userRoomList .listItem.liveStableListItem > .liveListFixedToggle,
html body #userRoomList .listItem.liveStableListItem.open > .liveListFixedToggle,
html body #prepOpenCloneList .listItem.liveStableListItem > .liveListFixedToggle,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .liveListFixedToggle
{
  position:absolute !important;
  top:10px !important;
  right:136px !important;
  left:auto !important;
  width:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:15px !important;
  line-height:24px !important;
  opacity:.82 !important;
  z-index:25 !important;
  pointer-events:auto !important;
  visibility:visible !important;
}

html body #userRoomList .listItem.liveStableListItem:not(.open) > .liveListFixedToggle,
html body #prepOpenCloneList .listItem.liveStableListItem:not(.open) > .liveListFixedToggle
{
  transform:none !important;
}
html body #userRoomList .listItem.liveStableListItem.open > .liveListFixedToggle,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .liveListFixedToggle
{
  transform:rotate(180deg) !important;
}

html body #userRoomList .listItem.liveStableListItem > .listMeta,
html body #userRoomList .listItem.liveStableListItem.open > .listMeta,
html body #prepOpenCloneList .listItem.liveStableListItem > .listMeta,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .listMeta
{
  position:absolute !important;
  top:5px !important;
  right:60px !important;
  left:auto !important;
  width:76px !important;
  min-width:76px !important;
  max-width:76px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:1px !important;
  overflow:visible !important;
  font-size:11px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
}

html body #userRoomList .listItem.liveStableListItem > .listMeta .listMetaTop,
html body #userRoomList .listItem.liveStableListItem > .listMeta .listMetaBottom,
html body #prepOpenCloneList .listItem.liveStableListItem > .listMeta .listMetaTop,
html body #prepOpenCloneList .listItem.liveStableListItem > .listMeta .listMetaBottom
{
  display:block !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.05 !important;
  text-align:right !important;
}

html body #userRoomList .listItem.liveStableListItem > .listEnterBtn.entryIconBtn,
html body #userRoomList .listItem.liveStableListItem.open > .listEnterBtn.entryIconBtn,
html body #prepOpenCloneList .listItem.liveStableListItem > .listEnterBtn.entryIconBtn,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .listEnterBtn.entryIconBtn
{
  position:absolute !important;
  top:3px !important;
  right:10px !important;
  left:auto !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  margin:0 !important;
  padding:0 !important;
  align-self:auto !important;
  justify-self:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:none !important;
  z-index:10 !important;
}

html body #userRoomList .listItem.liveStableListItem > .rooomListMetaHelp,
html body #userRoomList .listItem.liveStableListItem.open > .rooomListMetaHelp,
html body #prepOpenCloneList .listItem.liveStableListItem > .rooomListMetaHelp,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .rooomListMetaHelp
{
  position:absolute !important;
  top:-3px !important;
  right:100px !important;
  left:auto !important;
  margin:0 !important;
  transform:none !important;
  z-index:20 !important;
}

html body #userRoomList .listItem.liveStableListItem > .rooomListActionHelp,
html body #userRoomList .listItem.liveStableListItem.open > .rooomListActionHelp,
html body #prepOpenCloneList .listItem.liveStableListItem > .rooomListActionHelp,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .rooomListActionHelp
{
  position:absolute !important;
  top:0 !important;
  right:1px !important;
  left:auto !important;
  margin:0 !important;
  transform:none !important;
  z-index:20 !important;
}

@media (max-width:640px){
  html body #userRoomList .listItem.liveStableListItem > .liveListFixedToggle,
  html body #userRoomList .listItem.liveStableListItem.open > .liveListFixedToggle,
html body #prepOpenCloneList .listItem.liveStableListItem > .liveListFixedToggle,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .liveListFixedToggle
{
    right:132px !important;
  }

  html body #userRoomList .listItem.liveStableListItem > .rooomListMetaHelp,
  html body #userRoomList .listItem.liveStableListItem.open > .rooomListMetaHelp,
html body #prepOpenCloneList .listItem.liveStableListItem > .rooomListMetaHelp,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .rooomListMetaHelp
{
    right:96px !important;
  }
}

@media (min-width:641px){
  html body #userRoomList .listItem.liveStableListItem > .listCategorySlot,
  html body #userRoomList .listItem.liveStableListItem.open > .listCategorySlot,
html body #prepOpenCloneList .listItem.liveStableListItem > .listCategorySlot,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .listCategorySlot
{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
  }
}

/* =========================================================
   2026-09-02 アーカイブリスト：準備部屋の完成骨格へ統一
   - アーカイブの閲覧数 / 累計参加 / 終了日 / 閲覧処理 / ヘルプ機能は変更しない
   - 左アイコン / 人数・残り時間 / 入室ボタン / ? はカード座標へ固定
   - 未展開はタイトル1行 + 説明1行
   - 展開時は本文だけ下方向へ伸び、固定物は動かさない
   ========================================================= */

html body #archiveRoomList .list{
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
  gap:7px !important;
  width:100% !important;
  align-items:stretch !important;
}

html body #archiveRoomList .listItem.archiveStableListItem,
html body #archiveRoomList .listItem.archiveStableListItem:not(.open),
html body #archiveRoomList .listItem.archiveStableListItem.open,
html body #archiveRoomList .listItem.archiveStableListItem.open.longText,
html body #archiveRoomList .listItem.archiveStableListItem.open:not(.longText){
  position:relative !important;
  display:block !important;
  min-height:44px !important;
  height:auto !important;
  max-height:none !important;
  padding:0 10px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

html body #archiveRoomList .listItem.archiveStableListItem > .listCategorySlot,
html body #archiveRoomList .listItem.archiveStableListItem.open > .listCategorySlot{
  position:absolute !important;
  left:10px !important;
  top:1px !important;
  width:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

html body #archiveRoomList .listItem.archiveStableListItem > .listMain,
html body #archiveRoomList .listItem.archiveStableListItem:not(.open) > .listMain,
html body #archiveRoomList .listItem.archiveStableListItem.open > .listMain,
html body #archiveRoomList .listItem.archiveStableListItem.open.longText > .listMain{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-self:start !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  max-height:none !important;
  margin:5px 136px 5px 44px !important;
  padding:0 !important;
  gap:0 !important;
  box-sizing:border-box !important;
  transform:none !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
}

html body #archiveRoomList .listItem.archiveStableListItem .listTitleRow,
html body #archiveRoomList .listItem.archiveStableListItem.open .listTitleRow{
  position:static !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  min-height:17px !important;
  height:auto !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  line-height:17px !important;
  box-sizing:border-box !important;
}

html body #archiveRoomList .listItem.archiveStableListItem:not(.open) .listName{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:17px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-line-clamp:unset !important;
  transform:none !important;
}

html body #archiveRoomList .listItem.archiveStableListItem:not(.open) .listDesc{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  min-width:0 !important;
  height:15px !important;
  min-height:15px !important;
  max-height:15px !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  line-height:15px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-line-clamp:unset !important;
  transform:none !important;
}

html body #archiveRoomList .listItem.archiveStableListItem.open .listName,
html body #archiveRoomList .listItem.archiveStableListItem.open.longText .listName{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:17px !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  line-height:17px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  -webkit-line-clamp:unset !important;
  transform:none !important;
}

html body #archiveRoomList .listItem.archiveStableListItem.open .listDesc,
html body #archiveRoomList .listItem.archiveStableListItem.open.longText .listDesc{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:15px !important;
  max-height:none !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  line-height:15px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  -webkit-line-clamp:unset !important;
  transform:none !important;
}

html body #archiveRoomList .listItem.archiveStableListItem > .archiveListFixedToggle,
html body #archiveRoomList .listItem.archiveStableListItem.open > .archiveListFixedToggle{
  position:absolute !important;
  top:10px !important;
  right:136px !important;
  left:auto !important;
  width:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:15px !important;
  line-height:24px !important;
  opacity:.82 !important;
  z-index:25 !important;
  pointer-events:auto !important;
  visibility:visible !important;
}

html body #archiveRoomList .listItem.archiveStableListItem:not(.open) > .archiveListFixedToggle{
  transform:none !important;
}
html body #archiveRoomList .listItem.archiveStableListItem.open > .archiveListFixedToggle{
  transform:rotate(180deg) !important;
}

html body #archiveRoomList .listItem.archiveStableListItem > .listMeta,
html body #archiveRoomList .listItem.archiveStableListItem.open > .listMeta{
  position:absolute !important;
  top:5px !important;
  right:60px !important;
  left:auto !important;
  width:76px !important;
  min-width:76px !important;
  max-width:76px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:1px !important;
  overflow:visible !important;
  font-size:11px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
}

html body #archiveRoomList .listItem.archiveStableListItem > .listMeta .listMetaTop,
html body #archiveRoomList .listItem.archiveStableListItem > .listMeta .listMetaBottom{
  display:block !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.05 !important;
  text-align:right !important;
}

html body #archiveRoomList .listItem.archiveStableListItem > .listEnterBtn.entryIconBtn,
html body #archiveRoomList .listItem.archiveStableListItem.open > .listEnterBtn.entryIconBtn{
  position:absolute !important;
  top:3px !important;
  right:10px !important;
  left:auto !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  margin:0 !important;
  padding:0 !important;
  align-self:auto !important;
  justify-self:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:none !important;
  z-index:10 !important;
}

html body #archiveRoomList .listItem.archiveStableListItem > .rooomListMetaHelp,
html body #archiveRoomList .listItem.archiveStableListItem.open > .rooomListMetaHelp{
  position:absolute !important;
  top:-3px !important;
  right:100px !important;
  left:auto !important;
  margin:0 !important;
  transform:none !important;
  z-index:20 !important;
}

html body #archiveRoomList .listItem.archiveStableListItem > .rooomListActionHelp,
html body #archiveRoomList .listItem.archiveStableListItem.open > .rooomListActionHelp{
  position:absolute !important;
  top:0 !important;
  right:1px !important;
  left:auto !important;
  margin:0 !important;
  transform:none !important;
  z-index:20 !important;
}

@media (max-width:640px){
  html body #archiveRoomList .listItem.archiveStableListItem > .archiveListFixedToggle,
  html body #archiveRoomList .listItem.archiveStableListItem.open > .archiveListFixedToggle{
    right:132px !important;
  }

  html body #archiveRoomList .listItem.archiveStableListItem > .rooomListMetaHelp,
  html body #archiveRoomList .listItem.archiveStableListItem.open > .rooomListMetaHelp{
    right:96px !important;
  }
}

@media (min-width:641px){
  html body #archiveRoomList .listItem.archiveStableListItem > .listCategorySlot,
  html body #archiveRoomList .listItem.archiveStableListItem.open > .listCategorySlot{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
  }
}

/* =========================================================
   2026-09-02 640px境界：上部検索UIのみ連続化
   - 641px -> 640px でカテゴリ/検索の大きさ・文字が切り替わらないようにする
   - 準備/公式/開催中/アーカイブの完成済みカード骨格には一切触れない
   ========================================================= */
@media (max-width:640px){
  html body .topPrimaryControls{
    gap:10px !important;
    margin-bottom:10px !important;
  }

  html body .topPrimaryControls .topCategoryBtn{
    min-width:0 !important;
    padding:10px 15px !important;
    font-size:14px !important;
    line-height:1 !important;
  }

  html body .topPrimaryControls .topRoomSearchWrap .searchInput{
    min-width:0 !important;
    padding:12px 14px !important;
    font-size:14px !important;
    line-height:normal !important;
  }
}

/* =========================================================
   2026-09-02 640px境界：ヘッダー上余白だけ連続化
   - 641px〜820pxで .wrap の上paddingだけをモバイル基準へ合わせる
   - 検索/カテゴリ/4タブ/各カード骨格は変更しない
   ========================================================= */
@media (min-width:641px) and (max-width:820px){
  html body .wrap{
    padding-top:10px !important;
  }
}


/* =========================================================
   2026-09-02 レスポンシブ基準の最終整理
   目的：未展開でも「何の部屋か判断できる」本文幅を死守しつつ、
         横長になりすぎる前に列数を増やして展開機能の意味を残す。

   基準：1カード約350pxを実用最小幅として扱う。
   - 0 - 747px   : 1列
   - 748 - 1099px: 2列
   - 1100px以上 : 3列

   準備 / 公式 / 開催中 / アーカイブで同じ列基準を使用。
   カード内部（タイトル・説明・矢印・ヘルプ・人数日時・操作）は変更しない。
   ========================================================= */

/* 画面幅によってロゴ全体が上下に跳ねないよう、上余白は全幅で統一。 */
html body .wrap{
  padding-top:10px !important;
}

/* 共通：まず1列を正本にする。 */
html body #prepOpenCloneList,
html body #roomList .list,
html body #userRoomList .list,
html body #archiveRoomList .list{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:7px 12px !important;
  width:100% !important;
  min-width:0 !important;
  align-items:start !important;
}

/* 約350px/カードを確保できるところから2列。 */
@media (min-width:748px){
  html body #prepOpenCloneList,
  html body #roomList .list,
  html body #userRoomList .list,
  html body #archiveRoomList .list{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* 同じ可読幅を3枚分確保できる大画面だけ3列。 */
@media (min-width:1100px){
  html body #prepOpenCloneList,
  html body #roomList .list,
  html body #userRoomList .list,
  html body #archiveRoomList .list{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* =========================================================
   2026-09-02 リスト列制御の正本：カード可読幅ベース
   - 固定ブレークポイントで 1/2/3 列を切り替えない
   - 1カードの最低実用幅を 350px とし、入る列数をGridに自動決定させる
   - .wrap の最大幅1400pxでは最大3列になる
   - 既存の準備/公式/開催中/アーカイブのカード内部骨格は変更しない
   ========================================================= */
html body #prepOpenCloneList,
html body #roomList .list,
html body #userRoomList .list,
html body #archiveRoomList .list{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr)) !important;
  gap:7px 12px !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  align-items:start !important;
  justify-content:stretch !important;
}

/* 各カード自身が列幅いっぱいを使う。古い幅指定の影響を遮断。 */
html body #prepOpenCloneList > .listItem,
html body #roomList .list > .listItem,
html body #userRoomList .list > .listItem,
html body #archiveRoomList .list > .listItem{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  justify-self:stretch !important;
  box-sizing:border-box !important;
}

/* =========================================================
   2026-09-02 リスト列数：展開機能を生かす最終基準
   目的:
   - 未展開で「何の部屋か」は判断できる
   - 長文は全文を見せ切らず、展開する意味を残す
   - 端末名では分岐せず、表示領域幅だけで 1/2/3 列を決める
   - 列制御の正本はこの末尾ブロック
   ========================================================= */

/* 基本は1列 */
html body #roomList .list,
html body #userRoomList .list,
html body #prepOpenCloneList .list,
html body #archiveRoomList .list{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:7px !important;
  width:100% !important;
  align-items:start !important;
}

/* 約600pxから2列。
   440px前後は1列を維持しつつ、
   600pxを超えて横長1列で展開の意味が薄れる前に2列へ送る。 */
@media (min-width:600px){
  html body #roomList .list,
  html body #userRoomList .list,
  html body #prepOpenCloneList .list,
  html body #archiveRoomList .list{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* 約1020pxから3列。
   iPad横やPCで2列カードが広がりすぎ、
   展開しても数文字しか増えない状態を避ける。 */
@media (min-width:1020px){
  html body #roomList .list,
  html body #userRoomList .list,
  html body #prepOpenCloneList .list,
  html body #archiveRoomList .list{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* 古い width / flex-basis / max-width が列幅を潰さないよう、
   完成済みカード内部には触れず外寸だけ列幅へ従わせる。 */
html body #roomList .list > .listItem,
html body #userRoomList .list > .listItem,
html body #prepOpenCloneList .list > .listItem,
html body #archiveRoomList .list > .listItem{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  box-sizing:border-box !important;
}

/* 上部の不自然なサイズ境界も作らない */
html body .wrap{
  padding-top:10px !important;
}

/* =========================================================
   2026-09-02 大枠カテゴリ：文字サイズの境界差を完全統一
   - 画面幅で「公式 / 開催中 / 募集中 / アーカイブ」の文字サイズを変えない
   - 列数、カード骨格、検索UI、機能には触れない
   ========================================================= */
html body .sectionTab,
html body .sectionTabs .sectionTab,
html body .topSectionTabs .sectionTab,
html body .topTabs .sectionTab,
html body [data-section-tab]{
  font-size:14px !important;
}

/* =========================================================
   2026-09-02 TOP4大枠ラベル：全幅で文字サイズ完全固定
   正しい対象は .rooomSectionTabLabel
   640px以下に残っていた 12px 指定を 14px に統一する。
   ========================================================= */
html body .rooomSectionTabLabel,
html body .rooomSectionTabs .rooomSectionTabLabel,
html[lang="en"] body .rooomSectionTabLabel{
  font-size:14px !important;
  line-height:1.1 !important;
}

/* =========================================================
   2026-09-02 TOP4大枠名：小さい側の文字サイズで全幅固定
   「公式 / 開催中 / 募集中 / アーカイブ」は
   画面幅が広がっても大きくしない。
   ========================================================= */
html body .rooomSectionTabLabel,
html body .rooomSectionTabs .rooomSectionTabLabel,
html[lang="en"] body .rooomSectionTabLabel{
  font-size:12px !important;
  line-height:1.1 !important;
}

/* =========================================================
   2026-09-02 TOP4大枠：2段目の情報列を小さい側サイズで全幅固定
   対象:
   - 公式 / 開催中 / 募集中 の「● 数字 ● 数字」
   - アーカイブの「8 部屋」
   画面幅で文字・丸・間隔を拡大しない。
   ========================================================= */
html body .rooomSectionTabSummary{
  gap:7px !important;
  font-size:10px !important;
  line-height:1 !important;
}

html body .rooomSectionTabCount{
  gap:4px !important;
}

html body .rooomSectionTabDot{
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  min-height:8px !important;
  max-width:8px !important;
  max-height:8px !important;
}

/* =========================================================
   2026-09-02 TOP4大枠：枠サイズも小さい側で全幅固定
   640px境界で高さ・上下余白・内部間隔を変化させない。
   タイトル/2段目の既存固定指定はそのまま維持。
   ========================================================= */
html body .rooomSectionTab{
  min-height:54px !important;
  padding:7px 3px !important;
  gap:4px !important;
}

/* =========================================================
   2026-09-02 TOP4大枠→部屋リスト間の縦スペースを全幅固定
   - 640px境界で rooomSectionTabs の下余白が変わらないようにする
   - カード内部 / 列数 / 各機能には触れない
   ========================================================= */
html body .rooomSectionTabs{
  margin-bottom:10px !important;
}

/* 初回取得中は「空です」ではなく状態を明示する。 */
html body .loading{
  text-align:center;
}

/* =========================================================
   2026-09-02 旧大枠DOM撤去後：4大枠を初期HTMLの正本にする
   - 旧見出しを隠すCSSは追加しない
   - JS実行前から完成4大枠がそのまま見える
   ========================================================= */
html body #rooomSectionTabs.rooomSectionTabs{
  display:grid !important;
}

/* =========================================================
   2026-09-02 初回ローディング：非選択3大枠は完全非表示
   hidden を旧 display 指定より必ず優先させる。
   ========================================================= */
html body .roomSectionBody[hidden]{
  display:none !important;
}

/* =========================================================
   2026-09-02 カード表示「？」：リストと同じ対象物基準で固定
   公式 / 開催中 共通
   - 人数・時間 ? は people グリッド領域の左上
   - 入室 ? は enter グリッド領域の右上
   - card 全体の right 座標や translate の積み重ねは使わない
   ========================================================= */
html body .card.cardImageRoom .cardImageBottom,
html body .card.cardPlainRoom .cardImageBottom{
  overflow:visible !important;
}

/* 共通サイズ。既存のヘルプ機能・クリック処理はそのまま。 */
html body .cardImageBottom > .rooomCardMetaHelp,
html body .cardImageBottom > .rooomCardActionHelp{
  position:absolute !important;
  width:22px !important;
  min-width:22px !important;
  height:22px !important;
  min-height:22px !important;
  margin:0 !important;
  padding:0 !important;
  z-index:30 !important;
  pointer-events:auto !important;
  transform:none !important;
}

/* 人数・残り時間：
   実際の people 行の左上に、リストと同じ距離感で配置。 */
html body .cardImageBottom > .rooomCardMetaHelp{
  grid-area:people !important;
  left:-18px !important;
  right:auto !important;
  top:0 !important;
  bottom:auto !important;
}

/* 入室：
   実際の入室ボタン領域の右上に配置。 */
html body .cardImageBottom > .rooomCardActionHelp{
  grid-area:enter !important;
  left:auto !important;
  right:-9px !important;
  top:0 !important;
  bottom:auto !important;
}

/* 位置関係は画面幅で変えない。 */
@media (max-width:640px){
  html body .cardImageBottom > .rooomCardMetaHelp{
    left:-18px !important;
    top:0 !important;
  }
  html body .cardImageBottom > .rooomCardActionHelp{
    right:-9px !important;
    top:0 !important;
  }
}

/* =========================================================
   2026-09-02 カード人数・時間「？」だけ微調整
   - 現在位置から 6px 右へ
   - 入室側「？」は変更しない
   ========================================================= */
html body .cardImageBottom > .rooomCardMetaHelp{
  left:-12px !important;
}

/* =========================================================
   2026-09-02 アーカイブカード：公式/開催中と同じ「？」位置関係へ
   - 左側 ?：アーカイブ情報（閲覧数 / 参加人数 / 記録日）
   - 右側 ?：「読む」ボタン
   - 既に完成した rooomCardMetaHelp / rooomCardActionHelp の座標をそのまま共用
   - アーカイブ固有の値・読む処理には触れない
   ========================================================= */
html body .cardImageBottom.archiveCardBottom > .rooomCardMetaHelp,
html body .cardImageBottom.archiveCardBottom > .rooomCardActionHelp{
  display:inline-flex !important;
}

/* =========================================================
   2026-09-02 公式リスト：全面タップ入室 / ▼だけ展開
   - 右端の入室アイコン＋入室「？」はDOMから撤去済み
   - 人数/時間を右端へ詰める
   - ▼/▲は見た目とタップ領域を拡大
   - 人数/時間「？」は維持
   ========================================================= */

html body #roomList .listItem.officialStableListItem{
  cursor:pointer !important;
}

/* 右端アクションが消えた分、人数/時間をカード右端へ。 */
html body #roomList .listItem.officialStableListItem > .listMeta,
html body #roomList .listItem.officialStableListItem.open > .listMeta{
  right:10px !important;
}

/* 人数/時間の説明「？」もメタ表示に合わせて右へ。 */
html body #roomList .listItem.officialStableListItem > .rooomListMetaHelp,
html body #roomList .listItem.officialStableListItem.open > .rooomListMetaHelp{
  top:-3px !important;
  right:50px !important;
}

/* ▼/▲専用タップ枠。
   アイコン自体も大きくし、押せる場所は34px四方を確保。 */
html body #roomList .listItem.officialStableListItem > .officialListFixedToggle,
html body #roomList .listItem.officialStableListItem.open > .officialListFixedToggle{
  top:5px !important;
  right:88px !important;
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:19px !important;
  line-height:34px !important;
  opacity:.88 !important;
  cursor:pointer !important;
  z-index:30 !important;
}

/* 本文は拡大した▼枠の直前まで使う。 */
html body #roomList .listItem.officialStableListItem > .listMain,
html body #roomList .listItem.officialStableListItem:not(.open) > .listMain,
html body #roomList .listItem.officialStableListItem.open > .listMain,
html body #roomList .listItem.officialStableListItem.open.longText > .listMain{
  margin-right:122px !important;
}

/* 旧右端アクション用CSSが残っていても、公式には実DOMが無い。
   念のため余白確保も一切しない。 */
html body #roomList .listItem.officialStableListItem > .listEnterBtn,
html body #roomList .listItem.officialStableListItem > .rooomListActionHelp{
  display:none !important;
}

@media (max-width:640px){
  html body #roomList .listItem.officialStableListItem > .officialListFixedToggle,
  html body #roomList .listItem.officialStableListItem.open > .officialListFixedToggle{
    right:86px !important;
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    font-size:19px !important;
  }

  html body #roomList .listItem.officialStableListItem > .rooomListMetaHelp,
  html body #roomList .listItem.officialStableListItem.open > .rooomListMetaHelp{
    right:48px !important;
  }

  html body #roomList .listItem.officialStableListItem > .listMain,
  html body #roomList .listItem.officialStableListItem:not(.open) > .listMain,
  html body #roomList .listItem.officialStableListItem.open > .listMain,
  html body #roomList .listItem.officialStableListItem.open.longText > .listMain{
    margin-right:120px !important;
  }
}

/* =========================================================
   2026-09-02 稼働中・アーカイブ：公式で確認済みの新操作を横展開
   - 右端の入室 / 読むアイコン＋その「？」をDOMから撤去
   - 人数/時間、アーカイブ情報を右端へ
   - ▼/▲だけ展開・縮小
   - それ以外の行全面は room.html へ進む
   ========================================================= */
html body #userRoomList .listItem.liveStableListItem,
html body #archiveRoomList .listItem.archiveStableListItem,
/* =========================================================
   2026-09-02 稼働中・アーカイブ：公式で確認済みの新操作を横展開
   - 右端の入室 / 読むアイコン＋その「？」をDOMから撤去
   - 人数/時間、アーカイブ情報を右端へ
   - ▼/▲だけ展開・縮小
   - それ以外の行全面は room.html へ進む
   ========================================================= */
html body #prepOpenCloneList .listItem.liveStableListItem
{
  cursor:pointer !important;
}

html body #userRoomList .listItem.liveStableListItem > .listMeta,
html body #userRoomList .listItem.liveStableListItem.open > .listMeta,
html body #archiveRoomList .listItem.archiveStableListItem > .listMeta,
html body #archiveRoomList .listItem.archiveStableListItem.open > .listMeta,
html body #prepOpenCloneList .listItem.liveStableListItem > .listMeta,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .listMeta
{
  right:10px !important;
}

html body #userRoomList .listItem.liveStableListItem > .rooomListMetaHelp,
html body #userRoomList .listItem.liveStableListItem.open > .rooomListMetaHelp,
html body #archiveRoomList .listItem.archiveStableListItem > .rooomListMetaHelp,
html body #archiveRoomList .listItem.archiveStableListItem.open > .rooomListMetaHelp,
html body #prepOpenCloneList .listItem.liveStableListItem > .rooomListMetaHelp,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .rooomListMetaHelp
{
  top:-3px !important;
  right:50px !important;
}

html body #userRoomList .listItem.liveStableListItem > .liveListFixedToggle,
html body #userRoomList .listItem.liveStableListItem.open > .liveListFixedToggle,
html body #archiveRoomList .listItem.archiveStableListItem > .archiveListFixedToggle,
html body #archiveRoomList .listItem.archiveStableListItem.open > .archiveListFixedToggle,
html body #prepOpenCloneList .listItem.liveStableListItem > .liveListFixedToggle,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .liveListFixedToggle
{
  top:5px !important;
  right:88px !important;
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:19px !important;
  line-height:34px !important;
  opacity:.88 !important;
  cursor:pointer !important;
  z-index:30 !important;
}

html body #userRoomList .listItem.liveStableListItem > .listMain,
html body #userRoomList .listItem.liveStableListItem:not(.open) > .listMain,
html body #userRoomList .listItem.liveStableListItem.open > .listMain,
html body #userRoomList .listItem.liveStableListItem.open.longText > .listMain,
html body #archiveRoomList .listItem.archiveStableListItem > .listMain,
html body #archiveRoomList .listItem.archiveStableListItem:not(.open) > .listMain,
html body #archiveRoomList .listItem.archiveStableListItem.open > .listMain,
html body #archiveRoomList .listItem.archiveStableListItem.open.longText > .listMain,
html body #prepOpenCloneList .listItem.liveStableListItem > .listMain,
html body #prepOpenCloneList .listItem.liveStableListItem:not(.open) > .listMain,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .listMain,
html body #prepOpenCloneList .listItem.liveStableListItem.open.longText > .listMain
{
  margin-right:122px !important;
}

html body #userRoomList .listItem.liveStableListItem > .listEnterBtn,
html body #userRoomList .listItem.liveStableListItem > .rooomListActionHelp,
html body #archiveRoomList .listItem.archiveStableListItem > .listEnterBtn,
html body #archiveRoomList .listItem.archiveStableListItem > .rooomListActionHelp,
html body #prepOpenCloneList .listItem.liveStableListItem > .listEnterBtn,
html body #prepOpenCloneList .listItem.liveStableListItem > .rooomListActionHelp
{
  display:none !important;
}

@media (max-width:640px){
  html body #userRoomList .listItem.liveStableListItem > .liveListFixedToggle,
  html body #userRoomList .listItem.liveStableListItem.open > .liveListFixedToggle,
  html body #archiveRoomList .listItem.archiveStableListItem > .archiveListFixedToggle,
  html body #archiveRoomList .listItem.archiveStableListItem.open > .archiveListFixedToggle,
html body #prepOpenCloneList .listItem.liveStableListItem > .liveListFixedToggle,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .liveListFixedToggle
{
    right:86px !important;
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    font-size:19px !important;
  }

  html body #userRoomList .listItem.liveStableListItem > .rooomListMetaHelp,
  html body #userRoomList .listItem.liveStableListItem.open > .rooomListMetaHelp,
  html body #archiveRoomList .listItem.archiveStableListItem > .rooomListMetaHelp,
  html body #archiveRoomList .listItem.archiveStableListItem.open > .rooomListMetaHelp,
html body #prepOpenCloneList .listItem.liveStableListItem > .rooomListMetaHelp,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .rooomListMetaHelp
{
    right:48px !important;
  }

  html body #userRoomList .listItem.liveStableListItem > .listMain,
  html body #userRoomList .listItem.liveStableListItem:not(.open) > .listMain,
  html body #userRoomList .listItem.liveStableListItem.open > .listMain,
  html body #userRoomList .listItem.liveStableListItem.open.longText > .listMain,
  html body #archiveRoomList .listItem.archiveStableListItem > .listMain,
  html body #archiveRoomList .listItem.archiveStableListItem:not(.open) > .listMain,
  html body #archiveRoomList .listItem.archiveStableListItem.open > .listMain,
  html body #archiveRoomList .listItem.archiveStableListItem.open.longText > .listMain,
html body #prepOpenCloneList .listItem.liveStableListItem > .listMain,
html body #prepOpenCloneList .listItem.liveStableListItem:not(.open) > .listMain,
html body #prepOpenCloneList .listItem.liveStableListItem.open > .listMain,
html body #prepOpenCloneList .listItem.liveStableListItem.open.longText > .listMain
{
    margin-right:120px !important;
  }
}

/* =========================================================
   2026-09-02 募集中リスト：本体操作＋左アイコン状態表示
   ========================================================= */
html body #prepOpenCloneList .prepStableListItem{
  cursor:pointer !important;
}

html body #prepOpenCloneList .prepStableListItem > .prepListActionStack,
html body #prepOpenCloneList .prepStableListItem > .rooomListActionHelp{
  display:none !important;
}

html body .prepListStateSlot{
  position:relative !important;
  overflow:visible !important;
}

html body #prepOpenCloneList .prepStableListItem.is-own-prep .listCategoryBadge{
  outline:2px solid rgba(30,30,30,.70) !important;
  outline-offset:3px !important;
}

html body #prepOpenCloneList .prepListOwnerBadge{
  position:absolute !important;
  right:-5px !important;
  bottom:-5px !important;
  z-index:12 !important;
  width:18px !important;
  height:18px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#111 !important;
  color:#fff !important;
  border:2px solid #fff !important;
  box-shadow:0 2px 6px rgba(0,0,0,.22) !important;
  font-size:10px !important;
  font-weight:900 !important;
  line-height:1 !important;
}

html body #prepOpenCloneList .prepListReservedBadge{
  position:absolute !important;
  inset:0 !important;
  z-index:12 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#111 !important;
  font-size:28px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  text-shadow:
    -2px -2px 0 #fff,
     2px -2px 0 #fff,
    -2px  2px 0 #fff,
     2px  2px 0 #fff,
     0 2px 5px rgba(0,0,0,.20) !important;
  pointer-events:none !important;
}

html body #prepOpenCloneList .prepStableListItem.is-prep-busy{
  cursor:wait !important;
}

html body #prepOpenCloneList .prepStableListItem > .prepListMeta,
html body #prepOpenCloneList .prepStableListItem.open > .prepListMeta{
  right:10px !important;
}

html body #prepOpenCloneList .prepStableListItem > .prepListFixedToggle,
html body #prepOpenCloneList .prepStableListItem.open > .prepListFixedToggle{
  right:88px !important;
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:19px !important;
  line-height:34px !important;
  cursor:pointer !important;
  z-index:30 !important;
}

html body #prepOpenCloneList .prepStableListItem > .rooomListMetaHelp,
html body #prepOpenCloneList .prepStableListItem.open > .rooomListMetaHelp{
  right:50px !important;
}

html body #prepOpenCloneList .prepStableListItem:not(.open) .prepListReportUnderMeta{
  display:none !important;
}

html body #prepOpenCloneList .prepStableListItem.open .prepListReportUnderMeta{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  width:100% !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#d33 !important;
  font-size:9px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  pointer-events:auto !important;
}

html body #prepOpenCloneList .prepStableListItem.open .prepListMeta{
  height:auto !important;
  min-height:32px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
}

html body #prepOpenCloneList .prepStableListItem > .listMain,
html body #prepOpenCloneList .prepStableListItem:not(.open) > .listMain,
html body #prepOpenCloneList .prepStableListItem.open > .listMain,
html body #prepOpenCloneList .prepStableListItem.open.longText > .listMain{
  margin-right:122px !important;
}

@media (max-width:640px){
  html body #prepOpenCloneList .prepStableListItem > .prepListFixedToggle,
  html body #prepOpenCloneList .prepStableListItem.open > .prepListFixedToggle{
    right:86px !important;
  }

  html body #prepOpenCloneList .prepStableListItem > .rooomListMetaHelp,
  html body #prepOpenCloneList .prepStableListItem.open > .rooomListMetaHelp{
    right:48px !important;
  }

  html body #prepOpenCloneList .prepStableListItem > .listMain,
  html body #prepOpenCloneList .prepStableListItem:not(.open) > .listMain,
  html body #prepOpenCloneList .prepStableListItem.open > .listMain,
  html body #prepOpenCloneList .prepStableListItem.open.longText > .listMain{
    margin-right:120px !important;
  }
}

/* =========================================================
   2026-09-02 募集中リスト 微調整
   1) 自分作成部屋は青い太め外周リングのみ
   2) 展開しても ▼ / 人数 / 開催時間 / ? は1pxも動かさない
   3) 通報は別レイヤーで表示し、メタ配置を押さない
   ========================================================= */

/* 「主」文字は使わない。既存DOMが残っても非表示。 */
html body #prepOpenCloneList .prepListOwnerBadge{
  display:none !important;
}

/* 自分が作った部屋：青い太めリング */
html body #prepOpenCloneList .prepStableListItem.is-own-prep .listCategoryBadge{
  outline:3px solid #2f80ed !important;
  outline-offset:3px !important;
}

/* 募集中リストの右側基準を固定 */
html body #prepOpenCloneList .prepStableListItem{
  position:relative !important;
}

/* ▼/▲は展開前後で完全固定 */
html body #prepOpenCloneList .prepStableListItem > .prepListFixedToggle,
html body #prepOpenCloneList .prepStableListItem.open > .prepListFixedToggle,
html body #prepOpenCloneList .prepStableListItem.open.longText > .prepListFixedToggle{
  position:absolute !important;
  top:4px !important;
  right:88px !important;
  margin:0 !important;
  transform:none !important;
}

/* 人数・開催時間は展開前後で完全固定 */
html body #prepOpenCloneList .prepStableListItem > .prepListMeta,
html body #prepOpenCloneList .prepStableListItem.open > .prepListMeta,
html body #prepOpenCloneList .prepStableListItem.open.longText > .prepListMeta{
  position:absolute !important;
  top:4px !important;
  right:10px !important;
  width:70px !important;
  min-width:70px !important;
  height:34px !important;
  min-height:34px !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-rows:17px 17px !important;
  align-items:center !important;
  justify-items:end !important;
  overflow:visible !important;
  transform:none !important;
}

/* 人数・時間の各行も固定 */
html body #prepOpenCloneList .prepStableListItem .prepListMetaTop,
html body #prepOpenCloneList .prepStableListItem .prepListMetaBottom{
  width:100% !important;
  height:17px !important;
  min-height:17px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  line-height:17px !important;
  white-space:nowrap !important;
  transform:none !important;
}

/* メタ説明 ? も展開前後で固定 */
html body #prepOpenCloneList .prepStableListItem > .rooomListMetaHelp,
html body #prepOpenCloneList .prepStableListItem.open > .rooomListMetaHelp,
html body #prepOpenCloneList .prepStableListItem.open.longText > .rooomListMetaHelp{
  position:absolute !important;
  top:-3px !important;
  right:50px !important;
  margin:0 !important;
  transform:none !important;
}

/* 未展開では通報を出さない */
html body #prepOpenCloneList .prepStableListItem:not(.open) .prepListReportUnderMeta{
  display:none !important;
}

/* 展開時の通報はメタの下に絶対配置。
   メタ自身の高さ・位置は一切変えない。 */
html body #prepOpenCloneList .prepStableListItem.open .prepListReportUnderMeta,
html body #prepOpenCloneList .prepStableListItem.open.longText .prepListReportUnderMeta{
  display:inline-flex !important;
  position:absolute !important;
  top:36px !important;
  right:0 !important;
  width:auto !important;
  height:14px !important;
  min-height:14px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  align-items:center !important;
  justify-content:flex-end !important;
  color:#d33 !important;
  font-size:9px !important;
  line-height:14px !important;
  white-space:nowrap !important;
  pointer-events:auto !important;
  z-index:20 !important;
}

/* 旧指定の「open時にメタを縦積み」は完全に無効化 */
html body #prepOpenCloneList .prepStableListItem.open .prepListMeta,
html body #prepOpenCloneList .prepStableListItem.open.longText .prepListMeta{
  flex-direction:initial !important;
}

/* 本文は右側固定UIの手前まで */
html body #prepOpenCloneList .prepStableListItem > .listMain,
html body #prepOpenCloneList .prepStableListItem:not(.open) > .listMain,
html body #prepOpenCloneList .prepStableListItem.open > .listMain,
html body #prepOpenCloneList .prepStableListItem.open.longText > .listMain{
  margin-right:122px !important;
}

@media (max-width:640px){
  html body #prepOpenCloneList .prepStableListItem > .prepListFixedToggle,
  html body #prepOpenCloneList .prepStableListItem.open > .prepListFixedToggle,
  html body #prepOpenCloneList .prepStableListItem.open.longText > .prepListFixedToggle{
    right:86px !important;
  }

  html body #prepOpenCloneList .prepStableListItem > .rooomListMetaHelp,
  html body #prepOpenCloneList .prepStableListItem.open > .rooomListMetaHelp,
  html body #prepOpenCloneList .prepStableListItem.open.longText > .rooomListMetaHelp{
    right:48px !important;
  }

  html body #prepOpenCloneList .prepStableListItem > .listMain,
  html body #prepOpenCloneList .prepStableListItem:not(.open) > .listMain,
  html body #prepOpenCloneList .prepStableListItem.open > .listMain,
  html body #prepOpenCloneList .prepStableListItem.open.longText > .listMain{
    margin-right:120px !important;
  }
}

/* =========================================================
   2026-09-02 募集中リスト 右側固定UI・展開最低高さ 再調整
   - ▼/▲ と 人数/開催時間 をさらに右へ
   - 展開前後で座標は完全固定
   - 短文でも展開時は必ず3行分の高さを確保
   - 通報はその確保領域内に必ず完全表示
   ========================================================= */

/* 右側メタをさらに右端へ */
html body #prepOpenCloneList .prepStableListItem > .prepListMeta,
html body #prepOpenCloneList .prepStableListItem.open > .prepListMeta,
html body #prepOpenCloneList .prepStableListItem.open.longText > .prepListMeta{
  right:4px !important;
  top:4px !important;
}

/* 人数/時間 ? も同じ塊として右へ */
html body #prepOpenCloneList .prepStableListItem > .rooomListMetaHelp,
html body #prepOpenCloneList .prepStableListItem.open > .rooomListMetaHelp,
html body #prepOpenCloneList .prepStableListItem.open.longText > .rooomListMetaHelp{
  right:44px !important;
  top:-3px !important;
}

/* ▼/▲も右側メタへ寄せる。展開前後で同じ座標 */
html body #prepOpenCloneList .prepStableListItem > .prepListFixedToggle,
html body #prepOpenCloneList .prepStableListItem.open > .prepListFixedToggle,
html body #prepOpenCloneList .prepStableListItem.open.longText > .prepListFixedToggle{
  right:80px !important;
  top:4px !important;
}

/* 右UIを寄せた分だけ本文領域も広げる */
html body #prepOpenCloneList .prepStableListItem > .listMain,
html body #prepOpenCloneList .prepStableListItem:not(.open) > .listMain,
html body #prepOpenCloneList .prepStableListItem.open > .listMain,
html body #prepOpenCloneList .prepStableListItem.open.longText > .listMain{
  margin-right:114px !important;
}

/* 短いタイトル/説明でも、展開時は必ず3行分以上の高さを確保。
   これで通報がカード下端から切れない。 */
html body #prepOpenCloneList .prepStableListItem.open{
  min-height:86px !important;
  height:auto !important;
}

/* 展開時の本文領域も最低3行分を確保 */
html body #prepOpenCloneList .prepStableListItem.open > .listMain{
  min-height:66px !important;
}

/* 通報は右メタの直下に固定し、必ずカード内へ収める */
html body #prepOpenCloneList .prepStableListItem.open .prepListReportUnderMeta,
html body #prepOpenCloneList .prepStableListItem.open.longText .prepListReportUnderMeta{
  top:36px !important;
  right:0 !important;
  bottom:auto !important;
  height:15px !important;
  min-height:15px !important;
  line-height:15px !important;
}

/* 予約/管理本体タップと干渉しないよう、通報だけ前面 */
html body #prepOpenCloneList .prepStableListItem.open .prepListReportUnderMeta{
  z-index:35 !important;
}

@media (max-width:640px){
  html body #prepOpenCloneList .prepStableListItem > .prepListMeta,
  html body #prepOpenCloneList .prepStableListItem.open > .prepListMeta,
  html body #prepOpenCloneList .prepStableListItem.open.longText > .prepListMeta{
    right:3px !important;
  }

  html body #prepOpenCloneList .prepStableListItem > .rooomListMetaHelp,
  html body #prepOpenCloneList .prepStableListItem.open > .rooomListMetaHelp,
  html body #prepOpenCloneList .prepStableListItem.open.longText > .rooomListMetaHelp{
    right:43px !important;
  }

  html body #prepOpenCloneList .prepStableListItem > .prepListFixedToggle,
  html body #prepOpenCloneList .prepStableListItem.open > .prepListFixedToggle,
  html body #prepOpenCloneList .prepStableListItem.open.longText > .prepListFixedToggle{
    right:79px !important;
  }

  html body #prepOpenCloneList .prepStableListItem > .listMain,
  html body #prepOpenCloneList .prepStableListItem:not(.open) > .listMain,
  html body #prepOpenCloneList .prepStableListItem.open > .listMain,
  html body #prepOpenCloneList .prepStableListItem.open.longText > .listMain{
    margin-right:113px !important;
  }

  html body #prepOpenCloneList .prepStableListItem.open{
    min-height:86px !important;
  }

  html body #prepOpenCloneList .prepStableListItem.open > .listMain{
    min-height:66px !important;
  }
}

/* =========================================================
   2026-09-02 募集中リスト：他3大枠と同じ右端基準へ最終修正
   原因：
   旧準備CSSの
   #prepOpenCloneList .listItem.prepStableListItem ...
   の方が詳細度が高く、直前の右寄せ指定を上書きしていた。
   ここでは同等以上の詳細度で、公式/開催中/アーカイブの完成値をそのまま採用する。
   ========================================================= */

/* 人数・開催時間：他3大枠と同じ right:10 / width:76 */
html body #prepOpenCloneList .listItem.prepStableListItem > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText) > .prepListMeta{
  position:absolute !important;
  top:5px !important;
  right:10px !important;
  left:auto !important;
  width:76px !important;
  min-width:76px !important;
  max-width:76px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  display:grid !important;
  grid-template-rows:17px 17px !important;
  align-items:center !important;
  justify-items:end !important;
  overflow:visible !important;
}

/* 人数・時間の各行も右端揃え */
html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaTop,
html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaBottom,
html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaInfo{
  width:100% !important;
  height:17px !important;
  min-height:17px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  text-align:right !important;
  line-height:17px !important;
  white-space:nowrap !important;
  transform:none !important;
}

/* ?：他3大枠と同じ位置 */
html body #prepOpenCloneList .listItem.prepStableListItem > .rooomListMetaHelp,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .rooomListMetaHelp,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText > .rooomListMetaHelp,
html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText) > .rooomListMetaHelp{
  position:absolute !important;
  top:-3px !important;
  right:50px !important;
  left:auto !important;
  margin:0 !important;
  transform:none !important;
  z-index:30 !important;
}

/* ▼/▲：他3大枠と同じ位置・34pxタップ枠 */
html body #prepOpenCloneList .listItem.prepStableListItem > .prepListFixedToggle,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListFixedToggle,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText > .prepListFixedToggle,
html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText) > .prepListFixedToggle{
  position:absolute !important;
  top:5px !important;
  right:88px !important;
  left:auto !important;
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  margin:0 !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:19px !important;
  line-height:34px !important;
  transform:none !important;
  cursor:pointer !important;
  z-index:30 !important;
}

/* 右UIの手前まで本文を使う */
html body #prepOpenCloneList .listItem.prepStableListItem > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText) > .listMain{
  margin-right:122px !important;
}

/* ---------------------------------------------------------
   展開時：
   文字が短くても必ず3行相当のカード高さを確保する。
   左アイコン / ▼ / 人数 / 時間 / ? は上記座標から1pxも動かさない。
   --------------------------------------------------------- */
html body #prepOpenCloneList .listItem.prepStableListItem.open,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText,
html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText){
  min-height:86px !important;
  height:auto !important;
  max-height:none !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  overflow:visible !important;
}

html body #prepOpenCloneList .listItem.prepStableListItem.open > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText > .listMain,
html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText) > .listMain{
  min-height:76px !important;
  margin-top:5px !important;
  margin-bottom:5px !important;
  padding:0 !important;
}

/* 未展開では通報を完全に隠す */
html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) .prepListReportUnderMeta{
  display:none !important;
}

/* 展開時だけ時間の下へ。
   親メタは動かさず、通報だけ絶対配置。 */
html body #prepOpenCloneList .listItem.prepStableListItem.open .prepListReportUnderMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText .prepListReportUnderMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText) .prepListReportUnderMeta{
  display:inline-flex !important;
  position:absolute !important;
  top:36px !important;
  right:0 !important;
  left:auto !important;
  bottom:auto !important;
  width:auto !important;
  height:15px !important;
  min-height:15px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  align-items:center !important;
  justify-content:flex-end !important;
  color:#d33 !important;
  font-size:9px !important;
  line-height:15px !important;
  white-space:nowrap !important;
  pointer-events:auto !important;
  z-index:40 !important;
}

@media (max-width:640px){
  html body #prepOpenCloneList .listItem.prepStableListItem > .prepListFixedToggle,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListFixedToggle,
  html body #prepOpenCloneList .listItem.prepStableListItem.open.longText > .prepListFixedToggle,
  html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText) > .prepListFixedToggle{
    right:86px !important;
  }

  html body #prepOpenCloneList .listItem.prepStableListItem > .rooomListMetaHelp,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .rooomListMetaHelp,
  html body #prepOpenCloneList .listItem.prepStableListItem.open.longText > .rooomListMetaHelp,
  html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText) > .rooomListMetaHelp{
    right:48px !important;
  }

  html body #prepOpenCloneList .listItem.prepStableListItem > .listMain,
  html body #prepOpenCloneList .listItem.prepStableListItem:not(.open) > .listMain,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .listMain,
  html body #prepOpenCloneList .listItem.prepStableListItem.open.longText > .listMain,
  html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText) > .listMain{
    margin-right:120px !important;
  }

  html body #prepOpenCloneList .listItem.prepStableListItem.open,
  html body #prepOpenCloneList .listItem.prepStableListItem.open.longText,
  html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText){
    min-height:86px !important;
  }

  html body #prepOpenCloneList .listItem.prepStableListItem.open > .listMain,
  html body #prepOpenCloneList .listItem.prepStableListItem.open.longText > .listMain,
  html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText) > .listMain{
    min-height:76px !important;
  }
}

/* =========================================================
   2026-09-02 募集中リスト：人数/開催日時の文字だけ右端揃え
   - ▼/▲ と ? の位置は現状が他3大枠と合っているので触らない
   - prepListMeta 自体の座標も触らない
   - 内側の文字spanだけ、他3大枠と同じ「右端基準」に固定
   ========================================================= */

html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaTop > span,
html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaBottom > span,
html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaInfo > span{
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:right !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

/* =========================================================
   2026-09-02 募集中リスト：人数・開催日時を通報と同じ右端ラインへ
   - ▼/▲、?、通報位置は変更しない
   - 人数/開催日時ブロックだけカード右端へ移動
   ========================================================= */
html body #prepOpenCloneList .listItem.prepStableListItem > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText) > .prepListMeta{
  right:0 !important;
}

html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaTop > span,
html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaBottom > span,
html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaInfo > span{
  text-align:right !important;
}

@media (max-width:640px){
  html body #prepOpenCloneList .listItem.prepStableListItem > .prepListMeta,
  html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListMeta,
  html body #prepOpenCloneList .listItem.prepStableListItem.open.longText > .prepListMeta,
  html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText) > .prepListMeta{
    right:0 !important;
  }
}

/* =========================================================
   2026-09-02 募集中リスト：右メタを他3大枠の完成形式へ統一
   - 人数/開催日時の右端位置は現状維持
   - 2行の縦間隔・line-height・並べ方を公式/開催中/アーカイブと同じにする
   - 通報だけを左へ戻し、人数/日時と同じ右端ラインへ合わせる
   - ▼/▲、? は触らない
   ========================================================= */

/* 他3大枠と同じ「flex縦積み + gap:1px + line-height:1.05」 */
html body #prepOpenCloneList .listItem.prepStableListItem > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText > .prepListMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText) > .prepListMeta{
  right:0 !important;
  width:76px !important;
  min-width:76px !important;
  max-width:76px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:1px !important;
  font-size:11px !important;
  line-height:1.05 !important;
}

/* 固定17px行を解除して、他3大枠と同じ詰まり方にする */
html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaTop,
html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaBottom,
html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaInfo{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.05 !important;
  text-align:right !important;
}

/* 内側spanも同じ右端基準 */
html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaTop > span,
html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaBottom > span,
html body #prepOpenCloneList .listItem.prepStableListItem .prepListMetaInfo > span{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.05 !important;
  text-align:right !important;
}

/* 通報だけ右へ飛びすぎていたので、カード端から10px戻す。
   人数/日時の見た目の右端と同じラインに合わせる。 */
html body #prepOpenCloneList .listItem.prepStableListItem.open .prepListReportUnderMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open.longText .prepListReportUnderMeta,
html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText) .prepListReportUnderMeta{
  right:10px !important;
}

@media (max-width:640px){
  html body #prepOpenCloneList .listItem.prepStableListItem.open .prepListReportUnderMeta,
  html body #prepOpenCloneList .listItem.prepStableListItem.open.longText .prepListReportUnderMeta,
  html body #prepOpenCloneList .listItem.prepStableListItem.open:not(.longText) .prepListReportUnderMeta{
    right:10px !important;
  }
}

/* =========================================================
   2026-09-02 募集中リスト：開催中の完成ベースを直接使用
   - DOM: liveStableListItem / listMeta / liveListFixedToggle を共用
   - CSS: #userRoomList の liveStableListItem ルールへ
          #prepOpenCloneList を同一セレクタとして追加済み
   - 準備固有CSSは「状態表示・通報・展開最低高さ」だけ
   ========================================================= */

html body #prepOpenCloneList .prepSharedListItem{
  cursor:pointer !important;
}

/* 自分が作った募集：青い太リングのみ */
html body .prepSharedListItem.is-own-prep .listCategoryBadge{
  outline:3px solid #2f80ed !important;
  outline-offset:3px !important;
}

/* 予約中：左カテゴリ上にチェック */
html body .prepListStateSlot{
  overflow:visible !important;
}

html body #prepOpenCloneList .prepListReservedBadge{
  position:absolute !important;
  inset:0 !important;
  z-index:12 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#111 !important;
  font-size:28px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  text-shadow:
    -2px -2px 0 #fff,
     2px -2px 0 #fff,
    -2px  2px 0 #fff,
     2px  2px 0 #fff,
     0 2px 5px rgba(0,0,0,.20) !important;
  pointer-events:none !important;
}

/* 短文でも展開時は必ず通報を使える高さを確保。
   右側の▼/人数/日時/?は開催中ベースの絶対座標なので動かない。 */
html body #prepOpenCloneList .prepSharedListItem.open{
  min-height:86px !important;
  height:auto !important;
}

/* 通報は未展開では存在感を消す */
html body #prepOpenCloneList .prepSharedListItem:not(.open) .prepSharedReport{
  display:none !important;
}

/* 展開時だけ、開催中ベースの右メタの直下へ */
html body #prepOpenCloneList .prepSharedListItem.open .prepSharedReport{
  display:inline-flex !important;
  position:absolute !important;
  top:40px !important;
  right:10px !important;
  left:auto !important;
  width:auto !important;
  height:15px !important;
  min-height:15px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  align-items:center !important;
  justify-content:flex-end !important;
  color:#d33 !important;
  font-size:9px !important;
  line-height:15px !important;
  white-space:nowrap !important;
  z-index:40 !important;
}

/* 旧prepStableListItem専用レイアウトは新DOMでは一切マッチしない。
   新しい準備リストの位置決めは liveStableListItem 共通ルールだけが正本。 */

/* =========================================================
   2026-09-03 募集中：短文でも必ず3行目まで展開
   - 準備だけは「全文を見る」以外に「通報を出す」目的がある
   - 文字が1行で収まっていても、▼を押したら必ず3行相当まで開く
   - open class と aria-expanded の両方を基準にして取りこぼしを防ぐ
   ========================================================= */

/* ▼が開状態なら、文字量に関係なく3行相当の高さを必ず確保 */
html body #prepOpenCloneList .prepSharedListItem.open,
html body #prepOpenCloneList .prepSharedListItem:has(.liveListFixedToggle[aria-expanded="true"]){
  min-height:86px !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

/* 本文領域も最低3行相当を確保 */
html body #prepOpenCloneList .prepSharedListItem.open > .listMain,
html body #prepOpenCloneList .prepSharedListItem:has(.liveListFixedToggle[aria-expanded="true"]) > .listMain{
  min-height:76px !important;
  height:auto !important;
  max-height:none !important;
}

/* 未展開では通報を完全非表示 */
html body #prepOpenCloneList .prepSharedListItem:not(.open):not(:has(.liveListFixedToggle[aria-expanded="true"])) .prepSharedReport{
  display:none !important;
}

/* 展開したら、短文でも必ず3行目に通報を表示 */
html body #prepOpenCloneList .prepSharedListItem.open .prepSharedReport,
html body #prepOpenCloneList .prepSharedListItem:has(.liveListFixedToggle[aria-expanded="true"]) .prepSharedReport{
  display:inline-flex !important;
  position:absolute !important;
  top:40px !important;
  right:10px !important;
  left:auto !important;
  width:auto !important;
  height:15px !important;
  min-height:15px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  align-items:center !important;
  justify-content:flex-end !important;
  color:#d33 !important;
  font-size:9px !important;
  line-height:15px !important;
  white-space:nowrap !important;
  pointer-events:auto !important;
  z-index:40 !important;
}

/* =========================================================
   2026-09-03 募集中：展開余白圧縮 + 状態ヘルプ
   ========================================================= */

/* 3行目の通報は維持しつつ、下の空白を圧縮 */
html body #prepOpenCloneList .prepSharedListItem.open,
html body #prepOpenCloneList .prepSharedListItem:has(.liveListFixedToggle[aria-expanded="true"]),
html body #archiveRoomList .archiveStableListItem.open,
html body #archiveRoomList .archiveStableListItem:has(.archiveListFixedToggle[aria-expanded="true"]){
  min-height:68px !important;
  height:auto !important;
  max-height:none !important;
}

html body #prepOpenCloneList .prepSharedListItem.open > .listMain,
html body #prepOpenCloneList .prepSharedListItem:has(.liveListFixedToggle[aria-expanded="true"]) > .listMain,
html body #archiveRoomList .archiveStableListItem.open > .listMain,
html body #archiveRoomList .archiveStableListItem:has(.archiveListFixedToggle[aria-expanded="true"]) > .listMain{
  min-height:58px !important;
}

/* 通報は未展開では非表示。募集・アーカイブとも同じ共通ルール。 */
html body #archiveRoomList .archiveStableListItem:not(.open):not(:has(.archiveListFixedToggle[aria-expanded="true"])) .prepSharedReport{
  display:none !important;
}

/* 通報は3行目の位置を維持 */
html body #prepOpenCloneList .prepSharedListItem.open .prepSharedReport,
html body #prepOpenCloneList .prepSharedListItem:has(.liveListFixedToggle[aria-expanded="true"]) .prepSharedReport,
html body #archiveRoomList .archiveStableListItem.open .prepSharedReport,
html body #archiveRoomList .archiveStableListItem:has(.archiveListFixedToggle[aria-expanded="true"]) .prepSharedReport{
  display:inline-flex !important;
  position:absolute !important;
  top:40px !important;
  right:10px !important;
  left:auto !important;
  width:auto !important;
  height:15px !important;
  min-height:15px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  align-items:center !important;
  justify-content:flex-end !important;
  color:#d33 !important;
  font-size:9px !important;
  line-height:15px !important;
  white-space:nowrap !important;
  pointer-events:auto !important;
  z-index:40 !important;
}

/* 左カテゴリ領域を状態ヘルプの基準にする */
html body .prepListStateSlot{
  position:absolute !important;
  overflow:visible !important;
}

/* 状態ヘルプ「？」：カテゴリ丸の右上 */
html body .prepListStateSlot > .prepStateHelp{
  position:absolute !important;
  top:-4px !important;
  right:-4px !important;
  left:auto !important;
  width:20px !important;
  min-width:20px !important;
  height:20px !important;
  min-height:20px !important;
  margin:0 !important;
  padding:0 !important;
  z-index:40 !important;
  pointer-events:auto !important;
}

/* 通常状態にはDOM自体を作らないため、?は出ない。
   作成者（青リング）/予約中（✓）の時だけ表示される。 */

/* =========================================================
   2026-09-03 募集中：予約ON/OFF再描画では▼を回転させない
   - 展開状態そのものは維持
   - ユーザーが▼を直接押した時だけ通常のクルリンを許可
   ========================================================= */
html body #prepOpenCloneList.prepRestoreNoToggleAnim .listToggle,
html body #prepOpenCloneList.prepRestoreNoToggleAnim .liveListFixedToggle{
  transition:none !important;
  animation:none !important;
}

/* =========================================================
   2026-09-03 公式カード：常時「画像＋タイトル全文＋説明全文」
   - 画像切替は廃止
   - カード本体タップ＝入室
   - 下部タイトル要約は非表示
   - 右下入室ボタンは撤去
   - 人数/時間/? は維持
   ========================================================= */

html body #roomList .card.cardImageRoom{
  cursor:pointer !important;
}

/* 背景画像はしっかり見せる。暗転は薄め。 */
html body #roomList .card.cardImageRoom .cardImageOverlay{
  opacity:1 !important;
  visibility:visible !important;
  background:rgba(0,0,0,.34) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  padding:46px 18px 64px !important;
  pointer-events:none !important;
}

/* タイトル全文 */
html body #roomList .card.cardImageRoom .cardImageFullTitle{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
  word-break:break-word !important;
}

/* 説明全文 */
html body #roomList .card.cardImageRoom .cardImageFullDesc{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:10px 0 0 !important;
  padding:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
  word-break:break-word !important;
}

/* 下部タイトル要約は常時出さない */
html body #roomList .card.cardImageRoom .cardImageTitleRow{
  display:none !important;
}

/* 公式の右下入室アイコン/その説明は完全撤去 */
html body #roomList .card.cardImageRoom .cardImageEnterBtn,
html body #roomList .card.cardImageRoom .rooomCardActionHelp{
  display:none !important;
}

/* 画像切替用の当たり判定・トグルUIは公式では使わない */
html body #roomList .card.cardImageRoom .cardImageTap{
  display:none !important;
  pointer-events:none !important;
}

/* 右下メタはそのまま生かし、空いた分だけ自然に右へ */
html body #roomList .card.cardImageRoom .cardImageBottom{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* 公式では imageOpen 状態が残っていても見た目を変えない */
html body #roomList .card.cardImageRoom.imageOpen .cardImageOverlay{
  opacity:1 !important;
  visibility:visible !important;
  background:rgba(0,0,0,.34) !important;
}
html body #roomList .card.cardImageRoom.imageOpen .cardImageTitleRow{
  display:none !important;
}

@media (max-width:640px){
  html body #roomList .card.cardImageRoom .cardImageOverlay{
    padding:42px 16px 60px !important;
    background:rgba(0,0,0,.34) !important;
  }
}

/* =========================================================
   2026-09-03 公式カード バグ修正
   .cardImageTap の中に画像本体＋文字オーバーレイが入っているため、
   display:none にするとカード内容ごと消えていた。
   画像切替はJS側でbindしないまま、表示面としては常時使う。
   ========================================================= */

html body #roomList .card.cardImageRoom .cardImageTap{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:inherit !important;
  overflow:hidden !important;
  background:transparent !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}

/* 画像はカード全面に常時表示 */
html body #roomList .card.cardImageRoom .cardRoomImage{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* 文字面は常時表示。画像が見える程度の薄暗転 */
html body #roomList .card.cardImageRoom .cardImageOverlay,
html body #roomList .card.cardImageRoom.imageOpen .cardImageOverlay{
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  position:absolute !important;
  inset:0 !important;
  background:rgba(0,0,0,.34) !important;
  pointer-events:none !important;
}

/* 下部メタは画像面の上に残す */
html body #roomList .card.cardImageRoom .cardImageBottom{
  position:absolute !important;
  z-index:20 !important;
  pointer-events:none !important;
}

/* 人数/時間/? は表示維持。?だけ操作可能 */
html body #roomList .card.cardImageRoom .cardImageBottom .rooomCardMetaHelp{
  pointer-events:auto !important;
}

/* 入室アイコンは引き続き非表示（カード全面タップ＝入室） */
html body #roomList .card.cardImageRoom .cardImageEnterBtn,
html body #roomList .card.cardImageRoom .rooomCardActionHelp{
  display:none !important;
}

/* =========================================================
   2026-09-03 公式カード 微調整
   - 人数/残り時間をカード右端へ
   - 背景画像は未補正（暗転・色補正なし）でそのまま表示
   - タイトル/説明は常時表示
   ========================================================= */

/* 背景画像そのものは補正なし */
html body #roomList .card.cardImageRoom .cardRoomImage{
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
}

/* 画像全体への暗転を外す */
html body #roomList .card.cardImageRoom .cardImageOverlay,
html body #roomList .card.cardImageRoom.imageOpen .cardImageOverlay{
  background:transparent !important;
}

/* 人数・残り時間の塊をカード右端へ */
html body #roomList .card.cardImageRoom .cardImagePeople{
  position:absolute !important;
  right:12px !important;
  left:auto !important;
  margin:0 !important;
  text-align:right !important;
  justify-content:flex-end !important;
}

html body #roomList .card.cardImageRoom .cardImageTime{
  position:absolute !important;
  right:12px !important;
  left:auto !important;
  margin:0 !important;
  text-align:right !important;
  justify-content:flex-end !important;
}

/* 人数側の ? も右端メタに追従 */
html body #roomList .card.cardImageRoom .rooomCardMetaHelp{
  right:54px !important;
  left:auto !important;
}

@media (max-width:640px){
  html body #roomList .card.cardImageRoom .cardImagePeople,
  html body #roomList .card.cardImageRoom .cardImageTime{
    right:10px !important;
  }

  html body #roomList .card.cardImageRoom .rooomCardMetaHelp{
    right:52px !important;
  }
}

/* =========================================================
   2026-09-03 公式カード
   1) 人数 / 残り時間をカード右端へ完全固定
   2) 元画像自体は未補正のまま
   3) 文字が白画像でも読めるよう、文字領域だけ局所グラデーション
   ========================================================= */

/* 下部HUDを座標の基準にする。
   旧grid/translateYに依存せず、人数と時間を右端へ直接固定する。 */
html body #roomList .card.cardImageRoom .cardImageBottom{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:52px !important;
  min-height:52px !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  pointer-events:none !important;

  /* 白い画像でも右下メタが読めるよう下端だけ暗くする */
  background:linear-gradient(
    to top,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.34) 52%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* 人数：右端固定 */
html body #roomList .card.cardImageRoom .cardImagePeople{
  position:absolute !important;
  top:auto !important;
  right:10px !important;
  bottom:21px !important;
  left:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:16px !important;
  min-height:16px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  text-align:right !important;
  line-height:16px !important;
  transform:none !important;
  grid-area:unset !important;
  justify-self:auto !important;
  align-self:auto !important;
}

/* 残り時間：人数と同じ右端ライン */
html body #roomList .card.cardImageRoom .cardImageTime{
  position:absolute !important;
  top:auto !important;
  right:10px !important;
  bottom:4px !important;
  left:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:16px !important;
  min-height:16px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  text-align:right !important;
  line-height:16px !important;
  transform:none !important;
  grid-area:unset !important;
  justify-self:auto !important;
  align-self:auto !important;
}

/* 人数/時間の説明 ? は人数の左上へ。
   位置だけ独立固定して、旧grid指定を切る。 */
html body #roomList .card.cardImageRoom .cardImageBottom > .rooomCardMetaHelp{
  position:absolute !important;
  top:auto !important;
  right:56px !important;
  bottom:28px !important;
  left:auto !important;
  margin:0 !important;
  transform:none !important;
  grid-area:unset !important;
  z-index:30 !important;
  pointer-events:auto !important;
}

/* 元画像そのものには一切フィルターを掛けない */
html body #roomList .card.cardImageRoom .cardRoomImage{
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
}

/* タイトル/説明が白い画像でも読めるよう、上側だけ局所的に暗くする。
   画像全体は暗転しない。 */
html body #roomList .card.cardImageRoom .cardImageOverlay,
html body #roomList .card.cardImageRoom.imageOpen .cardImageOverlay{
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.50) 0%,
    rgba(0,0,0,.30) 30%,
    rgba(0,0,0,.08) 48%,
    rgba(0,0,0,0) 62%
  ) !important;
}

/* 白背景対策の最低限シャドウ */
html body #roomList .card.cardImageRoom .cardImageFullTitle{
  text-shadow:0 1px 4px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.55) !important;
}

html body #roomList .card.cardImageRoom .cardImageFullDesc{
  text-shadow:0 1px 4px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.55) !important;
}

html body #roomList .card.cardImageRoom .cardImagePeople,
html body #roomList .card.cardImageRoom .cardImageTime{
  text-shadow:0 1px 4px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.6) !important;
}

@media (max-width:640px){
  html body #roomList .card.cardImageRoom .cardImagePeople{
    right:9px !important;
    bottom:20px !important;
  }

  html body #roomList .card.cardImageRoom .cardImageTime{
    right:9px !important;
    bottom:4px !important;
  }

  html body #roomList .card.cardImageRoom .cardImageBottom > .rooomCardMetaHelp{
    right:54px !important;
    bottom:27px !important;
  }
}

\n\n/* =========================================================\n   2026-09-03 公式カード DOM完全統一\n   - Admin作成公式も画像の有無に関係なく cardImageRoom を使用\n   - 画像なしは公式プレーン背景を画像面の代わりに表示\n   - 既存の画像あり公式の配置・右端メタ・?・全面タップ挙動は維持\n   ========================================================= */\nhtml body #roomList .card.cardImageRoom.noCardRoomImage .cardRoomImagePlaceholder{\n  position:absolute !important;\n  inset:0 !important;\n  width:100% !important;\n  height:100% !important;\n  display:block !important;\n  background:linear-gradient(180deg,var(--rooom-official-top,#eef4fa) 0%,var(--rooom-official-bottom,#c4d2e2) 100%) !important;\n}\n\n/* 画像なし公式では画像向けの暗い局所グラデーションを外し、\n   同じDOMのままプレーンカードとして読める配色にする。 */\nhtml body #roomList .card.cardImageRoom.noCardRoomImage .cardImageOverlay,\nhtml body #roomList .card.cardImageRoom.noCardRoomImage.imageOpen .cardImageOverlay{\n  background:transparent !important;\n}\n\nhtml body #roomList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle{\n  color:var(--rooom-card-text,#262626) !important;\n  text-shadow:none !important;\n}\n\nhtml body #roomList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc{\n  color:var(--rooom-card-subtext,#555) !important;\n  text-shadow:none !important;\n}\n\nhtml body #roomList .card.cardImageRoom.noCardRoomImage .cardImageBottom{\n  background:transparent !important;\n}\n\nhtml body #roomList .card.cardImageRoom.noCardRoomImage .cardImagePeople,\nhtml body #roomList .card.cardImageRoom.noCardRoomImage .cardImageTime{\n  color:var(--rooom-card-meta,#555) !important;\n  text-shadow:none !important;\n}\n

/* =========================================================
   2026-09-03 カード3大枠 共通化
   公式 / 開催中 / アーカイブを同じ cardImageRoom ベースで表示する。
   - 画像あり：画像背景 + タイトル全文 + 説明全文
   - 画像なし：同じDOMのプレーン背景
   - 下部タイトル要約なし
   - 右側専用入室/読むボタンなし
   - カード本体タップが主操作
   - 人数/時間またはアーカイブ情報は右端固定
   ========================================================= */

/* 開催中・アーカイブもカード全面を主操作にする */
html body #userRoomList .card.cardImageRoom,
html body #archiveRoomList .card.cardImageRoom{
  cursor:pointer !important;
}

/* 画像面は表示面として常時使用。画像切替はJS側でbindしない。 */
html body #userRoomList .card.cardImageRoom .cardImageTap,
html body #archiveRoomList .card.cardImageRoom .cardImageTap{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:inherit !important;
  overflow:hidden !important;
  background:transparent !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}

html body #userRoomList .card.cardImageRoom .cardRoomImage,
html body #archiveRoomList .card.cardImageRoom .cardRoomImage{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  -webkit-filter:none !important;
}

/* タイトル・説明を常時全文表示。画像全体は暗くせず上側だけ可読性補助。 */
html body #userRoomList .card.cardImageRoom .cardImageOverlay,
html body #userRoomList .card.cardImageRoom.imageOpen .cardImageOverlay,
html body #archiveRoomList .card.cardImageRoom .cardImageOverlay,
html body #archiveRoomList .card.cardImageRoom.imageOpen .cardImageOverlay{
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  position:absolute !important;
  inset:0 !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  padding:46px 18px 64px !important;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.50) 0%,
    rgba(0,0,0,.30) 30%,
    rgba(0,0,0,.08) 48%,
    rgba(0,0,0,0) 62%
  ) !important;
  pointer-events:none !important;
}

html body #userRoomList .card.cardImageRoom .cardImageFullTitle,
html body #archiveRoomList .card.cardImageRoom .cardImageFullTitle{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
  word-break:break-word !important;
  text-shadow:0 1px 4px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.55) !important;
}

html body #userRoomList .card.cardImageRoom .cardImageFullDesc,
html body #archiveRoomList .card.cardImageRoom .cardImageFullDesc{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:10px 0 0 !important;
  padding:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
  word-break:break-word !important;
  text-shadow:0 1px 4px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.55) !important;
}

/* 下部タイトル要約と旧専用アクションは3大枠で使わない */
html body #userRoomList .card.cardImageRoom .cardImageTitleRow,
html body #archiveRoomList .card.cardImageRoom .cardImageTitleRow,
html body #userRoomList .card.cardImageRoom .cardImageEnterBtn,
html body #archiveRoomList .card.cardImageRoom .cardImageEnterBtn,
html body #userRoomList .card.cardImageRoom .rooomCardActionHelp,
html body #archiveRoomList .card.cardImageRoom .rooomCardActionHelp{
  display:none !important;
}

/* 下側メタ領域をカード右端基準へ統一 */
html body #userRoomList .card.cardImageRoom .cardImageBottom,
html body #archiveRoomList .card.cardImageRoom .cardImageBottom{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:52px !important;
  min-height:52px !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 52%,rgba(0,0,0,0) 100%) !important;
  pointer-events:none !important;
  z-index:20 !important;
}

html body #userRoomList .card.cardImageRoom .cardImagePeople,
html body #archiveRoomList .card.cardImageRoom .cardImagePeople{
  position:absolute !important;
  top:auto !important;
  right:10px !important;
  bottom:21px !important;
  left:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:16px !important;
  min-height:16px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  text-align:right !important;
  line-height:16px !important;
  transform:none !important;
  grid-area:unset !important;
  justify-self:auto !important;
  align-self:auto !important;
  text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.6) !important;
}

html body #userRoomList .card.cardImageRoom .cardImageTime,
html body #archiveRoomList .card.cardImageRoom .cardImageTime{
  position:absolute !important;
  top:auto !important;
  right:10px !important;
  bottom:4px !important;
  left:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:16px !important;
  min-height:16px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  text-align:right !important;
  line-height:16px !important;
  transform:none !important;
  grid-area:unset !important;
  justify-self:auto !important;
  align-self:auto !important;
  text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.6) !important;
}

html body #userRoomList .card.cardImageRoom .cardImageBottom > .rooomCardMetaHelp,
html body #archiveRoomList .card.cardImageRoom .cardImageBottom > .rooomCardMetaHelp{
  position:absolute !important;
  top:auto !important;
  right:56px !important;
  bottom:28px !important;
  left:auto !important;
  margin:0 !important;
  transform:none !important;
  grid-area:unset !important;
  z-index:30 !important;
  pointer-events:auto !important;
}

/* 画像なし開催中/アーカイブも同じDOMのプレーン背景にする */
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardRoomImagePlaceholder,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardRoomImagePlaceholder{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  background:linear-gradient(180deg,var(--rooom-official-top,#eef4fa) 0%,var(--rooom-official-bottom,#c4d2e2) 100%) !important;
}

html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImageOverlay,
html body #userRoomList .card.cardImageRoom.noCardRoomImage.imageOpen .cardImageOverlay,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImageOverlay,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage.imageOpen .cardImageOverlay{
  background:transparent !important;
}

html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle{
  color:var(--rooom-card-text,#262626) !important;
  text-shadow:none !important;
}

html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc{
  color:var(--rooom-card-subtext,#555) !important;
  text-shadow:none !important;
}

html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImageBottom,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImageBottom{
  background:transparent !important;
}

html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImagePeople,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImageTime,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImagePeople,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImageTime{
  color:var(--rooom-card-meta,#555) !important;
  text-shadow:none !important;
}

@media (max-width:640px){
  html body #userRoomList .card.cardImageRoom .cardImageOverlay,
  html body #archiveRoomList .card.cardImageRoom .cardImageOverlay{
    padding:42px 16px 60px !important;
  }

  html body #userRoomList .card.cardImageRoom .cardImagePeople,
  html body #archiveRoomList .card.cardImageRoom .cardImagePeople{
    right:9px !important;
    bottom:20px !important;
  }

  html body #userRoomList .card.cardImageRoom .cardImageTime,
  html body #archiveRoomList .card.cardImageRoom .cardImageTime{
    right:9px !important;
    bottom:4px !important;
  }

  html body #userRoomList .card.cardImageRoom .cardImageBottom > .rooomCardMetaHelp,
  html body #archiveRoomList .card.cardImageRoom .cardImageBottom > .rooomCardMetaHelp{
    right:54px !important;
    bottom:27px !important;
  }
}

/* =========================================================
   2026-09-03 カード共通仕上げ
   - 画像なし公式を開催中/アーカイブと同じプレーン背景へ統一
   - 画像なし公式の下側黒グラデーションを完全撤去
   - 画像なしは黒系文字/メタ、画像ありは既存の白文字を維持
   - 公式/開催中のメタ「？」をアーカイブ基準まで右へ寄せる
   ========================================================= */

/* 画像なし公式：開催中/アーカイブと同じプレーン背景 */
html body #roomList .card.cardImageRoom.noCardRoomImage .cardRoomImagePlaceholder{
  background:linear-gradient(
    180deg,
    var(--rooom-official-top,#eef4fa) 0%,
    var(--rooom-official-bottom,#c4d2e2) 100%
  ) !important;
}

/* 画像なし公式には画像用の上下グラデーションを一切掛けない */
html body #roomList .card.cardImageRoom.noCardRoomImage .cardImageOverlay,
html body #roomList .card.cardImageRoom.noCardRoomImage.imageOpen .cardImageOverlay{
  background:transparent !important;
}

html body #roomList .card.cardImageRoom.noCardRoomImage .cardImageBottom{
  background:none !important;
  background-image:none !important;
}

/* 画像なし公式の文字色も開催中/アーカイブと同じプレーン仕様 */
html body #roomList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle{
  color:var(--rooom-card-text,#262626) !important;
  text-shadow:none !important;
}

html body #roomList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc{
  color:var(--rooom-card-subtext,#555) !important;
  text-shadow:none !important;
}

html body #roomList .card.cardImageRoom.noCardRoomImage .cardImagePeople,
html body #roomList .card.cardImageRoom.noCardRoomImage .cardImageTime{
  color:var(--rooom-card-meta,#555) !important;
  text-shadow:none !important;
}

/* 「？」の横位置：
   アーカイブを基準として、公式と開催中だけ現在位置から右へ寄せる。
   アーカイブ自体の位置は変更しない。 */
html body #roomList .card.cardImageRoom .cardImageBottom > .rooomCardMetaHelp,
html body #userRoomList .card.cardImageRoom .cardImageBottom > .rooomCardMetaHelp{
  right:48px !important;
  left:auto !important;
}

@media (max-width:640px){
  html body #roomList .card.cardImageRoom .cardImageBottom > .rooomCardMetaHelp,
  html body #userRoomList .card.cardImageRoom .cardImageBottom > .rooomCardMetaHelp{
    right:46px !important;
    left:auto !important;
  }
}

/* =========================================================
   2026-09-03 カード3大枠 見た目最終統一
   内容・人数・アーカイブ情報の意味は一切変更しない。
   見た目だけ公式 / 開催中 / アーカイブで統一する。

   - 画像あり / 画像なしを問わずタイトル・説明は白
   - 人数・時間・アーカイブメタも白
   - 画像ありカードの上下グラデーションは撤去
   - 元画像は未補正のまま
   - 画像なし背景は現行の薄いプレーン背景を維持
   - アーカイブ画像ありだけ薄くなる opacity を強制解除
   ========================================================= */

/* ---------------------------------------------------------
   1. 元画像は完全未補正
   --------------------------------------------------------- */
html body #roomList .card.cardImageRoom .cardRoomImage,
html body #userRoomList .card.cardImageRoom .cardRoomImage,
html body #archiveRoomList .card.cardImageRoom .cardRoomImage{
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
}

/* ---------------------------------------------------------
   2. 画像あり/なし共通：カード上部の暗転グラデを使わない
   --------------------------------------------------------- */
html body #roomList .card.cardImageRoom .cardImageOverlay,
html body #userRoomList .card.cardImageRoom .cardImageOverlay,
html body #archiveRoomList .card.cardImageRoom .cardImageOverlay,
html body #roomList .card.cardImageRoom.imageOpen .cardImageOverlay,
html body #userRoomList .card.cardImageRoom.imageOpen .cardImageOverlay,
html body #archiveRoomList .card.cardImageRoom.imageOpen .cardImageOverlay{
  background:none !important;
  background-image:none !important;
}

/* ---------------------------------------------------------
   3. 下部メタの黒グラデ帯も3大枠すべて撤去
   --------------------------------------------------------- */
html body #roomList .card.cardImageRoom .cardImageBottom,
html body #userRoomList .card.cardImageRoom .cardImageBottom,
html body #archiveRoomList .card.cardImageRoom .cardImageBottom{
  background:none !important;
  background-image:none !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
}

/* ---------------------------------------------------------
   4. タイトル・説明：画像あり/なし共通で白
   白い画像・薄いプレーン背景でも読めるよう影だけ残す
   --------------------------------------------------------- */
html body #roomList .card.cardImageRoom .cardImageFullTitle,
html body #userRoomList .card.cardImageRoom .cardImageFullTitle,
html body #archiveRoomList .card.cardImageRoom .cardImageFullTitle{
  color:#fff !important;
  opacity:1 !important;
  text-shadow:
    0 1px 3px rgba(0,0,0,.95),
    0 0 5px rgba(0,0,0,.72) !important;
}

html body #roomList .card.cardImageRoom .cardImageFullDesc,
html body #userRoomList .card.cardImageRoom .cardImageFullDesc,
html body #archiveRoomList .card.cardImageRoom .cardImageFullDesc{
  color:#fff !important;
  opacity:1 !important;
  text-shadow:
    0 1px 3px rgba(0,0,0,.95),
    0 0 5px rgba(0,0,0,.72) !important;
}

/* ---------------------------------------------------------
   5. 右下メタも画像あり/なし共通で白
   内容は変えず、色・透明度だけ統一
   --------------------------------------------------------- */
html body #roomList .card.cardImageRoom .cardImagePeople,
html body #roomList .card.cardImageRoom .cardImageTime,
html body #userRoomList .card.cardImageRoom .cardImagePeople,
html body #userRoomList .card.cardImageRoom .cardImageTime,
html body #archiveRoomList .card.cardImageRoom .cardImagePeople,
html body #archiveRoomList .card.cardImageRoom .cardImageTime{
  color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  text-shadow:
    0 1px 3px rgba(0,0,0,.95),
    0 0 4px rgba(0,0,0,.72) !important;
}

/* アーカイブ専用の内部span/SVGまで透明度を固定。
   「画像ありアーカイブだけスケスケ」をここで完全に止める。 */
html body #archiveRoomList .card.cardImageRoom .archiveCardBottom,
html body #archiveRoomList .card.cardImageRoom .archiveCardBottom *,
html body #archiveRoomList .card.cardImageRoom .archiveMetaCompact,
html body #archiveRoomList .card.cardImageRoom .archiveMetaCompact *,
html body #archiveRoomList .card.cardImageRoom .archiveStatsTop,
html body #archiveRoomList .card.cardImageRoom .archiveStatsTop *,
html body #archiveRoomList .card.cardImageRoom .archiveStatsBottom,
html body #archiveRoomList .card.cardImageRoom .archiveStatsBottom *{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
}

/* SVGの既存色（緑/オレンジ等）は意味があるので変更しない。
   文字だけ白に統一する。 */
html body #archiveRoomList .card.cardImageRoom .archiveMetaCompact,
html body #archiveRoomList .card.cardImageRoom .archiveStatsTop,
html body #archiveRoomList .card.cardImageRoom .archiveStatsBottom{
  color:#fff !important;
  text-shadow:
    0 1px 3px rgba(0,0,0,.95),
    0 0 4px rgba(0,0,0,.72) !important;
}

/* ---------------------------------------------------------
   6. 画像なしカードに以前入れた黒文字指定を明示的に無効化
   背景そのものは変更しない
   --------------------------------------------------------- */
html body #roomList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle,
html body #roomList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc,
html body #roomList .card.cardImageRoom.noCardRoomImage .cardImagePeople,
html body #roomList .card.cardImageRoom.noCardRoomImage .cardImageTime,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImagePeople,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImageTime,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImagePeople,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImageTime{
  color:#fff !important;
  opacity:1 !important;
  text-shadow:
    0 1px 3px rgba(0,0,0,.95),
    0 0 5px rgba(0,0,0,.72) !important;
}

/* 「？」も画像ありアーカイブだけ薄くならないよう濃さを統一。
   横位置は前回確定した位置を維持。 */
html body #roomList .card.cardImageRoom .rooomCardMetaHelp,
html body #userRoomList .card.cardImageRoom .rooomCardMetaHelp,
html body #archiveRoomList .card.cardImageRoom .rooomCardMetaHelp,
html body #roomList .card.cardImageRoom .rooomCardMetaHelp *,
html body #userRoomList .card.cardImageRoom .rooomCardMetaHelp *,
html body #archiveRoomList .card.cardImageRoom .rooomCardMetaHelp *{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
}

/* =========================================================
   2026-09-03 カード3大枠 共通ナチュラル仕上げ
   対象：公式 / 開催中 / アーカイブ
   ※ 準備はまだ対象外
   ※ データ・表示内容・DOM・位置は変更しない
   ※ 背景画像 / 画像なし背景も変更しない

   - タイトルの影をかなり弱くして自然に
   - 説明はさらに弱い影
   - 右下メタは最小限の影だけ
   - 右下メタ周辺の暗転 / グラデ / 背景帯を完全撤去
   ========================================================= */

/* ---------------------------------------------------------
   タイトル：白文字は維持、影だけ自然に
   --------------------------------------------------------- */
html body #roomList .card.cardImageRoom .cardImageFullTitle,
html body #userRoomList .card.cardImageRoom .cardImageFullTitle,
html body #archiveRoomList .card.cardImageRoom .cardImageFullTitle{
  color:#fff !important;
  opacity:1 !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.58),
    0 0 2px rgba(0,0,0,.22) !important;
}

/* ---------------------------------------------------------
   説明：タイトルよりさらに弱い影
   --------------------------------------------------------- */
html body #roomList .card.cardImageRoom .cardImageFullDesc,
html body #userRoomList .card.cardImageRoom .cardImageFullDesc,
html body #archiveRoomList .card.cardImageRoom .cardImageFullDesc{
  color:#fff !important;
  opacity:1 !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.42) !important;
}

/* ---------------------------------------------------------
   右下メタの背景加工を完全撤去
   --------------------------------------------------------- */
html body #roomList .card.cardImageRoom .cardImageBottom,
html body #userRoomList .card.cardImageRoom .cardImageBottom,
html body #archiveRoomList .card.cardImageRoom .cardImageBottom,
html body #archiveRoomList .card.cardImageRoom .archiveCardBottom{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
}

/* 右下の子要素側にも背景帯や擬似グラデを残さない */
html body #roomList .card.cardImageRoom .cardImageBottom::before,
html body #roomList .card.cardImageRoom .cardImageBottom::after,
html body #userRoomList .card.cardImageRoom .cardImageBottom::before,
html body #userRoomList .card.cardImageRoom .cardImageBottom::after,
html body #archiveRoomList .card.cardImageRoom .cardImageBottom::before,
html body #archiveRoomList .card.cardImageRoom .cardImageBottom::after,
html body #archiveRoomList .card.cardImageRoom .archiveCardBottom::before,
html body #archiveRoomList .card.cardImageRoom .archiveCardBottom::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}

/* ---------------------------------------------------------
   右下メタ：白文字 + 最小限の自然な影
   --------------------------------------------------------- */
html body #roomList .card.cardImageRoom .cardImagePeople,
html body #roomList .card.cardImageRoom .cardImageTime,
html body #userRoomList .card.cardImageRoom .cardImagePeople,
html body #userRoomList .card.cardImageRoom .cardImageTime,
html body #archiveRoomList .card.cardImageRoom .cardImagePeople,
html body #archiveRoomList .card.cardImageRoom .cardImageTime,
html body #archiveRoomList .card.cardImageRoom .archiveMetaCompact,
html body #archiveRoomList .card.cardImageRoom .archiveStatsTop,
html body #archiveRoomList .card.cardImageRoom .archiveStatsBottom{
  color:#fff !important;
  opacity:1 !important;
  filter:none !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.50) !important;
}

/* 色付きSVG/絵文字は元の色をそのまま使う */
html body #archiveRoomList .card.cardImageRoom .archiveMetaCompact svg,
html body #archiveRoomList .card.cardImageRoom .archiveStatsTop svg,
html body #archiveRoomList .card.cardImageRoom .archiveStatsBottom svg{
  opacity:1 !important;
  filter:none !important;
  text-shadow:none !important;
}

/* ---------------------------------------------------------
   画像なしカードも同じ自然な影強度に統一
   背景そのものは一切変更しない
   --------------------------------------------------------- */
html body #roomList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle{
  color:#fff !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.58),
    0 0 2px rgba(0,0,0,.22) !important;
}

html body #roomList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc{
  color:#fff !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.42) !important;
}

html body #roomList .card.cardImageRoom.noCardRoomImage .cardImagePeople,
html body #roomList .card.cardImageRoom.noCardRoomImage .cardImageTime,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImagePeople,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImageTime,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImagePeople,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImageTime{
  color:#fff !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.50) !important;
}

/* 「？」も背景加工なし。位置は前回確定値をそのまま維持 */
html body #roomList .card.cardImageRoom .rooomCardMetaHelp,
html body #userRoomList .card.cardImageRoom .rooomCardMetaHelp,
html body #archiveRoomList .card.cardImageRoom .rooomCardMetaHelp{
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
}

/* =========================================================
   2026-09-03 カード3大枠 文字色テスト
   対象：公式 / 開催中 / アーカイブ
   ※ 準備は対象外
   ※ 背景・画像・影・位置・表示内容は変更しない

   真っ白 #fff から、わずかに青みのある
   オフホワイト #eef3f7 へ統一。
   ========================================================= */

html body #roomList .card.cardImageRoom .cardImageFullTitle,
html body #userRoomList .card.cardImageRoom .cardImageFullTitle,
html body #archiveRoomList .card.cardImageRoom .cardImageFullTitle,
html body #roomList .card.cardImageRoom .cardImageFullDesc,
html body #userRoomList .card.cardImageRoom .cardImageFullDesc,
html body #archiveRoomList .card.cardImageRoom .cardImageFullDesc,
html body #roomList .card.cardImageRoom .cardImagePeople,
html body #roomList .card.cardImageRoom .cardImageTime,
html body #userRoomList .card.cardImageRoom .cardImagePeople,
html body #userRoomList .card.cardImageRoom .cardImageTime,
html body #archiveRoomList .card.cardImageRoom .cardImagePeople,
html body #archiveRoomList .card.cardImageRoom .cardImageTime,
html body #archiveRoomList .card.cardImageRoom .archiveMetaCompact,
html body #archiveRoomList .card.cardImageRoom .archiveStatsTop,
html body #archiveRoomList .card.cardImageRoom .archiveStatsBottom{
  color:#eef3f7 !important;
}

/* 画像なし用に以前追加された白指定も同じ色へ上書き */
html body #roomList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle,
html body #roomList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc,
html body #roomList .card.cardImageRoom.noCardRoomImage .cardImagePeople,
html body #roomList .card.cardImageRoom.noCardRoomImage .cardImageTime,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImagePeople,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImageTime,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImagePeople,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImageTime{
  color:#eef3f7 !important;
}

/* =========================================================
   2026-09-03 カード3大枠 ライト背景微調整
   対象：公式 / 開催中 / アーカイブ
   ※ 準備はまだ対象外
   ※ 文字色 #eef3f7 は維持
   ※ 画像ありカードは変更しない

   - 画像なし背景をほんの一段だけ濃く
   - ライトUIは維持
   - 時計アイコン自体の丸背景 / グラデ / 影を撤去
   ========================================================= */

/* ---------------------------------------------------------
   1. 画像なし背景だけ少しトーンダウン
   暗くしすぎず、ライトUIを維持する
   --------------------------------------------------------- */
html body #roomList .card.cardImageRoom.noCardRoomImage .cardRoomImagePlaceholder,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardRoomImagePlaceholder,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardRoomImagePlaceholder{
  background:linear-gradient(
    180deg,
    #edf3f8 0%,
    #cbd8e5 100%
  ) !important;
}

/* ---------------------------------------------------------
   2. 時計アイコンの丸背景 / グラデ / 影を完全撤去
   文字・時刻内容・位置は変えない
   --------------------------------------------------------- */
html body #roomList .card.cardImageRoom .cardImageTime,
html body #userRoomList .card.cardImageRoom .cardImageTime,
html body #archiveRoomList .card.cardImageRoom .cardImageTime{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* 時計表示側の疑似要素にも背景処理を残さない */
html body #roomList .card.cardImageRoom .cardImageTime::before,
html body #roomList .card.cardImageRoom .cardImageTime::after,
html body #userRoomList .card.cardImageRoom .cardImageTime::before,
html body #userRoomList .card.cardImageRoom .cardImageTime::after,
html body #archiveRoomList .card.cardImageRoom .cardImageTime::before,
html body #archiveRoomList .card.cardImageRoom .cardImageTime::after{
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
}

/* 時計の文字色は既定のオフホワイトをそのまま維持 */
html body #roomList .card.cardImageRoom .cardImageTime,
html body #userRoomList .card.cardImageRoom .cardImageTime,
html body #archiveRoomList .card.cardImageRoom .cardImageTime{
  color:#eef3f7 !important;
}

/* =========================================================
   2026-09-03 カード3大枠 画像なし背景グラデ再調整
   対象：公式 / 開催中 / アーカイブ
   ※ 準備は対象外
   ※ 文字色 #eef3f7、影、位置、表示内容は変更しない
   ※ 画像ありカードは変更しない

   上部は明るさを維持し、下部へ自然に少し濃くする。
   ========================================================= */

html body #roomList .card.cardImageRoom.noCardRoomImage .cardRoomImagePlaceholder,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardRoomImagePlaceholder,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardRoomImagePlaceholder{
  background:linear-gradient(
    180deg,
    #f0f5f9 0%,
    #d6e1eb 58%,
    #aebfd0 100%
  ) !important;
}

/* =========================================================
   2026-09-03 カード文字色を黒系へ統一 + 準備カード位置修正
   対象：公式 / 開催中 / アーカイブ / 準備カード
   - 文字色は共通で黒系
   - 真っ黒画像でも読めるよう白い外側シャドウを薄く付与
   - 準備の人数/予定日時/? は既存3大枠と同じ右端基準
   - 予約✓はカテゴリ丸の中心へ完全固定
   ========================================================= */

/* ---------- 1. カード本文：黒系文字へ統一 ---------- */
html body #roomList .card.cardImageRoom .cardImageFullTitle,
html body #userRoomList .card.cardImageRoom .cardImageFullTitle,
html body #archiveRoomList .card.cardImageRoom .cardImageFullTitle,
html body #prepOpenCloneList .card.cardImageRoom .cardImageFullTitle{
  color:#1f2328 !important;
  opacity:1 !important;
  text-shadow:
    0 1px 1px rgba(255,255,255,.95),
    0 0 3px rgba(255,255,255,.78) !important;
}

html body #roomList .card.cardImageRoom .cardImageFullDesc,
html body #userRoomList .card.cardImageRoom .cardImageFullDesc,
html body #archiveRoomList .card.cardImageRoom .cardImageFullDesc,
html body #prepOpenCloneList .card.cardImageRoom .cardImageFullDesc{
  color:#39414a !important;
  opacity:1 !important;
  text-shadow:
    0 1px 1px rgba(255,255,255,.92),
    0 0 2px rgba(255,255,255,.72) !important;
}

/* 画像なし時も同じ文字色。以前の白指定を確実に上書き */
html body #roomList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle,
html body #prepOpenCloneList .card.cardImageRoom.noCardRoomImage .cardImageFullTitle{
  color:#1f2328 !important;
}

html body #roomList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc,
html body #userRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc,
html body #archiveRoomList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc,
html body #prepOpenCloneList .card.cardImageRoom.noCardRoomImage .cardImageFullDesc{
  color:#39414a !important;
}

/* ---------- 2. 右下メタも黒系へ統一 ----------
   真っ黒画像対策として白い薄シャドウだけ付ける */
html body #roomList .card.cardImageRoom .cardImagePeople,
html body #roomList .card.cardImageRoom .cardImageTime,
html body #userRoomList .card.cardImageRoom .cardImagePeople,
html body #userRoomList .card.cardImageRoom .cardImageTime,
html body #archiveRoomList .card.cardImageRoom .cardImagePeople,
html body #archiveRoomList .card.cardImageRoom .cardImageTime,
html body #archiveRoomList .card.cardImageRoom .archiveMetaCompact,
html body #archiveRoomList .card.cardImageRoom .archiveStatsTop,
html body #archiveRoomList .card.cardImageRoom .archiveStatsBottom,
html body #prepOpenCloneList .card.cardImageRoom .prepCardPeople,
html body #prepOpenCloneList .card.cardImageRoom .prepCardTime{
  color:#252a30 !important;
  opacity:1 !important;
  text-shadow:
    0 1px 1px rgba(255,255,255,.95),
    0 0 2px rgba(255,255,255,.74) !important;
}

/* =========================================================
   2026-09-03 カード4枠 共通正本
   正本：開催中カード
   公式 / 開催中 / アーカイブ / 準備は
   rooomUnifiedCard* の同一DOM・同一CSSを必ず使用する。
   枠ごとの差分は中身（メタ内容・予約/管理/通報等）だけ。
   ========================================================= */

html body .rooomUnifiedCard{
  position:relative !important;
  overflow:hidden !important;
  border-radius:22px !important;
}

/* 画像面 */
html body .rooomUnifiedCard .rooomUnifiedCardSurface{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:inherit !important;
  overflow:hidden !important;
  background:transparent !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}

html body .rooomUnifiedCard .rooomUnifiedCardImage{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
}

/* 画像なし背景も4枠共通 */
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardPlaceholder{
  background:linear-gradient(
    180deg,
    #f0f5f9 0%,
    #d6e1eb 58%,
    #aebfd0 100%
  ) !important;
}

/* タイトル・説明領域 */
html body .rooomUnifiedCard .rooomUnifiedCardOverlay{
  display:flex !important;
  position:absolute !important;
  inset:0 !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  padding:46px 18px 64px !important;
  background:none !important;
  background-image:none !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none !important;
}

html body .rooomUnifiedCard .rooomUnifiedCardTitle{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  color:#1f2328 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  word-break:break-word !important;
  text-shadow:
    0 1px 1px rgba(255,255,255,.95),
    0 0 3px rgba(255,255,255,.78) !important;
}

html body .rooomUnifiedCard .rooomUnifiedCardDesc{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:10px 0 0 !important;
  padding:0 !important;
  color:#39414a !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  word-break:break-word !important;
  text-shadow:
    0 1px 1px rgba(255,255,255,.92),
    0 0 2px rgba(255,255,255,.72) !important;
}

/* 下部メタ領域：4枠で完全共通 */
html body .rooomUnifiedCard .rooomUnifiedCardBottom{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:52px !important;
  min-height:52px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  pointer-events:none !important;
  z-index:25 !important;
}

html body .rooomUnifiedCard .rooomUnifiedCardPeople{
  position:absolute !important;
  top:auto !important;
  right:10px !important;
  bottom:21px !important;
  left:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:16px !important;
  min-height:16px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  color:#252a30 !important;
  line-height:16px !important;
  text-align:right !important;
  white-space:nowrap !important;
  transform:none !important;
  grid-area:unset !important;
  text-shadow:
    0 1px 1px rgba(255,255,255,.95),
    0 0 2px rgba(255,255,255,.74) !important;
}

html body .rooomUnifiedCard .rooomUnifiedCardTime{
  position:absolute !important;
  top:auto !important;
  right:10px !important;
  bottom:4px !important;
  left:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:16px !important;
  min-height:16px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  color:#252a30 !important;
  line-height:16px !important;
  text-align:right !important;
  white-space:nowrap !important;
  transform:none !important;
  grid-area:unset !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  text-shadow:
    0 1px 1px rgba(255,255,255,.95),
    0 0 2px rgba(255,255,255,.74) !important;
}

/* 共通メタ?：同じ位置 */
html body .rooomUnifiedCard .rooomCardMetaHelp,
html body .rooomUnifiedCard .prepCardMetaHelp{
  position:absolute !important;
  top:auto !important;
  right:48px !important;
  bottom:28px !important;
  left:auto !important;
  margin:0 !important;
  transform:none !important;
  z-index:40 !important;
  pointer-events:auto !important;
}

/* 下部タイトル要約・旧入室UIは共通カードでは使わない */
html body .rooomUnifiedCard .cardImageTitleRow,
html body .rooomUnifiedCard .cardImageEnterBtn,
html body .rooomUnifiedCard .rooomCardActionHelp{
  display:none !important;
}

/* アーカイブ内部の透明度も共通基準へ */
html body .rooomUnifiedCard .archiveStatsTop,
html body .rooomUnifiedCard .archiveStatsBottom,
html body .rooomUnifiedCard .archiveStatsTop *,
html body .rooomUnifiedCard .archiveStatsBottom *{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
}

/* 準備固有：カテゴリ状態だけ差分 */
html body .rooomUnifiedCard.prepSharedCard .prepCardCategoryState{
  position:absolute !important;
  top:12px !important;
  left:22px !important;
  width:26px !important;
  height:26px !important;
  z-index:35 !important;
  pointer-events:none !important;
}

html body .rooomUnifiedCard.prepSharedCard .prepCardCategoryState > .cardCategoryCornerBadge{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:26px !important;
  height:26px !important;
  margin:0 !important;
}

html body .rooomUnifiedCard.prepSharedCard.is-own-prep .prepCardCategoryState > .cardCategoryCornerBadge{
  outline:3px solid #2f80ed !important;
  outline-offset:3px !important;
}

html body .rooomUnifiedCard.prepSharedCard .prepCardReservedBadge{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:26px !important;
  height:26px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
  color:#111 !important;
  font-size:24px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  z-index:12 !important;
  pointer-events:none !important;
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff !important;
}

html body .rooomUnifiedCard.prepSharedCard .prepCardStateHelp{
  position:absolute !important;
  top:-7px !important;
  right:-7px !important;
  left:auto !important;
  z-index:45 !important;
  pointer-events:auto !important;
}

/* 準備固有：通報だけ左下 */
html body .rooomUnifiedCard.prepSharedCard .prepCardReport{
  position:absolute !important;
  left:14px !important;
  bottom:10px !important;
  right:auto !important;
  top:auto !important;
  z-index:45 !important;
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  min-width:0 !important;
  height:20px !important;
  min-height:20px !important;
  margin:0 !important;
  padding:0 3px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#d33 !important;
  font-size:10px !important;
  line-height:20px !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}

@media (max-width:640px){
  html body .rooomUnifiedCard .rooomUnifiedCardOverlay{
    padding:42px 16px 60px !important;
  }

  html body .rooomUnifiedCard .rooomUnifiedCardPeople{
    right:9px !important;
    bottom:20px !important;
  }

  html body .rooomUnifiedCard .rooomUnifiedCardTime{
    right:9px !important;
    bottom:4px !important;
  }

  html body .rooomUnifiedCard .rooomCardMetaHelp,
  html body .rooomUnifiedCard .prepCardMetaHelp{
    right:46px !important;
    bottom:27px !important;
  }

  html body .rooomUnifiedCard.prepSharedCard .prepCardReport{
    left:12px !important;
    bottom:8px !important;
  }
}

/* =========================================================
   2026-09-03 カード4枠 共通文字シャドウ調整
   共通正本 rooomUnifiedCard のみ変更
   - 黒系文字は維持
   - 白い発光感を作っていた広いぼかしを撤去
   - 真っ黒画像対策として、ごく細い白シャドウだけ残す
   ========================================================= */

html body .rooomUnifiedCard .rooomUnifiedCardTitle{
  text-shadow:
    0 1px 0 rgba(255,255,255,.72),
    1px 0 0 rgba(255,255,255,.32),
   -1px 0 0 rgba(255,255,255,.32) !important;
}

html body .rooomUnifiedCard .rooomUnifiedCardDesc{
  text-shadow:
    0 1px 0 rgba(255,255,255,.58) !important;
}

/* =========================================================
   2026-09-03 カード4枠 共通仕上げ
   - 画像なしカードは文字シャドウ効果を完全OFF
   - 人数/時間メタは画像あり/なし共通で黒文字
   - 時計/人数アイコン周辺に残る背景・グラデ・影を撤去
   ========================================================= */

/* ---------------------------------------------------------
   1. 画像なしカードは文字効果なし
   --------------------------------------------------------- */
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardTitle,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardDesc{
  text-shadow:none !important;
}

/* ---------------------------------------------------------
   2. 右下メタは画像あり/なし共通で黒文字
   --------------------------------------------------------- */
html body .rooomUnifiedCard .rooomUnifiedCardPeople,
html body .rooomUnifiedCard .rooomUnifiedCardTime,
html body .rooomUnifiedCard .archiveStatsTop,
html body .rooomUnifiedCard .archiveStatsBottom{
  color:#252a30 !important;
  opacity:1 !important;
  text-shadow:none !important;
}

/* 画像なし側に過去の白文字指定が残っても必ず黒で統一 */
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardPeople,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardTime,
html body .rooomUnifiedCard.noCardRoomImage .archiveStatsTop,
html body .rooomUnifiedCard.noCardRoomImage .archiveStatsBottom{
  color:#252a30 !important;
  text-shadow:none !important;
}

/* ---------------------------------------------------------
   3. アイコン周辺の背景・グラデ・影を完全撤去
   --------------------------------------------------------- */
html body .rooomUnifiedCard .rooomUnifiedCardPeople,
html body .rooomUnifiedCard .rooomUnifiedCardTime,
html body .rooomUnifiedCard .rooomUnifiedCardPeople::before,
html body .rooomUnifiedCard .rooomUnifiedCardPeople::after,
html body .rooomUnifiedCard .rooomUnifiedCardTime::before,
html body .rooomUnifiedCard .rooomUnifiedCardTime::after{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* 内部span/SVG/絵文字側にも背景効果を残さない */
html body .rooomUnifiedCard .rooomUnifiedCardPeople *,
html body .rooomUnifiedCard .rooomUnifiedCardTime *{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
}

/* ? の背景処理も共通で完全撤去 */
html body .rooomUnifiedCard .rooomCardMetaHelp,
html body .rooomUnifiedCard .prepCardMetaHelp,
html body .rooomUnifiedCard .rooomCardMetaHelp *,
html body .rooomUnifiedCard .prepCardMetaHelp *{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* =========================================================
   2026-09-03 4枠共通：効果/メタ/時計アイコンの最終是正
   ========================================================= */

/* 画像なし：タイトル・説明は一切の文字効果なし */
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardTitle,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardDesc{
  text-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
}

/* 人数・時間は画像あり/なし問わず完全に同じ黒文字 */
html body .rooomUnifiedCard .rooomUnifiedCardPeople,
html body .rooomUnifiedCard .rooomUnifiedCardTime,
html body .rooomUnifiedCard .rooomUnifiedCardPeople span,
html body .rooomUnifiedCard .rooomUnifiedCardTime span,
html body .rooomUnifiedCard .archiveStatsTop,
html body .rooomUnifiedCard .archiveStatsBottom,
html body .rooomUnifiedCard .archiveStatsTop span,
html body .rooomUnifiedCard .archiveStatsBottom span{
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
  opacity:1 !important;
  text-shadow:none !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
}

/* 時計は絵文字をやめて単色記号に統一。グラデ/丸背景なし */
html body .rooomUnifiedCard .rooomMonoClockIcon{
  display:inline-block !important;
  margin-right:2px !important;
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1 !important;
  background:none !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
}

/* 右下の?も背景/グラデ/影なし */
html body .rooomUnifiedCard .rooomCardMetaHelp,
html body .rooomUnifiedCard .prepCardMetaHelp,
html body .rooomUnifiedCard .rooomCardMetaHelp .rooomHelpMark,
html body .rooomUnifiedCard .prepCardMetaHelp .rooomHelpMark{
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  text-shadow:none !important;
}

/* =========================================================
   2026-09-03 画像なしカード：文字効果完全撤去
   4枠共通正本
   ========================================================= */

/* タイトル・説明：黒系の素文字。影/縁取り/フィルタ/透明度なし */
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardTitle{
  color:#1f2328 !important;
  text-shadow:none !important;
  -webkit-text-stroke:0 transparent !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardDesc{
  color:#39414a !important;
  text-shadow:none !important;
  -webkit-text-stroke:0 transparent !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* 人数・時間：画像なしでは完全な黒文字。親子とも効果ゼロ */
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardPeople,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardTime,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardPeople *,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardTime *{
  color:#111 !important;
  text-shadow:none !important;
  -webkit-text-stroke:0 transparent !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* 擬似要素に残る旧グラデ/影も消す */
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardTitle::before,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardTitle::after,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardDesc::before,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardDesc::after,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardPeople::before,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardPeople::after,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardTime::before,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardTime::after{
  text-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* 下部メタ親にも旧グラデを残さない */
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardBottom,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardBottom::before,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardBottom::after{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
}

/* =========================================================
   2026-09-03 画像なしカード：旧IDセレクタを確実に上書き
   原因：
   旧CSSの #roomList / #userRoomList / #archiveRoomList /
   #prepOpenCloneList 付き指定の方が詳細度が高く、
   共通クラス側の text-shadow:none が負けていた。
   ========================================================= */

/* タイトル：4枠すべて画像なし時は完全な素文字 */
html body #roomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageFullTitle.rooomUnifiedCardTitle,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageFullTitle.rooomUnifiedCardTitle,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageFullTitle.rooomUnifiedCardTitle,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageFullTitle.rooomUnifiedCardTitle{
  color:#1f2328 !important;
  text-shadow:none !important;
  -webkit-text-stroke:0 !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* 説明：4枠すべて画像なし時は完全な素文字 */
html body #roomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageFullDesc.rooomUnifiedCardDesc,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageFullDesc.rooomUnifiedCardDesc,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageFullDesc.rooomUnifiedCardDesc,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageFullDesc.rooomUnifiedCardDesc{
  color:#39414a !important;
  text-shadow:none !important;
  -webkit-text-stroke:0 !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* 人数：旧ID付き指定より強く、黒＋効果なし */
html body #roomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImagePeople.rooomUnifiedCardPeople,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImagePeople.rooomUnifiedCardPeople,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImagePeople.rooomUnifiedCardPeople,
/* 時間/日付：旧ID付き指定より強く、黒＋効果なし */
html body #roomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageTime.rooomUnifiedCardTime,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageTime.rooomUnifiedCardTime,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageTime.rooomUnifiedCardTime,
/* アーカイブ内部spanも親色・透明度をそのまま使う */
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .archiveStatsTop,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .archiveStatsBottom,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .archiveStatsTop span,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .archiveStatsBottom span{
  color:#111 !important;
  text-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* no-image下部メタ親・疑似要素にも効果を残さない */
html body #roomList .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardBottom,
html body #userRoomList .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardBottom,
html body #archiveRoomList .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardBottom,
html body #prepOpenCloneList .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardBottom,
html body #roomList .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardBottom::before,
html body #roomList .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardBottom::after,
html body #userRoomList .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardBottom::before,
html body #userRoomList .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardBottom::after,
html body #archiveRoomList .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardBottom::before,
html body #archiveRoomList .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardBottom::after,
html body #prepOpenCloneList .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardBottom::before,
html body #prepOpenCloneList .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardBottom::after{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
}

/* =========================================================
   2026-09-03 画像ありカード：細い白縁テスト
   対象：公式 / 開催中 / アーカイブ / 準備
   ※ 画像なしカードは今回変更しない
   ※ 背景画像・位置・DOM・メタ内容は変更しない

   - 黒文字は維持
   - 画像あり時だけ、ごく細い白縁を追加
   - タイトル / 説明 / 人数 / 時間を同じ考え方で処理
   - 広いぼかしは使わず、1px輪郭寄り
   ========================================================= */

/* タイトル：黒文字 + 細い白縁 */
html body .rooomUnifiedCard.hasCardRoomImage .rooomUnifiedCardTitle{
  color:#1f2328 !important;
  text-shadow:
    -1px  0   0 rgba(255,255,255,.78),
     1px  0   0 rgba(255,255,255,.78),
     0   -1px 0 rgba(255,255,255,.78),
     0    1px 0 rgba(255,255,255,.78) !important;
  -webkit-text-stroke:0 !important;
  filter:none !important;
  -webkit-filter:none !important;
}

/* 説明：タイトルより少し弱い細縁 */
html body .rooomUnifiedCard.hasCardRoomImage .rooomUnifiedCardDesc{
  color:#39414a !important;
  text-shadow:
    -1px  0   0 rgba(255,255,255,.58),
     1px  0   0 rgba(255,255,255,.58),
     0   -1px 0 rgba(255,255,255,.58),
     0    1px 0 rgba(255,255,255,.58) !important;
  -webkit-text-stroke:0 !important;
  filter:none !important;
  -webkit-filter:none !important;
}

/* 人数 / 時間：黒文字 + 最小限の白縁 */
html body .rooomUnifiedCard.hasCardRoomImage .rooomUnifiedCardPeople,
html body .rooomUnifiedCard.hasCardRoomImage .rooomUnifiedCardTime{
  color:#111 !important;
  text-shadow:
    -1px  0   0 rgba(255,255,255,.72),
     1px  0   0 rgba(255,255,255,.72),
     0   -1px 0 rgba(255,255,255,.72),
     0    1px 0 rgba(255,255,255,.72) !important;
  -webkit-text-stroke:0 !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* アーカイブ内部文字も同じ細縁 */
html body .rooomUnifiedCard.hasCardRoomImage .archiveStatsTop,
html body .rooomUnifiedCard.hasCardRoomImage .archiveStatsBottom,
html body .rooomUnifiedCard.hasCardRoomImage .archiveStatsTop span,
html body .rooomUnifiedCard.hasCardRoomImage .archiveStatsBottom span{
  color:#111 !important;
  text-shadow:
    -1px  0   0 rgba(255,255,255,.72),
     1px  0   0 rgba(255,255,255,.72),
     0   -1px 0 rgba(255,255,255,.72),
     0    1px 0 rgba(255,255,255,.72) !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* 画像なしは現状の素文字を明示維持 */
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardTitle,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardDesc,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardPeople,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardTime{
  text-shadow:none !important;
}

/* =========================================================
   2026-09-03 4枠共通「？」視認性調整
   ※ 見た目の形式・サイズ・位置は変えない
   ※ 既存の丸い？アイコンをそのまま使用
   - 中の「？」を濃く
   - 外周/背景だけ白寄りにして背景画像に埋もれにくくする
   ========================================================= */

/* 既存の形・位置は維持。色とコントラストだけ調整 */
html body .rooomUnifiedCard .rooomCardMetaHelp,
html body .rooomUnifiedCard .prepCardMetaHelp{
  background:rgba(255,255,255,.94) !important;
  border-color:rgba(90,90,90,.55) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.16) !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* 中の？は黒寄りで固定 */
html body .rooomUnifiedCard .rooomCardMetaHelp .rooomHelpMark,
html body .rooomUnifiedCard .prepCardMetaHelp .rooomHelpMark{
  color:#222 !important;
  text-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* 画像なしでも同じ見え方 */
html body .rooomUnifiedCard.noCardRoomImage .rooomCardMetaHelp,
html body .rooomUnifiedCard.noCardRoomImage .prepCardMetaHelp{
  background:rgba(255,255,255,.94) !important;
  border-color:rgba(90,90,90,.55) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.16) !important;
}

/* =========================================================
   2026-09-03 カード右下「？」本体の視認性修正
   形式・サイズ・位置は変更しない。
   実際に丸を描いている .rooomHelpMark 本体だけを調整。
   ========================================================= */

/* 外側ボタンは透明のまま。見た目は rooomHelpMark が担当 */
html body .rooomUnifiedCard .rooomCardMetaHelp,
html body .rooomUnifiedCard .prepCardMetaHelp{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
}

/* 丸い「？」本体 */
html body .rooomUnifiedCard .rooomCardMetaHelp > .rooomHelpMark,
html body .rooomUnifiedCard .prepCardMetaHelp > .rooomHelpMark{
  width:13px !important;
  min-width:13px !important;
  max-width:13px !important;
  height:13px !important;
  min-height:13px !important;
  max-height:13px !important;

  background:#fff !important;
  color:#222 !important;
  border:1px solid #444 !important;
  border-radius:50% !important;

  box-shadow:0 1px 2px rgba(0,0,0,.22) !important;
  text-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* ダークテーマでもカード上の「？」は同じ視認性を維持 */
html.rooom-dark-theme body .rooomUnifiedCard .rooomCardMetaHelp > .rooomHelpMark,
html.rooom-dark-theme body .rooomUnifiedCard .prepCardMetaHelp > .rooomHelpMark{
  background:#fff !important;
  color:#222 !important;
  border-color:#444 !important;
}

/* =========================================================
   2026-09-03 画像ありカード：文字視認性を一段強化
   対象：公式 / 開催中 / アーカイブ / 準備
   ※ 画像なしカードは変更しない
   ※ 背景画像・DOM・位置・サイズは変更しない

   方針：
   - 黒文字は維持
   - 白い縁取りを少しだけ強くする
   - ぼかしは極力使わず、輪郭として見せる
   ========================================================= */

/* タイトル：黒文字 + 少し強めの白輪郭 */
html body .rooomUnifiedCard.hasCardRoomImage .rooomUnifiedCardTitle{
  color:#1f2328 !important;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.92),
     1px -1px 0 rgba(255,255,255,.92),
    -1px  1px 0 rgba(255,255,255,.92),
     1px  1px 0 rgba(255,255,255,.92),
     0    1px 0 rgba(255,255,255,.95) !important;
  -webkit-text-stroke:0 !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* 説明：タイトルより少し控えめだが、画像上で読める強さ */
html body .rooomUnifiedCard.hasCardRoomImage .rooomUnifiedCardDesc{
  color:#39414a !important;
  text-shadow:
    -1px  0   0 rgba(255,255,255,.78),
     1px  0   0 rgba(255,255,255,.78),
     0   -1px 0 rgba(255,255,255,.72),
     0    1px 0 rgba(255,255,255,.82) !important;
  -webkit-text-stroke:0 !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* 人数 / 時間：画像あり時だけ白輪郭を強化 */
html body .rooomUnifiedCard.hasCardRoomImage .rooomUnifiedCardPeople,
html body .rooomUnifiedCard.hasCardRoomImage .rooomUnifiedCardTime{
  color:#111 !important;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.90),
     1px -1px 0 rgba(255,255,255,.90),
    -1px  1px 0 rgba(255,255,255,.90),
     1px  1px 0 rgba(255,255,255,.90) !important;
  -webkit-text-stroke:0 !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* アーカイブ内部メタも同じ視認性へ */
html body .rooomUnifiedCard.hasCardRoomImage .archiveStatsTop,
html body .rooomUnifiedCard.hasCardRoomImage .archiveStatsBottom,
html body .rooomUnifiedCard.hasCardRoomImage .archiveStatsTop span,
html body .rooomUnifiedCard.hasCardRoomImage .archiveStatsBottom span{
  color:#111 !important;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.90),
     1px -1px 0 rgba(255,255,255,.90),
    -1px  1px 0 rgba(255,255,255,.90),
     1px  1px 0 rgba(255,255,255,.90) !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* 画像なしは前回確定どおり、完全な素文字を維持 */
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardTitle,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardDesc,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardPeople,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardTime{
  text-shadow:none !important;
}

/* 準備固有状態レイヤーも、スマホでは共通カテゴリ位置に合わせる */
@media (max-width:640px){
  html body .rooomUnifiedCard.prepSharedCard .prepCardCategoryState{
    top:10px !important;
    left:20px !important;
  }
}

/* =========================================================
   準備カード：共通ベース強制
   タイトル/説明/画像/メタ位置/共通? の見た目は
   rooomUnifiedCard* だけを正本にする。
   ========================================================= */
html body #prepOpenCloneList .rooomUnifiedCard.prepSharedCard .cardImageFullTitle{
  font-size:inherit;
}
html body #prepOpenCloneList .rooomUnifiedCard.prepSharedCard .cardImageFullTitle,
html body #prepOpenCloneList .rooomUnifiedCard.prepSharedCard .cardImageFullDesc,
html body #prepOpenCloneList .rooomUnifiedCard.prepSharedCard .cardImagePeople,
html body #prepOpenCloneList .rooomUnifiedCard.prepSharedCard .cardImageTime{
  transform:none !important;
  filter:none !important;
  -webkit-filter:none !important;
}

/* =========================================================
   2026-09-03 準備カード右下：共通ベースへ完全委譲
   人数 / 時間 / 共通？ の位置・サイズ・見た目は
   .rooomUnifiedCardPeople / .rooomUnifiedCardTime /
   .rooomCardMetaHelp の共通正本だけを使用する。
   準備専用の位置指定は持たない。
   ========================================================= */

/* 予約済みチェックだけ、共通カテゴリ丸の中心で少し大きく表示 */
html body .rooomUnifiedCard.prepSharedCard .prepCardReservedBadge{
  font-size:24px !important;
}

/* =========================================================
   2026-09-03 準備カード右下
   開催中 / アーカイブで実際に使われている最終配置をそのまま適用
   「似せる」のではなく、同じ数値・同じ構造で固定する。
   ========================================================= */

/* 下部メタ親も3大枠と同じ52pxの絶対配置 */
html body #prepOpenCloneList .card.cardImageRoom .cardImageBottom{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:52px !important;
  min-height:52px !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  pointer-events:none !important;
  z-index:20 !important;
}

/* 人数：開催中/アーカイブの実配置と同じ */
html body #prepOpenCloneList .card.cardImageRoom .cardImagePeople{
  position:absolute !important;
  top:auto !important;
  right:10px !important;
  bottom:21px !important;
  left:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:16px !important;
  min-height:16px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  text-align:right !important;
  line-height:16px !important;
  transform:none !important;
  grid-area:unset !important;
  justify-self:auto !important;
  align-self:auto !important;
  white-space:nowrap !important;
}

/* 開催日時：開催中/アーカイブの実配置と同じ */
html body #prepOpenCloneList .card.cardImageRoom .cardImageTime{
  position:absolute !important;
  top:auto !important;
  right:10px !important;
  bottom:4px !important;
  left:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:16px !important;
  min-height:16px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  text-align:right !important;
  line-height:16px !important;
  transform:none !important;
  grid-area:unset !important;
  justify-self:auto !important;
  align-self:auto !important;
  white-space:nowrap !important;
}

/* 右下「？」：現在の3大枠最終基準と同じ */
html body #prepOpenCloneList .card.cardImageRoom .cardImageBottom > .rooomCardMetaHelp{
  position:absolute !important;
  top:auto !important;
  right:48px !important;
  bottom:28px !important;
  left:auto !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  grid-area:unset !important;
  z-index:30 !important;
  pointer-events:auto !important;
}

/* 予約済み✓：カテゴリ丸の中心は維持して少し拡大 */
html body #prepOpenCloneList .rooomUnifiedCard.prepSharedCard .prepCardReservedBadge{
  top:0 !important;
  left:0 !important;
  width:26px !important;
  height:26px !important;
  font-size:28px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:none !important;
}

/* スマホも3大枠の実配置と同じ */
@media (max-width:640px){
  html body #prepOpenCloneList .card.cardImageRoom .cardImagePeople{
    right:9px !important;
    bottom:20px !important;
  }

  html body #prepOpenCloneList .card.cardImageRoom .cardImageTime{
    right:9px !important;
    bottom:4px !important;
  }

  html body #prepOpenCloneList .card.cardImageRoom .cardImageBottom > .rooomCardMetaHelp{
    right:46px !important;
    bottom:27px !important;
  }
}

/* =========================================================
   2026-09-03 準備カード右下「？」白枠撤去
   ※ 位置・サイズ・形式はそのまま
   ※ 外側の白い四角/枠だけ消す
   ※ 中の丸い「？」本体は維持
   ========================================================= */

/* 準備カード右下の外側ボタンを完全透明化 */
html body #prepOpenCloneList .card.cardImageRoom .cardImageBottom > .rooomCardMetaHelp{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* 外側ボタンの疑似要素に残る白枠も消す */
html body #prepOpenCloneList .card.cardImageRoom .cardImageBottom > .rooomCardMetaHelp::before,
html body #prepOpenCloneList .card.cardImageRoom .cardImageBottom > .rooomCardMetaHelp::after{
  content:none !important;
  display:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* 中の丸い？本体は既存共通デザインをそのまま使う */
html body #prepOpenCloneList .card.cardImageRoom .cardImageBottom > .rooomCardMetaHelp > .rooomHelpMark{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* =========================================================
   2026-09-03 RoooM共通 通知 / 確認モーダル
   ブラウザ標準 alert / confirm の代替
   ========================================================= */
.rooomActionModal{
  z-index:12050 !important;
}
.rooomActionModal.show{
  align-items:center !important;
  justify-content:center !important;
  padding:16px !important;
}
.rooomActionModalBox{
  width:min(430px,100%) !important;
  max-height:min(70vh,520px);
  overflow:auto;
}
.rooomActionModalText{
  margin:0 0 18px;
  color:#444;
  font-size:14px;
  line-height:1.7;
  white-space:pre-line;
  overflow-wrap:anywhere;
}
.rooomActionModalActions{
  margin-top:0 !important;
}
.rooomActionModalActions button{
  overflow:hidden;
  position:relative;
}
.rooomActionModalActions button::before,
.rooomActionModalActions button::after{
  content:none !important;
  display:none !important;
}
.rooomActionModalCancelBtn[hidden]{
  display:none !important;
}
html.rooom-dark-theme .rooomActionModalBox{
  background:#1f1f1f !important;
  color:#f3f3f3 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 24px 64px rgba(0,0,0,.58) !important;
}
html.rooom-dark-theme .rooomActionModalText{
  color:#d0d0d0 !important;
}
html.rooom-dark-theme .rooomActionModal .cancelBtn{
  background:#303030 !important;
  color:#f1f1f1 !important;
  border:1px solid rgba(255,255,255,.14) !important;
}
html.rooom-dark-theme .rooomActionModal .submitBtn{
  background:#f0f0f0 !important;
  color:#151515 !important;
  border:1px solid #f0f0f0 !important;
}

/* 名前変更は入力ミスをモーダルにせず、その場で表示 */
.topNameInlineError{
  grid-column:2 !important;
  min-width:0 !important;
  margin-top:4px;
  color:#b30000;
  font-size:11px;
  line-height:1.45;
  white-space:nowrap !important;
}
.topNameInlineError.show{
  display:block;
}
.topSettingInput.has-error{
  border-color:#c43b3b !important;
  box-shadow:0 0 0 2px rgba(196,59,59,.10) !important;
}
html.rooom-dark-theme .topNameInlineError{
  color:#ff9b9b !important;
}

@media (max-width:640px){
  .rooomActionModal.show{
    align-items:center !important;
    padding:16px !important;
  }
  .rooomActionModalBox{
    width:min(430px,calc(100vw - 24px)) !important;
  }
}



/* =========================================================
   2026-09-04 作成モーダル統一
   - 項目名/入力欄の間隔は「作成方法」を基準に8pxで統一
   - 4つの選択肢はアイコン+文字を中央配置
   - 通知ON/OFFは作成単位ではなく端末設定1本に統一
   - 小型端末でトップの案内アイコンがモーダルへ重ならないようにする
   ========================================================= */
#createRoomModal #newRoomCreateTimingLabel,
#createRoomModal .formRow > label,
#createRoomModal .formRow > .formLabelLike,
#createRoomModal .createRoomModeLabelRow > .formLabelLike,
#createRoomModal .createRoomSettingsRow .formLabelLike,
#createRoomModal .createRoomSettingsRow label,
#createRoomModal .prepRoomScheduleFields label{
  font-size:13px !important;
  line-height:1.2 !important;
  color:#4b4b4b !important;
  font-weight:400 !important;
}

#createRoomModal #newRoomCreateTimingLabel{
  display:block !important;
  margin:0 0 8px !important;
}

#createRoomModal .formRow{
  gap:8px !important;
}

#createRoomModal .createRoomSettingsRow .formRow,
#createRoomModal .createRoomSettingCell,
#createRoomModal .prepRoomScheduleFields .formRow{
  gap:8px !important;
}

#createRoomModal .createRoomModeLabelRow{
  margin-bottom:8px !important;
}

#createRoomModal .createTimingChoices{
  margin-top:0 !important;
}

#createRoomModal .createTimingChoice .createTimingCard,
#createRoomModal .roomModeChoice .roomModeCard{
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

#createRoomModal .createTimingChoice .createTimingTitle,
#createRoomModal .roomModeChoice .roomModeTitle{
  width:100% !important;
  text-align:center !important;
  justify-content:center !important;
}

#createRoomModal .createRoomNotifyNotice{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
  padding:9px 10px;
  border-radius:12px;
  background:rgba(233,177,53,.14);
  color:#6a4a12;
  font-size:11px;
  line-height:1.45;
}
#createRoomModal .createRoomNotifyNotice[hidden]{display:none !important;}
#createRoomModal .createRoomNotifyNotice.is-unsupported{
  background:rgba(0,0,0,.055);
  color:#555;
}
#createRoomModal .createRoomNotifyNoticeText{
  flex:1 1 auto;
  min-width:0;
}
#createRoomModal .createRoomNotifyEnableBtn{
  flex:0 0 auto;
  border:0;
  border-radius:999px;
  min-height:30px;
  padding:6px 11px;
  background:#111;
  color:#fff;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
#createRoomModal .createRoomNotifyEnableBtn:disabled{
  opacity:.55;
  cursor:default;
}

#createRoomModal .modalActions.createRoomSingleActions{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:8px !important;
}
#createRoomModal .modalActions.createRoomSingleActions button{
  width:100% !important;
  min-width:0 !important;
}

html.rooom-dark-theme #createRoomModal #newRoomCreateTimingLabel,
html.rooom-dark-theme #createRoomModal .formRow > label,
html.rooom-dark-theme #createRoomModal .formRow > .formLabelLike,
html.rooom-dark-theme #createRoomModal .createRoomModeLabelRow > .formLabelLike,
html.rooom-dark-theme #createRoomModal .createRoomSettingsRow .formLabelLike,
html.rooom-dark-theme #createRoomModal .createRoomSettingsRow label,
html.rooom-dark-theme #createRoomModal .prepRoomScheduleFields label{
  color:#bbb !important;
}
html.rooom-dark-theme #createRoomModal .createRoomNotifyNotice{
  background:rgba(233,177,53,.16);
  color:#f3d89a;
}
html.rooom-dark-theme #createRoomModal .createRoomNotifyNotice.is-unsupported{
  background:rgba(255,255,255,.08);
  color:#ccc;
}
html.rooom-dark-theme #createRoomModal .createRoomNotifyEnableBtn{
  background:#eee;
  color:#111;
}

@media (max-width:640px){
  html.rooom-create-modal-open #topPolicyMenuBtn{
    visibility:hidden !important;
    pointer-events:none !important;
  }
  #createRoomModal .createRoomNotifyNotice{
    gap:7px;
    font-size:10px;
  }
  #createRoomModal .createRoomNotifyEnableBtn{
    min-height:28px;
    padding:5px 9px;
    font-size:10px;
  }
}


/* ===== 2026-09-04 作成モーダル：右上X / 募集日時30分〜7日 / 5行スクロール ===== */
#createRoomModal .createRoomModalBox{position:relative !important;overflow-y:auto !important;overflow-x:visible !important;}
#createRoomModal .createRoomCloseBtn{
  position:absolute;top:10px;right:10px;z-index:8;width:34px;height:34px;padding:0;border:0;border-radius:999px;
  background:rgba(0,0,0,.06);color:#222;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
#createRoomModal #createRoomForm{padding-top:4px;}
#createRoomModal .prepStartControls{display:grid !important;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) !important;gap:6px !important;overflow:visible !important;}
#createRoomModal .prepSchedulePicker{position:relative;min-width:0;}
#createRoomModal .prepScheduleNativeSelect{position:absolute !important;width:1px !important;height:1px !important;opacity:0 !important;pointer-events:none !important;padding:0 !important;border:0 !important;}
#createRoomModal .prepScheduleButton{
  width:100%;height:40px;min-height:40px;border:1px solid rgba(0,0,0,.14);border-radius:13px;background:#fff;color:#111;
  padding:0 9px;font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:pointer;white-space:nowrap;
}
#createRoomModal .prepScheduleMenu{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:10020;max-height:200px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;background:#fff;border:1px solid rgba(0,0,0,.14);border-radius:12px;padding:4px;box-shadow:0 14px 34px rgba(0,0,0,.18);
}
#createRoomModal .prepScheduleMenu[hidden]{display:none !important;}
#createRoomModal .prepScheduleOption{display:block;width:100%;height:38px;border:0;border-radius:9px;background:transparent;color:#111;text-align:left;padding:0 10px;font-size:13px;cursor:pointer;white-space:nowrap;}
#createRoomModal .prepScheduleOption[aria-selected="true"]{background:rgba(0,0,0,.08);font-weight:700;}
#createRoomModal .modalActions.createRoomSingleActions{display:block !important;}
#createRoomModal .modalActions.createRoomSingleActions #submitCreateRoomBtn{width:100% !important;min-height:44px !important;font-size:14px !important;font-weight:800 !important;}
html.rooom-dark-theme #createRoomModal .createRoomCloseBtn{background:rgba(255,255,255,.10);color:#eee;}
html.rooom-dark-theme #createRoomModal .prepScheduleButton,html.rooom-dark-theme #createRoomModal .prepScheduleMenu{background:#171717;color:#eee;border-color:rgba(255,255,255,.18);}
html.rooom-dark-theme #createRoomModal .prepScheduleOption{color:#eee;}
html.rooom-dark-theme #createRoomModal .prepScheduleOption[aria-selected="true"]{background:rgba(255,255,255,.12);}
@media(max-width:420px){#createRoomModal .prepStartControls{gap:4px !important;}#createRoomModal .prepScheduleButton{padding:0 7px;font-size:12px;}#createRoomModal .prepScheduleMenu{max-height:194px;}#createRoomModal .prepScheduleOption{height:38px;font-size:12px;}}


/* =========================================================
   募集中RoooM：OPEN待機中の穏やかな点滅
   - 表示だけ。OPEN判定・通知処理には影響しない
   ========================================================= */
@keyframes prepCreatingSoftPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.18; }
}

html body #prepOpenCloneList [data-prep-time-id].prepCreatingPulse{
  animation:prepCreatingSoftPulse 1.35s ease-in-out infinite !important;
}

/* 「RoooM作成中」は状態変化の表示なので、PCでも視認できるようこの箇所だけ維持する。 */
@media (prefers-reduced-motion: reduce){
  html body #prepOpenCloneList [data-prep-time-id].prepCreatingPulse{
    animation:prepCreatingSoftPulse 2.4s ease-in-out infinite !important;
  }
}

/* =========================================================
   2026-09-05 カード表示のみ：主要文字を白で統一
   - 公式 / 開催中 / 募集中 / アーカイブ共通
   - 画像あり / 画像なし共通
   - リスト表示は一切変更しない
   - ? アイコンや操作ボタンの配色は既存のまま
   ========================================================= */
html body #roomList .card .roomName,
html body #roomList .card .desc,
html body #roomList .card .cardImageTitle,
html body #roomList .card .cardImageFullTitle,
html body #roomList .card .cardImageFullDesc,
html body #roomList .card .cardImagePeople,
html body #roomList .card .cardImageTime,
html body #userRoomList .card .roomName,
html body #userRoomList .card .desc,
html body #userRoomList .card .cardImageTitle,
html body #userRoomList .card .cardImageFullTitle,
html body #userRoomList .card .cardImageFullDesc,
html body #userRoomList .card .cardImagePeople,
html body #userRoomList .card .cardImageTime,
html body #prepOpenCloneList .card .roomName,
html body #prepOpenCloneList .card .desc,
html body #prepOpenCloneList .card .cardImageTitle,
html body #prepOpenCloneList .card .cardImageFullTitle,
html body #prepOpenCloneList .card .cardImageFullDesc,
html body #prepOpenCloneList .card .cardImagePeople,
html body #prepOpenCloneList .card .cardImageTime,
html body #prepOpenCloneList .card .prepCardPeople,
html body #prepOpenCloneList .card .prepCardTime,
html body #archiveRoomList .card .roomName,
html body #archiveRoomList .card .desc,
html body #archiveRoomList .card .cardImageTitle,
html body #archiveRoomList .card .cardImageFullTitle,
html body #archiveRoomList .card .cardImageFullDesc,
html body #archiveRoomList .card .cardImagePeople,
html body #archiveRoomList .card .cardImageTime,
html body #archiveRoomList .card .archiveMetaCompact,
html body #archiveRoomList .card .archiveStatsTop,
html body #archiveRoomList .card .archiveStatsBottom,
html body #archiveRoomList .card .archiveStatsTop span,
html body #archiveRoomList .card .archiveStatsBottom span{
  color:#fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,.78) !important;
  -webkit-text-stroke:0 !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* =========================================================
   2026-09-05 カード表示のみ：白文字 最終強制反映
   - unified card DOM を直接対象
   - 旧 color / -webkit-text-fill-color / 白縁黒文字指定を上書き
   - リスト表示には触れない
   ========================================================= */
html body #roomList .rooomUnifiedCard .rooomUnifiedCardTitle,
html body #roomList .rooomUnifiedCard .rooomUnifiedCardDesc,
html body #roomList .rooomUnifiedCard .rooomUnifiedCardPeople,
html body #roomList .rooomUnifiedCard .rooomUnifiedCardTime,
html body #userRoomList .rooomUnifiedCard .rooomUnifiedCardTitle,
html body #userRoomList .rooomUnifiedCard .rooomUnifiedCardDesc,
html body #userRoomList .rooomUnifiedCard .rooomUnifiedCardPeople,
html body #userRoomList .rooomUnifiedCard .rooomUnifiedCardTime,
html body #prepOpenCloneList .rooomUnifiedCard .rooomUnifiedCardTitle,
html body #prepOpenCloneList .rooomUnifiedCard .rooomUnifiedCardDesc,
html body #prepOpenCloneList .rooomUnifiedCard .rooomUnifiedCardPeople,
html body #prepOpenCloneList .rooomUnifiedCard .rooomUnifiedCardTime,
html body #archiveRoomList .rooomUnifiedCard .rooomUnifiedCardTitle,
html body #archiveRoomList .rooomUnifiedCard .rooomUnifiedCardDesc,
html body #archiveRoomList .rooomUnifiedCard .rooomUnifiedCardPeople,
html body #archiveRoomList .rooomUnifiedCard .rooomUnifiedCardTime,
html body #archiveRoomList .rooomUnifiedCard .archiveStatsTop,
html body #archiveRoomList .rooomUnifiedCard .archiveStatsBottom,
html body #archiveRoomList .rooomUnifiedCard .archiveStatsTop span,
html body #archiveRoomList .rooomUnifiedCard .archiveStatsBottom span{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,.82) !important;
  -webkit-text-stroke:0 !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* 旧「画像あり=黒文字+白縁」「画像なし=黒文字」の指定も明示的に無効化 */
html body .rooomUnifiedCard.hasCardRoomImage .rooomUnifiedCardTitle,
html body .rooomUnifiedCard.hasCardRoomImage .rooomUnifiedCardDesc,
html body .rooomUnifiedCard.hasCardRoomImage .rooomUnifiedCardPeople,
html body .rooomUnifiedCard.hasCardRoomImage .rooomUnifiedCardTime,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardTitle,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardDesc,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardPeople,
html body .rooomUnifiedCard.noCardRoomImage .rooomUnifiedCardTime{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,.82) !important;
}

/* =========================================================
   2026-09-05 カード表示のみ：白文字 + 黒フチで可読性確保
   - 公式 / 開催中 / 募集中 / アーカイブ共通
   - 画像あり / 画像なし共通
   - リスト表示は一切変更しない
   ========================================================= */
html body #roomList .rooomUnifiedCard .rooomUnifiedCardTitle,
html body #userRoomList .rooomUnifiedCard .rooomUnifiedCardTitle,
html body #prepOpenCloneList .rooomUnifiedCard .rooomUnifiedCardTitle,
html body #archiveRoomList .rooomUnifiedCard .rooomUnifiedCardTitle,
html body #roomList .card .roomName,
html body #userRoomList .card .roomName,
html body #prepOpenCloneList .card .roomName,
html body #archiveRoomList .card .roomName,
html body #roomList .card .cardImageTitle,
html body #userRoomList .card .cardImageTitle,
html body #prepOpenCloneList .card .cardImageTitle,
html body #archiveRoomList .card .cardImageTitle{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  -webkit-text-stroke:1px #151515 !important;
  paint-order:stroke fill !important;
  text-shadow:0 1px 3px rgba(0,0,0,.72),0 0 2px rgba(0,0,0,.72) !important;
  opacity:1 !important;
}

html body #roomList .rooomUnifiedCard .rooomUnifiedCardDesc,
html body #roomList .rooomUnifiedCard .rooomUnifiedCardPeople,
html body #roomList .rooomUnifiedCard .rooomUnifiedCardTime,
html body #userRoomList .rooomUnifiedCard .rooomUnifiedCardDesc,
html body #userRoomList .rooomUnifiedCard .rooomUnifiedCardPeople,
html body #userRoomList .rooomUnifiedCard .rooomUnifiedCardTime,
html body #prepOpenCloneList .rooomUnifiedCard .rooomUnifiedCardDesc,
html body #prepOpenCloneList .rooomUnifiedCard .rooomUnifiedCardPeople,
html body #prepOpenCloneList .rooomUnifiedCard .rooomUnifiedCardTime,
html body #archiveRoomList .rooomUnifiedCard .rooomUnifiedCardDesc,
html body #archiveRoomList .rooomUnifiedCard .rooomUnifiedCardPeople,
html body #archiveRoomList .rooomUnifiedCard .rooomUnifiedCardTime,
html body #archiveRoomList .rooomUnifiedCard .archiveStatsTop,
html body #archiveRoomList .rooomUnifiedCard .archiveStatsBottom,
html body #archiveRoomList .rooomUnifiedCard .archiveStatsTop span,
html body #archiveRoomList .rooomUnifiedCard .archiveStatsBottom span,
html body #roomList .card .desc,
html body #userRoomList .card .desc,
html body #prepOpenCloneList .card .desc,
html body #archiveRoomList .card .desc,
html body #roomList .card .cardImagePeople,
html body #roomList .card .cardImageTime,
html body #userRoomList .card .cardImagePeople,
html body #userRoomList .card .cardImageTime,
html body #prepOpenCloneList .card .cardImagePeople,
html body #prepOpenCloneList .card .cardImageTime,
html body #archiveRoomList .card .cardImagePeople,
html body #archiveRoomList .card .cardImageTime{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  -webkit-text-stroke:.55px #1a1a1a !important;
  paint-order:stroke fill !important;
  text-shadow:0 1px 2px rgba(0,0,0,.72),0 0 2px rgba(0,0,0,.60) !important;
  opacity:1 !important;
}

/* =========================================================
   2026-09-05 カード表示のみ：文字の可読性をさらに強化
   - 白文字は維持
   - タイトルは黒フチをはっきり
   - 説明/人数/日時は少し細めの黒フチ
   - リスト表示は一切変更しない
   ========================================================= */
html body #roomList .rooomUnifiedCard .rooomUnifiedCardTitle,
html body #userRoomList .rooomUnifiedCard .rooomUnifiedCardTitle,
html body #prepOpenCloneList .rooomUnifiedCard .rooomUnifiedCardTitle,
html body #archiveRoomList .rooomUnifiedCard .rooomUnifiedCardTitle,
html body #roomList .card .roomName,
html body #userRoomList .card .roomName,
html body #prepOpenCloneList .card .roomName,
html body #archiveRoomList .card .roomName,
html body #roomList .card .cardImageTitle,
html body #userRoomList .card .cardImageTitle,
html body #prepOpenCloneList .card .cardImageTitle,
html body #archiveRoomList .card .cardImageTitle{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  -webkit-text-stroke:1.25px rgba(0,0,0,.92) !important;
  paint-order:stroke fill !important;
  font-weight:900 !important;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.92),
     0   -1px 0 rgba(0,0,0,.92),
     1px -1px 0 rgba(0,0,0,.92),
    -1px  0   0 rgba(0,0,0,.92),
     1px  0   0 rgba(0,0,0,.92),
    -1px  1px 0 rgba(0,0,0,.92),
     0    1px 0 rgba(0,0,0,.92),
     1px  1px 0 rgba(0,0,0,.92),
     0    2px 4px rgba(0,0,0,.72) !important;
  opacity:1 !important;
}

html body #roomList .rooomUnifiedCard .rooomUnifiedCardDesc,
html body #roomList .rooomUnifiedCard .rooomUnifiedCardPeople,
html body #roomList .rooomUnifiedCard .rooomUnifiedCardTime,
html body #userRoomList .rooomUnifiedCard .rooomUnifiedCardDesc,
html body #userRoomList .rooomUnifiedCard .rooomUnifiedCardPeople,
html body #userRoomList .rooomUnifiedCard .rooomUnifiedCardTime,
html body #prepOpenCloneList .rooomUnifiedCard .rooomUnifiedCardDesc,
html body #prepOpenCloneList .rooomUnifiedCard .rooomUnifiedCardPeople,
html body #prepOpenCloneList .rooomUnifiedCard .rooomUnifiedCardTime,
html body #archiveRoomList .rooomUnifiedCard .rooomUnifiedCardDesc,
html body #archiveRoomList .rooomUnifiedCard .rooomUnifiedCardPeople,
html body #archiveRoomList .rooomUnifiedCard .rooomUnifiedCardTime,
html body #archiveRoomList .rooomUnifiedCard .archiveStatsTop,
html body #archiveRoomList .rooomUnifiedCard .archiveStatsBottom,
html body #archiveRoomList .rooomUnifiedCard .archiveStatsTop span,
html body #archiveRoomList .rooomUnifiedCard .archiveStatsBottom span,
html body #roomList .card .desc,
html body #userRoomList .card .desc,
html body #prepOpenCloneList .card .desc,
html body #archiveRoomList .card .desc,
html body #roomList .card .cardImagePeople,
html body #roomList .card .cardImageTime,
html body #userRoomList .card .cardImagePeople,
html body #userRoomList .card .cardImageTime,
html body #prepOpenCloneList .card .cardImagePeople,
html body #prepOpenCloneList .card .cardImageTime,
html body #archiveRoomList .card .cardImagePeople,
html body #archiveRoomList .card .cardImageTime{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  -webkit-text-stroke:.8px rgba(0,0,0,.88) !important;
  paint-order:stroke fill !important;
  font-weight:700 !important;
  text-shadow:
    -1px  0   0 rgba(0,0,0,.78),
     1px  0   0 rgba(0,0,0,.78),
     0   -1px 0 rgba(0,0,0,.78),
     0    1px 0 rgba(0,0,0,.78),
     0    2px 3px rgba(0,0,0,.58) !important;
  opacity:1 !important;
}

/* =========================================================
   2026-09-05 card readability final fix
   - CARD ONLY. List view is untouched.
   - Force no-image title/desc to white with visible black outline.
   - Force recruiting card countdown/meta time to the same white outlined style.
   ========================================================= */

/* No-image card title: override the old high-specificity no-effect rules. */
html body #roomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageFullTitle.rooomUnifiedCardTitle,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageFullTitle.rooomUnifiedCardTitle,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageFullTitle.rooomUnifiedCardTitle,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageFullTitle.rooomUnifiedCardTitle{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  -webkit-text-stroke:1px rgba(0,0,0,.96) !important;
  paint-order:stroke fill !important;
  font-weight:900 !important;
  text-shadow:
    -1px -1px 0 #111,
     0   -1px 0 #111,
     1px -1px 0 #111,
    -1px  0   0 #111,
     1px  0   0 #111,
    -1px  1px 0 #111,
     0    1px 0 #111,
     1px  1px 0 #111,
     0    2px 4px rgba(0,0,0,.72) !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* No-image card description: slightly finer but still clearly outlined. */
html body #roomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageFullDesc.rooomUnifiedCardDesc,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageFullDesc.rooomUnifiedCardDesc,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageFullDesc.rooomUnifiedCardDesc,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard.noCardRoomImage .cardImageFullDesc.rooomUnifiedCardDesc{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  -webkit-text-stroke:.65px rgba(0,0,0,.94) !important;
  paint-order:stroke fill !important;
  font-weight:700 !important;
  text-shadow:
    -1px  0   0 rgba(0,0,0,.90),
     1px  0   0 rgba(0,0,0,.90),
     0   -1px 0 rgba(0,0,0,.90),
     0    1px 0 rgba(0,0,0,.90),
     0    2px 3px rgba(0,0,0,.64) !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* All unified card meta text, including recruiting countdown, uses white + black outline. */
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard .cardImageTime.rooomUnifiedCardTime,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard .cardImageTime.rooomUnifiedCardTime *,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard .prepCardTime,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard .prepCardTime *,
html body #prepOpenCloneList .rooomUnifiedCard .rooomUnifiedCardTime,
html body #prepOpenCloneList .rooomUnifiedCard .rooomUnifiedCardTime *,
html body #roomList .rooomUnifiedCard .rooomUnifiedCardPeople,
html body #roomList .rooomUnifiedCard .rooomUnifiedCardPeople *,
html body #roomList .rooomUnifiedCard .rooomUnifiedCardTime,
html body #roomList .rooomUnifiedCard .rooomUnifiedCardTime *,
html body #userRoomList .rooomUnifiedCard .rooomUnifiedCardPeople,
html body #userRoomList .rooomUnifiedCard .rooomUnifiedCardPeople *,
html body #userRoomList .rooomUnifiedCard .rooomUnifiedCardTime,
html body #userRoomList .rooomUnifiedCard .rooomUnifiedCardTime *,
html body #archiveRoomList .rooomUnifiedCard .rooomUnifiedCardPeople,
html body #archiveRoomList .rooomUnifiedCard .rooomUnifiedCardPeople *,
html body #archiveRoomList .rooomUnifiedCard .rooomUnifiedCardTime,
html body #archiveRoomList .rooomUnifiedCard .rooomUnifiedCardTime *{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  -webkit-text-stroke:.55px rgba(0,0,0,.94) !important;
  paint-order:stroke fill !important;
  text-shadow:
    -1px 0 0 rgba(0,0,0,.88),
     1px 0 0 rgba(0,0,0,.88),
     0 -1px 0 rgba(0,0,0,.88),
     0 1px 0 rgba(0,0,0,.88),
     0 1px 2px rgba(0,0,0,.58) !important;
  opacity:1 !important;
}


/* =========================================================
   2026-09-05 CARD TEXT DECORATION FINAL UNIFY
   - カード表示のみ
   - 画像あり / 画像なしで文字装飾を完全に同一化
   - 公式 / 開催中 / 募集中 / アーカイブ共通
   - リスト表示には一切適用しない
   ========================================================= */

/* タイトル：画像の有無に関係なく完全に同じ装飾 */
html body #roomList .card.cardImageRoom.rooomUnifiedCard .cardImageFullTitle.rooomUnifiedCardTitle,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard .cardImageFullTitle.rooomUnifiedCardTitle,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard .cardImageFullTitle.rooomUnifiedCardTitle,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard .cardImageFullTitle.rooomUnifiedCardTitle{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  -webkit-text-stroke:1px rgba(0,0,0,.96) !important;
  paint-order:stroke fill !important;
  font-weight:900 !important;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.88),
     1px -1px 0 rgba(0,0,0,.88),
    -1px  1px 0 rgba(0,0,0,.88),
     1px  1px 0 rgba(0,0,0,.88),
     0    2px 3px rgba(0,0,0,.58) !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* 説明：画像の有無に関係なく完全に同じ装飾 */
html body #roomList .card.cardImageRoom.rooomUnifiedCard .cardImageFullDesc.rooomUnifiedCardDesc,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard .cardImageFullDesc.rooomUnifiedCardDesc,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard .cardImageFullDesc.rooomUnifiedCardDesc,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard .cardImageFullDesc.rooomUnifiedCardDesc{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  -webkit-text-stroke:.7px rgba(0,0,0,.94) !important;
  paint-order:stroke fill !important;
  font-weight:700 !important;
  text-shadow:
    -1px  0 0 rgba(0,0,0,.82),
     1px  0 0 rgba(0,0,0,.82),
     0 -1px 0 rgba(0,0,0,.82),
     0  1px 0 rgba(0,0,0,.82),
     0  2px 2px rgba(0,0,0,.48) !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* 人数・時間も画像の有無で装飾差を出さない。募集カウントダウンも含む。 */
html body #roomList .card.cardImageRoom.rooomUnifiedCard .rooomUnifiedCardPeople,
html body #roomList .card.cardImageRoom.rooomUnifiedCard .rooomUnifiedCardPeople *,
html body #roomList .card.cardImageRoom.rooomUnifiedCard .rooomUnifiedCardTime,
html body #roomList .card.cardImageRoom.rooomUnifiedCard .rooomUnifiedCardTime *,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard .rooomUnifiedCardPeople,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard .rooomUnifiedCardPeople *,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard .rooomUnifiedCardTime,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard .rooomUnifiedCardTime *,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard .rooomUnifiedCardPeople,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard .rooomUnifiedCardPeople *,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard .rooomUnifiedCardTime,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard .rooomUnifiedCardTime *,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard .rooomUnifiedCardPeople,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard .rooomUnifiedCardPeople *,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard .rooomUnifiedCardTime,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard .rooomUnifiedCardTime *{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  -webkit-text-stroke:.55px rgba(0,0,0,.92) !important;
  paint-order:stroke fill !important;
  text-shadow:
    -1px 0 0 rgba(0,0,0,.78),
     1px 0 0 rgba(0,0,0,.78),
     0 -1px 0 rgba(0,0,0,.78),
     0 1px 0 rgba(0,0,0,.78),
     0 1px 2px rgba(0,0,0,.48) !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}


/* =========================================================
   2026-09-05 CARD IMAGE TONE DOWN 12%
   - カード表示の「実画像あり」だけを少し暗くする
   - 画像なしカード / リスト表示 / 文字装飾 / 操作UI は変更しない
   ========================================================= */
html body #roomList .card.cardImageRoom.rooomUnifiedCard:not(.noCardRoomImage)::before,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard:not(.noCardRoomImage)::before,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard:not(.noCardRoomImage)::before,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard:not(.noCardRoomImage)::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  border-radius:inherit !important;
  background:rgba(0,0,0,.12) !important;
  pointer-events:none !important;
}

/* =========================================================
   2026-09-05 CARD BOTTOM META DECORATION HARD UNIFY
   - カード下部の人数 / 閲覧 / 日付 / 時間だけを完全共通化
   - 画像あり / 画像なしで同一指定
   - リスト表示は対象外
   ========================================================= */
html body #roomList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom,
html body #roomList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom .cardImagePeople,
html body #roomList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom .cardImageTime,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom .cardImagePeople,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom .cardImageTime,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom .cardImagePeople,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom .cardImageTime,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom .cardImagePeople,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom .cardImageTime,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom .archiveStatsTop,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom .archiveStatsBottom,
html body #roomList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom span,
html body #userRoomList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom span,
html body #prepOpenCloneList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom span,
html body #archiveRoomList .card.cardImageRoom.rooomUnifiedCard .cardImageBottom.rooomUnifiedCardBottom span{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  -webkit-text-stroke:.55px rgba(0,0,0,.94) !important;
  paint-order:stroke fill !important;
  text-shadow:
    -1px 0 0 rgba(0,0,0,.82),
     1px 0 0 rgba(0,0,0,.82),
     0 -1px 0 rgba(0,0,0,.82),
     0  1px 0 rgba(0,0,0,.82),
     0  1px 2px rgba(0,0,0,.50) !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* =========================================================
   2026-09-05 開催中：主 / 予約者のカテゴリ枠を復旧
   - 主      : 青リング
   - 予約者  : オレンジリング
   - カード / リスト共通
   - 共通カード骨格・配置・機能は変更しない
   ========================================================= */

/* カード：開催中の主 */
html body .rooomUnifiedCard.prepSharedCard.is-own-live-room .prepCardCategoryState > .cardCategoryCornerBadge{
  outline:3px solid #2f80ed !important;
  outline-offset:3px !important;
}

/* カード：開催中の予約者 */
html body .rooomUnifiedCard.prepSharedCard.is-reserved-live-room .prepCardCategoryState > .cardCategoryCornerBadge{
  outline:3px solid #f59e0b !important;
  outline-offset:3px !important;
}

/* リスト：開催中の主 */
html body .prepSharedListItem.is-own-live-room .listCategoryBadge{
  outline:3px solid #2f80ed !important;
  outline-offset:3px !important;
}

/* リスト：開催中の予約者 */
html body .prepSharedListItem.is-reserved-live-room .listCategoryBadge{
  outline:3px solid #f59e0b !important;
  outline-offset:3px !important;
}

/* =========================================================
   2026-10-02 Creation Policy：作成枠満杯時の選択不可表示
   - 開催中 2/2 / 募集中 2/2 の該当側だけグレーアウト
   - home.js が付与する is-prep-unavailable を作成枠満杯の共通状態として使用
   - 旧CTオーバーレイ／旧「募集中あり」表示は使わない
   ========================================================= */
#createRoomModal .createTimingChoice.is-prep-unavailable{
  cursor:not-allowed !important;
}
#createRoomModal .createTimingChoice.is-prep-unavailable .createTimingCard,
#createRoomModal .createTimingChoice.is-prep-unavailable input:checked + .createTimingCard{
  opacity:.42 !important;
  filter:grayscale(1) !important;
  border-color:rgba(0,0,0,.12) !important;
  background:#ececec !important;
  color:#777 !important;
  box-shadow:none !important;
  transform:none !important;
}
#createRoomModal .createTimingChoice.is-prep-unavailable .createTimingTitle{
  color:#777 !important;
}
#createRoomModal .createTimingChoice.is-prep-unavailable .createTimingCard::after{
  content:none !important;
  display:none !important;
}
html.rooom-dark-theme #createRoomModal .createTimingChoice.is-prep-unavailable .createTimingCard,
html.rooom-dark-theme #createRoomModal .createTimingChoice.is-prep-unavailable input:checked + .createTimingCard{
  opacity:.46 !important;
  filter:grayscale(1) !important;
  border-color:rgba(255,255,255,.12) !important;
  background:#2a2a2a !important;
  color:#9a9a9a !important;
  box-shadow:none !important;
}
html.rooom-dark-theme #createRoomModal .createTimingChoice.is-prep-unavailable .createTimingTitle{
  color:#9a9a9a !important;
}


/* =========================================================
   RoooM first TOP spotlight tour
   - First launch only, after the entrance movie reveals the real TOP.
   - Explains the actual UI instead of showing another full-screen modal.
   ========================================================= */
html.rooom-first-top-tour-active,
html.rooom-first-top-tour-active body{
  overflow:hidden !important;
}
.rooomFirstTopTour{
  position:fixed;
  inset:0;
  z-index:2147483638;
  pointer-events:auto;
  font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
}
.rooomFirstTopTourSpotlight{
  position:fixed;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.90);
  box-shadow:
    0 0 0 9999px rgba(5,8,12,.73),
    0 0 0 5px rgba(255,255,255,.10),
    0 18px 55px rgba(0,0,0,.32);
  transition:left .28s cubic-bezier(.2,.8,.2,1),top .28s cubic-bezier(.2,.8,.2,1),width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.rooomFirstTopTourSpotlight::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:23px;
  border:1px solid rgba(255,255,255,.20);
  animation:rooomFirstTopTourPulse 2.2s ease-in-out infinite;
}
@keyframes rooomFirstTopTourPulse{
  0%,100%{opacity:.25;transform:scale(.99)}
  50%{opacity:.85;transform:scale(1.015)}
}
.rooomFirstTopTourCopy{
  position:fixed;
  width:min(430px,calc(100vw - 24px));
  color:#fff;
  padding:4px 2px 0 18px;
  border-left:2px solid rgba(255,255,255,.78);
  text-shadow:0 2px 16px rgba(0,0,0,.40);
  transition:left .28s cubic-bezier(.2,.8,.2,1),top .28s cubic-bezier(.2,.8,.2,1),opacity .18s ease;
}
.rooomFirstTopTourKicker{
  margin:0 0 7px;
  font:800 11px/1.2 Arial,"Helvetica Neue",sans-serif;
  letter-spacing:.16em;
  color:rgba(255,255,255,.68);
}
.rooomFirstTopTourTitle{
  margin:0 0 8px;
  font-size:clamp(22px,4.6vw,34px);
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.025em;
  color:#fff;
}
.rooomFirstTopTourBody{
  margin:0;
  max-width:39em;
  font-size:14px;
  line-height:1.75;
  font-weight:600;
  color:rgba(255,255,255,.90);
}
.rooomFirstTopTourFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
}
.rooomFirstTopTourCounter{
  flex:0 0 auto;
  font:700 11px/1 Arial,"Helvetica Neue",sans-serif;
  letter-spacing:.11em;
  color:rgba(255,255,255,.55);
}
.rooomFirstTopTourActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  min-width:0;
}
.rooomFirstTopTourActions button{
  appearance:none;
  -webkit-appearance:none;
  min-height:38px;
  border-radius:999px;
  padding:0 14px;
  cursor:pointer;
  font:800 12px/1 inherit;
  white-space:nowrap;
}
.rooomFirstTopTourSkip,
.rooomFirstTopTourBack{
  border:1px solid rgba(255,255,255,.30);
  background:rgba(12,15,20,.30);
  color:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.rooomFirstTopTourNext{
  border:1px solid rgba(255,255,255,.94);
  background:#fff;
  color:#111;
  box-shadow:0 7px 22px rgba(0,0,0,.22);
}
.rooomFirstTopTourActions button:active{transform:scale(.97)}
.rooomFirstTopTourActions button:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
.rooomFirstTopTourBack[hidden],
.rooomFirstTopTourSkip[hidden]{display:none !important;}

@media(max-width:640px){
  .rooomFirstTopTourSpotlight{border-radius:14px}
  .rooomFirstTopTourCopy{
    width:calc(100vw - 28px);
    padding-left:14px;
  }
  .rooomFirstTopTourTitle{
    font-size:23px;
    line-height:1.16;
  }
  .rooomFirstTopTourBody{
    font-size:13px;
    line-height:1.65;
  }
  .rooomFirstTopTourFooter{
    align-items:flex-end;
    gap:8px;
  }
  .rooomFirstTopTourActions{gap:5px}
  .rooomFirstTopTourActions button{
    min-height:36px;
    padding:0 11px;
    font-size:11px;
  }
}
@media(prefers-reduced-motion:reduce){
  .rooomFirstTopTourSpotlight,
  .rooomFirstTopTourCopy{transition:none !important}
  .rooomFirstTopTourSpotlight::after{animation:none !important}
}