:root{font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;color:#172033;background:#f2f4f8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.4}#app{max-width:480px;margin:auto;background:#fff;min-height:100dvh;display:flex;flex-direction:column;box-shadow:0 4px 26px #152b4a15}header{background:#2563eb;color:white;min-height:69px;padding:12px 16px;display:flex;align-items:center;gap:8px;flex-shrink:0}header .brand{display:flex;flex:1;flex-direction:column;min-width:0}header strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}header small{font-size:11px;color:#dbeafe;margin-top:2px}.header-action,.back{border:0;background:#ffffff24;color:white;border-radius:10px;min-width:36px;height:36px;font-size:21px}.back{background:transparent;font-size:32px;line-height:25px}.hidden{display:none!important}main{padding:16px;flex:1;overflow-y:auto;padding-bottom:24px}nav{position:sticky;bottom:0;background:white;border-top:1px solid #e5e7eb;display:grid;grid-template-columns:repeat(5,1fr);padding:7px 3px calc(7px + env(safe-area-inset-bottom));z-index:5}nav button{border:0;background:transparent;color:#667085;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;border-radius:10px;padding:6px 0}nav .active{background:#eff6ff;color:#2563eb;font-weight:700}nav .ico{font-size:20px}h1{font-size:22px;margin:0 0 5px}h2{font-size:17px;margin:0 0 10px}h3{font-size:15px;margin:0 0 8px}p{margin:0;line-height:1.6}.muted{color:#64748b}.small{font-size:12px}.tiny{font-size:11px}.stack{display:flex;flex-direction:column;gap:14px}.card{border:1px solid #e2e8f0;border-radius:17px;padding:15px;background:#fff}.blue-card{background:#eff6ff;border:0}.flex{display:flex;align-items:center;gap:9px}.between{display:flex;justify-content:space-between;align-items:center;gap:10px}.grow{flex:1;min-width:0}.btn{border:1px solid transparent;border-radius:12px;padding:11px 13px;font-size:14px;font-weight:700;background:#2563eb;color:#fff;min-height:44px}.btn.alt{background:white;border-color:#cbd5e1;color:#334155}.btn.negative{border-color:#fecaca;background:#fff1f2;color:#b91c1c}.btn.blue{background:#2563eb!important;color:white!important;border-color:#2563eb!important}.btn.sm{min-height:36px;padding:7px 10px;font-size:12px}.btn:active{transform:scale(.98)}.full{width:100%}.progress{background:#dbeafe;height:8px;border-radius:20px;overflow:hidden}.progress span{display:block;height:100%;background:#2563eb;border-radius:20px}.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.numbers>div{text-align:center;background:white;border-radius:11px;padding:9px 4px}.numbers strong{display:block;color:#1d4ed8;font-size:20px}.numbers span{color:#64748b;font-size:11px}.note{width:100%;text-align:left;border:1px solid #e2e8f0;background:white;border-radius:13px;padding:13px;display:flex;flex-direction:column;gap:8px}.tag{font-size:11px;border-radius:20px;background:#eff6ff;color:#1d4ed8;padding:4px 9px;font-weight:700;display:inline-block}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{font-size:12px;padding:7px 10px;background:white;border:1px solid #cbd5e1;border-radius:12px;color:#334155}.chip.selected{background:#2563eb;color:white;border-color:#2563eb}.field{width:100%;padding:11px 12px;min-height:44px;background:#fff;border:1px solid #cbd5e1;border-radius:11px;outline-color:#2563eb;color:#172033}textarea.field{resize:vertical;min-height:90px}.question-card{border:1px solid #dbe2ee;border-radius:20px;min-height:270px;padding:18px;display:flex;flex-direction:column;gap:17px}.question-card .prompt{flex:1;display:grid;place-items:center;font-size:19px;font-weight:700;line-height:1.6;text-align:center;white-space:pre-line;cursor:pointer}.answer{flex:1;font-size:16px;line-height:2;white-space:normal;overflow-wrap:anywhere;max-height:48vh;overflow-y:auto}.keyword{background:#cbd5e1;color:transparent;border:0;border-radius:4px;padding:2px 4px;line-height:1.9;box-decoration-break:clone;display:inline;user-select:none;-webkit-user-select:none}.keyword.revealed{background:#dbeafe;color:#1d4ed8;font-weight:700}.question-list{display:flex;flex-direction:column;gap:10px}.question-list .item{border:1px solid #e2e8f0;border-radius:13px;padding:13px}.question-list .item p{font-size:14px;font-weight:600;margin:11px 0}.button-row{display:flex;align-items:center;gap:7px}.button-row>.btn{flex:1}.pill-count{font-variant-numeric:tabular-nums;min-width:55px;text-align:center}.bar{height:7px;background:#eff1f5;border-radius:12px;overflow:hidden}.bar>div{height:100%;background:#2563eb}.bars{display:flex;align-items:end;gap:8px;height:120px;margin-top:8px}.bars .bar-col{flex:1;text-align:center;font-size:11px;color:#64748b}.bars .bar-col>div{background:#3b82f6;border-radius:6px 6px 0 0;min-height:2px;margin-bottom:6px}.modal{position:fixed;inset:0;background:#11182780;display:flex;align-items:end;justify-content:center;z-index:30}.sheet{background:white;border-radius:22px 22px 0 0;width:100%;max-width:480px;max-height:90dvh;overflow:auto;padding:18px 18px calc(20px + env(safe-area-inset-bottom))}.sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.sheet-top strong{font-size:18px}.plain{background:transparent;border:0;font-size:20px;padding:7px}.modal-form{display:flex;flex-direction:column;gap:12px}.modal-form label{font-size:12px;color:#475569;font-weight:700;display:flex;flex-direction:column;gap:5px}#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:85px;z-index:50;background:#1e293b;color:white;border-radius:12px;padding:10px 16px;font-size:12px;display:none;max-width:88vw}.stats-card{display:flex;align-items:center;justify-content:space-between}.stat-num{font-size:30px;font-weight:800;color:#1d4ed8}.divider{height:1px;background:#e2e8f0;margin:4px 0}.line{margin-bottom:9px}.warning{background:#fffbeb;border-radius:11px;padding:10px;font-size:12px;color:#92400e}a{color:#1d4ed8}@media(min-width:600px){#app{min-height:850px;margin:20px auto;border-radius:22px;overflow:hidden}body{padding-bottom:20px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* v2.1 mobile layout adjustments */
#mode-select.compact-mode{min-height:34px;height:34px;padding:4px 34px 4px 11px;font-size:13px;border-radius:9px}
.scroll-chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;min-width:0;width:100%;padding:2px 1px 6px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
.scroll-chips::-webkit-scrollbar{display:none}
.scroll-chips .chip{flex:0 0 auto;white-space:nowrap}
.manage-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.manage-toolbar h2{margin:0;font-size:16px;white-space:nowrap;flex-shrink:0}
.manage-actions{display:flex;align-items:center;gap:5px;justify-content:flex-end;min-width:0}
.manage-actions .btn{white-space:nowrap;padding:7px 8px;min-height:35px;font-size:11px;border-radius:9px}
.manage-filters{display:flex;align-items:center;gap:9px}
.manage-filters .filter-label{font-size:12px;color:#475569;font-weight:600;white-space:nowrap}
.manage-filters .compact-filter{width:auto;flex:1;min-width:0;height:38px;min-height:38px;padding:5px 9px;font-size:13px}
@media(max-width:360px){.manage-toolbar{flex-wrap:wrap}.manage-actions{width:100%;justify-content:flex-start}.manage-actions .btn{flex:1}}

/* v2.3 multiple choice / camera / per-question note */
.choice-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}.choice-row{display:flex;gap:7px;align-items:end;border:1px solid #e2e8f0;border-radius:11px;padding:9px}.choice-row .choice-label{flex:0 0 44px;font-size:11px;align-items:center;justify-content:center;text-align:center;gap:5px}.choice-label input{width:19px;height:19px;accent-color:#2563eb}.choice-field{flex:1;min-width:0}.choice-field .field{min-height:40px;padding:8px}.choice-review{display:flex;flex-direction:column;gap:8px;text-align:left;width:100%;font-size:14px;font-weight:500}.choice-review>div{padding:9px 11px;border:1px solid #e2e8f0;border-radius:10px}.choice-review .correct-option{background:#ecfdf5;border-color:#86efac;color:#166534;font-weight:700}.front-choice{font-weight:400;font-size:15px}.study-image{display:block;max-width:100%;max-height:300px;object-fit:contain;border-radius:10px;margin:10px auto}.question-card .prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.memo-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px;border-top:1px solid #e5e7eb;padding-top:10px}.memo-strip .btn{flex-shrink:0}#choice-editor.hidden{display:none!important}.modal-form #photo-preview{max-width:100%;overflow:hidden}

/* v2.4: notes are closed by default and expand only on request */
.memo-fold{border-top:1px solid #e5e7eb;padding-top:9px}.memo-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;min-height:40px;padding:7px 4px;border:0;background:transparent;color:#334155;font-size:13px;font-weight:700;text-align:left}.memo-toggle span{font-size:19px;color:#64748b}.memo-panel{padding:12px;margin-top:4px;border:1px solid #dbeafe;background:#f8fbff;border-radius:11px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}.memo-content{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;color:#334155;line-height:1.65;width:100%}.question-list .memo-panel{margin-top:12px}

/* v2.7: keyword mask compact height without changing text size or reveal interaction */
.answer .keyword{padding:0 2px;line-height:1.25;border-radius:3px;vertical-align:baseline;}

/* v2.8 IndexedDB image gallery: up to 3 photos per question */
.photo-gallery{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;width:100%}.photo-gallery .study-image{width:calc(50% - 7px);max-height:200px;object-fit:contain;background:#f8fafc;border:1px solid #e2e8f0;margin:4px 0;min-height:80px}.photo-preview-item{padding:10px 0;border-bottom:1px solid #e2e8f0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}.photo-preview-item .study-image{max-height:175px;margin:0}.photo-lazy:not([src]){background:#f1f5f9}

/* v2.9 note maintenance */
.note-wrap{position:relative}.note-main{padding-right:57px}.note-more{position:absolute;right:11px;top:11px;min-width:38px;height:38px;background:#eff6ff;color:#2563eb;border:1px solid #dbeafe;border-radius:10px;font-size:25px;line-height:1;z-index:1}

/* v2.9.3: viewport-constrained app shell on phone, tablet and desktop.
   Only #content scrolls; app header and tabbar remain visible. */
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{padding:0!important}
#app{height:100vh;height:100dvh;min-height:0;max-height:100dvh;width:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
#app>header{position:relative;z-index:5;flex:0 0 auto;padding-top:calc(12px + env(safe-area-inset-top,0px))}
#content{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
#tabs{position:relative;bottom:auto;flex:0 0 auto;min-height:0;z-index:5}
@media(min-width:600px){body{padding:0!important}#app{height:100vh;height:100dvh;min-height:0;max-height:100dvh;margin:0 auto;border-radius:0;overflow:hidden}}
@supports not (height:100dvh){#app{height:100vh;max-height:100vh}}

.cloud-box{border:1px solid #bfdbfe}.cloud-label{font-size:11px;color:#1d4ed8;background:#eff6ff;padding:4px 8px;border-radius:20px}.cloud-actions{display:flex;gap:8px;flex-wrap:wrap}.cloud-actions .btn{flex:1 1 115px}.cloud-status{overflow-wrap:anywhere}

/* v3.0.1 login-first gate; viewport safe on mobile / tablet */
#auth-gate{position:fixed;inset:0;background:#f6f8fc;z-index:90;display:flex;justify-content:center;align-items:center;padding:calc(22px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom));overflow:auto}
#auth-gate[hidden]{display:none!important}
.auth-panel{width:100%;max-width:420px;background:white;border:1px solid #dbe5f3;border-radius:23px;box-shadow:0 10px 40px #1e3a8a13;padding:28px 23px;display:flex;flex-direction:column;gap:17px}
.auth-mark{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:#2563eb;color:white;font-size:27px;font-weight:bold}
.auth-panel h1{font-size:25px;margin:0}.auth-panel p{color:#64748b;font-size:14px;line-height:1.6}
.auth-panel label{font-size:13px;font-weight:700;color:#334155}.auth-panel input{width:100%}
.auth-panel .auth-divider{display:flex;align-items:center;gap:12px;color:#94a3b8;font-size:12px}.auth-panel .auth-divider:before,.auth-panel .auth-divider:after{content:'';height:1px;flex:1;background:#e2e8f0}
.auth-panel .auth-notice{border-radius:11px;background:#eff6ff;color:#1d4ed8;padding:12px;font-size:12px;line-height:1.6;white-space:pre-wrap}
.auth-panel .auth-notice.error{background:#fff1f2;color:#b91c1c}
.auth-panel .auth-help{font-size:12px;color:#64748b;line-height:1.55}
.cl-dialog{position:fixed;inset:0;background:#11182799;display:flex;align-items:center;justify-content:center;z-index:120;padding:18px}.cl-sheet{background:#fff;border-radius:18px;width:100%;max-width:400px;padding:18px;display:flex;flex-direction:column;gap:9px}.cl-sheet strong{font-size:17px}.cl-err{color:#b91c1c;min-height:16px}