/* 吉田寮 3Dビューアー
   レイアウト（縦積み／スマホ横向きの左右分割）は高岡高校の校舎ビューアーと同じ。
   配色は検討用ビュー（preview.html）の緑灰を引き継ぐ。書体は端末のものだけを使い、外部からは読み込まない。 */
:root{
  --paper:#e8e7df;      /* 地の色 */
  --paper2:#f8f7f1;     /* 明るい地（ヘッダー） */
  --paper3:#f1f0e8;     /* 操作盤 */
  --ink:#242e2b;        /* 文字 */
  --ink2:#4f5d55;       /* 補足文字 */
  --ink3:#6c7a71;       /* 薄い補足文字 */
  --green:#335a49;      /* 強調（主ボタン、選択中） */
  --green2:#467967;     /* 枠線、リンク */
  --green3:#25443a;     /* 濃い緑（ホバー） */
  --focus:#e39f42;      /* フォーカス枠 */
  --line:rgba(36,46,43,.16);
  --line2:rgba(36,46,43,.30);
  --font-mincho:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --font-gothic:"Yu Gothic","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:var(--font-gothic);color:var(--ink);background:var(--paper)}
body{height:100dvh;display:flex;flex-direction:column}

/* 開いた直後の題字：全面を濃い木の色の幕で覆い、玄関の表札のように縦書きで組む。
   文字の大きさは画面の高さと幅の小さい方に合わせるので、PC・スマホの縦横どれでも5文字が収まる。
   幕は、要（画面下の中央の少し外）から放射状に切り分けた扇面（.blade）の集まり。どの扇面も同じ題字を持ち、自分の角度の分だけを見せている。
   開くときは要を軸に、左の扇面は左下へ、右の扇面は右下へ回って重なり、扇を畳むように消える。位置と角度は viewer.js の buildFan が決める。
   幕は不透明（扇面の数だけ背景をぼかすと、スマホでは重い）。 */
#splash{--r:900px;position:fixed;inset:0;z-index:10;overflow:hidden;color:#f3efe4;cursor:pointer;-webkit-user-select:none;user-select:none;transition:visibility 0s .85s}
#splash.lift{visibility:hidden;pointer-events:none}
#splash:not(.lift)~main #loading{visibility:hidden} /* 読み込みの進み具合は題字の下に出すので、奥の箱は隠す */
.splashBase{position:absolute;inset:0;background:radial-gradient(circle var(--r) at 50% calc(100% + 40px),#2d2722 0,#1c1815 100%)} /* 要のあたりがほのかに明るい */
.splashFace{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4vh;padding:2vh 0}
.blade{position:absolute;width:0;height:0;transform-origin:0 0;transition:transform .85s cubic-bezier(.3,0,.15,1);will-change:transform} /* 押した瞬間から動いて見えるよう、出だしを溜めない */
.bladeFace{position:absolute;overflow:hidden;background:radial-gradient(circle var(--r) at center,#2d2722 0,#1c1815 100%)}
.bladeFace::after{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .25s} /* 畳むあいだ、1枚おきに陰を入れて折り目に見せる */
#splash.lift .blade:nth-child(even) .bladeFace::after{opacity:.26}
.splashTitle{display:flex;flex-direction:row-reverse;gap:min(3.2vh,4.4vw);gap:min(3.2svh,4.4vw);font-family:var(--font-mincho);font-weight:700;line-height:1}
.splashTitle>span{writing-mode:vertical-rl;white-space:nowrap}
.splashName{font-size:min(15vh,20vw);font-size:min(15svh,20vw);letter-spacing:.1em;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.splashLead{align-self:flex-start;font-size:min(4.4vh,6vw);font-size:min(4.4svh,6vw);font-weight:600;letter-spacing:.34em;padding-top:.3em}
.splashLead .tcy{-webkit-text-combine:horizontal;text-combine-upright:all;letter-spacing:0;margin-bottom:.34em} /* 「3D」は縦書きの中で横に並べる */
/* 題字の画面で舞う葉：.leaf が上から下へ落ち（横へも流れる）、中の .leafSway が左右に揺れながら回る。値は viewer.js が葉ごとに決める */
.leaves{position:absolute;inset:0;overflow:hidden;pointer-events:none;transition:opacity .3s}
#splash.lift .leaves{opacity:0}
.leaf{position:absolute;left:var(--x);top:-8%;width:var(--size);animation:leafFall var(--fall) linear var(--delay) infinite}
.leafSway{display:block;animation:leafSway var(--sway) ease-in-out infinite alternate}
.leaf svg{display:block;width:100%;height:auto;opacity:.92;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));animation:leafTurn var(--fall) linear var(--delay) infinite}
@keyframes leafFall{to{transform:translate(var(--drift),118vh)}}
@keyframes leafSway{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
@keyframes leafTurn{to{transform:rotate(var(--turn))}}
@media(prefers-reduced-motion:reduce){.leaves{display:none}}
/* 題字の画面の黒猫：左下に座って、舞い落ちる葉を見上げている。尾がゆっくり揺れ、たまに耳が動く。扇が開くと葉と一緒に消える */
.cat{position:absolute;left:max(18px,9vw);bottom:max(16px,5vh);width:clamp(120px,19vh,230px);height:auto;z-index:1;pointer-events:none;filter:drop-shadow(0 0 .8px rgba(240,228,204,.95)) drop-shadow(0 0 .8px rgba(240,228,204,.8)) drop-shadow(0 0 7px rgba(240,228,204,.22)) drop-shadow(0 6px 10px rgba(0,0,0,.55));transition:opacity .3s} /* 暗い地に黒猫なので、外形だけを細く明るく縁取る（夕明かりが縁に当たったように） */ /* 暗い地に黒猫なので、輪郭にほのかな明るさを添えて、いることが分かるようにする */
#splash.lift .cat{opacity:0}
/* 歩く猫：座っている猫（.cat）と同じ位置に重ねてあり、ふだんは透明。.walk が付くと座った猫と入れ替わって、右へ歩き出す。
   歩く速さは猫の大きさ（--cw）が基準（1秒に体の長さの約1.2倍）。どの画面でも、足の動きと進み方が合う。
   足は付け根（上端）を中心に、対角の2本ずつ交互に振る。体はわずかに上下し、頭も小さく揺れる。扇が開くと、少し歩いてから消える */
.catWalk{--cw:clamp(130px,min(24vh,40vw),290px);position:absolute;left:max(18px,9vw);bottom:max(10px,3.6vh);width:var(--cw);height:auto;z-index:2;pointer-events:none;opacity:0;visibility:visible;filter:drop-shadow(0 0 .8px rgba(240,228,204,.95)) drop-shadow(0 0 .8px rgba(240,228,204,.8)) drop-shadow(0 0 7px rgba(240,228,204,.22)) drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.catWalk.walk{opacity:1;transition:opacity .25s;animation:catWalkOn 3.6s linear forwards}
#splash.lift .catWalk{opacity:0;transition:opacity .7s .6s}
.cat.gone{opacity:0;transition:opacity .25s}
.catWalk .leg{transform-box:fill-box;transform-origin:50% 8%}
.catWalk.walk .legA{animation:catLegA .45s ease-in-out infinite alternate}
.catWalk.walk .legB{animation:catLegB .45s ease-in-out infinite alternate}
.catWalk.walk .catWalkBody{animation:catBob .45s ease-in-out infinite alternate}
.catWalkHead{transform-box:fill-box;transform-origin:20% 85%}
.catWalk.walk .catWalkHead{animation:catNod .9s ease-in-out infinite alternate}
.catWalkTail{transform-origin:26px 48px;animation:catTail 1.3s ease-in-out infinite alternate}
@keyframes catWalkOn{to{transform:translateX(calc(var(--cw) * 4.4))}}
@keyframes catLegA{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
@keyframes catLegB{from{transform:rotate(20deg)}to{transform:rotate(-20deg)}}
@keyframes catBob{from{transform:translateY(0)}to{transform:translateY(-2.5px)}}
@keyframes catNod{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.catWalk{display:none}}
.catTail{transform-origin:22px 84px;animation:catTail 3.4s ease-in-out infinite alternate}
.catHead{transform-origin:76px 44px;animation:catHead 7s ease-in-out infinite}
@keyframes catTail{from{transform:rotate(-6deg)}to{transform:rotate(9deg)}}
@keyframes catHead{0%,78%,100%{transform:rotate(0)}84%{transform:rotate(-5deg)}92%{transform:rotate(3deg)}} /* たまに、葉を目で追う */
@media(prefers-reduced-motion:reduce){.catTail,.catHead{animation:none}}
@media(max-width:600px){.cat{left:10px;bottom:10px;width:clamp(78px,22vw,130px)}.catWalk{--cw:clamp(96px,27.5vw,162px);left:10px;bottom:6px}} /* スマホは猫を小さく。大きいと歩きが速くなり、扇が開く前に画面の外へ出てしまう */

/* 左の列：書の年記と落款のように、下寄せで竣工年、そのすぐ下に「試作版」の朱印 */
.splashTitle>.splashSide{writing-mode:horizontal-tb;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:min(2.2vh,3vw);gap:min(2.2svh,3vw)}
.splashSide>span{writing-mode:vertical-rl;white-space:nowrap}
.splashBuilt{font-size:min(3.8vh,5.2vw);font-size:min(3.8svh,5.2vw);font-weight:600;letter-spacing:.34em;opacity:.82}
/* 「現棟」は朱印（白文印）：朱で塗って文字を白抜きにし、内側に細い枠。手で押したように、ごくわずかに傾ける */
.splashNote{font-size:min(3.6vh,5vw);font-size:min(3.6svh,5vw);font-weight:700;letter-spacing:.16em;padding:.62em .5em .46em;color:#f6f0e2;background:#b23a2a;border-radius:4px;outline:1px solid rgba(246,240,226,.6);outline-offset:-4px;transform:rotate(-2.5deg);box-shadow:0 1px 6px rgba(0,0,0,.35)}
/* 題字の画面のクレジット：縦書きの書き物の署名のように、左に。左下は猫がいるので、上寄せ。明朝の縦書きで、枠は付けない。扇が開くと、題字と一緒に割れて消える */
.splashCredit{position:absolute;left:max(16px,3vw);top:max(18px,5vh);margin:0;writing-mode:vertical-rl;font-family:var(--font-mincho);font-size:clamp(13px,2.2vh,17px);font-weight:400;letter-spacing:.22em;color:rgba(243,239,228,.6);white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.splashStatus{margin:0;min-height:1.6em;font-size:14px;letter-spacing:.12em;color:rgba(243,239,228,.72)}
@media(prefers-reduced-motion:reduce){#splash,.blade,.bladeFace::after{transition:none}}

/* 収録用の表示（?rec）：3D画面だけを全面に。棟の名前・短冊・方位・クレジットは残す */
body.rec header,body.rec #panel,body.rec #dusk,body.rec #loading,body.rec #endSlip{display:none}
body.rec #credit{font-size:21px;padding:7px 18px;right:16px;bottom:14px;background:rgba(27,25,24,.58)} /* 動画では、クレジットを大きめに（SNS で縮小して見られても読めるように） */

/* ヘッダー */
header{display:flex;align-items:center;gap:12px;padding:12px 24px;background:var(--paper2);border-bottom:1px solid var(--line)}
header>div{margin-right:auto}
h1{font-family:var(--font-mincho);font-size:22px;font-weight:700;letter-spacing:.08em;margin:0;line-height:1.3}
header p{font-size:15px;margin:3px 0 0;color:var(--ink2)}
.proto{display:inline-block;vertical-align:middle;margin-left:4px;font-family:var(--font-gothic);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--green3);border:1.5px solid var(--green2);border-radius:999px;padding:2px 8px;line-height:1.2}

/* ボタン共通 */
button,select{font:inherit;font-size:18px;font-weight:700;min-height:52px;border:1.5px solid var(--line2);border-radius:12px;padding:9px 16px;background:#fffef8;color:var(--ink);cursor:pointer;box-shadow:0 2px 6px rgba(36,46,43,.06)}
/* スマホの長押しを「押し続け」として扱う：文字選択・コピーメニュー・拡大を出さない */
button,#panel,header,canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{touch-action:manipulation}
.pad button{touch-action:none} /* 移動ボタンは押し続け中の指の揺れでスクロールに切り替わらないようにする */
button:hover{background:#e4eee6;border-color:var(--green2)}
button:active{background:var(--paper)}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
button:disabled{opacity:.5;cursor:wait;box-shadow:none}
.primary{background:var(--green);color:#fff;border-color:var(--green)}
.primary:hover{background:var(--green3);border-color:var(--green3)}
button[aria-pressed=true]{background:var(--paper);border-color:var(--green);color:var(--ink)}
label{display:flex;align-items:center;gap:9px;font-size:17px;color:var(--ink2)}
input[type=checkbox]{width:22px;height:22px;accent-color:var(--green2)}

/* 3D表示領域 */
#stage{position:relative;flex:1;min-height:120px;overflow:hidden;background:#c9cfc6;container-type:size} /* 中の短冊の字の大きさを、3D画面の高さ（cqh）で決めるため */
canvas{display:block;width:100%;height:100%;touch-action:none}
#loading{position:absolute;inset:40% 10% auto;padding:18px;background:rgba(248,247,241,.95);border:1px solid var(--line);text-align:center;border-radius:12px;font-size:20px;font-family:var(--font-mincho);color:var(--ink);box-shadow:0 4px 14px rgba(36,46,43,.12)}
/* 棟の名前：3D上の位置に viewer.js が重ねる。入力は素通し */
#labelset{position:absolute;inset:0;overflow:hidden;pointer-events:none;transition:opacity .6s}
#labelset.off{opacity:0}
.label{position:absolute;white-space:nowrap;font-size:13px;padding:2px 8px;background:rgba(250,249,240,.9);border:1px solid #afbaad;border-radius:4px;transform:translate(-50%,-100%)}
#north{position:absolute;right:14px;top:12px;z-index:1;pointer-events:none;text-align:center;font-family:var(--font-mincho);font-size:15px;line-height:1.1;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 8px rgba(0,0,0,.45)} /* 昼の空でも夕暮れの空でも読める白抜き */
/* 夕暮れの切り替え：3D画面の左上。クレジットと同じ、画面に重ねる小さな札 */
#dusk{position:absolute;left:10px;top:10px;z-index:2;min-height:0;padding:6px 14px;border-radius:999px;font-family:var(--font-mincho);font-size:14px;font-weight:700;letter-spacing:.06em;color:#fff;background:rgba(27,25,24,.5);border:1.5px solid rgba(255,255,255,.55);box-shadow:none;text-shadow:0 1px 2px rgba(0,0,0,.7)}
#dusk:hover{background:rgba(27,25,24,.7);border-color:#fff}
#dusk[aria-pressed=true]{background:rgba(214,138,58,.82);border-color:rgba(255,232,190,.85);color:#fff}
/* 巡回中の棟の名前：近景で、画面の左に短冊のように縦書きで出す（viewer.js の tourCaption） */
#tourCaption{position:absolute;left:22px;top:0;bottom:0;margin:auto 0;height:fit-content;z-index:1;pointer-events:none;writing-mode:vertical-rl;white-space:nowrap;padding:1.1em .5em .8em;font-family:var(--font-mincho);font-size:clamp(20px,min(8vh,6vw),56px);font-size:clamp(18px,min(13cqh,6.5cqw),64px); /* 高さと幅の小さいほうで決める（スマホの縦向きで大きくなりすぎない） */font-weight:700;letter-spacing:.34em;line-height:1;color:var(--ink);background:rgba(250,249,240,.93);border:1px solid rgba(36,46,43,.35);border-radius:3px;box-shadow:0 3px 12px rgba(0,0,0,.22);opacity:0;transition:opacity .5s}
#tourCaption.show{opacity:1}
#north b{display:block;font-size:24px;line-height:1}
/* いいねの知らせ：3D画面の左下に短く出す */
#likeMsg{position:absolute;left:10px;bottom:10px;z-index:2;pointer-events:none;max-width:min(320px,calc(100% - 20px));padding:6px 12px;border-radius:10px;background:rgba(248,247,241,.96);color:var(--ink);border:1px solid var(--green2);font-size:13px;line-height:1.5;box-shadow:0 3px 10px rgba(36,46,43,.25);opacity:0;transition:opacity .25s}
#likeMsg.show{opacity:1}
/* クレジット：画面録画・キャプチャに必ず写るよう3D画面の中に常時表示。入力は素通し */
#credit{position:absolute;right:10px;bottom:8px;z-index:2;pointer-events:none;font-family:var(--font-mincho);font-size:13px;letter-spacing:.04em;color:#fff;background:rgba(27,25,24,.5);padding:5px 12px;border-radius:999px;text-shadow:0 1px 2px rgba(0,0,0,.7);white-space:nowrap}

/* 使い方・データについて */
:is(#helpText,#aboutText){position:absolute;inset:12px;max-width:650px;margin:auto;overflow:auto;background:#fffef8;padding:22px;border:1px solid var(--green2);border-radius:14px;box-shadow:0 8px 30px rgba(36,46,43,.28);font-size:18px;line-height:1.75;z-index:3}
:is(#helpText,#aboutText) h2{margin:0;font-size:22px;font-family:var(--font-mincho);font-weight:700;letter-spacing:.03em;border-bottom:1px solid var(--line);padding-bottom:6px}
:is(#helpText,#aboutText) h2:not(:first-child){margin-top:24px}
:is(#helpText,#aboutText) h2:focus{outline:none} /* 開いたときに読み上げ位置を見出しへ移すためのフォーカス。枠は出さない */
:is(#helpText,#aboutText) b{color:var(--green3)}
:is(#helpText,#aboutText) a{color:var(--green3);text-underline-offset:3px}
.sources{font-size:14px;line-height:1.7;color:var(--ink3)}
#aboutText blockquote{margin:14px 0;padding:4px 0 4px 16px;border-left:3px solid var(--green2);font-family:var(--font-mincho);line-height:1.95;color:var(--ink)}
.essayLink{font-family:var(--font-mincho);font-weight:700}
.productionNote{border-top:1px solid var(--line);margin-top:24px;padding-top:18px;font-size:15px;line-height:1.7;color:var(--ink2)}
:is(#helpText,#aboutText) .productionNote h2{font-size:18px;border-bottom:0;padding-bottom:0}

/* 操作盤 */
#panel{flex:none;padding:12px 20px max(10px,env(safe-area-inset-bottom));background:var(--paper3);border-top:1px solid var(--line);max-height:55dvh;overflow:auto}
.mainControls{display:flex;gap:10px;justify-content:center}
.mainControls>button{min-width:170px}
/* 見方の切替（鳥の目／人の目）：いまの見方をアイコンで示す。スマホではアイコンだけ */
.mainControls>#viewMode{min-width:0;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}
/* 見方の印：絵文字は端末ごとに絵柄が違い、鳥の絵文字は X（旧 Twitter）のボタンに見えてしまうので、明朝の一文字を丸で囲む */
.viewIcon{display:inline-flex;align-items:center;justify-content:center;width:1.75em;height:1.75em;border:1.5px solid currentColor;border-radius:50%;font-family:var(--font-mincho);font-size:17px;font-weight:700;line-height:1}
#status{font-size:17px;text-align:center;margin:8px 0;min-height:24px;color:var(--ink2)}
.pad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:830px;margin:auto}
.tip{margin:8px 0 0;font-size:15px;text-align:center;color:var(--ink3)}
.tourOptions{display:flex;justify-content:center;gap:20px}
.progressLabel{max-width:850px;margin:0 auto 10px}
input[type=range]{flex:1;min-width:0;height:32px;accent-color:var(--green2)}
[hidden]{display:none!important}
#help,#about,#share,#like{white-space:nowrap}
/* エッセイへの入口：PC ではヘッダーに、どの幅でも操作盤の下に（footer）置く */
.headLink{font-family:var(--font-mincho);font-size:17px;font-weight:700;color:var(--green3);text-underline-offset:5px;white-space:nowrap;padding:6px 4px}
@media(max-width:900px){.headLink{display:none}}
footer a{color:var(--green3);font-family:var(--font-mincho);font-weight:700;text-underline-offset:3px}
/* 巡回の最後の短冊：棟の名前の短冊（#tourCaption）と同じ場所・同じ紙。題名が長いので字は小さめ、二行に分ける。
   ふだんは透明で押せない。巡回が終わると .show が付いてふわっと現れ、リンクとして押せるようになる */
#endSlip{position:absolute;right:22px;top:0;bottom:0;margin:auto 0;height:fit-content;z-index:1;display:flex;flex-direction:row-reverse;gap:.5em;align-items:flex-start;padding:1em .55em .9em;font-family:var(--font-mincho);color:var(--ink);text-decoration:none;background:rgba(250,249,240,.93);border:1px solid rgba(36,46,43,.35);border-radius:3px;box-shadow:0 3px 12px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .9s .4s;transform-origin:50% -14px}
#endSlip.show{opacity:1;pointer-events:auto;animation:slipSway 2.6s ease-out .5s both}
/* 巡回の最後の短冊：玄関の右の壁の前に、表札と並べて吊るす。上に細い紐。現れるときに、風に揺れるように一度だけ揺れて止まる */
#endSlip::before{content:"";position:absolute;left:50%;top:-14px;width:1px;height:14px;background:rgba(250,249,240,.75)}
@keyframes slipSway{0%{transform:rotate(4deg)}22%{transform:rotate(-3deg)}44%{transform:rotate(1.8deg)}64%{transform:rotate(-1deg)}82%{transform:rotate(.4deg)}100%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){#endSlip.show{animation:none}}
#endSlip span{writing-mode:vertical-rl;line-height:1.5;white-space:nowrap}
.slipKind{font-size:clamp(11px,1.7vh,13px);font-size:clamp(11px,2.6cqh,13px);letter-spacing:.18em;color:var(--ink3);padding-top:.1em}
.slipTitle{font-size:clamp(12px,min(2.6vh,3.6vw),21px);font-size:clamp(12px,min(4.4cqh,3.6cqw),21px);font-weight:700;letter-spacing:.2em;color:var(--green3)} /* リンクの色だけで示す（縦書きの下線は、行のあいだの仕切り線に見えてしまう） */
#endSlip:hover{background:#fffef8}
#endSlip:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:600px){#endSlip{right:10px;padding:.8em .45em .7em}}
/* いいね：ヘッダーに常時表示。押すと緑 */
#like{display:inline-flex;align-items:center;gap:6px}
#like .heart{font-size:20px;line-height:1;color:#b4483c}
#like[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff}
#like[aria-pressed=true] .heart{color:#fff}
#likeCount{font-variant-numeric:tabular-nums}
.aboutIcon{display:none;font-size:24px;line-height:1}

/* 表示を切り替える（棟の名前・屋根・内部）：ふだんは畳んでおく */
.more{max-width:830px;margin:10px auto 0;border-top:1px solid var(--line);padding-top:6px}
.more summary{cursor:pointer;font-size:15px;font-weight:700;color:var(--ink2);padding:8px 4px;border-radius:8px}
.moreBody{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:center;padding:6px 0}
.moreBody select{min-height:44px;font-size:16px;padding:6px 10px}

footer{text-align:center;font-size:13px;line-height:1.8;margin-top:9px;color:var(--ink2)}

/* スマホ縦向き */
@media(max-width:600px){
  header{gap:6px;padding:9px 8px}
  h1{font-size:15px;line-height:1.4;letter-spacing:.02em;white-space:nowrap} /* 「3D吉田寮(現棟)」と4つのボタンを1行に収める */
  header>div{min-width:0}
  .proto{font-size:11px;padding:1px 7px}
  header p{display:none}
  #share,#help,#like{padding-inline:8px}
  .likeLabel{display:none}
  .proto{display:none} /* ボタンが4つ入るよう畳む（ページの題名に「試作版」の表記あり） */
  #about{width:auto;min-width:44px;min-height:50px;padding-inline:8px}
  .aboutLabel{display:none}
  .aboutIcon{display:inline}
  button,select{font-size:16px;min-height:50px;padding:8px 9px}
  #panel{padding:10px 8px max(8px,env(safe-area-inset-bottom));max-height:53dvh}
  .mainControls{gap:6px}
  .mainControls>button{min-width:0;flex:1 1 auto;font-size:16px;padding-inline:4px}
  .mainControls>#viewMode{min-width:46px;padding-inline:4px}
  .viewLabel{display:none}
  .pad{gap:6px}
  .pad button{font-size:15px;padding:7px 2px}
  #status{font-size:15px;margin:7px 0;min-height:2.9em;line-height:1.45;display:flex;align-items:center;justify-content:center} /* いつも2行分の高さ。文の長さで操作盤の高さが変わると、3D画面の大きさも変わってしまう */
  .tip{font-size:13px}
  .tourOptions{gap:8px;justify-content:space-between}
  .tourOptions label{font-size:15px;gap:5px}
  .progressLabel{font-size:15px}
  .tourOptions select{max-width:145px}
  .moreBody{gap:6px 16px}
  .moreBody label{font-size:15px}
  :is(#helpText,#aboutText){font-size:16px;padding:14px}
  #loading{inset:40% 6% auto;padding:14px 10px;font-size:17px;line-height:1.5}
  .label{font-size:11px;padding:1px 6px}
  #north{right:8px;top:8px;font-size:13px}
  #dusk{left:6px;top:6px;font-size:13px;padding:5px 11px}
  #tourCaption{left:10px}
  #credit{right:6px;bottom:6px;font-size:11px;padding:4px 9px}
  #likeMsg{left:6px;bottom:6px;font-size:12px}
  footer{font-size:11px}
}

/* 幅の小さいスマホ（360px前後）：主ボタンの文字を折り返さない */
@media(max-width:380px){
  h1{font-size:13px}
  .mainControls>button{font-size:14px;padding-inline:3px}
  .mainControls{gap:4px}
  .mainControls>#viewMode{min-width:40px}
  .viewIcon{font-size:15px}
}
@media(max-width:340px){
  .mainControls>button{font-size:13px}
}

/* スマホ横向き：モデルを大きく残し、操作盤を右側へ */
@media(max-height:500px) and (min-width:601px){
  body{display:grid;grid-template-columns:minmax(0,1fr) clamp(310px,38vw,360px);grid-template-rows:auto minmax(0,1fr)}
  header{grid-column:1/-1;grid-row:1;padding:5px 10px;gap:8px;min-width:0}
  header>div:first-child{min-width:0}
  header p{display:none}
  h1{font-size:16px;line-height:1.2;white-space:nowrap}
  #stage{grid-column:1;grid-row:2;min-height:0}
  #panel{grid-column:2;grid-row:2;height:100%;max-height:none;padding:7px 8px;overflow:auto;border-top:0;border-left:1px solid var(--line)}
  .mainControls{gap:5px}
  .mainControls>button{min-width:0;flex:1 1 auto;padding-inline:3px;font-size:13px}
  .mainControls>#viewMode{min-width:40px}
  .viewLabel{display:none}
  .viewIcon{font-size:14px}
  .pad{grid-template-columns:repeat(4,1fr);gap:5px;max-width:none}
  .pad button{padding:5px 2px;font-size:13px;line-height:1.2}
  .tip{display:none}
  button,select{min-height:44px;font-size:15px}
  #status{font-size:13px;line-height:1.25;margin:4px 0;min-height:17px}
  .tourOptions{gap:5px}
  .tourOptions button,.tourOptions select{font-size:13px;padding-inline:5px}
  .progressLabel{font-size:13px;margin-bottom:4px}
  .moreBody label{font-size:13px}
  footer{font-size:11px;margin-top:5px}
  .label{font-size:11px}
  #credit{font-size:11px;padding:4px 9px}
  #likeMsg{font-size:12px}
}