*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:#f6f3ee;color:#171717;line-height:1.45}
body.show-card-open{overflow:hidden}
header{padding:44px 20px 22px;background:#fff;border-bottom:1px solid #e8e0d6}
h1{font-size:42px;margin:0}
header p{margin:8px 0 0;color:#645b50}
nav{position:sticky;top:0;z-index:2;display:flex;gap:8px;overflow-x:auto;padding:10px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid #e8e0d6}
nav a{white-space:nowrap;text-decoration:none;color:#111;background:#f0ebe4;border:1px solid #e1d8cc;border-radius:999px;padding:8px 12px;font-size:14px}
main{padding:14px;max-width:820px;margin:0 auto}
.card{background:#fff;border:1px solid #e8e0d6;border-radius:18px;padding:18px;margin:14px 0;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.important{border-color:#d9b98f;background:#fffaf3}
h2{margin:0 0 14px;font-size:24px}
h3{margin:22px 0 8px;font-size:16px;color:#5b4a39}
.phrase{display:grid;grid-template-columns:1fr;gap:4px;padding:12px 0;border-top:1px solid #eee}
.phrase:first-of-type{border-top:0}
.phrase span{color:#3b342e}
.phrase b{font-size:20px}
.phrase small{color:#776d63;font-size:14px}
.jp{font-size:24px;line-height:1.55;background:white;border:1px solid #ead8c1;border-radius:14px;padding:16px}
.note{color:#665c52;background:#f8f2ea;padding:12px;border-radius:12px}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{border-top:1px solid #eee;padding:12px 0}
.checklist li:first-child{border-top:0}
.checklist input{width:20px;height:20px;vertical-align:middle;margin-right:8px}
button{appearance:none;border:0;border-radius:12px;background:#111;color:white;padding:12px 14px;font-weight:700}
button.secondary{background:#f0ebe4;color:#171717;border:1px solid #d9cdbc}
button:focus-visible,a:focus-visible{outline:3px solid #b87025;outline-offset:3px}
.show-card{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#fffaf3;color:#171717}
.show-card::backdrop{background:rgba(23,17,11,.45)}
.show-card-shell{min-height:100dvh;display:flex;flex-direction:column;gap:18px;padding:calc(20px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom))}
.show-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.show-card-top p{margin:0;color:#6a5741;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.show-card h2{font-size:28px;margin:0;color:#3a1f08}
.show-card-jp{margin:0;font-size:clamp(28px,7vw,54px);line-height:1.5;font-weight:700;background:#fff;border:1px solid #e6c99e;border-radius:16px;padding:18px}
.show-card-fr{margin:0;color:#4f4337;font-size:18px;background:#f7ecd9;border-radius:14px;padding:14px}
.word-list{border:1px solid #eadfd2;border-radius:14px;overflow:hidden;background:#fff}
.word{display:grid;grid-template-columns:1fr;gap:3px;padding:12px 14px;border-top:1px solid #eee5dc}
.word:first-child{border-top:0}
.word b{font-size:23px;line-height:1.25}
.word span{color:#342d27}
.word small{color:#776d63}
footer{padding:24px 18px 44px;text-align:center;color:#6f655c}
@media(min-width:700px){
  .phrase{grid-template-columns:1.1fr 1.2fr 1fr;align-items:center}
  .phrase b{font-size:18px}
  .show-card-shell{padding-inline:clamp(28px,9vw,120px);justify-content:center}
  .word{grid-template-columns:1fr 1.2fr 1fr;align-items:center}
}