/* 書体と色は v2 のまま（今回は UX だけを変数にする） */
@font-face{font-family:'Casement Display';src:url('../fonts/CasementDisplay-Regular.woff2?v=0b89282efb') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Casement Japanese';src:url('../fonts/casement-ja.woff2?v=cb0a98baeb') format('woff2');font-weight:400;font-display:swap;unicode-range:U+3000-30FF,U+31F0-31FF,U+3400-9FFF,U+F900-FAFF,U+FF00-FFEF}
:root{--ink:#23262F;--coral:#FF7A59;--tint:#FFE8DF;--paper:#FAF7F4;--muted:#23262F99}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Casement Japanese',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.display{font-family:'Casement Display','Casement Japanese',-apple-system,sans-serif;font-weight:400;font-synthesis:none;letter-spacing:0}

/* 舞台（engine.js が座標を読む） */
#stage{position:relative;overflow:hidden;isolation:isolate;container-type:size}
#illustration{position:absolute;z-index:2}
.world{position:absolute;inset:0}.world svg{width:100%;height:100%;display:block}
#stage .world [data-role=window]{visibility:hidden}
#traveler{position:absolute;inset:0;width:100%;height:100%;z-index:5;overflow:visible;pointer-events:none}
#traveler path{stroke:var(--coral);stroke-linejoin:round;stroke-linecap:round;fill:none}
#traveler #moving-window{fill:#ff7a5906}
#product{position:absolute;z-index:3;visibility:hidden}
.app-window{border-radius:3cqmin;overflow:hidden}
#endmark{position:absolute;z-index:3;visibility:hidden}#endmark svg{width:100%;height:auto;display:block}

.note{font-size:12px;color:var(--muted);line-height:1.7}
.studybar{position:fixed;left:12px;bottom:12px;z-index:50;display:flex;gap:6px;font-size:11px}
.studybar a{padding:7px 12px;border-radius:20px;background:#23262f10;text-decoration:none;backdrop-filter:blur(6px)}
.studybar a[aria-current]{background:var(--ink);color:var(--paper)}

/* 全ページ共通のフッタ */
.site-foot{border-top:1px solid #23262f14;padding:40px 6vw calc(40px + env(safe-area-inset-bottom));font-size:13px;color:var(--muted);line-height:1.9}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:14px}
.site-foot nav a{color:var(--ink);text-decoration:none}
.site-foot p{margin:0}
@media (max-width:820px){body:has(#get-float) .site-foot{padding-bottom:calc(110px + env(safe-area-inset-bottom))}}

/* 入手ボタン（トップと、/download 以外の読みもののページ）。いちばん大事なので常に見える所に置く。色は窓（コーラル）と競わないインク */
.get{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.get-btn{display:flex;flex-direction:column;justify-content:center;min-height:52px;padding:8px 22px;border-radius:26px;background:var(--ink);color:var(--paper);text-decoration:none;text-align:left;line-height:1.35}
.get-btn b{font-size:15px;font-weight:600;white-space:nowrap}.get-btn small i{font-style:normal}
.get-btn small{font-size:11px;opacity:.7}
.get-btn:active{transform:scale(.98)}
#get-float{position:fixed;top:12px;right:6vw;z-index:60;transition:opacity .3s,transform .3s}
body[data-device=mac] #get-float [data-for=ios],body[data-device=ios] #get-float [data-for=mac]{display:none}
body.at-end #get-float{opacity:0;transform:translateY(-8px);pointer-events:none}
/* Mac に送る: 手元の端末で見ている人が、Mac 版のリンクを自分の Mac へ渡す口。インクの薄い面で、主ボタンより一段下げる */
.get-btn.sub{background:#EBE8E6;color:var(--ink);font:inherit;border:0;cursor:pointer} /* Paper にインク 7% を重ねた色。固定のボタンは文字の上に乗るので、透かさない */
body:not([data-device=ios]) [data-for=send]{display:none}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,8px);z-index:70;padding:10px 18px;border-radius:20px;background:var(--ink);color:var(--paper);font-size:13px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:820px){
 #get-float{top:auto;right:auto;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(360px,calc(100% - 32px))}
 #get-float{display:flex;flex-wrap:nowrap;gap:8px}
 #get-float .get-btn{flex:1;align-items:center;text-align:center;padding:8px 12px}
 /* 英語の「Get Casement on the App Store」は 1 行だと「Send to Mac」と並ばず、画面からはみ出すので折り返す。
    日本語は幅 375 でも 1 行に収まる（左右の余白 14px では 1px 足りず、2 行になる） */
 #get-float .get-btn b{white-space:normal}
 #get-float .get-btn.sub{flex:none}
 body.at-end #get-float{transform:translate(-50%,8px)}
}