/* 操作パネル：左下のタイルと、必要なときだけ開く広い作業面。 */
html body.design01{--ui-surface:rgba(13,21,32,.97);--ui-line:#35485c;--ui-muted:#b1c3d5;--ui-ink:#edf3f8;--ui-field:#192737}
html body.design01 #head{padding:10px 0;left:24px;top:16px}
html body.design01 #hdInfo{display:flex;flex-direction:column;gap:3px;margin-top:12px;min-height:45px;font-size:13px;line-height:1.6;letter-spacing:.025em;color:#d8e3ed}
html body.design01 #hdInfo #hdP{font-size:12px;line-height:1.6;color:#b4c9dc;max-width:440px;overflow-wrap:anywhere}
html body.design01 #rail{position:fixed;display:flex;left:18px;bottom:18px;gap:6px;z-index:7;flex-direction:column}
html body.design01 #rail button{width:68px;height:60px;min-height:60px;padding:7px 4px;gap:5px;border:1px solid #3b5065;border-radius:12px;background:rgba(13,21,32,.92);font-size:12px;letter-spacing:.02em;color:#c3d1df;transition:background .15s,border-color .15s}
html body.design01 #rail button.on{background:#28435a;border-color:#b6d5ed;color:#fff;box-shadow:inset 3px 0 #bdddf3}
html body.design01 #rail button:hover{background:#23394d;border-color:#b6d5ed}
html body.design01 #rail button .ico{width:21px;height:21px;flex:none}
html body.design01:not(.mobile).ctlOpen #ctl{left:98px;bottom:18px;top:auto;width:min(560px,calc(100vw - 122px));max-width:none;max-height:calc(100dvh - 150px);min-height:0;display:flex} /* ★ 2026-09-25 中が少ない段で下に空きが残っていた → 高さは中身に合わせる */
html body.design01 #ctl{padding:24px;gap:24px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:18px;box-shadow:0 12px 42px #0005;color:var(--ui-ink);scrollbar-width:thin;scrollbar-color:#607991 transparent;scroll-padding:24px;overscroll-behavior:contain}
html body.design01 #ctl > .sec{flex:none;gap:18px;min-width:0}
html body.design01 #ctl .row{gap:10px;align-items:center;flex-wrap:wrap;min-width:0;max-width:100%}
html body.design01 #ctl .row:empty{display:none}
html body.design01 #ctl .row > .row{flex-basis:100%}
html body.design01 #ctl .lab{width:100%;height:auto;min-height:0;margin:0;color:var(--ui-muted);font-size:13px!important;font-weight:500;line-height:1.65;letter-spacing:.035em;white-space:normal}
html body.design01 #ctl .z{font-size:12px!important;line-height:1.65;letter-spacing:.025em;color:var(--ui-muted)}
html body.design01 #ctl button:not(.qbtn),html body.design01 #ctl select,html body.design01 #ctl input:not([type=checkbox]):not([type=range]){box-sizing:border-box;min-height:44px;height:auto;padding:10px 13px;font-size:14px!important;line-height:1.5;border-radius:9px;max-width:100%;color:var(--ui-ink);background:var(--ui-field);border:1px solid #42566b;letter-spacing:.01em}
html body.design01 #ctl button:not(.qbtn){white-space:normal;overflow-wrap:anywhere;flex-shrink:0}
html body.design01 #ctl button.on:not(.qbtn){background:#2b465c;border-color:#98c2de;color:#fff}
html body.design01 #ctl button:hover:not(.qbtn){background:#2e4358;border-color:#a2bfd8}
html body.design01 #ctl :is(button,select,input):focus-visible,html body.design01 #rail button:focus-visible{outline:2px solid #c5e6ff;outline-offset:3px}
html body.design01 #ctl label.ck{font-size:14px!important;line-height:1.6;letter-spacing:.01em;min-height:44px;box-sizing:border-box;padding:8px 10px;display:inline-flex;align-items:center;gap:9px;white-space:normal;color:var(--ui-ink);border-radius:8px;max-width:100%}
html body.design01 #ctl label.ck:hover{background:#223245}
html body.design01 #ctl input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;margin:0;accent-color:#aacfe9}
html body.design01 #ctl input[type=range]{flex:1 1 100%;width:100%;min-width:0;height:38px;margin:0;accent-color:#adcde5}
html body.design01 #clockRow{padding-bottom:16px;border-bottom:1px solid var(--ui-line)}
html body.design01 #clockRow .t{font-size:23px;font-weight:400;letter-spacing:.04em}
html body.design01 #clockRow .d{font-size:13px!important}
html body.design01 #dtRow .lab{width:auto;margin-right:auto}
html body.design01 #dtRow #dt{padding:10px 12px;min-height:48px;font-size:15px!important;line-height:1.5}
html body.design01 #dtRow #dtEra{padding:10px 13px;font-size:14px!important}
html body.design01 #dtRow #dtz{height:auto}
html body.design01 #speedRow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
html body.design01 #speedRow > .lab{grid-column:1;width:auto;height:auto;line-height:1.6}
html body.design01 #speedRow > .qbtn{grid-column:2;justify-self:start}
html body.design01 #speedRow #speedSel{grid-column:1 / 3;width:100%;padding:10px 13px;line-height:1.5}
html body.design01 #speedRow #bPause{grid-column:3;padding:10px 16px}
html body.design01 #speedRow #revCk{grid-column:1 / 3;width:auto;height:auto;line-height:1.6}
html body.design01 #speedRow #bDayNight{grid-column:3;padding:10px 13px}
html body.design01 #secDraw > .row,html body.design01 #secText > .row:not(#consRow){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html body.design01 #secDraw > .row > .lab{grid-column:1 / -1}
html body.design01 #secDraw label.ck{padding:10px 12px;border:1px solid #2e4256;background:#172434}
html body.design01 #secDraw label.ck:has(input:checked){border-color:#63829e;background:#213649}
html body.design01 #secDraw > .row > :is(.row,div){grid-column:1 / -1}
html body.design01 #secText > .row:not(#consRow) label.ck{border-bottom:1px solid #2e4256;border-radius:0}
html body.design01 #consRow #consLab{flex-basis:100%}
html body.design01 #consRow #consMode{flex-basis:100%;width:100%}
html body.design01 #consRow #cArtTmp{white-space:normal}
html body.design01 #secSky > .row:has(#bDayStar) label.ck{flex:1 1 210px}
html body.design01 #secShare{padding-top:18px;border-top:1px solid var(--ui-line)}
html body.design01 #ctl :is(#spot,#scopeSel,#lpSel,#histSel,#cuSel){width:100%;flex:1 1 100%}
html body.design01 #ctl #qList{position:relative;top:auto;left:auto;right:auto;max-height:260px;width:100%;box-sizing:border-box}
html body.design01 #qList .qi{font-size:14px;line-height:1.65;white-space:normal;overflow-wrap:anywhere}
html body.design01 #secEvents .evTabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--ui-line);position:sticky;top:-24px;z-index:4;background:#0d1520}
html body.design01 #tonight{font-size:14px!important;line-height:1.8}
html body.design01 #tonight .t{font-size:14px!important}
html body.design01 #tonight .ev{padding:12px 0}
html body.design01 #histBox{max-height:none!important;padding:14px!important;font-size:14px!important}
html body.design01 #ctl #anyRow{width:100%;gap:10px}
html body.design01 #ctl #anyQ{width:100%;flex-basis:100%}
/* 選択中の長い名前は同じ文字を折り返して描く。入力は既存の select のまま。 */
html body.design01 #ctl .uiSelect{position:relative;display:grid;flex:1 1 100%;width:100%;min-width:0;max-width:100%;align-items:stretch}
html body.design01 #ctl .uiSelect > select{position:absolute;inset:0;width:100%;height:100%!important;min-height:44px;opacity:0;cursor:pointer;z-index:1}
html body.design01 #ctl .uiSelectText{display:block;pointer-events:none;min-height:44px;box-sizing:border-box;padding:11px 37px 11px 13px;border:1px solid #42566b;border-radius:9px;background:var(--ui-field);color:var(--ui-ink);font-size:14px;line-height:1.6;letter-spacing:.01em;overflow-wrap:anywhere}
html body.design01 #ctl .uiSelect::after{content:'';position:absolute;right:15px;top:19px;width:6px;height:6px;border-right:1.5px solid #b9cfdf;border-bottom:1.5px solid #b9cfdf;transform:rotate(45deg);pointer-events:none}
html body.design01 #ctl .uiSelect:focus-within .uiSelectText{outline:2px solid #c5e6ff;outline-offset:3px}
/* ページ共通の説明ボタン。行の高さや flex の縮小から独立させる。 */
html body.design01{--help-hit:32px}
html body.design01 .qbtn,html body.design01 #ctl .qbtn,html body.design01.mobile #ctl .qbtn{box-sizing:border-box!important;position:relative;isolation:isolate;flex:0 0 var(--help-hit)!important;width:var(--help-hit)!important;min-width:var(--help-hit)!important;max-width:var(--help-hit)!important;height:var(--help-hit)!important;min-height:var(--help-hit)!important;max-height:var(--help-hit)!important;aspect-ratio:1;border:0!important;border-radius:50%!important;padding:0!important;margin:0 0 0 6px!important;display:inline-flex;align-items:center;justify-content:center;font:500 14px/1 -apple-system,BlinkMacSystemFont,sans-serif!important;letter-spacing:0!important;background:transparent!important;box-shadow:none!important;color:#d2e4f2;vertical-align:middle}
/* 丸は決定済みの28px。周りの透明な余白までボタンとして押せるようにする。 */
html body.design01 .qbtn::before{content:'';position:absolute;z-index:-1;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:28px;height:28px;border:1px solid #748fa9;border-radius:50%;background:#213448}
html body.design01.mobile{--help-hit:44px}
html body.design01 #helpBox{font-size:14px;line-height:1.8;background:var(--ui-surface)}
html body.design01:not(.mobile) #helpBox{width:min(690px,calc(100vw - 692px))}
html body.design01 #helpBox h4{font-size:15px}
html body.design01 #ctl{animation:uiPanelIn .16s ease-out}
@keyframes uiPanelIn{from{opacity:.5;translate:0 5px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){html body.design01 #ctl,html body.design01 #rail button{animation:none;transition:none}}
@media(max-width:760px),(pointer:coarse) and (hover:none){
html body.design01 #head{left:16px;top:10px;padding:6px 0;right:16px}
html body.design01 #head b{font-size:15px}
html body.design01 #hdInfo{position:static!important;margin-top:9px;gap:2px;font-size:12px;min-height:42px}
html body.design01 #hdInfo #hdP{font-size:11px;max-width:100%}
html body.design01 #rail{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));flex-direction:row;gap:5px}
html body.design01 #rail button{width:auto;min-width:0;flex:1;height:56px;min-height:56px;font-size:10.5px;padding:5px 2px;border-radius:10px}
html body.design01 #rail button .ico{width:19px;height:19px}
/* ★ 2026-09-28 スマホは「かざす」を足して 7 つ（幅 393 で 1 つ 48px）。字は 2 行まで折り返す。
入らなければ index.html の fitRailLabels が字を小さくし（最小 8px）、それでも入らない長い 1 語だけ「-」で区切る */
html body.design01.mobile #rail button{gap:2px;padding:4px 2px}
html body.design01.mobile #rail button span{display:block;width:100%;white-space:normal;line-height:1.1;text-align:center;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal;word-break:keep-all} /* keep-all：日本語・中国語・韓国語を語の途中（出来｜事）で折らない */
html body.design01.mobile #ctl{left:8px;right:8px;bottom:calc(76px + env(safe-area-inset-bottom,0px));top:auto;width:auto;min-height:0;max-height:calc(100dvh - 192px - env(safe-area-inset-bottom,0px));padding:16px;gap:22px;border-radius:16px;border:1px solid var(--ui-line);z-index:8;transform:none;display:none;transition:none;scroll-padding:16px}
html body.design01.mobile.mbOpen #ctl{display:flex}
html body.design01.mobile #grpTabs{display:none}
html body.design01.mobile #mbClose{display:none!important} /* ★ 2026-09-28 スマホ：パネルの中の「とじる ×」（1 行＋すき間 約 60px）は消す。閉じるのは同じボタンをもう一度・空を押す */
html body.design01.mobile #ctl label.ck{word-break:keep-all;overflow-wrap:anywhere} /* 2026-09-28「軽くする（…出さな / い）」と語の途中で折れていた。日本語は「・」「（」やすき間の所で折る */
html body.design01.mobile #ctl #dtRow #bNow{white-space:nowrap;padding-left:10px;padding-right:10px;flex:none} /* 「今に戻 / す」と言葉の途中で折れていた（#ctl button の「折り返してよい」より強く書く） */
html body.design01 #ctl > .sec{gap:16px}
html body.design01 #secDraw > .row,html body.design01 #secText > .row:not(#consRow){grid-template-columns:minmax(0,1fr)}
html body.design01 #ctl button:not(.qbtn){flex-shrink:1}
html body.design01 #ctl #dtRow #dt{font-size:14px!important;min-width:0;width:100%}
html body.design01 #ctl #speedRow{grid-template-columns:auto 1fr auto;gap:10px}
html body.design01 #ctl .evTabs button{padding:10px 8px}
html body.design01 #secEvents .evTabs{top:-16px}
html body.design01 #ctl #anyQ{font-size:13px!important}
html body.design01 #ctl .uiSelectText{font-size:14px}
html body.design01 #helpBox{max-width:calc(100vw - 20px);width:calc(100vw - 20px)}
}
html body.design01 #auWrap{grid-column:1 / -1;flex-wrap:wrap;gap:10px!important;white-space:normal!important}
html body.design01 #auWrap #cAuroraLab{flex:none;white-space:nowrap}
html body.design01 #auWrap #auLv{flex:1 1 150px!important;max-width:260px}
/* ★ 2026-10-01（見まわりで見つけた：横持ちのスマホで、閉じているはずのパネルの箱が上の帯だけ出して下のボタンにかぶさり、押せなかった）
スマホの決まり @media(max-width:760px) を、横持ちのスマホとタブレット（指で触る・マウスが無い＝ mobile.js の見分けと同じ）にも効かせる */
/* ★ 2026-09-27 携帯ではオーロラの選び箱が細く、「ふつう（よくある夜）」が「ふつう（よくある」で切れていた → 選び箱だけ 2 行目に横いっぱい */
@media(max-width:760px),(pointer:coarse) and (hover:none){
html body.design01.mobile #auWrap #auLv{flex:1 1 100%!important;max-width:100%;order:3}
}
html body.design01 #secDraw > .row > label.ck:is(:has(#cAst),:has(#cAstAll)){grid-column:1 / -1}
@media(max-width:760px),(pointer:coarse) and (hover:none){
html body.design01.mobile #head{display:block;height:auto;align-items:initial;justify-content:initial}
html body.design01.mobile #mbClose{position:static}
}
@media(max-width:760px),(pointer:coarse) and (hover:none){
html body.design01.mobile #right{top:calc(108px + env(safe-area-inset-top,0px))}
}
html body.design01 #ctl .uiInputHint{display:block;flex:1 1 100%;font-size:12px;line-height:1.7;color:var(--ui-muted);overflow-wrap:anywhere;max-width:100%}
html body.design01 #ctl #anyQ::placeholder{color:transparent}
html body.design01 #secEvents button > span{min-width:0;white-space:normal;overflow-wrap:anywhere}
html body.design01 #secEvents button{min-height:44px!important;height:auto!important}
html body.design01 #consRow #consLab{flex-basis:auto;width:auto}
@media(max-width:760px),(pointer:coarse) and (hover:none){
html body.design01.mobile #topRow{display:flex;flex-wrap:nowrap;gap:6px;align-items:stretch;width:100%}
html body.design01.mobile #topRow > .panel{flex:1 1 auto;width:auto;min-width:min-content;max-width:100%;box-sizing:border-box;justify-content:center;padding:0 8px}
html body.design01.mobile #topRow :is(button,select,summary){max-width:100%;box-sizing:border-box;font-size:12px;white-space:normal;letter-spacing:.025em;word-break:keep-all;overflow-wrap:normal;line-height:1.35}
html body.design01.mobile #topRow > #langBox{flex:0 0 auto} /* 地球の印と「JA」は縮めない（縮めると字がはみ出した・幅 320 で実測） */
}
@media(max-width:760px),(pointer:coarse) and (hover:none){
html body.design01.mobile:not(.mbOpen) #topRow{display:none!important}
/* 開いているあいだは、右の列のうち 4 つのボタンだけを出す（前の決まりは右の列ごと隠していた） */
html body.design01.mobile.mbOpen #right{display:block!important}
html body.design01.mobile.mbOpen #right > :not(#topRow){display:none!important}
/* 下のパネルは 4 つのボタンにかぶらない高さまで（題字 108 ＋ ボタン 1 段 46 ＋ すき間。2026-09-27 に 2 段 94 → 1 段） */
html body.design01.mobile.mbOpen #ctl{max-height:calc(100dvh - 244px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))} /* 2026-09-28 パネルの下端が 58px 下がったので 302 → 244（上端はそのまま） */
}
/* ★ 2026-09-26 携帯のお知らせの札（#mbNote・「動きがカクカクするときは…」など）が、下のタイルの列に重なって字を隠していた
（タイルの列は design-01 で携帯にも足した）→ タイルの列の上に出す（パネルと同じ高さ） */
@media(max-width:760px),(pointer:coarse) and (hover:none){
html body.design01.mobile #mbNote{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
html body.design01.mobile.mbGyroOn #mbNote{bottom:calc(128px + env(safe-area-inset-bottom,0px))} /* かざす中は右下の「太陽に合わせる」の上 */
html body.design01.mobile #info{margin-bottom:80px}
}
/* パネルの外へ出る検索候補と使い方にも、同じ押す面を確保する。 */
html body.design01 #qList .qi{box-sizing:border-box;min-height:32px;align-items:center}
html body.design01 #onbSheet :is(button,label.ck){min-height:32px;box-sizing:border-box;align-items:center}
html body.design01.mobile #qList .qi,html body.design01.mobile #onbSheet :is(button,label.ck){min-height:44px}
html body.design01.mobile #ctl input[type=range]{height:44px}
/* 携帯は空を主役にする。枠と余白を小さくしても指の当たりは44pxを保つ。 */
html body.design01.mobile #rail{left:max(4px,env(safe-area-inset-left));right:max(4px,env(safe-area-inset-right));bottom:calc(4px + env(safe-area-inset-bottom));flex-direction:row;gap:2px;justify-content:center;overflow-x:visible;scrollbar-width:none;max-width:100%;padding:2px 0}
html body.design01.mobile #rail button{flex:1 1 0;max-width:68px;min-width:44px;height:44px;min-height:44px;padding:2px 0;gap:1px;border-radius:8px;font-size:10px;box-shadow:none}
html body.design01.mobile #rail button .ico{width:16px;height:16px}
html body.design01.mobile #rail button span{white-space:normal;word-break:keep-all;overflow-wrap:normal;hyphens:none!important;-webkit-hyphens:none!important}
html body.design01.mobile #ctl,html body.design01.mobile.mbOpen #ctl{left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));bottom:calc(56px + env(safe-area-inset-bottom));top:auto;width:auto;padding:10px 12px;gap:12px;max-height:calc(100dvh - 176px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:12px;scroll-padding:58px 0 12px;touch-action:pan-y}
html body.design01.mobile #ctl > .sec{gap:10px}
html body.design01.mobile #ctl .row{gap:6px}
html body.design01.mobile #ctl .lab{width:auto;flex:0 0 auto;font-size:12px!important;word-break:keep-all;overflow-wrap:normal}
/* 2026-10-01 夜：上の決まり（短い見出しを 1 行に保つ）が長い説明の文にも効いて、パネルの右へ 1 行のまま伸びて切れていた（西暦 2 年の空で幅 978px）。説明の文だけは幅いっぱいで折り返す */
html body.design01.mobile #ctl :is(#precNote,#pmNote,#lpNote,#satNote,#cuNote){width:100%;flex:1 1 100%;min-width:0;word-break:normal;overflow-wrap:anywhere}
html body.design01.mobile #ctl button:not(.qbtn){padding:6px 9px;font-size:13px!important;line-height:1.4;word-break:keep-all;overflow-wrap:normal;min-width:44px;min-height:44px}
html body.design01.mobile #ctl label.ck{padding:4px 6px;font-size:13px!important;word-break:keep-all;overflow-wrap:normal}
html body.design01.mobile #ctl :is(select,input:not([type=checkbox]):not([type=range]),textarea),html body.design01.mobile :is(input:not([type=checkbox]):not([type=range]),select,textarea),html body.design01.mobile #ctl :is(#dt,#dtEra,#anyQ){font-size:16px!important;min-height:44px;box-sizing:border-box}
html body.design01.mobile #ctl .uiSelect{width:auto;flex:1 1 160px;max-width:100%}
html body.design01.mobile #ctl .uiSelectText{font-size:14px;padding:10px 28px 10px 9px;word-break:keep-all;overflow-wrap:normal}
html body.design01.mobile #ctl :is(#spot,#scopeSel,#lpSel,#histSel,#cuSel){flex-basis:auto;width:auto}
html body.design01.mobile #ctl #speedRow{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px}
html body.design01.mobile #speedRow > *{grid-area:auto!important}
html body.design01.mobile #speedRow > .lab{flex:none}
html body.design01.mobile #speedRow #speedSel{flex:1 1 128px;width:auto!important;min-width:128px;padding:0 6px;height:36px!important;min-height:36px!important} /* 128px＝日本語の「1 秒で 10 分」が切れない幅。入らない言葉・狭い画面では、巻き戻し・昼へが 2 行目に下りる */
html body.design01.mobile #speedRow #bPause{flex:none;padding:0 8px;height:36px!important;min-height:36px!important}
html body.design01.mobile #speedRow > .qbtn{flex:none;margin:0!important}
html body.design01.mobile #speedRow #revCk{flex:none;white-space:nowrap;padding:0!important;min-height:36px!important}
html body.design01.mobile #speedRow #bDayNight{flex:none;margin-left:auto;padding:0 8px;height:36px!important;min-height:36px!important}
html body.design01.mobile #ctl #dtRow{display:flex!important;flex-wrap:wrap!important;gap:5px;align-items:center}
html body.design01.mobile #ctl #dtRow > *{height:36px!important;min-height:36px!important}
html body.design01.mobile #ctl #dtRow #bNow{order:1;flex:none;padding:0 5px}
html body.design01.mobile #ctl #dtRow #dtEra{order:2;flex:none;width:54px;padding:0 4px}
html body.design01.mobile #ctl #dtRow #dtShow{order:3;flex:0 0 auto!important;min-width:0;width:auto;padding:0 8px;font-size:14px!important} /* 字の幅だけ（広げない）。入らないときは時：分が 2 行目へ */
html body.design01.mobile #ctl #dtRow #dtTm{order:4;flex:none;margin-left:auto}
html body.design01.mobile #ctl #dtRow #dtTm select{height:36px!important;min-height:36px!important;width:45px;padding:0 1px 0 5px;font-size:16px!important}
html body.design01.mobile #ctl #topRow{position:sticky;top:-10px;z-index:6;display:flex!important;flex:none;flex-wrap:nowrap;gap:2px;align-items:center;width:calc(100% + 24px);max-width:none;margin:-10px -12px 0;padding:0 6px;box-sizing:border-box;background:#0d1520;border-bottom:1px solid #35485c;overflow-x:auto;scrollbar-width:thin}
html body.design01.mobile #ctl #topRow > .panel{position:static;flex:1 0 auto;min-width:44px;min-height:44px;margin:0;padding:0 4px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
html body.design01.mobile #ctl #topRow :is(button,select,summary){padding:0 3px;min-height:44px;white-space:nowrap;font-size:11px!important;letter-spacing:0;background:none;border:0}
html body.design01.mobile #ctl #topRow #langSel{font-size:12px!important;min-width:44px}
html body.design01.mobile #ctl #topRow #srcBox[open]{position:fixed;left:8px;right:8px;top:calc(100px + env(safe-area-inset-top));max-height:calc(100dvh - 172px);overflow:auto;background:#0d1520;padding:0 12px 12px;border:1px solid #526b84;border-radius:10px}
html body.design01.mobile #ctl #topRow #srcBox[open] summary{position:sticky;top:0;min-width:44px;background:#0d1520}
html body.design01.mobile #secEvents .evTabs{top:34px;padding-bottom:6px;gap:6px}
html body.design01.mobile #mbNote{bottom:calc(60px + env(safe-area-inset-bottom))}
html body.design01.mobile #mbSun{bottom:calc(56px + env(safe-area-inset-bottom))}
html body.design01.mobile #info{margin-bottom:56px}
html body.design01.mobile :is(button,a,summary,label.ck){touch-action:manipulation}
@media(max-height:480px){
html body.design01.mobile #ctl,html body.design01.mobile.mbOpen #ctl{left:8px;right:8px;max-width:480px;max-height:calc(100dvh - 72px);z-index:10}
html body.design01.mobile #head{pointer-events:none}
}
/* 短い表示項目は文字の幅で並べる。説明の長い項目と決定済みの小惑星2行は一段ずつ。 */
html body.design01.mobile #secDraw > .row:first-child,
html body.design01.mobile #secText > .row:not(#consRow){display:flex;flex-wrap:wrap;gap:6px}
html body.design01.mobile #secDraw > .row:first-child > .lab,
html body.design01.mobile #secText > .row:not(#consRow) > .lab{flex-basis:100%}
html body.design01.mobile #secDraw > .row:first-child > label.ck,
html body.design01.mobile #secText > .row:not(#consRow) > label.ck{flex:0 1 auto;min-width:44px}
html body.design01.mobile #secDraw > .row:first-child > label.ck:is(.mb-only,:has(#cAst),:has(#cAstAll)),
html body.design01.mobile #secDraw > .row:first-child > div{flex-basis:100%;width:100%}
/* 不透明な携帯パネルでは、固定の出典を親のぼかし領域に閉じ込めない。 */
html body.design01.mobile #ctl,html body.design01.mobile #ctl #topRow > .panel{backdrop-filter:none;-webkit-backdrop-filter:none}
@media(max-width:340px){html body.design01.mobile #rail{gap:0}}
/* 長い選択と別の見出しには、それぞれ一段を確保する。 */
html body.design01.mobile #ctl .row:has(> .uiSelect > #lpSel){width:100%;min-width:0;flex-wrap:wrap}
html body.design01.mobile #ctl .uiSelect:has(> #lpSel){flex:1 1 100%;width:100%}
html body.design01.mobile #ctl #guideLab{flex-basis:100%;margin-top:10px}
html body.design01.mobile #ctl #consRow > .lab{flex-basis:100%}
html body.design01.mobile #tonight{word-break:keep-all;overflow-wrap:normal}
/* 長い強さの選択も、天体の段の幅で折り返す。 */
html body.design01.mobile #auWrap{max-width:100%;flex-wrap:wrap}
html body.design01.mobile #auWrap #auLv{max-width:100%;box-sizing:border-box}
@media(max-width:760px),(pointer:coarse) and (hover:none){
html body.design01.mobile #ctl{padding:10px 12px!important;gap:12px!important}
html body.design01.mobile #ctl > .sec{gap:8px!important}
html body.design01.mobile #ctl .row{row-gap:6px!important}
html body.design01.mobile #ctl :is(button,select,input:not([type=checkbox]):not([type=range]),summary):not(.qbtn){height:36px!important;min-height:36px!important;padding-top:0!important;padding-bottom:0!important;box-sizing:border-box}
html body.design01.mobile #ctl label.ck{min-height:36px!important;padding-top:0!important;padding-bottom:0!important}
html body.design01.mobile #ctl #dtTm select{-webkit-appearance:none;appearance:none;width:42px!important;padding:0 4px!important;text-align:center;text-align-last:center}
html body.design01.mobile #topRow :is(button,select,summary){min-height:36px!important}
html body.design01.mobile #ctl select{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 選び箱の字は 1 行（長いときは … で切る）。高さ 36px の中で 2 行に折れて、はみ出していた */
}
/* 「どの星へ行く」の見出しと、地球・月・火星のボタンを 1 行に（2026-09-29） */
@media(max-width:760px),(pointer:coarse) and (hover:none){
html body.design01.mobile #mvBodyRow{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px}
html body.design01.mobile #mvBodyRow > .lab{flex:none;width:auto!important;margin:0!important}
html body.design01.mobile #mvBodyRow #mvBody{flex:1 1 auto}
}
@media(max-width:760px),(pointer:coarse) and (hover:none){
html body.design01.mobile #ctl #dtRow #dtEra{-webkit-appearance:none;appearance:none;width:46px!important;padding:0 4px!important;text-align:center;text-align-last:center} /* 「A‥」と切れていた（Chrome の矢印が大きい）→ 時：分と同じ矢印なし */
}
@media(max-width:760px),(pointer:coarse) and (hover:none){
html body.design01.mobile{--help-hit:36px}
/* 選び箱（字を折り返して描く自前の箱）も 36px に */
html body.design01.mobile #ctl .uiSelect > select{min-height:36px!important}
html body.design01.mobile #ctl .uiSelectText{min-height:36px!important;padding:7px 30px 7px 10px!important;line-height:1.4!important;font-size:14px!important}
html body.design01.mobile #ctl .uiSelect::after{top:14px;right:12px}
/* ---- 見方 ---- */
/* 見えている広さ：見出しとつまみを 1 行 */
html body.design01.mobile #ctl .row:has(> #skyZoomR){display:flex!important;flex-wrap:nowrap;align-items:center;gap:10px}
html body.design01.mobile #ctl .row:has(> #skyZoomR) > .lab{flex:none;white-space:nowrap;font-size:12px!important}
html body.design01.mobile #ctl #skyZoomR{flex:1 1 auto;min-width:0;height:32px!important;margin:0}
/* 星の見え方：2 つのチェックを見出しの横に並べる（字下げしない） */
html body.design01.mobile #secSky > .row:has(#bDayStar){display:flex!important;flex-wrap:wrap;align-items:center;gap:0 12px}
html body.design01.mobile #secSky > .row:has(#bDayStar) label.ck{flex:none!important;padding:0!important;margin:0!important}
/* 街の光と見える星：見出し・?・選び箱を 1 行（入らなければ選び箱だけ下へ） */
html body.design01.mobile #ctl .row:has(> .uiSelect > #lpSel){flex-wrap:wrap!important;gap:6px 8px}
html body.design01.mobile #ctl .uiSelect:has(> #lpSel){flex:1 1 100%!important;width:100%!important} /* 選んだ字が長いので、選び箱だけ次の行（横に並べると右はしで切れた） */
/* さがす：見出し・?・入力欄を 1 行 */
html body.design01.mobile #secFind > .row:first-child{display:flex!important;flex-wrap:nowrap;align-items:center;gap:8px}
html body.design01.mobile #secFind > .row:first-child > span:not(.lab){flex:1 1 auto!important;min-width:0}
html body.design01.mobile #secFind #q{height:36px!important;min-height:36px!important}
/* 種類からさがす：札を 32px に */
html body.design01.mobile #qCats{gap:5px!important}
html body.design01.mobile #qCats button{height:32px!important;min-height:32px!important;padding:0 10px!important;font-size:12.5px!important}
/* 人に見せる・星空ガイド：見出しの上のすき間をなくす */
html body.design01.mobile #ctl #guideLab{margin-top:4px!important}
/* ---- 出来事 ---- */
html body.design01.mobile #tonight{font-size:12.5px!important;line-height:1.55!important}
html body.design01.mobile #tonight .sec{margin-top:8px!important;padding-top:7px!important}
html body.design01.mobile #tonight .t{font-size:11.5px!important;margin-bottom:1px}
html body.design01.mobile #tonight .v{font-size:12.5px!important}
html body.design01.mobile #tonight .ev{padding:6px 0!important}
html body.design01.mobile #tonight .big{font-size:14px!important}
html body.design01.mobile #ctl #tonight :is(.go2,button),html body.design01.mobile #ctl #secEvents .go2{height:28px!important;min-height:28px!important;padding:0 10px!important;font-size:12px!important;vertical-align:middle;margin:2px 0 2px 6px}
html body.design01.mobile #secEvents .evTabs button{height:36px!important;min-height:36px!important}
/* ---- 天体 ---- */
html body.design01.mobile #secDraw > .row:first-child > .lab:first-child{display:none!important} /* パネルの名前と同じ「天体」は出さない */
html body.design01.mobile #secDraw label.ck{border:0!important;background:none!important;padding:0 2px!important;min-height:32px!important;border-radius:0!important}
html body.design01.mobile #secDraw > .row:first-child{gap:0 14px!important;align-items:center}
html body.design01.mobile #secDraw > .row:first-child > label.ck:is(.mb-only,:has(#cAst),:has(#cAstAll)),
html body.design01.mobile #secDraw > .row:first-child > div{flex-basis:auto!important;width:auto!important}
html body.design01.mobile #secDraw .lab{flex-basis:100%;margin:4px 0 0!important}
html body.design01.mobile #secDraw .qbtn{margin:0 0 0 -8px!important}
html body.design01.mobile #auWrap{gap:0 8px!important}
html body.design01.mobile #auWrap #auLv{flex:1 1 150px!important;height:36px!important;min-height:36px!important}
/* ---- 文字 ---- */
html body.design01.mobile #consRow > .lab{display:none!important} /* パネルの名前と同じ「文字」は出さない */
html body.design01.mobile #consRow{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 8px}
html body.design01.mobile #consRow #consMode{flex:1 1 120px;min-width:0}
html body.design01.mobile #secText > .row:not(#consRow) label.ck{border:0!important;padding:0 2px!important;min-height:32px!important}
html body.design01.mobile #secText > .row:not(#consRow){gap:0 14px!important}
}
@media(max-width:760px),(pointer:coarse) and (hover:none){
html body.design01.mobile #secSky > .row:has(#bDayStar){gap:0 10px!important;flex-wrap:wrap!important} /* 入るなら 1 行（日本語）、長い言葉は折り返す（ドイツ語で右へはみ出した） */
html body.design01.mobile #secSky > .row:has(#bDayStar) > .lab{flex:none;white-space:nowrap}
html body.design01.mobile #secSky > .row:has(#bDayStar) label.ck{font-size:13px!important;gap:5px!important;white-space:nowrap}
html body.design01.mobile #secShare{padding-top:8px!important}
}
@media(max-width:760px),(pointer:coarse) and (hover:none){
html body.design01.mobile #ctl :is(button,select,input:not([type=checkbox]):not([type=range]),label.ck,.uiSelectText,textarea):not(.qbtn):not(#topRow *):not(#tonight *):not(.go2){font-size:14px!important}
html body.design01.mobile #ctl :is(input,select)::placeholder{font-size:14px}
html body.design01.mobile #ctl .lab{font-size:12px!important}
html body.design01.mobile #ctl #topRow :is(button,select,summary){font-size:12px!important}
html body.design01.mobile{--help-hit:32px}
html body.design01.mobile .qbtn::before{width:22px!important;height:22px!important}
html body.design01.mobile .qbtn{font-size:12px!important}
/* 上の 4 つ：質問だけ白、ほかは出典と同じ青灰 */
html body.design01.mobile #ctl #topRow :is(#langSel,#onbHelp,#langBox summary,#langBox button){color:#5d83a6!important}
}
/* パソコンも同じ決まり：質問だけ白 */
html body.design01 #qaTop button{color:#edf3f8!important}
@media(max-width:760px),(pointer:coarse) and (hover:none){
/* 2026-09-30 月・火星の場所の一覧は 2 行（名前＋説明）のボタン。高さ 36px にそろえた決まりで説明がはみ出していた → この一覧だけ高さは中身まかせ */
html body.design01.mobile #ctl #mvSites button{height:auto!important;min-height:44px!important;padding:6px 10px!important}
}
/* ★ 2026-10-01 W9・W6 の見た目はパソコンでも要るので、スマホだけの mobile.css からここへ移した */
/* ★ 2026-10-01（W9）出来事の「カレンダーに入れる」：絵だけの小さなボタン（「その日時へ」の横に 1 行で収める） */
#tnBody .calAdd{display:inline-flex;align-items:center;justify-content:center;width:36px;min-width:36px!important;padding:0!important;margin-left:6px;vertical-align:middle}
#tnBody .calAdd .ico{width:18px;height:18px}
/* ★ 2026-10-01（W6）見たい物の一覧とさがすの ☆ */
#qList .qi .qStar{flex:none;margin-left:6px;font-style:normal;color:#e6c27a;font-size:16px;line-height:1;padding:2px 4px;cursor:pointer}
#watchList{display:flex;flex-direction:column;gap:8px;flex:1 1 100%;min-width:0}
#watchList .wItem{border:1px solid rgba(120,170,220,.18);border-radius:8px;padding:6px 8px}
#watchList .wItem.seen{opacity:.55}
#watchList .wItem.seen .wHead b{text-decoration:line-through}
#watchList .wHead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
#watchList .wSt{margin:1px 0}
#watchList .wBtns{margin-top:4px}
#watchList .wBtns{display:flex;gap:6px;flex-wrap:wrap}
#watchList .wBtns .wSeen[aria-pressed="true"]{border-color:#e8c185;color:#ffe9b8}