:root{--ink:#18394b;--muted:#647681;--blue:#176dba;--paper:#f4f5f1;--line:#dce3e5;--red:#bd3434}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 'Noto Sans JP','Noto Sans KR',sans-serif}header{display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line);padding:18px max(5vw,20px);background:#fff}.brand{font-weight:700;font-size:20px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:12px}.brand span{background:var(--ink);color:#f2c36a;padding:2px 10px;border-radius:8px}header p{font-size:14px;color:var(--muted)}header small{margin-left:auto;letter-spacing:.12em}main{max-width:1050px;margin:auto;padding:38px 24px}.intro{display:flex;justify-content:space-between;align-items:center;gap:20px}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--blue);font-weight:700}h1{font-size:32px;letter-spacing:.02em;margin:8px 0}.intro p:not(.eyebrow){color:var(--muted);margin:6px 0}.count{text-align:right}.count strong{display:block;font-size:40px;line-height:1.2}.count span{font-size:12px}nav{display:flex;gap:10px;border-bottom:1px solid var(--line);margin:30px 0 24px}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;padding:9px 15px;transition:background .15s}button:hover{background:#eaf2f8}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #e4ad42;outline-offset:3px}nav button{border:0;border-bottom:3px solid transparent;background:transparent;border-radius:0;padding:12px 18px}nav button.active{color:var(--blue);border-color:var(--blue);font-weight:700}nav small{font-size:11px}.controls{display:flex;gap:16px;align-items:end}label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:6px}select,input{border:1px solid #cdd9dc;background:#fff;border-radius:8px;padding:10px 12px;color:var(--ink);min-width:0;font-size:14px}.search{flex:1}.controls label:first-child{max-width:260px}#status{font-size:12px;color:var(--muted);min-height:35px;padding:8px 0}.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:8px 0 18px}.pager label{flex:1;max-width:630px}.pager button{white-space:nowrap}.pager select{width:100%}.card-top{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;background:var(--ink);color:white;border-radius:14px 14px 0 0;gap:14px}.card-top h2{font-size:23px;margin:4px 0;font-weight:500}.card-top small{color:#bcd2df;letter-spacing:.08em}.card-top button{font-size:12px;background:transparent;color:#fff;border-color:#64818f}.audio-bar{display:flex;gap:9px;padding:16px 28px;background:#e9eef0;border:1px solid var(--line)}.primary{background:var(--blue);color:white;border-color:var(--blue)}.primary:hover{background:#135a98}.language{background:#fff;padding:26px 28px;border:1px solid var(--line);border-top:0}.language:last-child{border-radius:0 0 14px 14px}.lang-head{display:flex;align-items:center;justify-content:space-between}.lang-tag{font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--blue)}.language.ko .lang-tag{color:#9e6923}.sentence{font-size:28px;margin:12px 0 18px;line-height:1.7;overflow-wrap:anywhere}.weak{color:var(--red);font-size:.88em;font-weight:400}.chunks{display:flex;gap:10px;flex-wrap:wrap}.chunk{flex:1;min-width:150px;text-align:left;border:1px solid #d6e2e9;border-radius:10px;background:#f7fafc;padding:14px}.ko .chunk{background:#fdfaf4;border-color:#e9e0ce}.chunk .original{font-size:20px;display:block}.chunk .gloss{color:var(--muted);display:block;font-size:13px;margin-top:7px}.chunk .play{font-size:10px;color:var(--blue);display:block;margin-bottom:5px}.tip{font-size:13px;color:#435d6d;margin:18px 0 0;padding:12px 16px;border-left:3px solid #edbd68;background:#faf9f5;white-space:pre-line}.tip strong{display:block;font-size:11px;color:#9e6923;letter-spacing:.06em;margin-bottom:4px}details.more{font-size:13px;margin-top:14px}details.more p{white-space:pre-line;margin:10px 0}.settings{margin:24px 0;background:#eaf0f0;border-radius:10px;padding:16px 20px;font-size:13px}.settings summary{cursor:pointer;font-weight:600}.voice-grid{display:flex;gap:16px;margin:16px 0}.voice-grid label{width:50%}.settings p{color:var(--muted)}footer{border-top:1px solid var(--line);margin-top:35px;padding-top:20px;font-size:11px;color:var(--muted)}footer a{color:var(--muted)}.table-wrap{overflow:auto;background:white;border-radius:12px}table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:12px 18px;border-bottom:1px solid var(--line)}th{font-size:12px;background:#e8eef0}td{font-size:15px}td button{font-size:11px;padding:4px 8px;margin-left:8px}.guide-item{background:white;border:1px solid var(--line);padding:20px;margin:12px 0;border-radius:10px}.guide-item h3{margin:0;font-size:18px}.guide-item p{white-space:pre-line;margin:8px 0}[hidden]{display:none!important}.empty{padding:40px;background:white;text-align:center}.meaning-hidden .gloss{visibility:hidden}
@media(max-width:650px){header{gap:10px;padding:14px 18px}header p{display:none}header small{font-size:9px}main{padding:24px 16px}.intro{align-items:start}h1{font-size:23px}.intro p:not(.eyebrow){font-size:13px}.count strong{font-size:28px}.count span{font-size:10px}.eyebrow{font-size:8px}.controls{flex-wrap:wrap;gap:10px}.controls label:first-child{width:100%;max-width:none}.controls .search{flex:1;min-width:150px}.controls label:last-child{width:145px}nav button{padding:10px 12px;font-size:14px}.pager{gap:8px}.pager button{padding:8px;font-size:12px}.pager select{font-size:12px}.card-top,.language{padding:20px}.card-top h2{font-size:19px}.audio-bar{padding:12px;flex-wrap:wrap}.audio-bar button{font-size:13px}.sentence{font-size:24px}.chunks{gap:8px}.chunk{min-width:120px;padding:12px}.chunk .original{font-size:18px}.lang-head button{font-size:12px}.voice-grid{flex-direction:column}.voice-grid label{width:100%}td,th{padding:10px}.count{min-width:75px}}

.tense-line{display:flex;gap:5px;white-space:nowrap;font-size:14px}.tense-0{color:#586776}.tense-1{font-weight:700;color:#18394b}.tense-2{color:#176dba}.tense-divider{color:#a4afb6}.no-tense{font-size:11px;color:#839097;white-space:nowrap}.tense-note{font-size:12px;color:#647681;max-width:850px;line-height:1.8}#vocab th,#vocab td{white-space:nowrap}#vocab .table-wrap{border:1px solid #dce3e5}

.tense-pair{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-width:175px}.word-audio{display:inline-flex;align-items:center;gap:5px}.word-audio[lang="ko"]{color:#8b622f}#vocab .word-audio button{margin:0;padding:3px 7px;flex-shrink:0}#vocab th{font-size:14px}#vocab td{padding:15px 18px;vertical-align:middle}#vocab th:last-child{min-width:140px}@media(max-width:650px){.tense-pair{min-width:145px;gap:6px}#vocab td{padding:12px}}

#vocab .tense-pair{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:7px;min-width:0}#vocab .word-audio{white-space:nowrap}

.guide-intro{font-weight:600;font-size:20px}.guide-item h3{margin-top:8px;font-size:21px}.guide-example{background:#f3f7fa;border-radius:9px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:15px;margin:18px 0}.example-label{font-size:11px;color:#647681}.guide-item .guide-sample{font-size:25px;margin:4px 0}.guide-example span{font-size:13px}.guide-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}.guide-compare>div{padding:15px;border-radius:9px}.correct-example{background:#edf6f0;border:1px solid #c9e1cf}.correct-example b{color:#286342}.ng-example{background:#fff1ee;border:1px solid #ecd1ca}.ng-example b{color:#a6372b}.guide-compare p{font-size:14px}.practice{font-size:14px} @media(max-width:650px){.guide-compare{grid-template-columns:1fr}.guide-example{align-items:flex-start;flex-direction:column}.guide-item h3{font-size:19px}}

.rule-scope{background:#fff8e8;border-left:3px solid #e7b45c;padding:16px;margin:16px 0;border-radius:0 8px 8px 0;font-size:14px}.sentence-example{background:#edf6f0}

.listen-compare{margin:24px 0 10px}.sentence-example{align-items:flex-start}.sentence-example>div{flex:1;min-width:0}.sentence-example button{white-space:nowrap;flex-shrink:0}.guide-item .comparison-sound,.guide-item .comparison-reason{font-size:13px;line-height:1.8}.guide-item .comparison-sound{color:#235c46}.guide-item .comparison-reason{color:#647681}
/* Compact four-column vocabulary on phones */
@media(max-width:650px){main{padding:16px 8px}#vocab>p{margin:8px 2px}#vocab .tense-note{font-size:11px;line-height:1.55;max-height:3.1em;overflow:auto}#vocab .table-wrap{overflow:visible;border-radius:8px}#vocab table{table-layout:fixed;width:100%}#vocab th,#vocab td{white-space:normal;padding:7px 3px;overflow-wrap:anywhere;font-size:12px;line-height:1.35}#vocab th{font-size:12px}#vocab th:nth-child(1),#vocab th:nth-child(2){width:24%}#vocab th:nth-child(3){width:32%}#vocab th:last-child{width:20%;min-width:0}#vocab .tense-pair{gap:5px;width:100%;min-width:0}#vocab .word-audio{display:flex;align-items:center;gap:2px;white-space:normal;max-width:100%;width:100%;min-width:0}#vocab .word-audio>span{min-width:0;overflow-wrap:anywhere}#vocab .word-audio button{font-family:Arial,sans-serif;font-size:10px;line-height:1;padding:0;width:24px;height:28px;min-width:24px;border-radius:5px;flex-shrink:0}#vocab td:last-child{font-size:11px}}