/* ---- tokens ---- */
.app{ --bg:#fff8e1; --paper:#ffffff; --ink:#26323a; --mut:#5d6b75; --line:#e6dcc0;
  --yellow:#ffd54f; --yellow_dk:#d9a400; --green:#3ad17a; --green_dk:#21a85a;
  --red:#e23b2e; --red_dk:#b52a20; --blue:#3b8ee6; }

/* ---- base ---- */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; background:#fff8e1;
  font-family:-apple-system,"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic UI",sans-serif;
  color:#26323a; line-height:1.5; }
h1,h2,h3,h4,h5,h6{ font-size:inherit; font-weight:inherit; margin:0; }
figure{ margin:0; }
button{ font:inherit; color:inherit; }

/* ---- layout ---- */
.app{ max-width:560px; margin:0 auto; padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 40px); }
.top{ margin-bottom:10px; }
.heading_lg{ font-size:26px; font-weight:900; }
.heading_md{ font-size:17px; font-weight:900; margin-bottom:8px; }
.top_sub{ font-size:13px; color:var(--mut); }
.block{ background:var(--paper); border-radius:16px; padding:14px; margin:10px 0; box-shadow:0 2px 0 var(--line); }

/* ---- env ---- */
.env_row{ display:flex; gap:10px; font-size:14px; padding:2px 0; }
.env_key{ color:var(--mut); min-width:3em; }
.env_val{ word-break:break-all; }
.env_val.is_ng{ color:var(--red); font-weight:700; }

/* ---- who ---- */
.who_row{ display:flex; gap:8px; }
.who_btn{ flex:1; min-height:48px; padding:0 4px; border:2px solid var(--line); border-radius:12px; background:#fff; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; }
.who_btn.is_on{ border-color:var(--blue); background:#e8f2fd; }

/* ---- say ---- */
.say_note{ font-size:13px; color:var(--mut); margin-bottom:10px; }
.say_list{ display:flex; flex-direction:column; gap:10px; }
.say_btn{ display:flex; align-items:center; justify-content:space-between; width:100%; min-height:76px;
  padding:10px 18px; border:none; border-radius:18px; background:var(--yellow); box-shadow:0 5px 0 var(--yellow_dk); cursor:pointer; }
.say_btn:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--yellow_dk); }
.say_btn.is_done{ background:#e9e9e9; box-shadow:0 5px 0 #bdbdbd; }
.say_btn:disabled{ opacity:.55; }
.say_kanji{ font-size:36px; font-weight:900; letter-spacing:.06em; }
.say_count{ font-size:14px; font-weight:700; color:#5a4300; text-align:right; white-space:nowrap; }
.listen{ display:flex; align-items:center; gap:10px; margin-top:12px; min-height:28px; }
.listen_lamp{ width:16px; height:16px; border-radius:50%; background:#cfd4d8; flex:none; }
.listen.is_on .listen_lamp{ background:var(--red); animation:lamp_blink .8s ease-in-out infinite; }
.listen_text{ font-size:15px; color:var(--mut); }
.listen.is_on .listen_text{ color:var(--ink); font-weight:700; }
@keyframes lamp_blink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@media (prefers-reduced-motion: reduce){ .listen.is_on .listen_lamp{ animation:none; } }
.last{ margin-top:8px; font-size:15px; min-height:1.5em; }
.last_ok{ color:var(--green_dk); font-weight:900; }
.last_ng{ color:var(--red); font-weight:900; }
.last_text{ word-break:break-all; }

/* ---- summary ---- */
.sum_list{ font-size:14px; }
.sum_row{ display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dashed var(--line); }
.sum_row_total{ font-weight:900; border-bottom:none; padding-top:8px; }
.sum_ok{ color:var(--green_dk); }
.sum_ng{ color:var(--red); }

/* ---- log ---- */
.act_row{ display:flex; gap:8px; }
.act_btn{ flex:1; min-height:48px; border:none; border-radius:12px; background:var(--blue); color:#fff; font-weight:900; cursor:pointer; box-shadow:0 3px 0 #2a6cb3; }
.act_btn:active{ transform:translateY(2px); box-shadow:0 1px 0 #2a6cb3; }
.act_btn_danger{ background:#fff; color:var(--red); border:2px solid var(--red); box-shadow:none; flex:0 0 auto; padding:0 12px; }
.act_note{ font-size:13px; color:var(--mut); margin:8px 0; min-height:1.5em; }
.log_wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.log_table{ border-collapse:collapse; font-size:12px; white-space:nowrap; }
.log_table th, .log_table td{ border-bottom:1px solid var(--line); padding:4px 6px; text-align:left; vertical-align:top; }
.log_table th{ color:var(--mut); font-weight:700; }
.log_text{ width:100%; height:90px; margin-top:10px; font-size:11px; border:1px solid var(--line); border-radius:8px; padding:6px; }

/* ---- utilities（最後に置く） ---- */
.is_hidden{ display:none; }