:root {
  font-family:system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;
  color:#243851;
  background:#f7f9fc;
  --accent:#326bbb;
  --deep:#23589f;
  --muted:#63748b;
  --line:#d9e3ef;
  --white:#fff;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input {
  font:inherit
}
button {
  min-height:48px;
  padding:12px 18px;
  border:0;
  border-radius:14px;
  font-weight:650;
  color:inherit;
  background:#edf2f9;
  cursor:pointer;
  touch-action:manipulation
}
button:hover:not(:disabled) {
  filter:brightness(.98)
}
button:disabled {
  opacity:.4;
  cursor:default
}
button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #255794;
  outline-offset:3px
}
h1:focus {
  outline:none
}
input {
  border:1px solid #b0c0d5;
  border-radius:10px;
  padding:12px;
  min-height:48px;
  width:100%;
  min-width:0;
  background:white;
  color:inherit
}
label {
  font-size:16px;
  font-weight:600
}
h1,h2,p {
  margin-top:0
}
h1 {
  font-size:30px;
  letter-spacing:-.035em;
  margin-bottom:16px
}
h2 {
  font-size:22px;
  letter-spacing:-.025em
}
p {
  line-height:1.75
}
[hidden] {
  display:none!important
}
.shell {
  max-width:1160px;
  min-height:100svh;
  margin:auto;
  padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  display:flex;
  flex-direction:column
}
.header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:44px
}
.brand {
  display:flex;
  align-items:center;
  color:inherit;
  text-decoration:none;
  font-size:24px;
  font-weight:750;
  letter-spacing:-.04em
}
.brand>span:last-child {
  font-size:21px;
  letter-spacing:0;
  margin-left:3px
}
.brand-mark {
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  width:38px;
  height:34px;
  border-radius:14px 14px 14px 4px;
  color:white;
  margin-right:10px;
  letter-spacing:1px;
  line-height:1;
  font-size:17px
}
.quiet {
  background:transparent;
  color:var(--muted);
  font-size:14px;
  padding:10px 12px
}
.primary {
  background:var(--accent);
  color:white
}
.secondary {
  background:white;
  border:1px solid var(--line)
}
.danger {
  color:#9e424a;
  background:transparent;
  font-size:14px
}
.full {
  width:100%
}
.muted,.field-hint {
  color:var(--muted);
  font-size:14px;
  line-height:1.7
}
.eyebrow {
  font-size:14px;
  color:var(--muted);
  letter-spacing:.06em;
  margin-bottom:10px
}
main {
  flex:1
}
.home-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px
}
.local-note {
  border:1px solid var(--line);
  border-radius:20px;
  color:var(--muted);
  font-size:12px;
  padding:7px 12px
}
.board-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.board-tile {
  background:white;
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px;
  min-width:0
}
.board-preview {
  display:flex;
  gap:7px;
  margin-bottom:22px;
  min-height:50px
}
.board-preview span {
  background:#f0f4fa;
  border-radius:12px;
  width:48px;
  height:48px;
  font-size:27px;
  display:grid;
  place-items:center;
  overflow:hidden
}
.board-preview img {
  width:100%;
  height:100%;
  object-fit:contain
}
.board-tile h2 {
  font-size:22px;
  margin-bottom:8px;
  overflow-wrap:anywhere
}
.board-tile p {
  margin-bottom:18px
}
.board-tile-actions {
  display:grid;
  grid-template-columns:1fr 52px;
  gap:10px
}
.board-tile-actions button {
  font-size:17px
}
.board-tile-actions .quiet {
  font-size:20px;
  border:1px solid var(--line);
  border-radius:14px
}
.add-board {
  width:100%;
  background:transparent;
  border:1.5px dashed #adbed5;
  min-height:62px;
  margin-top:22px;
  font-size:17px
}
.home-note {
  text-align:center;
  margin-top:24px
}
.board-navigation {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:19px
}
.board-navigation .quiet {
  padding-left:0
}
.board-heading h1 {
  margin-bottom:6px;
  overflow-wrap:anywhere
}
.board-heading {
  margin-bottom:8px
}
.board-heading .muted {
  margin:0
}
.card-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px
}
.voca-tile {
  min-width:0
}
.voca-card {
  width:100%;
  min-width:0;
  min-height:186px;
  padding:16px 12px;
  border:2px solid #dbe4ef;
  border-radius:22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  box-shadow:0 3px 0 #d5e0ee55;
  transition:transform .12s,border-color .12s;
  overflow:hidden
}
.voca-card:active,.voca-card.pressed {
  transform:scale(.965);
  border-color:#255da8;
  box-shadow:0 0 0 2px #326bbb44
}
.card-visual {
  height:106px;
  width:100%;
  display:grid;
  place-items:center;
  font-size:64px;
  font-weight:400;
  line-height:1;
  overflow:hidden;
  flex-shrink:0
}
.card-visual img {
  width:100%;
  height:100%;
  max-height:106px;
  object-fit:contain;
  border-radius:10px
}
.card-label {
  font-size:23px;
  line-height:1.45;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
  text-align:center
}
.card-order {
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:9px
}
.card-order button {
  min-width:52px;
  min-height:44px;
  padding:8px;
  font-size:20px;
  border:1px solid var(--line);
  background:white
}
.edit-active .voca-card {
  border-style:dashed
}
.edit-active #edit-mode {
  background:var(--deep);
  color:white
}
.speak-status {
  font-size:14px;
  color:var(--deep);
  min-height:25px;
  line-height:1.65;
  margin:12px 0 17px;
  overflow-wrap:anywhere
}
.message-panel {
  background:white;
  border:1px solid var(--line);
  border-radius:18px;
  margin-top:22px;
  padding:16px
}
.message-label {
  font-size:12px;
  letter-spacing:.05em;
  color:var(--muted)
}
.message-chips {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-height:51px;
  padding:10px 0
}
.message-chip {
  background:#edf3fc;
  color:#28528b;
  padding:7px 12px;
  border-radius:10px;
  font-size:18px;
  max-width:100%;
  overflow-wrap:anywhere
}
.message-actions {
  display:flex;
  gap:5px;
  border-top:1px solid var(--line);
  padding-top:12px
}
.message-actions .primary {
  min-width:104px
}
.message-actions .quiet {
  font-size:14px;
  padding:8px
}
.board-order {
  display:flex;
  gap:10px;
  margin:14px 0
}
.board-order button {
  flex:1
}
#board-copy {
  margin-bottom:10px
}
#board-position {
  margin:12px 0
}
.board-empty {
  color:var(--muted);
  font-size:16px;
  grid-column:1 / -1;
  padding:36px 0;
  text-align:center
}
footer {
  text-align:center;
  color:var(--muted);
  font-size:12px;
  padding-top:36px
}
.in-board .header {
  margin-bottom:20px
}
dialog {
  width:min(94vw,480px);
  max-height:91svh;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:24px;
  padding:24px;
  background:white;
  color:inherit;
  box-shadow:0 30px 100px #18304c33
}
dialog::backdrop {
  background:#19345566
}
.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
  gap:10px
}
.dialog-heading h2 {
  margin:0
}
.dialog-heading .quiet {
  font-size:20px;
  min-width:44px;
  padding:8px
}
form>label {
  display:block;
  margin:18px 0 9px
}
.optional {
  font-size:12px;
  color:var(--muted);
  font-weight:400;
  margin-left:8px
}
.field-hint {
  margin:8px 0 12px;
  font-size:13px
}
fieldset {
  border:0;
  padding:0;
  margin:22px 0 0;
  min-width:0
}
legend {
  font-size:16px;
  font-weight:600;
  margin-bottom:12px
}
.card-preview {
  margin:0 auto 20px;
  border:2px solid #dbe4ef;
  border-radius:18px;
  width:158px;
  min-height:155px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px
}
.card-preview>span {
  font-size:57px;
  line-height:1.2
}
.card-preview strong {
  font-size:20px;
  overflow-wrap:anywhere;
  max-width:100%;
  text-align:center
}
.card-preview img {
  width:100%;
  height:88px;
  object-fit:contain
}
.emoji-choices {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px
}
.emoji-choices button {
  font-size:25px;
  min-width:44px;
  min-height:44px;
  padding:7px;
  background:#f3f6fa
}
.image-actions {
  display:flex;
  gap:10px
}
.image-actions button {
  flex:1
}
.color-choices {
  display:flex;
  gap:9px;
  flex-wrap:wrap
}
.color-choices button {
  width:48px;
  height:48px;
  min-height:48px;
  border-radius:50%;
  border:1px solid #bfcede;
  padding:5px
}
.color-choices button[aria-pressed=true] {
  border:3px solid var(--deep)
}
.card-form-actions {
  display:flex;
  gap:12px;
  margin-top:24px
}
.card-form-actions .primary {
  flex:1;
  min-height:56px;
  font-size:18px
}
.switch-row {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.switch-row input {
  width:27px;
  height:27px;
  min-height:27px;
  accent-color:var(--accent)
}
.switch-row small {
  display:block;
  font-size:14px;
  color:var(--muted);
  font-weight:400;
  margin-top:5px
}
.rate-row {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  margin-bottom:14px
}
.rate-row input {
  padding:0;
  width:100px;
  flex:1;
  accent-color:var(--accent)
}
.rate-row output {
  min-width:45px;
  font-size:14px;
  color:inherit
}
.mode-field label {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:69px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  margin-bottom:8px;
  font-size:15px
}
.mode-field input {
  width:22px;
  min-height:22px;
  accent-color:var(--accent)
}
.mode-field small {
  display:block;
  font-size:12px;
  font-weight:400;
  color:var(--muted);
  margin-top:4px
}
#settings-save {
  margin-top:17px
}
details {
  border-top:1px solid var(--line);
  padding-top:15px;
  margin-top:20px;
  font-size:14px;
  line-height:1.8
}
summary {
  cursor:pointer;
  min-height:32px;
  font-weight:600
}
details p {
  color:var(--muted);
  margin-top:8px;
  margin-bottom:0
}
.warning,.error {
  font-size:14px;
  color:#9a3744;
  line-height:1.7
}
.warning {
  border:1px solid #e6c2c9;
  background:#fff8f9;
  padding:14px;
  border-radius:12px
}
.error:empty {
  display:none
}
.error {
  margin:12px 0 0
}
.confirm-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:24px
}
.toast {
  position:fixed;
  bottom:max(20px,env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  max-width:90vw;
  width:max-content;
  background:#243851;
  color:white;
  padding:12px 20px;
  border-radius:16px;
  font-size:14px;
  z-index:5;
  margin:0;
  box-shadow:0 4px 18px #122b4822
}
body:has(dialog[open]) {
  overflow:hidden
}
@media(max-width:1000px) {
  .card-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .board-list {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:750px) {
  .card-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px
  }
  .card-label {
    font-size:22px
  }
  .voca-card {
    min-height:177px;
    padding:14px 10px
  }
  .card-visual {
    height:94px;
    font-size:57px
  }
  .card-visual img {
    max-height:94px
  }
}
@media(max-width:540px) {
  .shell {
    padding-left:17px;
    padding-right:17px
  }
  .header {
    margin-bottom:32px
  }
  .brand {
    font-size:22px
  }
  .brand>span:last-child {
    font-size:20px
  }
  .brand-mark {
    width:33px;
    height:30px
  }
  .header .quiet {
    font-size:13px;
    padding:8px
  }
  .home-heading .local-note {
    display:none
  }
  .board-list {
    grid-template-columns:1fr
  }
  .board-tile {
    padding:22px
  }
  .board-preview {
    margin-bottom:18px
  }
  .card-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
  }
  .voca-card {
    min-height:178px;
    border-radius:19px
  }
  .card-label {
    font-size:23px
  }
  .card-visual {
    font-size:60px;
    height:95px
  }
  .board-heading h1 {
    font-size:26px
  }
  .board-navigation {
    margin-bottom:18px
  }
  .in-board .header {
    margin-bottom:14px
  }
  .speak-status {
    margin:9px 0 14px
  }
  .message-panel {
    padding:13px
  }
  .message-actions .quiet {
    font-size:13px
  }
  .message-actions .primary {
    min-width:94px
  }
  dialog {
    padding:21px
  }
}
@media(max-width:359px) {
  .shell {
    padding-left:12px;
    padding-right:12px
  }
  .brand {
    font-size:20px
  }
  .brand>span:last-child {
    font-size:18px
  }
  .brand-mark {
    margin-right:7px
  }
  .voca-card {
    min-height:160px;
    padding:12px 8px
  }
  .card-visual {
    height:83px;
    font-size:52px
  }
  .card-visual img {
    max-height:83px
  }
  .card-label {
    font-size:21px
  }
  .image-actions {
    gap:7px
  }
  .image-actions button {
    font-size:14px;
    padding:10px
  }
  .message-actions {
    flex-wrap:wrap
  }
  .message-chip {
    font-size:16px
  }
}
@media(prefers-reduced-motion:reduce) {
  .voca-card {
    transition:none
  }
  .voca-card:active,.voca-card.pressed {
    transform:none
  }
}

/* 凸凹アプリ共通ルール：オーバースクロール（バウンス）をさせない（2026-10-12） */
html,body{overscroll-behavior:none}