/* スマホ公開版だけに適用する10デザイン。計算本体・PC配色は保持する。 */
body { --ui-ink:#554f66; --ui-paper:#fffdf8; --ui-key:#fffdfd; --ui-op:#e8f6fb; --ui-op-edge:#729fb8; --ui-clear:#f4edff; --ui-clear-edge:#ac94bc; --ui-equal:#fbdfea; --ui-equal-edge:#dc89a9; --ui-key-edge:#e5dce7; --ui-guide:#f5fbfff0; --ui-guide-ink:#354c65; margin:0; padding:0; display:block; background:#d1eaf4; color:var(--ui-ink); }
body.theme-fluffy { --ui-ink:#385778; --ui-op:#d7f1ff; --ui-op-edge:#80b9db; --ui-clear:#e1dcff; --ui-equal:#2eabe8; --ui-equal-edge:#2182be; --ui-key-edge:#c6dced; }
body.theme-ribbon { --ui-ink:#663541; --ui-op:#fbd8e1; --ui-op-edge:#d891a7; --ui-clear:#fff0e8; --ui-clear-edge:#dba7af; --ui-equal:#eb6d91; --ui-equal-edge:#c74b72; --ui-key-edge:#e5b9c6; --ui-guide:#fff6f7f2; --ui-guide-ink:#663541; }
body.theme-honey { --ui-ink:#624d42; --ui-op:#ffecb9; --ui-op-edge:#d1ae62; --ui-clear:#fff8e9; --ui-clear-edge:#d2b88c; --ui-equal:#c88758; --ui-equal-edge:#a9683d; --ui-key-edge:#e3cda6; --ui-guide:#fff9eaf2; --ui-guide-ink:#624d42; }
body.theme-night { --ui-ink:#514b70; --ui-op:#c4d4f5; --ui-op-edge:#8596c4; --ui-clear:#fff2d6; --ui-clear-edge:#c4b994; --ui-equal:#c3a0dc; --ui-equal-edge:#9b74b9; --ui-key:#f8f3ff; --ui-key-edge:#aca2ca; --ui-guide:#282442f5; --ui-guide-ink:#f8f3ff; background:#29264d; }
body .calculator { width:100%; max-width:480px; margin:0 auto; border:0; border-radius:0; box-shadow:none; background:var(--design-art) center top / 100% 100% no-repeat!important; height:100svh; min-height:640px; padding:16px!important; padding-top:max(16px,env(safe-area-inset-top))!important; padding-bottom:max(12px,env(safe-area-inset-bottom))!important; display:grid; grid-template-rows:minmax(96px,18fr) minmax(120px,22fr) minmax(328px,52fr) 0 0 minmax(56px,8fr); gap:0; position:relative; }
body .calculator header { grid-row:1; align-self:start; flex-wrap:nowrap; align-items:center; margin:0; padding:8px 0; gap:8px; }
body .calculator h1 { font-size:19px!important; font-weight:700; color:var(--ui-ink); letter-spacing:0; line-height:1.4; white-space:nowrap; }
body .calculator .theme-row { min-width:0; max-width:52%; margin:0 0 0 auto!important; }
body .calculator select { min-width:0; width:100%; max-width:180px; min-height:44px; font-size:13px; padding:8px 9px; color:var(--ui-ink); background:#fffdfdf5; border:1px solid #ffffffb0; border-radius:18px; text-overflow:ellipsis; touch-action:manipulation; }
body .calculator .display { grid-row:2; align-self:stretch; margin:0 0 12px; padding:13px 16px; border:1px solid #ffffffa0; border-radius:24px; background:var(--ui-paper); color:var(--ui-ink); display:flex; flex-direction:column; justify-content:center; box-shadow:0 3px 12px #554f660c; }
body .calculator .display-label { font-size:14px; font-weight:600; letter-spacing:0; color:var(--ui-ink); opacity:1; }
body .calculator .expression { color:var(--ui-ink); opacity:.85; font-size:12px; min-height:18px; margin:4px 0 2px; line-height:1.4; }
body .calculator output { color:var(--ui-ink); font-family:"Yu Gothic UI","Meiryo",sans-serif; font-size:48px; font-weight:500; line-height:1.3; overflow:visible; white-space:nowrap; font-variant-numeric:tabular-nums; }
body .calculator .display-label,body .calculator .expression,body .calculator output { flex-shrink:0; }
body .calculator .keypad { grid-row:3; margin:0 0 4px!important; padding:4px 0; gap:8px!important; grid-template-rows:repeat(5,minmax(56px,70px)); align-content:center; }
body .calculator .key { min-height:56px!important; padding:6px 0; border:1px solid var(--ui-key-edge)!important; border-radius:15px; background:var(--ui-key); color:var(--ui-ink); font:500 27px/1.15 "Yu Gothic UI","Meiryo",sans-serif; box-shadow:0 4px 0 var(--ui-key-edge),0 5px 10px #36304e12!important; touch-action:manipulation; }
body .calculator .key:active { transform:translateY(3px); box-shadow:0 1px 0 var(--ui-key-edge)!important; }
body .calculator .key:focus-visible { outline:3px solid var(--ui-ink); outline-offset:2px; }
body .calculator .clear { background:var(--ui-clear); border-color:var(--ui-clear-edge)!important; box-shadow:0 4px 0 var(--ui-clear-edge)!important; font-size:24px; letter-spacing:0; }
body .calculator .operator { background:var(--ui-op); border-color:var(--ui-op-edge)!important; box-shadow:0 4px 0 var(--ui-op-edge)!important; }
body .calculator .equals { background:var(--ui-equal); border-color:var(--ui-equal-edge)!important; box-shadow:0 4px 0 var(--ui-equal-edge)!important; }
body.theme-fluffy .calculator .equals { background:#187cba; color:#fffdfd; }
body.theme-ribbon .calculator .equals { background:#c83e59; color:#fffdfd; }
body.theme-honey .calculator .equals { background:#9e653e; color:#fffdfd; }
/* チャッピー比率の5種類は飾りのない単色。風景の5種類は画像を保つ。 */
body[data-series="pastel"] { --ui-solid:var(--theme-sky); background:var(--ui-solid)!important; }
body[data-series="pastel"].theme-ribbon { --ui-solid:var(--theme-pink); }
body[data-series="pastel"].theme-honey { --ui-solid:var(--theme-accent-4); }
body[data-series="pastel"].theme-night { --ui-solid:#39345b; }
body[data-series="pastel"] .calculator { background:var(--ui-solid)!important; }
/* パステルのはちみつだけ、結果欄とキーを同じ距離だけ上げる。 */
body[data-series="pastel"].theme-honey .calculator .display,
body[data-series="pastel"].theme-honey .calculator .keypad { transform:translateY(-15px); }
body .calculator .notice { grid-row:4; color:var(--ui-ink); background:var(--ui-paper); margin:12px 0 0; }
body .calculator .theme-status { grid-row:5; background:var(--ui-guide); color:var(--ui-guide-ink); font-size:13px; margin:0; }
body .calculator .theme-status:empty { display:none; }
body .calculator .theme-status:not(:empty) { padding:8px; border-radius:12px; margin-top:10px; }
body .calculator .mobile-guide { grid-row:6; align-self:center; color:var(--ui-guide-ink); background:var(--ui-guide); border:1px solid #ffffff35; margin:12px 0 0; padding:0 12px; border-radius:14px; font-size:14px; line-height:1.65; box-shadow:0 2px 8px #29264d08; }
body .calculator .mobile-guide summary { font-size:14px; font-weight:600; min-height:48px; line-height:48px; }
body .calculator .mobile-guide details[open] { padding-bottom:12px; }
body .calculator .mobile-guide button { background:var(--ui-paper); color:var(--ui-ink); }
body.theme-night .calculator h1 { color:#f8f3ff; text-shadow:0 1px 5px #29264d; }
body.theme-night .calculator .key:focus-visible { outline-color:#fff6df; }
/* 風景の絵を見せる空間と、文字が読める地色を両立する。 */
body[data-series="scene"] .calculator { min-height:708px; grid-template-rows:minmax(148px,32fr) minmax(144px,14fr) minmax(328px,46fr) 0 0 minmax(56px,8fr); }
body[data-series="scene"] .calculator header { background:#fffdf8e8; padding:8px 10px; border-radius:16px; }
body[data-series="scene"] .calculator .display { background:#fffaf2f2; border-color:#ffffff50; border-radius:18px; }
body[data-series="scene"].theme-night { --ui-key:#423c78; --ui-key-edge:#302b5c; }
body[data-series="scene"].theme-night .calculator header { background:#29264de8; }
body[data-series="scene"].theme-night .calculator .display { background:#272443e8; color:#f7f3ff; }
body[data-series="scene"].theme-night .calculator .display-label,body[data-series="scene"].theme-night .calculator .expression,body[data-series="scene"].theme-night .calculator output { color:#f7f3ff; }
body[data-series="scene"].theme-night .calculator .key:not(.operator):not(.clear):not(.equals) { color:#f7f3ff; }
body.expanded-content .calculator { height:auto; min-height:100svh; grid-template-rows:clamp(96px,18svh,160px) 140px 340px auto auto auto; }
body.expanded-content[data-series="scene"] .calculator { grid-template-rows:clamp(148px,32svh,270px) 144px 340px auto auto auto; }
@media(min-width:601px) { body .calculator { min-height:720px; max-height:960px; } }
@media(max-width:350px) { body .calculator { padding-left:12px!important; padding-right:12px!important; } body .calculator h1 { font-size:17px!important; } body .calculator select { font-size:12px; padding:8px 6px; } }
@media(orientation:landscape) and (max-height:550px) { body .calculator { height:auto; min-height:640px; grid-template-rows:96px 144px 328px 0 0 56px; } body[data-series="scene"] .calculator { grid-template-rows:148px 144px 328px 0 0 56px; } }
@media(orientation:landscape) and (max-height:550px) { body.expanded-content .calculator { grid-template-rows:96px 144px 328px auto auto auto; } body.expanded-content[data-series="scene"] .calculator { grid-template-rows:148px 144px 328px auto auto auto; } }