:root{--bg:#0b1220;--panel:#131f31;--line:#2b405a;--text:#eff7ff;--muted:#aab9c9;--accent:#36d7ff;--accent-dark:#003c51;--yellow:#ffd166;--green:#55dc93}*{box-sizing:border-box}body{margin:0;background:linear-gradient(135deg,#09111c,#111d30);color:var(--text);font-family:"Yu Gothic",Meiryo,sans-serif}.app{width:min(1120px,100%);margin:auto;padding:26px 18px 40px}.app-header{margin-bottom:18px}.eyebrow{letter-spacing:.14em;color:var(--accent);font-weight:800;margin:0 0 5px}h1{font-size:clamp(30px,5vw,46px);margin:0 0 8px}h2{margin:0 0 10px;font-size:23px}p{color:var(--muted);line-height:1.55}.mode-switch{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px}button,.file-button{border:1px solid #47617b;border-radius:10px;background:#1d2b3d;color:var(--text);font:inherit;font-weight:800;font-size:17px;min-height:52px;padding:10px 14px;cursor:pointer}.mode-switch button.active,.primary,.file-button{background:var(--accent);border-color:var(--accent);color:#04202a}.mode-switch button.active{box-shadow:0 0 0 2px #13627a}.screen,.shared-video{display:none}.screen.active,.shared-video.active{display:block}.file-row{display:flex;align-items:center;gap:12px;margin:6px 0 12px;flex-wrap:wrap}.file-row span{color:var(--muted)}input[type=file]{display:none}.video-wrap{position:relative;background:#000;border:2px solid var(--accent);border-radius:10px;overflow:hidden}.video-wrap video,.compare-video{display:block;width:100%;max-height:60vh;background:#000;object-fit:contain}.time-overlay{position:absolute;top:12px;left:12px;padding:7px 11px;border-radius:7px;background:#000b;color:#56ffad;font:800 28px ui-monospace,monospace}.measurement-card,.step-card,.control-grid,.analysis-card,.compare-grid{display:grid;gap:14px;margin:15px 0}.measurement-card{grid-template-columns:1fr 360px}.measurement-card,.step-card,.card,.analysis-card,footer{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:18px}.label,.step-display span{display:block;color:var(--muted);font-weight:700}.measurement-card output{display:block;color:var(--yellow);font:800 clamp(48px,7vw,70px) ui-monospace,monospace}.measurement-card small{color:var(--muted)}.measurement-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:center}.control-grid{grid-template-columns:1fr 1fr}.nudge-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rate-grid{display:flex;gap:8px;flex-wrap:wrap}.rate-grid button{min-width:74px;min-height:45px}.rate-grid button.active{background:var(--accent-dark);border-color:var(--accent);color:var(--accent)}.status{margin:12px 0 0}.status strong{color:var(--accent)}.wide-button{width:100%;margin-top:14px}.step-card{grid-template-columns:1.1fr .7fr 1fr;align-items:stretch}.step-main{background:var(--accent);color:#04202a;border-color:var(--accent);font-size:27px}.step-display{text-align:center;display:grid;place-content:center}.step-display output{font-size:54px;color:var(--accent);font-weight:800;line-height:1}.step-display b{color:var(--muted)}.step-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.compare-grid{grid-template-columns:1fr 1fr}.compare-column{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel)}.compare-column h2{font-size:20px}.compare-column .file-row{margin-top:0}.compare-column .nudge-grid{margin-top:10px}.analysis-card{grid-template-columns:1.3fr .7fr;padding:18px}.presets{color:var(--muted)}.presets>div{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}.presets button{min-height:40px;padding:6px 10px}.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}label{display:grid;gap:6px;font-weight:700}input{width:100%;min-height:50px;border:1px solid #4d6380;border-radius:8px;padding:8px 11px;background:#0a1422;color:white;font:inherit;font-size:22px}.results{display:grid;gap:9px;align-content:center}.results p{margin:0;padding:12px;border-radius:9px;background:#091422;display:grid;grid-template-columns:1fr auto auto;gap:7px;align-items:baseline}.results output{font-size:27px;font-weight:800;color:var(--accent)}.wind-actions{display:flex;gap:9px;margin-top:12px}.data-actions{display:flex;gap:12px}.data-actions button{flex:1}.table-scroll{overflow:auto;max-height:65vh;border:1px solid var(--line);border-radius:8px}table{border-collapse:collapse;width:100%;min-width:700px}th,td{padding:9px 12px;border:1px solid var(--line);text-align:right}th{position:sticky;top:0;background:#22354c}th:nth-child(4),td:nth-child(4){background:#163d50;color:#73e8ff}footer{margin-top:16px;text-align:center;font-size:14px;color:var(--muted)}@media(max-width:720px){.app{padding:14px 10px}.mode-switch{grid-template-columns:1fr 1fr}.measurement-card,.step-card,.control-grid,.compare-grid,.analysis-card,.input-grid{grid-template-columns:1fr}.measurement-actions{grid-template-columns:1fr 1fr}.step-main{min-height:65px}.compare-video{max-height:35vh}.data-actions{display:grid}.time-overlay{font-size:19px}}
/* iPhoneなど縦長のスマートフォンでは、比較画面をコンパクトに表示する */
@media(max-width:720px){
  .app{padding:10px 8px 24px}.app-header{margin-bottom:10px}.app-header p:not(.eyebrow){font-size:14px;margin:5px 0 0}.eyebrow{font-size:13px;margin-bottom:2px}h1{font-size:28px;line-height:1.25}h2{font-size:18px;margin-bottom:6px}
  .mode-switch{grid-template-columns:1fr 1fr;gap:6px;margin-bottom:9px}button,.file-button{min-height:42px;padding:7px 8px;font-size:14px;border-radius:8px}
  .measurement-card,.step-card,.control-grid,.analysis-card{gap:9px;margin:9px 0;padding:11px;border-radius:10px}.measurement-card,.step-card,.control-grid,.analysis-card,.input-grid{grid-template-columns:1fr}.measurement-card output{font-size:44px}.measurement-actions{grid-template-columns:1fr 1fr;gap:7px}.step-main{min-height:50px;font-size:20px}.step-display output{font-size:40px}.step-actions{gap:6px}
  .file-row{gap:7px;margin:0 0 8px}.file-row span{font-size:13px}.video-wrap video{max-height:26vh}.time-overlay{top:7px;left:7px;padding:4px 7px;font-size:16px}
  .compare-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:9px;margin:9px 0;padding-bottom:4px}.compare-column{flex:0 0 calc(100vw - 28px);scroll-snap-align:start;padding:10px}.compare-column h2{font-size:18px}.compare-video{max-height:24vh}.compare-column .nudge-grid{margin-top:7px;gap:6px}.compare-column .nudge-grid button{min-height:38px;font-size:13px}
  .nudge-grid{gap:6px}.rate-grid{gap:6px}.rate-grid button{min-width:58px;min-height:37px;font-size:13px}.input-grid{gap:8px;margin-top:9px}input{min-height:42px;font-size:18px}.results p{padding:8px;font-size:14px}.results output{font-size:22px}.wide-button{margin-top:8px}.data-actions{display:grid;gap:8px}footer{margin-top:10px;padding:9px;font-size:11px}
}
/* 横向きならA/B動画を並べて比較できる */
@media(max-width:900px) and (orientation:landscape){.app{padding:10px 14px}.app-header{display:none}.mode-switch{grid-template-columns:repeat(4,1fr);margin-bottom:8px}.compare-grid{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.compare-column{flex:auto}.compare-video{max-height:42vh}}
/* iPhone縦向き専用：比較画面はスクロールなしで操作する */
@media(max-width:720px) and (orientation:portrait){
  html,body{height:100%;overflow:hidden}
  .app{height:100dvh;overflow:hidden;display:flex;flex-direction:column;padding:6px}
  .app-header,footer{display:none}
  .mode-switch{flex:0 0 auto;margin:0 0 6px;gap:5px}
  .mode-switch button{min-height:38px;font-size:13px;padding:5px}
  #compare-screen.active{display:flex;min-height:0;flex:1;flex-direction:column;gap:5px}
  .compare-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;flex:0 0 auto}
  .compare-switch button{min-height:36px;font-size:14px}
  .compare-switch button.active{background:var(--accent);border-color:var(--accent);color:#04202a}
  #compare-grid{display:block;min-height:0;flex:1;margin:0;overflow:hidden}
  #compare-grid .compare-column{display:none;height:100%;padding:8px;overflow:hidden}
  #compare-grid .compare-column.mobile-active{display:block}
  .compare-column h2{font-size:17px;margin:0 0 5px}
  .compare-column .file-row{min-height:38px;margin:0 0 5px;flex-wrap:nowrap;overflow:hidden}
  .compare-column .file-row span{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .compare-column .file-button{min-height:36px;white-space:nowrap}
  .compare-video{height:25dvh;max-height:190px;min-height:130px;object-fit:contain}
  .compare-column .nudge-grid{margin-top:5px;gap:5px}
  .compare-column .nudge-grid button{min-height:35px;font-size:13px;padding:4px}
  #compare-screen > .card{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin:0;padding:6px 8px}
  #compare-screen > .card h2,#compare-screen > .card .status{display:none}
  #compare-screen > .card .rate-grid{justify-content:space-between;width:100%;flex-wrap:nowrap;gap:4px}
  #compare-screen > .card .rate-grid button{min-width:0;flex:1;min-height:34px;padding:3px;font-size:12px}
  #compare-screen .to-data{display:none}
}
/* 設計書準拠：iPhone縦向きの比較画面は動画A/Bを上下に同時表示する */
@media(max-width:720px) and (orientation:portrait){
  html,body{height:100%;overflow:hidden}
  .app{height:100dvh;overflow:hidden;display:flex;flex-direction:column;padding:5px}
  .app-header,footer{display:none}
  .mode-switch{grid-template-columns:repeat(4,1fr);flex:0 0 auto;gap:4px;margin:0 0 5px}
  .mode-switch button{min-height:37px;padding:4px 2px;font-size:12px}
  #compare-screen.active{display:flex;flex:1;min-height:0;flex-direction:column;gap:4px}
  .compare-switch{display:none}
  #compare-grid{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:4px;flex:1;min-height:0;margin:0;overflow:hidden}
  #compare-grid .compare-column,#compare-grid .compare-column.mobile-active{display:grid;height:auto;min-height:0;grid-template-rows:auto auto minmax(0,1fr) auto;gap:3px;padding:5px;overflow:hidden}
  .compare-column h2{font-size:14px;line-height:1;margin:0}
  .compare-column .file-row{min-height:30px;margin:0;gap:5px;flex-wrap:nowrap;overflow:hidden}
  .compare-column .file-button{min-height:29px;padding:3px 6px;font-size:12px;white-space:nowrap}
  .compare-column .file-row span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .compare-video{width:100%;height:100%;min-height:0;max-height:none;object-fit:contain}
  .compare-column .nudge-grid{grid-template-columns:1fr 1fr;margin:0;gap:3px}
  .compare-column .nudge-grid button{min-height:25px;padding:2px;font-size:11px}
  #compare-screen > .card{display:flex;flex:0 0 auto;align-items:center;margin:0;padding:4px 6px;min-height:37px}
  #compare-screen > .card h2,#compare-screen > .card .status{display:none}
  #compare-screen > .card .rate-grid{width:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
  #compare-screen > .card .rate-grid button{min-width:0;min-height:29px;padding:1px;font-size:11px}
  #compare-screen .to-data{display:none}
}
/* 設計書準拠：スマホの歩数計測画面。スクロールは許可し、操作の配置を合わせる */
@media(max-width:720px){
  html,body{height:auto;overflow-x:hidden;overflow-y:auto}
  .app{height:auto;min-height:100dvh;overflow:visible;display:flex;flex-direction:column;padding:8px}
  .app-header{order:0;margin:0 0 5px}.app-header p:not(.eyebrow){display:none}.eyebrow{display:none}h1{font-size:22px;text-align:center;margin:0}
  .shared-video{order:1}.mode-switch{order:2;grid-template-columns:repeat(4,1fr);margin:5px 0;gap:4px}.mode-switch button{min-height:37px;padding:4px 2px;font-size:12px}
  .screen{order:3}.file-row{margin:0 0 5px;gap:6px}.file-button{min-height:32px;padding:4px 7px;font-size:12px}.file-row span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .video-wrap video{max-height:22vh;min-height:120px}.time-overlay{font-size:14px}
  #step-screen{display:none}#step-screen.active{display:grid;gap:6px;margin:0}
  #step-screen .step-card{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:5px;margin:0;padding:7px}
  #step-screen .step-display{grid-column:1;grid-row:1;min-height:113px;border:1px solid var(--line);border-radius:8px;background:#000;padding:5px}
  #step-screen .step-display span{font-size:13px}#step-screen .step-display output{font-size:34px}
  #step-screen .step-actions{grid-column:2;grid-row:1;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(4,1fr);gap:4px}
  #step-screen .step-actions button,#step-screen .step-reset{min-height:25px;padding:2px;font-size:13px}
  #step-screen .step-main{font-size:13px;min-height:25px}
  #step-screen .step-reset{grid-column:1;grid-row:2}
  #step-screen .step-nudge-card,#step-screen .step-rate-card{margin:0;padding:6px}
  #step-screen .card h2{font-size:17px;text-align:center;margin:0 0 4px}
  #step-screen .nudge-grid{gap:4px}#step-screen .nudge-grid button{min-height:29px;padding:2px;font-size:12px}
  #step-screen .rate-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}#step-screen .rate-grid button{min-width:0;min-height:29px;padding:2px;font-size:12px}
  #step-screen .status{display:none}#step-screen .to-data{margin:0;min-height:35px;font-size:13px}
}
/* 設計書準拠：スマホのタイム計測画面 */
@media(max-width:720px){
  #timer-screen{display:none}
  #timer-screen.active{display:grid;gap:6px;margin:0}
  #timer-screen .measurement-card{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0;padding:7px}
  #timer-screen .measurement-card>div:first-child{min-height:105px;padding:8px;border:1px solid var(--line);border-radius:12px;background:#000}
  #timer-screen .label{font-size:13px}
  #timer-screen .measurement-card output{font-size:30px;white-space:nowrap}
  #timer-screen .measurement-card small{display:none}
  #timer-screen .measurement-actions{grid-template-columns:1fr;gap:5px}
  #timer-screen .measurement-actions button{min-height:46px;padding:3px;font-size:16px}
  #timer-screen .control-grid{display:contents}
  #timer-screen .control-grid .card{margin:0;padding:6px}
  #timer-screen .control-grid .card h2{font-size:17px;text-align:center;margin:0 0 4px}
  #timer-screen .control-grid .card p{display:none}
  #timer-screen .nudge-grid{gap:4px}
  #timer-screen .nudge-grid button{min-height:29px;padding:2px;font-size:12px}
  #timer-screen .rate-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  #timer-screen .rate-grid button{min-width:0;min-height:31px;padding:2px;font-size:12px}
  #timer-screen .rate-grid button[data-rate="0.25"]{display:none}
  #timer-screen .status{display:none}
  #timer-screen .to-data{margin:0;min-height:38px;font-size:14px}
}
/* iPhoneでコマ送りを連打してもダブルタップ拡大しないようにする */
button,.file-button,.nudge-grid button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* 設計書準拠：比較画面はA/Bを上下に表示し、それぞれ操作できる */
@media(max-width:720px){
  #compare-screen.active{display:grid;gap:6px;margin:0}
  #compare-grid{display:grid;grid-template-rows:auto auto;gap:5px;margin:0;overflow:visible}
  #compare-grid .compare-column,#compare-grid .compare-column.mobile-active{display:grid;grid-template-rows:auto auto auto auto;gap:4px;height:auto;padding:6px;overflow:visible}
  .compare-switch{display:none}
  .compare-column h2{font-size:15px;margin:0}.compare-column .file-row{margin:0;min-height:31px}
  .compare-video{height:16vh;min-height:105px;max-height:145px;object-fit:contain}
  .compare-column .nudge-grid{grid-template-columns:1fr 1fr;gap:3px;margin:0}
  .compare-column .nudge-grid button{min-height:27px;padding:2px;font-size:11px}
  .compare-sync{width:58%;justify-self:center;min-height:35px;padding:4px;font-size:13px;background:#ffd166;color:#1c1604;border-color:#ffd166}
  #compare-screen > .card{margin:0;padding:5px 6px}
  #compare-screen > .card h2{font-size:17px;text-align:center;margin:0 0 4px}
  #compare-screen > .card .rate-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  #compare-screen > .card .rate-grid button{min-width:0;min-height:29px;padding:2px;font-size:12px}
  #compare-screen > .card .rate-grid button[data-rate="0.25"]{display:none}
  #compare-screen > .card .status{display:none}
  #compare-screen .to-data{margin:0;min-height:35px;font-size:13px}
}
/* レース比較のA/B同時コマ送り */
.compare-sync-nudges{margin:0;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.compare-sync-nudges h2{font-size:17px;text-align:center;margin:0 0 4px}
.compare-sync-nudges .nudge-grid{grid-template-columns:1fr 1fr;gap:4px}
@media(max-width:720px){
  .compare-sync-nudges{padding:5px}.compare-sync-nudges h2{font-size:15px;margin-bottom:3px}
  .compare-sync-nudges .nudge-grid button{min-height:28px;padding:2px;font-size:11px}
}