/* ===== base: 変数、リセット、どの画面でも使う部品 ===== */

:root{
  /* LP と同じ配色。白地に空色、紺の文字、オレンジのボタン。値は lp/lp.css と揃えてある */
  --bg:#EEF7FD; --frame:#F7FBFE; --surface:#FFFFFF; --surface2:#E9F5FF; --line:#CFE8F6;
  --ink:#001958; --ink2:#4D5761; --ink3:#6C737F;
  --accent:#F69200; --accent2:#F3963F; --accent-ink:#FFFFFF; --accent-soft:#FFDEC0;
  --sky:#3FB8EC; --sky-deep:#1E78C4; --sky-soft:#BFE3F7;
  --navy:#001958; --navy-ink:#FFFFFF;
  --rec:#E85D48; --good:#00A48D; --good-soft:#D6F3EE; --warn:#D98A00; --warn-soft:#FFF3DD; --bad:#E72800; --bad-soft:#FECFDD;
  --lesson-bg:#D7EEFB;
  --shadow:0 2px 6px rgba(0,25,88,.06),0 10px 28px rgba(0,25,88,.10);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
.en{font-family:"Nunito","M PLUS Rounded 1c",system-ui,sans-serif}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;-webkit-tap-highlight-color:transparent}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}

.app{max-width:1100px;margin:0 auto;height:100dvh;background:var(--frame);display:flex;flex-direction:column;position:relative;overflow:hidden}
@media (min-width:1140px){.app{height:calc(100dvh - 32px);margin:16px auto;border-radius:28px;box-shadow:var(--shadow)}}
.screen{display:flex;flex-direction:column;flex:1;min-height:0}
.ibtn{width:46px;height:46px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:var(--accent);font-size:19px;background:var(--surface)}
.ibtn:hover{background:var(--surface2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;padding:13px 18px;font-weight:800;font-size:16px;background:var(--surface2);color:var(--ink)}
.btn:hover{filter:brightness(.97)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.wide{flex:1}
.btn:disabled{opacity:.45;cursor:default}
.notice{font-size:15px;padding:10px 12px;border-radius:12px;background:var(--warn-soft);color:var(--warn);font-weight:700}
.notice.bad{background:var(--bad-soft);color:var(--bad)}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:700;color:var(--ink2)}
.chip b{color:var(--accent);font-weight:800}
.sheet{position:absolute;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.sheet .panel{background:var(--surface);width:100%;max-width:720px;border-radius:24px 24px 0 0;padding:20px 24px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:15px;max-height:90%;overflow:auto}
.sheet h3{margin:0;font-size:19px;font-weight:800}
.sheet label{display:flex;flex-direction:column;gap:5px;font-size:15px;color:var(--ink2);font-weight:700}
.sheet label.inline{flex-direction:row;align-items:center;gap:10px}
.sheet input[type=checkbox]{width:22px;height:22px}
.sheet input[type=text]{font:inherit;font-size:17px;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--surface2);color:var(--ink)}
.sheet .lbl{font-size:15px;color:var(--ink2);font-weight:700}
/* mode toggle */
.seg{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px;margin:0 24px}
.seg button{flex:1;border-radius:999px;padding:9px 12px;font-size:15px;font-weight:800;color:var(--ink2)}
.seg button.on{background:var(--accent);color:var(--accent-ink)}
.modenote{margin:6px 24px 0;font-size:13px;color:var(--ink3);line-height:1.5}
.seg.inlist{margin:0 4px}

/* ===== phone: everything one size smaller ===== */
@media (max-width:560px){
  body{font-size:15px}
  .chip{font-size:12px;padding:6px 10px}
  .notice{font-size:13px;padding:8px 10px}
  .sheet .panel{padding:16px 14px calc(16px + env(safe-area-inset-bottom));gap:12px}
  .sheet h3{font-size:17px}
  .btn{font-size:15px;padding:11px 14px}
}