:root{font-family:system-ui,-apple-system,'Noto Sans KR','Segoe UI',sans-serif;color:#17243e;background:#f4f6fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;min-height:44px}button:disabled{opacity:.55;cursor:wait}.top{background:#fff;border-bottom:1px solid #e5eaf3;display:flex;justify-content:space-between;align-items:center;padding:14px max(20px,calc((100vw - 1100px)/2));gap:10px}.brand{display:flex;align-items:center;gap:12px}.brand strong{display:block;letter-spacing:.04em}.brand small{display:block;color:#78849a;font-size:12px;margin-top:2px}.logo{display:grid;place-items:center;background:#263b66;color:#fff;border-radius:13px;width:46px;height:46px;font-size:27px;font-weight:900}.logo span{color:#f4c96b;font-size:12px}.shell{max-width:1100px;margin:auto;padding:26px 20px 80px}.hero{background:linear-gradient(115deg,#23395f,#445f98);color:#fff;border-radius:24px;padding:40px 46px;position:relative;overflow:hidden}.hero:after{content:'✦';position:absolute;right:7%;top:0;font-size:230px;color:#ffffff0d}.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:800;color:#6983b7;margin:0 0 10px}.hero .eyebrow{color:#c3d5f7}.hero h1{font-size:clamp(28px,4vw,45px);line-height:1.35;margin:0 0 13px;letter-spacing:-.04em}.hero h1 em{font-style:normal;color:#ffe2a2}.hero>p:not(.eyebrow){color:#dce5f6;max-width:650px}.stats{display:flex;gap:45px;margin-top:28px}.stats div{display:flex;flex-direction:column;gap:4px}.stats strong{font-size:28px}.stats span{color:#c8d5ec;font-size:12px}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:24px 0 16px}.tab{border:1px solid #e0e6f1;background:#fff;color:#5a6880;border-radius:13px;font-weight:700;padding:13px 5px}.tab.active{background:#263b66;color:white;border-color:#263b66}.panel{display:none;background:#fff;border:1px solid #e7ebf3;border-radius:20px;padding:30px;min-height:400px;box-shadow:0 12px 35px #1e376509}.panel.active{display:block}.section-heading,.result-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}h2{margin:0;font-size:23px;letter-spacing:-.04em}.field-label{display:block;font-size:13px;font-weight:800;margin:0 0 10px}.date-label{font-size:12px;font-weight:700;color:#69778d;display:flex;align-items:center;gap:8px}input[type=date],input:not([type=checkbox]):not([type=file]),select,textarea{border:1px solid #d8e0ed;border-radius:11px;background:#fff;color:#17243e;padding:12px;width:100%;outline-color:#496caf}textarea{height:210px;resize:vertical;line-height:1.8}input[type=date]{width:auto}.under-field{display:flex;justify-content:space-between;gap:8px;color:#8b95a6;font-size:12px;margin:8px 0 24px}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 24px}.switch-row{display:flex;align-items:center;gap:10px;border:1px solid #d8e0ed;border-radius:11px;padding:11px 12px;min-height:46px;font-size:13px;color:#526078}.switch-row input{width:18px;height:18px;accent-color:#365b9b}.primary,.secondary,.ghost{border-radius:11px;padding:11px 18px;font-weight:800}.primary{background:#31599b;border:1px solid #31599b;color:#fff}.primary:hover{background:#25477f}.secondary{background:#f2f5fb;border:1px solid #dce4f1;color:#2c4b7e}.ghost{border:1px solid #dce4f1;background:#fff;color:#34518a}.wide{width:100%;font-size:15px;padding:16px}.hint,.muted{font-size:13px;color:#8190a5;line-height:1.7}.hint{text-align:center}.result{border-top:1px solid #e6eaf2;margin-top:30px;padding-top:28px}.sentence{border:1px solid #e2e8f3;border-radius:14px;padding:20px;margin:14px 0}.sentence-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.number{color:#6884b5;font-size:12px;font-weight:900}.english{font-size:18px;font-weight:750;line-height:1.65;margin:14px 0 7px}.korean{color:#586780;line-height:1.7;margin:0 0 12px}.mini-actions,.action-row,.inline-actions{display:flex;gap:8px;flex-wrap:wrap}.mini{border:1px solid #e0e7f3;background:#f7f9fc;border-radius:9px;padding:7px 11px;color:#395680;font-size:12px;min-height:34px}.chunks{background:#f7f9fe;border-radius:11px;padding:14px;margin-top:14px;display:none}.chunks.open{display:block}.chunk-grid{display:flex;flex-wrap:wrap;gap:8px}.chunk{border-right:1px solid #d6dfed;padding:4px 12px 4px 0}.chunk b,.chunk span{display:block;font-size:13px;line-height:1.6}.chunk span{color:#7c8ca4}.tip{font-size:12px;color:#647a9e;margin:12px 0 0}.action-row{margin-top:20px}.story-list{display:grid;gap:12px;margin-top:20px}.story-item{border:1px solid #e3e9f3;border-radius:13px;padding:17px;display:flex;align-items:center;justify-content:space-between;gap:15px}.story-item h3{margin:5px 0;font-size:16px}.story-item p{margin:0;color:#8090a7;font-size:12px}.file-label{display:inline-flex;align-items:center;cursor:pointer;font-size:14px}.empty{text-align:center;padding:55px 10px;color:#9ba7ba}.flashcard{border:2px solid #dce6f5;background:linear-gradient(#fff,#f6f9ff);border-radius:18px;min-height:210px;padding:30px;text-align:center;display:grid;place-items:center;cursor:pointer;margin:22px 0}.flashcard p{font-size:21px;font-weight:700;line-height:1.7;margin:0}.flashcard small{color:#8b9bb2}.review-controls{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}.book-preview{margin:24px auto;max-width:680px;background:#fff;border:1px solid #e5e9f0;box-shadow:0 12px 30px #23395f0d;padding:45px;min-height:300px}.book-cover{text-align:center;padding:60px 10px;border-bottom:1px solid #e7eaf1;margin-bottom:35px}.book-cover h2{font-family:Georgia,serif;font-size:36px;margin:15px 0}.book-entry{margin:28px 0;break-inside:avoid}.book-entry h3{color:#2e4d82}.book-entry p{line-height:1.8}.book-ko{color:#6d7b91;font-size:13px}.book-chunk{font-size:12px;color:#8b97aa}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#203557;color:#fff;border-radius:12px;padding:12px 18px;box-shadow:0 10px 25px #0003;display:none;max-width:90vw;z-index:5}.toast.show{display:block}footer{text-align:center;padding:20px;color:#9aa5b5;font-size:12px}@media(max-width:680px){.shell{padding:14px 12px 50px}.top{padding:12px}.hero{padding:29px 23px;border-radius:18px}.hero:after{display:none}.stats{gap:28px}.tabs{gap:5px}.tab{font-size:12px;padding:11px 3px}.panel{padding:19px 15px}.control-grid{grid-template-columns:1fr;gap:12px}.date-label{width:100%;justify-content:space-between}.date-label input{max-width:180px}.book-preview{padding:20px}.book-cover h2{font-size:27px}.story-item{align-items:flex-start;flex-direction:column}.inline-actions{width:100%}.inline-actions>*{flex:1;text-align:center;justify-content:center}.english{font-size:17px}footer span{display:none}}@media print{body{background:white}.top,.hero,.tabs,footer,.panel,#book .section-heading,#book>.muted,#book>.control-grid,.toast{display:none!important}.shell{padding:0;max-width:none}#book.panel{display:block!important;border:0;box-shadow:none;padding:0}.book-preview{max-width:none;border:0;box-shadow:none;padding:0;margin:0}.book-cover{min-height:85vh;display:flex;flex-direction:column;align-items:center;justify-content:center;break-after:page}.book-entry{break-inside:avoid} @page{size:A4;margin:18mm}}

/* Compact, single-line navigation on phones */
.tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.tab{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;white-space:nowrap;word-break:keep-all;overflow:hidden}
.tab-label{white-space:nowrap;flex:0 1 auto;min-width:0}
.tab-icon{flex:none}
@media(max-width:680px){
 .shell{padding-left:10px;padding-right:10px}
 .tabs{gap:4px}
 .tab{padding:11px 2px;font-size:clamp(10px,2.7vw,12px);letter-spacing:-.055em;border-radius:10px;min-height:48px}
 .tab-icon{display:none}
 .brand strong{font-size:clamp(15px,4vw,20px);letter-spacing:0}
}

/* Voice diary */
.diary-input-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.diary-input-heading .field-label{margin:0}.voice-button{border:1px solid #b9ccef;background:#eaf1ff;color:#214d91;font-weight:800;border-radius:11px;padding:10px 14px;white-space:nowrap;min-height:44px}.voice-button:disabled{opacity:.6}.voice-panel{border:1px solid #c6d6f0;background:#f5f8ff;border-radius:13px;padding:14px;margin-bottom:12px}.voice-panel[hidden]{display:none}.voice-status{display:flex;align-items:center;gap:10px;color:#243b65;font-weight:700}.voice-status strong{margin-left:auto;font-variant-numeric:tabular-nums}.voice-dot{height:11px;width:11px;border-radius:50%;background:#dc3c49;animation:pulse 1s infinite}.voice-dot.idle{background:#8596b1;animation:none}@keyframes pulse{50%{opacity:.25}}.voice-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.voice-actions button{flex:1}.voice-help{color:#64748b;font-size:12px;line-height:1.6;margin:10px 0 0}@media(max-width:680px){.voice-button{font-size:13px;padding:10px 12px}.diary-input-heading .field-label{font-size:13px}}

/* MY ENGLISH DIARY · Sunshine palette: cream, honey yellow, warm cocoa */
:root{--cream:#fffaf0;--honey:#f6c84f;--cocoa:#49391f;--line:#eadfca;--muted:#766b58;color:var(--cocoa);background:var(--cream)}
body{background:var(--cream);color:var(--cocoa)}
.top{background:#fffdf8;border-bottom-color:var(--line)}.brand small,.muted,.hint,.under-field,.date-label,.story-item p,.empty,footer{color:var(--muted)}
.logo{background:var(--honey);color:var(--cocoa)}.logo span{color:var(--cocoa)}
.hero{background:linear-gradient(125deg,#ffe9a7,#f6c84f);color:var(--cocoa)}.hero .eyebrow,.hero>p:not(.eyebrow),.stats span{color:#5d4a27}.hero h1 em{color:#8a5815}.hero:after{color:#ffffff45}
.tab{background:#fffdf8;color:var(--cocoa);border-color:var(--line)}.tab.active{background:var(--honey);color:var(--cocoa);border-color:var(--honey)}.tab:hover{background:#fff0bf}
.panel,.sentence,.story-item,.book-preview{background:#fffdf8;border-color:var(--line);box-shadow:0 8px 28px #785b1810}
.eyebrow,.number{color:#a9781f}.field-label,.date-label,h2,.english{color:var(--cocoa)}
input[type=date],input:not([type=checkbox]):not([type=file]),select,textarea,.switch-row{background:#fffefa;color:var(--cocoa);border-color:var(--line);outline-color:#c99523}
input[type=checkbox]{accent-color:#c99523}textarea::placeholder{color:#9b8e77;opacity:1}
.primary{background:var(--honey);border-color:var(--honey);color:var(--cocoa)}.primary:hover{background:#e9b83d}.secondary,.ghost,.mini{background:#fff4d6;border-color:var(--line);color:var(--cocoa)}.secondary:hover,.ghost:hover,.mini:hover{background:#ffe8aa}
.switch-row input{accent-color:#c99523}.result{border-top-color:var(--line)}.korean,.chunk span,.tip{color:var(--muted)}.chunks,.flashcard{background:#fff6dd;border-color:var(--line)}.chunk{border-right-color:var(--line)}.book-entry h3{color:#956618}.book-ko,.book-chunk{color:var(--muted)}.toast{background:var(--cocoa);color:#fffdf8}
/* Right-aligned, refined microphone button on the same label row */
.diary-input-heading{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;margin-bottom:10px}
.diary-input-heading .field-label{flex:1;min-width:0;margin:0}
.voice-button{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid #e4bd56;background:#fff1bf;color:var(--cocoa);font-size:13px;font-weight:750;box-shadow:0 2px 7px #9b742114;white-space:nowrap;transition:background .15s,transform .15s}
.voice-button:hover{background:#ffe398;transform:translateY(-1px)}.voice-button:focus-visible{outline:3px solid #d49c26;outline-offset:2px}
.voice-panel{background:#fff7df;border-color:#ecd495}.voice-status{color:var(--cocoa)}.voice-help{color:var(--muted)}
@media(max-width:680px){.diary-input-heading{gap:7px}.diary-input-heading .field-label{font-size:12px}.voice-button{font-size:12px;padding:8px 11px;min-height:40px}.tab{font-size:clamp(10px,2.7vw,12px)}}