/* エコルド視覚支援ツール（レガシーデザイン：白・緑／BIZ UDPゴシック・Zen丸ゴシック）
   子どもの画面はすべて固定（スクロール・拡大なし）。大人の設定はシートの中だけ動く */
:root {
  --font: 'BIZ UDPGothic', 'Hiragino Sans', 'Meiryo', sans-serif;
  --round: 'Zen Maru Gothic', 'BIZ UDPGothic', 'Hiragino Maru Gothic ProN', sans-serif;
  --bg: #f5f8f7; --line: #e2e9e7; --line2: #d5dcdb; --text: #2f3b3a; --muted: #6f7d7b;
  --primary: #3a9e8f; --primary-d: #2c8073; --primary-l: #e6f4f1; --primary-m: #8cc5ba;
  --accent: #f0a95c; --accent-d: #c7833b; --accent-l: #fdf1e3; --danger: #d65c5c; --danger-l: #fbeaea; --surface: #fff;
  --shadow: 0 2px 12px rgba(40, 80, 75, .07);
}
* { box-sizing: border-box; }
html.vs-html { height: 100%; overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.vs-body { position: fixed; inset: 0; margin: 0; overflow: hidden; overscroll-behavior: none; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.6;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; padding: 0; }
input, select { font: inherit; -webkit-user-select: text; user-select: text; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.nw { display: inline-block; }
.ic { width: 1em; height: 1em; fill: currentColor; flex: none; }
img { -webkit-user-drag: none; }

/* 公開前・ログインできないとき */
.vs-pre { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.vs-pre img { width: 140px; height: 140px; }
.vs-pre h1 { margin: 0; font: 900 clamp(22px, 5vw, 30px)/1.35 var(--round); color: var(--primary-d); }
.vs-pre p { margin: 0; }
.vs-tag { display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--accent-l); color: var(--accent-d); font-weight: 700; font-size: 14px; }
.vs-foot { color: var(--muted); font-size: 12.5px; margin-top: 14px !important; }
.vs-foot a { color: var(--muted); }

/* ボタン */
.vs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 8px 14px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line2); font: 700 15px/1.3 var(--round); color: var(--text); white-space: nowrap; text-decoration: none; }
.vs-btn .ic { width: 17px; height: 17px; }
.vs-btn.pri { background: var(--primary); border-color: var(--primary); color: #fff; }
.vs-btn.acc { background: var(--accent); border-color: var(--accent); color: #fff; }
.vs-btn.dan { color: var(--danger); border-color: #efc4c4; }
.vs-btn.big { min-height: 56px; padding: 10px 24px; font-size: 17px; }
.vs-btn.sq { width: 46px; padding: 0; }
.vs-btn:disabled { opacity: .35; }

/* 画面のわく */
.vs-app { position: absolute; inset: 0; display: flex; flex-direction: column; }
.vs-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: var(--bg); }
.vs-bar h1 { flex: 1; min-width: 0; margin: 0; font: 900 clamp(17px, 4.4vw, 22px)/1.3 var(--round); color: var(--primary-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-ib { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--primary-d); flex: none; overflow: hidden; }
.vs-ib .ic { width: 20px; height: 20px; }
.vs-ib.hold::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: var(--p, 0%); background: var(--accent); }
.vs-who { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 900 17px/1 var(--round); color: var(--text); max-width: 46vw; }
.vs-who img { width: 38px; height: 38px; border-radius: 50%; background: #fff; flex: none; }
.vs-who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-main { flex: 1; min-height: 0; width: 100%; max-width: 1280px; margin: 0 auto; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.vs-note { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: var(--accent-l); border: 1px solid #f3d3ad; font-size: 13.5px; color: #7a5420; }
.vs-note.dan { background: var(--danger-l); border-color: #efc4c4; color: #8f3434; }
.vs-note button { margin-left: auto; }
.vs-hint { margin: 0; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.5; }
@media (max-height: 520px) { .vs-hint.opt { display: none; } }

/* ホーム：大きなボタン4つ */
.vs-home { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (orientation: landscape) { .vs-home { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); } }
.vs-ht { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 24px; background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); text-decoration: none; color: var(--text); }
.vs-ht .pic { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; border-radius: 16px; background: var(--c, var(--primary-l)); overflow: hidden; }
.vs-ht .pic img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
@media (max-width: 480px) { .vs-bar h1 .lg { display: none; } }
.vs-ht b { flex: none; font: 900 clamp(17px, 2.4vmin + 8px, 26px)/1.3 var(--round); }
.vs-kids { flex: none; display: flex; gap: 8px; overflow: hidden; justify-content: center; flex-wrap: nowrap; }

/* カード（共通） */
.vs-card { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); color: var(--text); overflow: hidden; }
.vs-card img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.vs-card b { flex: none; max-width: 100%; font: 700 var(--fs, 15px)/1.25 var(--round); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-card.on { border-color: var(--accent); background: var(--accent-l); }
.vs-card.done { opacity: .45; }
.vs-card.done::after { content: ''; position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center / 60% no-repeat; }
.vs-card .tm { flex: none; font: 700 calc(var(--fs, 15px) * .85)/1.2 var(--font); color: var(--muted); }
.vs-grid { flex: 1; min-height: 0; display: grid; justify-content: center; align-content: center; }
.vs-pager { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; }
.vs-pager[hidden] { display: none; }
.vs-pager span { font: 700 16px/1 var(--round); color: var(--muted); min-width: 4em; text-align: center; }
.vs-tabs { flex: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.vs-tabs::-webkit-scrollbar { display: none; }
.vs-tabs.pg { overflow: hidden; touch-action: manipulation; align-items: center; }
.vs-tabs.pg .in { flex: 1; min-width: 0; display: flex; gap: 6px; justify-content: center; }
.vs-tabs.pg .ar { width: 40px; padding: 0; display: grid; place-items: center; color: var(--primary-d); }
.vs-tabs.pg .ar:disabled { opacity: .3; }
.vs-tabs.pg .ar svg { width: 16px; height: 16px; fill: currentColor; }
.vs-tabs.wrap { flex-wrap: wrap; overflow: visible; }
.vs-tabs button { flex: none; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--line2); background: var(--surface); font: 700 14px/1.2 var(--round); white-space: nowrap; }
.vs-tabs button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

/* きょうの よてい */
.vs-sch { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.vs-now { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
@media (orientation: landscape) { .vs-now { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } }
.vs-nowc { position: relative; min-height: 0; container-type: size; display: grid; place-items: center; }
.vs-big { position: relative; width: min(100cqw, 100cqh * .88); height: min(100cqh, 100cqw / .88); display: flex; flex-direction: column; align-items: center; padding: 3%; border-radius: 26px; background: var(--surface); border: 3px solid var(--accent); box-shadow: var(--shadow); }
.vs-big .lb { position: absolute; top: 10px; left: 10px; padding: 3px 14px; border-radius: 999px; background: var(--accent); color: #fff; font: 900 clamp(14px, 4cqmin, 22px)/1.3 var(--round); }
.vs-big img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.vs-big b { font: 900 clamp(20px, 7cqmin, 40px)/1.3 var(--round); }
.vs-big .tm { font: 700 clamp(14px, 4cqmin, 22px)/1.3 var(--font); color: var(--muted); }
.vs-side { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.vs-ring { position: relative; width: clamp(96px, 22vmin, 200px); aspect-ratio: 1; }
.vs-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vs-ring circle { fill: none; stroke-width: 12; }
.vs-ring .bg { stroke: var(--line); }
.vs-ring .fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .6s; }
.vs-ring span { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 900 clamp(14px, 3.4vmin, 22px)/1.25 var(--round); color: var(--accent-d); }
.vs-next { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 18px; background: var(--surface); border: 2px dashed var(--primary-m); max-width: 100%; }
.vs-next img { width: clamp(52px, 11vmin, 96px); height: clamp(52px, 11vmin, 96px); object-fit: contain; }
.vs-next small { display: block; font: 700 13px/1.2 var(--round); color: var(--primary-d); }
.vs-next b { font: 900 clamp(16px, 2.6vmin + 6px, 22px)/1.3 var(--round); }
.vs-strip { min-height: 0; display: flex; gap: 8px; justify-content: center; align-items: stretch; height: clamp(92px, 20vh, 150px); }
.vs-strip .vs-card { flex: 0 1 140px; }
.vs-strip .vs-arr { flex: none; align-self: center; }
.vs-alldone { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.vs-alldone img { width: min(40vmin, 300px); height: min(40vmin, 300px); }
.vs-alldone b { font: 900 clamp(22px, 5vmin, 36px)/1.3 var(--round); color: var(--primary-d); }

/* つたえる */
.vs-talk { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.vs-sent { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 18px; background: var(--surface); border: 2px solid var(--primary-m); height: clamp(70px, 14vh, 110px); }
.vs-sent .cards { flex: 1; min-width: 0; height: 100%; display: flex; gap: 6px; }
.vs-sent .vs-card { flex: 0 0 auto; height: 100%; aspect-ratio: .9; padding: 3px; --fs: 12px; border-width: 1.5px; }
.vs-sent .empty { align-self: center; color: var(--muted); font: 700 14px/1.4 var(--round); padding-left: 8px; }
.vs-quick { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; height: clamp(64px, 13vh, 104px); }
.vs-quick .vs-card { border-color: var(--primary-m); background: var(--primary-l); --fs: clamp(12px, 1.4vmin + 6px, 16px); }
.vs-quick .vs-card.stop { border-color: #efc4c4; background: var(--danger-l); }

/* きもち */
.vs-feel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.vs-lv { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.vs-lv button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 22px; background: var(--surface); border: 2px solid var(--line); }
.vs-lv i { display: block; border-radius: 50%; background: var(--accent); }
.vs-lv b { font: 900 clamp(18px, 3vmin + 6px, 28px)/1.3 var(--round); }
.vs-feelres { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
@media (orientation: landscape) { .vs-feelres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } }
.vs-feelres .ask { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.vs-feelres .ask .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; height: clamp(90px, 20vh, 160px); }

/* てじゅん */
.vs-rt { flex: 1; min-height: 0; display: grid; gap: 12px; }
.vs-step { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 10px; }
.vs-dots { display: flex; justify-content: center; gap: 8px; }
.vs-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--line2); }
.vs-dots i.on { background: var(--primary); }
.vs-dots i.cur { background: var(--accent); }
.vs-row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 8px; }

/* 子どもをえらぶ */
.vs-pick { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.vs-kid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 20px; background: var(--surface); border: 2px solid var(--line); min-width: 0; min-height: 0; padding: 6px; }
.vs-kid img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.vs-kid b { font: 900 var(--fs, 16px)/1.2 var(--round); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vs-kid.on { border-color: var(--accent); background: var(--accent-l); }

/* 大人の設定（シート：中だけ動く） */
.vs-sheet { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); background: rgba(36, 65, 60, .45); }
.vs-sheet[hidden] { display: none; }
.vs-sbox { width: min(760px, 100%); height: 100%; max-height: 100%; display: flex; flex-direction: column; background: var(--surface); border-radius: 22px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.vs-sbox.sm { height: auto; width: min(560px, 100%); }
.vs-shd { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--line); }
.vs-shd h2 { flex: 1; min-width: 0; margin: 0; font: 900 17px/1.3 var(--round); color: var(--primary-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-shd h2 small { display: block; font: 700 13px/1.3 var(--round); color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.vs-stabs { flex: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.vs-stabs::-webkit-scrollbar { display: none; }
.vs-stabs button { flex: none; padding: 7px 12px; border-radius: 12px; font: 700 14px/1.2 var(--round); color: var(--muted); }
.vs-stabs button[aria-pressed="true"] { background: var(--primary-l); color: var(--primary-d); }
.vs-sbd { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 10px 16px 18px; }
.vs-sec { padding: 10px 0; border-top: 1px dashed var(--line); }
.vs-sec:first-child { border-top: 0; }
.vs-sec > h3 { margin: 0 0 8px; font: 700 15px/1.4 var(--round); color: var(--muted); }
.vs-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-seg button { min-height: 44px; padding: 8px 14px; border-radius: 14px; border: 1.5px solid var(--line2); background: var(--surface); font: 700 15px/1.3 var(--round); white-space: nowrap; }
.vs-seg button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.vs-days { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.vs-days button { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line2); background: var(--surface); font: 700 15px/1 var(--round); }
.vs-days button.wide { width: auto; padding: 0 12px; }
.vs-days button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.vs-ed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vs-ed li { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.vs-ed li img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.vs-ed li b { flex: 1; min-width: 0; font: 700 15px/1.3 var(--round); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-ed input[type=time] { width: 8.6em; min-height: 40px; padding: 4px 6px; border-radius: 10px; border: 1.5px solid var(--line2); background: #fff; }
.vs-ed .vs-btn { min-height: 40px; }
.vs-ed .vs-btn.sq { width: 40px; }
.vs-pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.vs-pal button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); }
.vs-pal img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.vs-pal b { font: 700 12px/1.25 var(--round); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vs-pal button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-l); }
.vs-pal button.off { opacity: .4; }
.vs-an { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.vs-an button { border-radius: 50%; border: 3px solid transparent; padding: 2px; background: #fff; }
.vs-an button[aria-pressed="true"] { border-color: var(--accent); }
.vs-an img { width: 100%; aspect-ratio: 1; display: block; }
.vs-in { width: 100%; min-height: 48px; padding: 8px 12px; border-radius: 14px; border: 1.5px solid var(--line2); background: #fff; font: 700 18px/1.3 var(--round); }
.vs-kl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vs-kl li { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 14px; border: 1px solid var(--line); }
.vs-kl img { width: 44px; height: 44px; border-radius: 50%; }
.vs-kl b { flex: 1; min-width: 0; font: 900 17px/1.3 var(--round); }
.vs-box { padding: 12px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.vs-box p { margin: 0 0 8px; }
.vs-box p:last-child { margin-bottom: 0; }
.vs-chk { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.vs-chk input { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.vs-log { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.vs-log li { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.vs-log time { color: var(--muted); min-width: 6.5em; }
.vs-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 20px); z-index: 60; transform: translate(-50%, 20px); padding: 10px 18px; border-radius: 999px; background: #24413c; color: #fff; font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: calc(100vw - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-toast.show { opacity: 1; transform: translate(-50%, 0); }
.vs-chg { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(36, 65, 60, .45); padding: 16px; }
.vs-chg[hidden] { display: none; }
.vs-chg > div { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 22px; border-radius: 24px; background: #fff; border: 3px solid var(--accent); text-align: center; max-width: 92vw; }
.vs-chg img { width: min(34vmin, 220px); height: min(34vmin, 220px); }
.vs-chg b { font: 900 clamp(20px, 4vmin, 30px)/1.35 var(--round); }

@media (max-width: 520px) { .vs-ed li { flex-wrap: wrap; } .vs-ed li b { flex-basis: calc(100% - 60px); } .vs-ed li input[type=time] { margin-left: 54px; flex: 1; min-width: 0; } }