/* Việt Drill — 共通デザイン
   デッキごとに変わるのは --accent だけ。app.js が JSON の accent を流し込む。
   英語版との違いは 3 点だけ:
     1. 見出しセリフを Georgia → Lora(自前ホスト) に変更。
        Georgia は Windows/iOS ともベトナム語の声調付き母音(ắ ầ ễ ợ ữ …)を持たず、
        1 語の中で字が混植になる。Lora は latin+vietnamese サブセット計 67KB を
        fonts/ に置き、SW の殻レーンでキャッシュする(オフラインでも同じ顔)。
     2. .phon の中身は IPA ではなく漢越語(Hán-Việt)。漢字なので明朝で組む。
     3. 例文の <b> はイタリックにしない。声調記号はイタリックで潰れやすい
        (ベトナム語タイポグラフィの定石)ため、アクセント色のみで立てる。 */

@font-face{
  font-family:"Lora";
  src:url("./fonts/lora-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Lora";
  src:url("./fonts/lora-latin-ext.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Lora";
  src:url("./fonts/lora-vietnamese.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

:root{
  --obsidian:#111417; --basalt:#1B2126; --card:#212A30;
  --jade:#4E8C6E;
  --lime:#E9E2D4; --dim:#8B9297; --line:#333D44; --hair:#202830;

  /* デッキが上書きする唯一の値 */
  --accent:#C2954A;
  --accent-bg:color-mix(in srgb, var(--accent) 13%, var(--obsidian));

  --mincho:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --gothic:"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  /* ベトナム語見出し用。Lora が来なくても全 OS でベトナム語完備のセリフに落ちる
     (iOS=New York / Windows=Palatino Linotype・Cambria / Android=Noto Serif)。
     Georgia は両 OS で声調グリフ欠けのため使わない。 */
  --serif:"Lora",ui-serif,"New York","Palatino Linotype",Cambria,"Times New Roman","Noto Serif",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;background:var(--obsidian)}
body{
  margin:0;background:var(--obsidian);color:var(--lime);
  font-family:var(--gothic);line-height:1.7;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  /* ステータスバー下・ホームインジケータ上に潜り込ませない */
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
.wrap{max-width:620px;margin:0 auto;width:100%;padding:0 18px 32px;flex:1;display:flex;flex-direction:column}

header{padding:26px 0 16px}
.kicker{font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;color:var(--accent);margin:0 0 10px}
h1{font-family:var(--mincho);font-size:25px;font-weight:600;letter-spacing:.06em;margin:0 0 6px}
.sub{font-size:12px;color:var(--dim);margin:0}

/* 戻る */
.back-link{
  display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  color:var(--dim);text-decoration:none;padding:18px 0 0
}
.back-link:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

/* ---- デッキ一覧（ホーム） ---- */
.decks{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.deck{
  display:block;text-decoration:none;color:inherit;
  background:var(--card);border-radius:6px;padding:20px 20px 18px;
  border-left:3px solid var(--deck-accent,var(--accent));position:relative
}
.deck:focus-visible{outline:1px solid var(--deck-accent,var(--accent));outline-offset:3px}
.deck-kicker{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--deck-accent,var(--accent));margin:0 0 8px}
.deck-title{font-family:var(--mincho);font-size:19px;letter-spacing:.05em;margin:0 0 14px;color:#fff}
.deck-bar{height:2px;background:#242C32;border-radius:2px;overflow:hidden;margin-bottom:7px}
.deck-fill{height:100%;background:var(--jade);width:0}
.deck-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.1em}
.deck-meta b{color:var(--jade);font-weight:400}
.empty{color:var(--dim);font-size:13px;font-family:var(--mono);letter-spacing:.1em;padding:30px 0}

/* ---- 辞書への入口（ホーム） ---- */
.dict-link{
  display:block;text-decoration:none;margin:14px 0 4px;
  background:var(--basalt);border:1px solid var(--line);border-radius:6px;
  padding:13px 16px;color:var(--lime);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em
}
.dict-link:active{background:#2A343B}
.dict-link:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

/* ---- 辞書（検索） ---- */
.searchbox{margin:6px 0 4px}
.searchbox input{
  width:100%;box-sizing:border-box;
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:14px 16px;color:var(--lime);font-family:var(--serif);font-size:17px;
  letter-spacing:.01em;outline:none
}
.searchbox input:focus{border-color:var(--accent)}
.searchbox input::placeholder{color:#5C666C;font-family:var(--gothic);font-size:14px}
.searchnote{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--dim);margin:8px 2px 12px}

.sresult{
  background:var(--card);border-radius:6px;padding:16px 18px;margin-bottom:8px;
  border-left:3px solid var(--deck-accent,var(--accent))
}
.shead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.svn{font-family:var(--serif);font-size:22px;color:#fff;letter-spacing:.01em}
.spos{font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:.12em}
.sbadge{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--dim);
  border:1px solid var(--line);border-radius:20px;padding:3px 9px;white-space:nowrap}
.sja{font-family:var(--mincho);font-size:15px;color:var(--lime);margin:10px 0 2px}
.sen{font-family:var(--serif);font-size:12.5px;color:var(--dim);margin:0 0 8px}
.sex{font-family:var(--serif);font-size:13px;line-height:1.6;color:#BFB9AE;margin:8px 0 3px;
  padding-top:8px;border-top:1px solid var(--hair)}
.sex b{color:var(--deck-accent,var(--accent));font-weight:400;font-style:normal}
.sexja{font-size:11.5px;color:var(--dim);margin:0}

/* ---- 絞り込みチップ ---- */
.chips{display:flex;gap:6px;overflow-x:auto;padding:14px 0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  padding:7px 12px;border:1px solid var(--line);border-radius:20px;
  background:none;color:var(--dim);cursor:pointer;white-space:nowrap
}
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}

/* ---- 進捗 ---- */
.bar{height:2px;background:#242C32;border-radius:2px;overflow:hidden;margin-bottom:6px}
.barfill{height:100%;background:var(--jade);width:0;transition:width .3s}
.status{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.1em;margin-bottom:16px}
.status b{color:var(--jade);font-weight:400}

/* ---- カード ---- */
.card{
  background:var(--card);border-radius:6px;padding:30px 24px;
  min-height:330px;display:flex;flex-direction:column;cursor:pointer;
  border-top:3px solid var(--line);position:relative;user-select:none
}
.cat{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--dim);margin:0 0 auto}
.word{
  font-family:var(--serif);font-size:clamp(29px,8vw,40px);
  font-weight:400;letter-spacing:.01em;line-height:1.2;margin:22px 0 4px;word-break:break-word
}
/* 漢越語(Hán-Việt)。漢字なので明朝。無い語では空 → 非表示 */
.phon{
  font-family:var(--mincho);font-size:14px;color:var(--dim);
  letter-spacing:.14em;line-height:1.4;margin:0 0 6px;word-break:break-word
}
.phon:empty{display:none}
/* 句・ことわざなど、長い見出し語は小さく組む */
.word.long{font-size:clamp(19px,4.8vw,25px);line-height:1.4;letter-spacing:0;margin-top:18px}
.pos{font-family:var(--mono);font-size:10.5px;color:var(--accent);letter-spacing:.14em;margin:0}
.hint{font-family:var(--mono);font-size:9.5px;color:#5C666C;letter-spacing:.18em;margin:auto 0 0;text-align:center}
.back{display:none;margin-top:20px;padding-top:18px;border-top:1px solid #2E383F}
.card.open .back{display:block}
.card.open .hint{display:none}
.mean{font-family:var(--mincho);font-size:20px;letter-spacing:.05em;margin:0 0 6px;color:#fff}
/* 英訳。和訳の補助として淡色・小さめ。無い語では非表示 */
.en{font-family:var(--serif);font-size:13px;color:var(--dim);letter-spacing:.01em;margin:0 0 4px}
.en:empty{display:none}
/* 漢越語(Hán-Việt)。答え側に置く。漢字なので明朝。無い語では非表示 */
.han{font-family:var(--mincho);font-size:14px;color:var(--accent);letter-spacing:.14em;margin:0 0 14px}
.han:empty{display:none}
.ex{font-family:var(--serif);font-size:14px;line-height:1.65;color:#BFB9AE;margin:14px 0 8px}
/* 声調記号がイタリックで潰れるため、強調は色のみ */
.ex b{color:var(--accent);font-weight:400;font-style:normal}
.exja{font-size:12.5px;color:var(--dim);margin:0}
.card.known{border-top-color:var(--jade)}

/* ---- 操作 ---- */
.ctrls{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px;margin-top:14px}
button.nav{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:14px 0;
  background:var(--basalt);border:1px solid var(--line);border-radius:4px;
  color:var(--lime);cursor:pointer
}
button.nav:active{background:#2A343B}
button.mark{border-color:var(--jade);color:var(--jade)}
button.mark[aria-pressed="true"]{background:var(--jade);color:#0E1214;border-color:var(--jade)}
.tools{display:flex;gap:8px;margin-top:8px}
.tools button{
  flex:1;font-family:var(--mono);font-size:10px;letter-spacing:.14em;padding:11px 0;
  background:none;border:1px solid var(--line);border-radius:4px;color:var(--dim);cursor:pointer
}
.tools button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
button:focus-visible,.chip:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

/* ---- 一覧 ---- */
.listbtn{margin-top:22px;text-align:center}
.listbtn button{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--dim);
  background:none;border:none;border-bottom:1px solid var(--line);padding:4px 2px;cursor:pointer
}
#list{display:none;margin-top:24px}
#list.on{display:block}
.lgroup{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--accent);margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.lrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:7px 0;border-bottom:1px solid var(--hair);font-size:13px}
.lrow span:first-child{font-family:var(--serif)}
.lrow span:last-child{font-family:var(--mincho);color:#BFB9AE;text-align:right}

footer{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:#4E585E;text-align:center;padding:30px 0 0}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}