body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;margin:0;background:#f6f7fb;color:#111;}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0b5bd3;color:#fff;}
.brand{font-weight:800;letter-spacing:.3px}
.container{max-width:1100px;margin:18px auto;padding:0 14px;}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0;}
.btn,button{display:inline-block;padding:8px 10px;border-radius:10px;border:1px solid #ddd;background:#fff;text-decoration:none;color:#111;cursor:pointer}
button{background:#0b5bd3;color:#fff;border:none}
.me{margin-right:10px;opacity:.95}
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
.tbl th,.tbl td{border-bottom:1px solid #eee;padding:10px;text-align:left;font-size:14px}
.err{background:#ffecec;border:1px solid #ffb3b3;padding:10px;border-radius:12px;margin:10px 0}
.card{background:#fff;border-radius:12px;padding:12px;border:1px solid #eee}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid2 .span2{grid-column:span 2}
input,select{width:100%;padding:9px;border:1px solid #ddd;border-radius:10px}
label{font-size:13px;color:#333}
.field{margin:10px 0}
.muted{color:#666;font-size:13px}
.home3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.panel{background:#fff;border:1px solid #eee;border-radius:12px;padding:14px;min-height:120px}
small{display:block;margin-top:6px}

.islandWrap{
  display:grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap:12px;
  align-items:stretch;
  margin-top:12px;
}
.island{
  position:relative;
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  min-height:320px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  text-decoration:none;
  color:#111;
  overflow:hidden;
}
.islandL{ background:linear-gradient(180deg,#eaf2ff,#ffffff); }
.islandR{ background:linear-gradient(180deg,#fff0f2,#ffffff); }
.bubble{
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  background:#111;
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-size:14px;
}
.bubble:after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-8px;
  border-width:8px 8px 0 8px;
  border-style:solid;
  border-color:#111 transparent transparent transparent;
}
.center{
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:14px;
}
.centerTitle{ margin:0 0 10px 0; }
.annBox{ max-height:320px; overflow:auto; }
.annItem{ padding:10px; border:1px solid #eee; border-radius:12px; margin-bottom:10px; }
.annDate{ font-size:12px; color:#666; }
.annTitle{ font-weight:700; margin-top:4px; }
.annBody{ font-size:13px; color:#222; margin-top:6px; line-height:1.6; }


/* teacher home islands */
.teacherWrap{
  grid-template-columns: repeat(3, 1fr);
}
.islandC{ background:linear-gradient(180deg,#fffbe6,#ffffff); }

.islandIcon{
  font-size:64px;
  margin-bottom:18px;
}
.islandNote{
  width:100%;
  text-align:center;
  font-size:13px;
  color:#333;
  padding:0 10px 14px;
}

.speakWrap{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:12px;
  margin-top:12px;
}
.lessonBtn{
  width:100%;
  text-align:left;
  padding:10px;
  border-radius:12px;
  border:1px solid #eee;
  background:#fff;
  margin-bottom:10px;
  cursor:pointer;
}
.lessonBtn.locked{opacity:.5; cursor:not-allowed;}
.lessonBtn.unlocked{border-color:#cfe0ff;}
.lessonBtn.watched{border-color:#c8f0d4;}
.lessonBtn .tag{
  float:right;
  font-size:12px;
  opacity:.8;
}
.playerBox{
  width:100%;
  aspect-ratio: 16 / 9;
  background:#000;
  border-radius:12px;
  overflow:hidden;
}
.playerBox iframe{
  width:100%;
  height:100%;
  border:0;
}

.unitGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.unitBtn{display:block;padding:12px;border-radius:14px;border:1px solid #eee;text-decoration:none;color:#111;background:#fff}
.uLocked{opacity:.5}
.uUnlocked{border-color:#cfe0ff}
.uCleared{border-color:#c8f0d4}
.patternBox{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#111;color:#fff;padding:12px;border-radius:12px;white-space:pre-wrap}
.typedInput{width:100%;padding:10px;border:1px solid #ddd;border-radius:12px}
.wordRow{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid #eee;padding-top:10px;margin-top:10px}
.word{font-weight:800;font-size:18px}
.resultLine{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #eee}
.ok{margin-top:10px;padding:10px;border-radius:12px;background:#eafff0;border:1px solid #bfeccc;font-weight:800}
.ng{margin-top:10px;padding:10px;border-radius:12px;background:#ffecec;border:1px solid #ffb3b3;font-weight:800}

.ghostWrap{margin:8px 0}
.ghostLabel{font-size:12px}
.ghostWord{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:18px;letter-spacing:.06em}
.ch{display:inline-block;min-width:.62em;text-align:center}
.ch.ok{color:#15a34a;font-weight:800}
.ch.ng{color:#ef4444;font-weight:800}
.ch.dim{color:#bbb}

.testBox{display:flex;flex-direction:column;gap:10px}
.testTop{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.testAudio{padding:10px;border:1px solid #eee;border-radius:12px;background:#fff}
.badFlash{border-color:#ef4444!important; box-shadow:0 0 0 3px rgba(239,68,68,.15)}

/* teacher home islands: 自動で折り返し */
.teacherWrap{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* 追加の島カラー */
.islandSpeak{ background:linear-gradient(180deg,#eefcf6,#ffffff); }
.islandType{  background:linear-gradient(180deg,#f2f0ff,#ffffff); }

/* 見た目微調整（既存があれば不要） */
.islandIcon{ font-size:64px; margin-bottom:18px; }
.islandNote{ width:100%; text-align:center; font-size:13px; color:#333; padding:0 10px 14px; }

.targetBox{padding:10px;border:1px solid #eee;border-radius:12px;background:#fff}
.targetWord{font-size:26px;font-weight:900;letter-spacing:.08em}」.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid #ddd;
}

.b-locked{ background:#f3f4f6; color:#374151; border-color:#e5e7eb; }
.b-practice{ background:#e0f2fe; color:#075985; border-color:#bae6fd; }
.b-mode1{ background:#ffedd5; color:#9a3412; border-color:#fed7aa; }
.b-mode2{ background:#ede9fe; color:#5b21b6; border-color:#ddd6fe; }
.b-cleared{ background:#dcfce7; color:#166534; border-color:#bbf7d0; }

.b-current{ background:#e5e7eb; color:#111827; border-color:#d1d5db; }

.unitTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}