:root{--color-bg: #080a10;--app-bg-solid: #0c1018;--color-bg-soft: #0f131b;--color-panel: #121620;--color-panel-strong: #1a2130;--color-border: #2a3142;--color-border-strong: rgba(110, 125, 255, .34);--color-text: #edf0f8;--color-text-muted: #9ea8bd;--color-accent: #7f8dff;--color-accent-soft: #b3b9ff;--color-success: #5fcb9a;--color-danger: #ff7d87;--shadow-soft: 0 20px 48px rgba(0, 0, 0, .4);--font-mono: "IBM Plex Mono", "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, monospace;--font-sans: "Space Grotesk", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;--mobile-footer-gap: 12px;--mobile-footer-gap: max(12px, env(safe-area-inset-bottom))}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}button,input,textarea,select{-webkit-appearance:none}button,.word-btn,.word-tag{user-select:none;-webkit-user-select:none}::selection{background:transparent;color:inherit}html{background:var(--app-bg-solid);min-height:100%;height:-webkit-fill-available}body{margin:0;padding:0;background:radial-gradient(1200px 760px at -10% -20%,rgba(127,141,255,.3),transparent 58%),radial-gradient(980px 560px at 110% 120%,rgba(85,202,255,.18),transparent 62%),radial-gradient(760px 420px at 78% 24%,rgba(149,158,255,.12),transparent 72%),linear-gradient(160deg,#070910,#0c1018 45%,#090c14);color:var(--color-text);font-family:var(--font-sans);min-height:100vh;min-height:100dvh;overflow:hidden;position:relative}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px,44px 44px;opacity:.36;mix-blend-mode:screen;z-index:0}body:after{content:"";position:fixed;inset:-12%;pointer-events:none;background:conic-gradient(from 220deg at 70% 45%,transparent 0deg,rgba(127,141,255,.18) 58deg,transparent 132deg,rgba(82,185,255,.14) 214deg,transparent 312deg);filter:blur(46px);opacity:.75;animation:linearAuraDrift 18s ease-in-out infinite alternate;z-index:0}@supports (-webkit-touch-callout: none){html{height:-webkit-fill-available}body{min-height:-webkit-fill-available}}@keyframes linearAuraDrift{0%{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,1.5%,0) scale(1.05)}}@media(prefers-reduced-motion:reduce){body:after{animation:none}#editor-view{transition:none;transform:translate(-50%)}#editor-view.active{transform:translate(-50%)}}.container{max-width:980px;margin:1rem auto;padding:2rem;height:calc(100% - 2rem);display:flex;flex-direction:column;position:relative;z-index:1;background:linear-gradient(160deg,#10131ed1,#0b0e18c7);border:1px solid var(--color-border-strong);border-radius:24px;box-shadow:var(--shadow-soft),inset 0 1px #ffffff0d;backdrop-filter:blur(10px)}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.08)}h1{font-size:1.6rem;font-weight:700;margin:0;letter-spacing:-.02em;text-transform:none;color:#f5f7ff;text-shadow:0 0 18px rgba(127,141,255,.24)}.btn{background:linear-gradient(180deg,#1f2634f5,#141924f5);border:1px solid rgba(126,141,255,.3);color:var(--color-text);padding:7px 13px;border-radius:10px;cursor:pointer;font-size:.875rem;font-weight:600;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;box-shadow:inset 0 1px #ffffff14}.btn:hover{background:linear-gradient(180deg,#283142,#191f2c);border-color:#909dffbf;box-shadow:0 10px 22px #7f8dff33;transform:translateY(-1px)}.btn-danger{color:#ffd6d1;border-color:#ff6b6b8c}.btn-danger:hover{background:linear-gradient(180deg,#4d2124f2,#351619f2);border-color:#ff6b6bd9;box-shadow:0 10px 22px #ff6b6b33}.btn-sm{font-size:.75rem;padding:2px 8px}#mnemonic-view{flex:1;display:flex;flex-direction:column;gap:1.5rem;transition:opacity .3s ease;min-height:0}.mnemonic-content{display:flex;flex-direction:column;gap:1.5rem}.mnemonic-footer{display:block}.instruction{color:#b3bdd0;font-size:.95rem;line-height:1.55}.selected-area{height:112px;padding:1rem;background:linear-gradient(180deg,#181e2ce0,#10141fe0);border:1px solid rgba(126,141,255,.28);border-radius:14px;display:flex;flex-wrap:wrap;gap:.5rem;align-content:flex-start;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;box-shadow:inset 0 1px #ffffff0a}.selected-area.is-empty{align-items:center;justify-content:center}.selected-empty-message{color:var(--color-text-muted);font-size:.9rem;width:100%;text-align:center}.word-tag{background:linear-gradient(180deg,#7f8dff42,#7f8dff1a);border:1px solid rgba(127,141,255,.65);color:#e4e9ff;padding:4px 10px;border-radius:20px;font-size:.85rem;font-family:var(--font-mono);display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.word-tag:hover{background:linear-gradient(180deg,#7f8dff5c,#7f8dff29)}.word-tag .index{opacity:.6;font-size:.7em;margin-right:2px}.controls{display:flex;gap:1rem;align-items:center}.search-box{flex:1;background:#0b0e16db;border:1px solid rgba(126,141,255,.24);color:var(--color-text);padding:10px 12px;border-radius:12px;font-family:var(--font-mono);outline:none;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.search-box:focus{border-color:var(--color-accent);background:#0d111bf5;box-shadow:0 0 0 1px #7f8dffb8,0 0 0 6px #7f8dff2b}.word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;height:250px;overflow-y:auto;padding:10px;border-radius:14px;border:1px solid rgba(126,141,255,.24);background:#0c0f18c2;scrollbar-gutter:stable}.word-grid::-webkit-scrollbar{width:8px}.word-grid::-webkit-scrollbar-track{background:transparent}.word-grid::-webkit-scrollbar-thumb{background:#7f8dff80;border-radius:4px}.word-btn{background:linear-gradient(180deg,#222939f2,#171c29f2);border:1px solid rgba(154,164,178,.22);color:var(--color-text-muted);padding:8px;border-radius:10px;text-align:center;cursor:pointer;font-family:var(--font-mono);font-size:.85rem;transition:transform .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;user-select:none}.word-btn:hover{border-color:#7f8dff9e;color:#dfe5ff;transform:translateY(-1px);box-shadow:0 6px 14px #7f8dff29}.mnemonic-error{min-height:20px;color:#ff8d9a;font-size:.8rem;margin:-.5rem 0}.candidate-hint{min-height:18px;color:var(--color-accent-soft);font-size:.8rem;margin:-.5rem 0}#lock-view{flex:1;display:none;align-items:center;justify-content:center}.lock-card{width:min(540px,100%);background:linear-gradient(180deg,#181e2ced,#10141fed);border:1px solid rgba(126,141,255,.28);border-radius:16px;padding:1.25rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:var(--shadow-soft)}.lock-title{margin:0;font-size:1.1rem;letter-spacing:-.01em}.lock-description{margin:0;color:var(--color-text-muted);font-size:.9rem}.lock-form{display:flex;flex-direction:column;gap:.8rem}.lock-field{display:flex;flex-direction:column;gap:.4rem}.lock-label{color:#d5dcf0;font-size:.8rem;font-family:var(--font-mono)}.lock-input{width:100%;background:#0b0e16db;border:1px solid rgba(126,141,255,.24);color:var(--color-text);padding:12px;border-radius:12px;font-family:var(--font-mono);outline:none;transition:border-color .2s ease,box-shadow .2s ease}.lock-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 1px #7f8dffb8,0 0 0 6px #7f8dff2b}.lock-error{min-height:20px;color:#ff8d9a;font-size:.8rem;margin:0}.lock-actions{display:flex;flex-direction:column;gap:.55rem}.lock-secondary{width:100%;border:1px dashed rgba(127,141,255,.42)}#editor-view{flex:1;display:flex;flex-direction:column;height:auto;opacity:0;pointer-events:none;position:fixed;top:1rem;bottom:1rem;width:min(980px,calc(100% - 2rem));padding:2rem;left:50%;transform:translate(-50%) translateY(18px) scale(.985);z-index:4;transition:opacity .26s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}#editor-view.active{opacity:1;pointer-events:all;transform:translate(-50%) translateY(0) scale(1)}#editor-view header{display:flex;justify-content:flex-end;align-items:center}.editor-header-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}.btn-accent{border-color:#7f8dff85;color:#e5eaff;background:linear-gradient(180deg,#7f8dff4d,#424ea652);box-shadow:0 10px 20px #5663cc3d}.btn-accent:hover{border-color:#919fffcc;transform:translateY(-1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.editor-loading{position:absolute;inset:0;background:linear-gradient(180deg,#121824e0,#080c14e0);border-radius:16px;display:none;z-index:2;align-items:center;justify-content:center;flex-direction:column;gap:.75rem}.editor-loading.visible{display:flex}.editor-loading-spinner{width:36px;height:36px;border-radius:50%;border:3px solid rgba(127,141,255,.25);border-top-color:#adb8fff2;animation:spin .85s linear infinite}.editor-loading-label{font-size:.85rem;color:#d8deff;font-family:var(--font-mono);animation:pulse 1.15s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}#editor-view.is-loading #note-editor{pointer-events:none}.editor-container{flex:1;background:linear-gradient(180deg,#181e2ced,#10141fed);border:1px solid rgba(126,141,255,.28);border-radius:16px;display:flex;flex-direction:column;margin-top:1rem;position:relative;box-shadow:var(--shadow-soft)}textarea{flex:1;background:transparent;border:none;color:var(--color-text);padding:1.5rem;font-family:var(--font-mono);font-size:1.02rem;line-height:1.65;resize:none;outline:none}.status-bar{border-top:1px solid rgba(126,141,255,.24);padding:8px 16px;font-size:.75rem;color:#aeb6c9;display:flex;justify-content:space-between;background:#0d111ab8;border-radius:0 0 16px 16px}.status-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--color-border)}.status-indicator.saving{background:#e3b341}.status-indicator.saved{background:#39d98a}.status-indicator.error{background:#ff7d87}.hidden{display:none!important}.offline-banner{display:none;margin-bottom:1rem;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,125,135,.45);background:linear-gradient(180deg,#581c23c7,#341016c7);color:#ffd5d8;font-size:.84rem}.offline-banner.visible{display:block}#unlock-btn{letter-spacing:.01em;font-weight:700}@media(max-width:768px){.container{margin:.5rem auto;padding:1rem;padding-top:calc(1rem + env(safe-area-inset-top));height:calc(100% - 1rem);height:calc(100dvh - 1rem);border-radius:16px}#editor-view{top:.5rem;bottom:.5rem;width:calc(100% - 1rem);padding:1rem}.editor-header-actions{width:100%;justify-content:flex-end}header{margin-bottom:1rem;padding-bottom:.75rem}#mnemonic-view{gap:0;overflow:visible}#lock-view{align-items:stretch;justify-content:flex-start;overflow-y:auto}.lock-card{width:100%}.mnemonic-content{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;padding-bottom:calc(5.5rem + var(--mobile-footer-gap));gap:1rem}.instruction,.controls,#candidate-hint,#mnemonic-error,.selected-area,.mnemonic-footer{flex-shrink:0}.word-grid{height:auto;flex:0 0 auto;height:clamp(220px,36dvh,420px);min-height:220px}.selected-area{height:84px}.mnemonic-footer{position:-webkit-sticky;position:sticky;bottom:0;z-index:2;padding-top:.75rem;padding-bottom:var(--mobile-footer-gap);margin-bottom:0;background:linear-gradient(180deg,#080a1000,#080a10f0 28%);border-top:1px solid rgba(126,141,255,.24)}#unlock-btn{margin-top:0!important;min-height:44px}}