/* ============================================================
   デザイントークン
   青=主要操作 / 緑=習得・成功 / 赤=注意（legacy の意味を継承）
   ============================================================ */
:root{
  --ink:#1c2430; --paper:#fbfcfd; --line:#dde3ea; --muted:#5c6672;
  --primary:#2563a8; --primary-bg:#eef4fb; --primary-dark:#1c4d85;
  --green:#2e7d52; --green-bg:#ecf6f0;
  --warn:#c2453a; --warn-bg:#fbeeec;
  --cons:#4a5568; --cons-bg:#f2f4f7;
  --hl:#c2453a;
  --amber-bg:#fff3d6; --amber:#9a6b00;
  --radius:10px; --radius-lg:14px;
  --font-body:"Yu Gothic UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --font-ipa:Georgia,"Times New Roman",serif;
  --fs:16px;
  --nav-h:58px;
  --touch:44px;
  --content-max:1040px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  color:var(--ink); background:var(--paper);
  line-height:1.65; font-size:var(--fs);
}
body[data-fontscale="1.15"]{--fs:18px;}
body[data-fontscale="1.3"]{--fs:20px;}

.ipa{font-family:var(--font-ipa); font-weight:600;}
img{max-width:100%;}
button{font-family:inherit;}
:focus-visible{outline:3px solid var(--primary); outline-offset:2px; border-radius:4px;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important;}
}

/* skip link */
.skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:8px 14px; z-index:200; border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}

/* ============ レイアウト ============ */
.app-header{
  position:sticky; top:0; z-index:30; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.app-header .bar{
  max-width:var(--content-max); margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:10px;
}
.app-header h1{font-size:17px; font-weight:800; letter-spacing:.02em; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.app-header .iconbtn{margin-left:auto;}

main#app{
  max-width:var(--content-max); margin:0 auto;
  padding:16px 16px calc(var(--nav-h) + 32px + env(safe-area-inset-bottom, 0px));
  min-height:60vh;
}
@media (min-width:768px){
  main#app{padding-bottom:48px;}
}

/* ボトムナビ（モバイル） */
nav.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:#fff; border-top:1px solid var(--line);
  display:flex; justify-content:space-around;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
nav.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:var(--nav-h); text-decoration:none; color:var(--muted);
  font-size:10.5px; font-weight:700; gap:2px;
}
nav.bottom-nav a .nicon{font-size:20px; line-height:1;}
nav.bottom-nav a[aria-current="page"]{color:var(--primary);}
nav.bottom-nav a .badge{
  position:absolute; transform:translate(14px,-4px);
  background:var(--warn); color:#fff; font-size:10px; border-radius:9px; padding:0 5px; min-width:16px;
}
nav.bottom-nav a{position:relative;}
@media (min-width:768px){
  nav.bottom-nav{
    position:sticky; top:0; bottom:auto; border-top:none; border-bottom:1px solid var(--line);
    justify-content:center; gap:8px; z-index:29;
  }
  nav.bottom-nav a{flex:0 0 auto; flex-direction:row; padding:0 16px; font-size:13px; gap:6px; min-height:46px;}
  nav.bottom-nav a .nicon{font-size:17px;}
}

/* ============ 共通コンポーネント ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1.5px solid var(--ink); background:#fff; color:var(--ink);
  border-radius:var(--radius); padding:10px 18px; min-height:var(--touch);
  font-size:15px; font-weight:700; cursor:pointer; text-decoration:none;
}
.btn:active{transform:scale(.97);}
.btn.primary{background:var(--primary); border-color:var(--primary); color:#fff;}
.btn.primary:active{background:var(--primary-dark);}
.btn.danger{border-color:var(--warn); color:var(--warn);}
.btn.danger.solid{background:var(--warn); color:#fff;}
.btn.ghost{border-color:var(--line); color:var(--muted);}
.btn.big{width:100%; padding:14px 18px; font-size:16px;}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.btn.small{min-height:36px; padding:6px 12px; font-size:13.5px;}

.iconbtn{
  border:1px solid var(--line); background:#fff; border-radius:var(--radius);
  min-width:var(--touch); min-height:var(--touch); font-size:19px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.iconbtn:active{background:var(--primary-bg);}

.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:12px;}
.card.star{border-left:4px solid var(--warn);}
.card h2{font-size:16px; margin-bottom:8px;}
.card h3{font-size:14.5px;}

.notice{background:var(--primary-bg); border-left:4px solid var(--primary); padding:10px 12px;
  border-radius:0 6px 6px 0; font-size:13.5px; margin-bottom:14px;}
.notice.warn{background:var(--warn-bg); border-left-color:var(--warn);}
.notice.green{background:var(--green-bg); border-left-color:var(--green);}

.sec-note{color:var(--muted); font-size:13px; margin-bottom:12px;}
.group-title{font-size:15px; font-weight:800; margin:20px 0 8px; padding-left:9px; border-left:5px solid var(--ink);}
.group-title.v{border-color:var(--primary)} .group-title.r{border-color:var(--green)}
.group-title.w{border-color:var(--warn)} .group-title.c{border-color:var(--cons)}
.group-title .count{color:var(--muted); font-weight:500; font-size:12px; margin-left:6px;}

.toast-region{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--nav-h) + 16px); z-index:90; display:flex; flex-direction:column; gap:6px; width:min(92vw,420px);}
.toast{background:var(--ink); color:#fff; border-radius:10px; padding:10px 16px; font-size:13.5px; box-shadow:0 4px 16px rgba(0,0,0,.25); text-align:center;}

/* ダイアログ・ボトムシート */
dialog.sheet, dialog.modal{
  border:none; border-radius:var(--radius-lg); padding:0;
  width:min(94vw, 560px); background:#fff; color:var(--ink);
}
dialog.sheet{
  margin:auto auto 0; width:100%; max-width:640px;
  border-radius:16px 16px 0 0;
}
@media (min-width:768px){
  dialog.sheet{margin:auto; border-radius:var(--radius-lg); width:min(94vw,560px);}
}
dialog::backdrop{background:rgba(20,28,40,.45);}
.dialog-body{padding:18px 18px calc(18px + env(safe-area-inset-bottom, 0px));}
.dialog-title{font-size:16px; font-weight:800; margin-bottom:10px; padding-right:44px;}
.dialog-close{position:absolute; top:8px; right:8px;}
dialog .row{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
dialog .row .btn{flex:1;}

/* ============ 学習系画面 ============ */
.stat-row{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0;}
.stat{
  flex:1; min-width:96px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 12px; text-align:center;
}
.stat .num{font-size:22px; font-weight:800;}
.stat .lbl{font-size:11.5px; color:var(--muted);}

.progressbar{height:8px; background:var(--cons-bg); border-radius:4px; overflow:hidden;}
.progressbar > div{height:100%; background:var(--primary); border-radius:4px; transition:width .3s;}

.session-head{display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:13px; color:var(--muted);}
.session-head .progressbar{flex:1;}

.reason-tag{display:inline-block; background:var(--cons-bg); color:var(--cons); font-size:11.5px; font-weight:700;
  border-radius:12px; padding:1px 10px; margin-bottom:8px;}

.learn-en{font-size:22px; font-weight:700; line-height:1.7; margin:8px 0;}
.learn-en b{color:var(--hl); border-bottom:2px solid var(--hl);}
.learn-en .wbtn{
  background:none; border:none; font:inherit; color:inherit; cursor:pointer;
  padding:0 1px; border-radius:4px; border-bottom:1.5px dotted #b8c2cf;
}
.learn-en .wbtn:hover, .learn-en .wbtn:focus-visible{background:var(--primary-bg); border-bottom-color:var(--primary);}
.learn-jp{font-size:15px; color:var(--ink); background:var(--cons-bg); border-radius:8px; padding:8px 12px; margin:8px 0;}
.learn-note{font-size:13px; color:var(--muted); margin-top:6px;}

.choice-list{display:flex; flex-direction:column; gap:8px; margin:12px 0;}
.choice-list .btn{justify-content:flex-start; text-align:left; font-weight:600; border-color:var(--line);}
.choice-list .btn[aria-pressed="true"]{border-color:var(--primary); background:var(--primary-bg);}
.choice-list .btn.correct{border-color:var(--green); background:var(--green-bg);}
.choice-list .btn.wrong{border-color:var(--warn); background:var(--warn-bg);}

textarea.write-input{
  width:100%; min-height:88px; font:inherit; font-size:16px; padding:10px 12px;
  border:1.5px solid var(--line); border-radius:var(--radius); resize:vertical; background:#fff;
}
textarea.write-input:focus{border-color:var(--primary); outline:none;}
.field-error{color:var(--warn); font-size:13px; margin-top:4px; min-height:18px;}

.diff-view{line-height:2; font-size:16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin:8px 0;}
.diff-view .same{color:var(--green);}
.diff-view .missing{background:var(--amber-bg); color:var(--amber); border-radius:4px; padding:0 4px; margin:0 1px; text-decoration:line-through;}
.diff-view .extra{background:var(--warn-bg); color:var(--warn); border-radius:4px; padding:0 4px; margin:0 1px;}
.diff-legend{font-size:11.5px; color:var(--muted);}

.rating-row{display:flex; gap:8px; margin-top:12px;}
.rating-row .btn{flex:1; min-height:52px; flex-direction:column; gap:0; font-size:14px;}
.rating-row .btn small{font-weight:500; font-size:10.5px; color:var(--muted);}
.rating-row .btn.r-again{border-color:var(--warn); color:var(--warn);}
.rating-row .btn.r-good{border-color:var(--green); color:var(--green);}
.rating-row .btn.r-easy{border-color:var(--primary); color:var(--primary);}

/* 単語シート */
.word-sheet .w-title{font-size:20px; font-weight:800;}
.word-sheet .w-meaning{margin:6px 0; font-size:15px;}
.word-sheet .w-src{color:var(--muted); font-size:11.5px; margin-left:6px;}
.word-sheet .w-ex{border-top:1px dashed var(--line); padding:6px 0; font-size:14px;}
.word-sheet .w-ex .jp{color:var(--muted); font-size:12px;}

/* オンボーディング */
.onb-step{max-width:560px; margin:0 auto;}
.onb-step h2{font-size:19px; margin:14px 0 6px;}
.pick-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0;}
.pick-grid .btn{min-height:56px; font-size:14.5px; border-color:var(--line);}
.pick-grid .btn[aria-pressed="true"]{border-color:var(--primary); background:var(--primary-bg); color:var(--primary-dark);}
@media (max-width:359px){ .pick-grid{grid-template-columns:1fr;} }

/* 履歴 */
.hist-bars{display:flex; align-items:flex-end; gap:4px; height:90px; margin:8px 0;}
.hist-bars .bar{flex:1; background:var(--primary-bg); border-radius:4px 4px 0 0; position:relative; min-height:2px;}
.hist-bars .bar > i{position:absolute; left:0; right:0; bottom:0; background:var(--primary); border-radius:4px 4px 0 0;}
.hist-bars .bar .d{position:absolute; bottom:-18px; left:0; right:0; text-align:center; font-size:9.5px; color:var(--muted);}
.genre-list li{display:flex; align-items:center; gap:8px; font-size:13.5px; margin:4px 0; list-style:none;}
.genre-list .gbar{height:8px; background:var(--primary); border-radius:4px;}

/* ============ ライブラリ（legacy 互換クラス） ============ */
.tabs{display:flex; gap:4px; overflow-x:auto; padding:2px 0 0; margin-bottom:12px; scrollbar-width:thin;}
.tab{border:1px solid var(--line); border-bottom:none; background:#eef1f5; color:#3c4654;
  padding:9px 13px; border-radius:8px 8px 0 0; font-size:13.5px; font-weight:700; cursor:pointer; white-space:nowrap; min-height:40px;}
.tab.active{background:#fff; color:var(--ink); border-color:var(--ink); position:relative;}
.tab .cnt{font-weight:500; color:var(--muted); font-size:11px; margin-left:3px;}

.card-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.big-ipa{font-size:26px; min-width:52px; text-align:center; background:#f6f8fb; border-radius:8px; padding:2px 8px;}
.card.star .big-ipa{background:var(--warn-bg);}
.kana{font-weight:800; font-size:15px;}
.sp{font-size:12px; color:var(--muted);}
.starmark{color:var(--warn); font-weight:800;}
.tip{font-size:13px; color:#3c4654; background:#f6f8fa; border-radius:6px; padding:6px 10px; margin:8px 0;}
.words{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;}
.wchip{border:1px solid var(--primary); color:var(--primary); background:var(--primary-bg);
  border-radius:20px; padding:6px 14px; font-size:13.5px; font-weight:700; cursor:pointer; user-select:none;
  min-height:36px; display:inline-flex; align-items:center;}
.wchip:active{transform:scale(.96);}
.wchip small{color:var(--muted); font-weight:500; margin-left:4px;}

.sent{display:flex; align-items:flex-start; gap:8px; padding:8px 0; border-top:1px dashed var(--line);}
.sent-btns{display:flex; gap:4px; flex-shrink:0; padding-top:2px; flex-wrap:wrap; max-width:88px;}
@media (min-width:520px){ .sent-btns{max-width:none;} }
button.play{border:1px solid var(--line); background:#fff; border-radius:8px; font-size:16px;
  width:40px; height:38px; cursor:pointer; line-height:1;}
button.play:active{background:var(--primary-bg);}
button.play.speaking{background:var(--primary);}
.sent-text{min-width:0;}
.sent-text .en{font-size:15.5px; font-weight:600; overflow-wrap:break-word;}
.sent-text .en b{color:var(--hl); border-bottom:2px solid var(--hl);}
.sent-text .jp{font-size:12.5px; color:var(--muted);}
.sent-text .note{color:#77818f; font-size:12px;}
.morebtn{display:block; width:100%; border:1px dashed var(--primary); background:var(--primary-bg);
  color:var(--primary); border-radius:8px; padding:10px 6px; font-size:13px; font-weight:700;
  cursor:pointer; margin-top:6px; min-height:var(--touch);}
.morebtn:active{transform:scale(.98);}
.ph-controls{display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap;}
.ph-controls select{font-size:14px; padding:8px; border:1px solid var(--line); border-radius:8px; background:#fff; min-height:var(--touch); max-width:100%;}
.ph-controls input{flex:1; min-width:160px; font-size:16px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; min-height:var(--touch);}
button.learn{border:1px solid var(--line); background:#fff; border-radius:8px; font-size:15px;
  width:40px; height:38px; cursor:pointer; color:#8f99a5; line-height:1;}
button.learn.on{background:var(--green); border-color:var(--green); color:#fff;}
button.savebtn{border:1px solid var(--line); background:#fff; border-radius:8px; font-size:15px;
  width:40px; height:38px; cursor:pointer; color:#8f99a5; line-height:1;}
button.savebtn.on{background:var(--primary); border-color:var(--primary); color:#fff;}
.rx-pair{font-size:16.5px; font-weight:800;}
.rx-pair b{color:var(--warn);}
.lc{background:var(--green-bg); color:var(--green); font-weight:700; padding:2px 8px; border-radius:10px; font-size:11.5px;}
mark{background:#ffe89a; padding:0 2px; border-radius:3px;}

.spoken{font-size:14px; margin-top:3px; color:#2c3a2e; background:var(--green-bg); border-radius:6px;
  padding:2px 9px; cursor:pointer; display:inline-block; line-height:1.75; border:1px dashed #bfd9c8;}
.spoken:active{transform:scale(.98);}
.spoken b{color:var(--warn); font-weight:800;}
.spoken .wk{color:#8b97a3; font-size:12px;}
.spoken .lnk{color:var(--green); font-weight:800;}

/* 練習モード（legacy 互換） */
.practice{background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 16px; text-align:center;}
.practice .pc-cat{margin-bottom:10px; font-size:13.5px;}
.practice select{font-size:14px; padding:8px; border:1px solid var(--line); border-radius:6px; background:#fff; min-height:var(--touch); max-width:100%;}
.pc-jp{font-size:17px; font-weight:700; margin:14px 0 4px; min-height:26px;}
.pc-hint{font-size:12.5px; color:var(--muted);}
.pc-en{font-size:21px; font-weight:700; margin:14px 0; min-height:32px; overflow-wrap:break-word;}
.pc-en b{color:var(--hl); border-bottom:2px solid var(--hl);}
.pc-note{font-size:13px; color:var(--muted); margin-top:8px; min-height:18px;}
.pc-row{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:10px;}
.pc-cat label{font-size:13px; color:#3c4654; cursor:pointer;}
.bigbtn{border:1.5px solid var(--ink); background:#fff; border-radius:10px; padding:10px 16px;
  font-size:14.5px; font-weight:700; cursor:pointer; min-height:var(--touch);}
.bigbtn.primary{background:var(--ink); color:#fff;}
.bigbtn:active{transform:scale(.97);}

/* マイクパネル（legacy 互換） */
#micPanel{position:fixed; left:0; right:0; bottom:0; z-index:80; padding:12px;}
.mic-card{max-width:640px; margin:0 auto; background:#fff; border:2px solid var(--ink); border-radius:14px;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px)); box-shadow:0 -4px 24px rgba(0,0,0,.18); text-align:center;}
.mic-target{font-weight:800; font-size:17px;}
.mic-status{font-size:13.5px; color:var(--muted); margin:6px 0; min-height:20px;}
.mic-status.listening{color:var(--warn); font-weight:700; animation:micpulse 1s infinite;}
@keyframes micpulse{50%{opacity:.35}}
.mic-score{font-size:22px; font-weight:800;}
.mic-words{font-size:18px; font-weight:700; margin:4px 0; line-height:1.9;}
.mic-words span{margin:0 3px; padding:1px 5px; border-radius:4px;}
.mic-words .ok2{background:var(--green-bg); color:var(--green);}
.mic-words .ok1{background:var(--amber-bg); color:var(--amber);}
.mic-words .ok0{background:var(--warn-bg); color:var(--warn); text-decoration:underline;}
.mic-heard{font-size:13px; color:var(--muted); min-height:16px;}
.mic-note{font-size:11.5px; color:#77818f; margin-top:8px;}

/* 空状態 */
.empty{
  text-align:center; padding:36px 16px; color:var(--muted);
  background:#fff; border:1px dashed var(--line); border-radius:var(--radius-lg);
}
.empty .big{font-size:34px; margin-bottom:8px;}
.empty .btn{margin-top:14px;}

footer.app-footer{max-width:var(--content-max); margin:24px auto 0; padding:12px 16px calc(var(--nav-h) + 24px);
  border-top:1px solid var(--line); font-size:11.5px; color:var(--muted);}
@media (min-width:768px){ footer.app-footer{padding-bottom:24px;} }

/* ============ アクセスゲート（購入者向けパスワード） ============ */
body.gate-locked .app-header,
body.gate-locked nav.bottom-nav,
body.gate-locked footer.app-footer { display: none; }
.gate-screen{
  min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
}
.gate-card{
  width: 100%; max-width: 360px; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 22px;
}
.gate-emoji{ font-size: 40px; margin-bottom: 4px; }
.gate-card h2{ font-size: 17px; margin-bottom: 6px; }

/* ユーティリティ */
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.mt8{margin-top:8px;} .mt16{margin-top:16px;} .mb8{margin-bottom:8px;}
.muted{color:var(--muted);}
.small{font-size:12.5px;}
.center{text-align:center;}
.flex{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.grow{flex:1;}