:root{--bg:#0d1014;--bg-elev-1:#171c22;--bg-elev-2:#20262e;--bg-elev-3:#2b333c;--fg:#f4f0e8;--fg-muted:#b7b0a6;--fg-dim:#89847c;--accent:#ffd04d;--accent-strong:#ffb12f;--accent-deep:#bd7a00;--accent-glow:#ffd04d38;--teal:#70c7ba;--teal-soft:#70c7ba24;--coral:#ff8b73;--danger:#ff5d5d;--success:#4cd97b;--info:#5da9ff;--border:#34323a;--border-soft:#24272d;--radius-sm:6px;--radius:10px;--radius-lg:14px;--radius-xl:20px;--header-h:56px;--nav-h:64px;--text-xs:.72em;--text-sm:.85em;--text-base:1em;--text-lg:1.1em;--text-xl:1.3em;--text-2xl:1.7em;--font-regular:400;--font-medium:500;--font-semibold:600;--font-bold:700;--font-extrabold:800;--safe-bottom:env(safe-area-inset-bottom,0);--safe-top:env(safe-area-inset-top,0);--shadow-1:0 1px 2px #00000080;--shadow-2:0 4px 16px #00000073, 0 1px 3px #00000059;--shadow-pop:0 12px 32px #0000008c, 0 2px 6px #0006;--color-bg:var(--bg);--color-bg-card:var(--bg-elev-1);--color-bg-elevated:var(--bg-elev-2);--color-text:var(--fg);--color-text-secondary:var(--fg-muted);--color-text-meta:#a3a3a3;--color-accent:var(--accent);--color-wife-accent:var(--coral);--color-danger:var(--danger);--color-warning:var(--accent-strong);--color-info:var(--info);--color-border:var(--border);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;letter-spacing:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Apple SD Gothic Neo,Malgun Gothic,Pretendard,Noto Sans KR,sans-serif;font-size:15px}*{box-sizing:border-box}html,body,#root{background:var(--bg);color:var(--fg);height:100%;margin:0;padding:0;overflow:hidden}body{-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}input,textarea,select{font:inherit;color:inherit}img{display:block}.app{background:linear-gradient(180deg, #70c7ba0d, transparent 210px), linear-gradient(135deg, #ffd04d09, transparent 42%), var(--bg);flex-direction:column;height:100%;display:flex}.app-header{z-index:10;padding:calc(var(--safe-top) + 8px) .85em 8px;min-height:calc(var(--header-h) + var(--safe-top));-webkit-backdrop-filter:saturate(160%)blur(18px);border-bottom:1px solid var(--border-soft);background:#0d1014c7;flex-shrink:0;justify-content:space-between;align-items:center;gap:.75em;display:flex;position:sticky;top:0}.brand-lockup{align-items:center;gap:.75em;min-width:0;display:flex}.brand-lockup svg{filter:drop-shadow(0 4px 10px #00000047);flex:none}.brand-copy{flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;min-width:0;min-height:38px;display:flex}.brand-name{color:var(--accent);text-transform:uppercase;margin:0;font-size:.72em;font-weight:700;line-height:1.2}@media (width<=360px){.brand-name{display:none}}button:disabled,button[aria-disabled=true]{cursor:not-allowed;opacity:.45}.app-header .title{letter-spacing:0;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:1.03em;font-weight:700;line-height:1.2;overflow:hidden}.app-header .sub{color:var(--fg-muted);background:var(--bg-elev-1);border:1px solid var(--border-soft);border-radius:999px;margin-left:auto;padding:4px 10px;font-size:.78em}.header-actions{align-items:center;gap:.5em;display:flex}.icon-button{width:44px;height:44px;color:var(--fg-muted);border-radius:var(--radius);background:#ffffff09;border:1px solid #ffffff0f;justify-content:center;align-items:center;transition:color .15s,background .15s,transform 80ms;display:inline-flex}.icon-button:active{transform:scale(.96)}.icon-button:hover{color:var(--fg);background:#ffffff12}.wake-banner{color:#d7f5f1;background:linear-gradient(90deg,#70c7ba2e,#5da9ff29);border-bottom:1px solid #70c7ba38;justify-content:center;align-items:center;gap:.55em;padding:.62em 1em;font-size:.87em;display:flex}.wake-banner .spinner{border-width:2px;width:14px;height:14px;margin:0}.app-main{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding:16px 16px calc(var(--nav-h) + var(--safe-bottom) + 16px);flex:1;overflow:hidden auto}.app-nav{height:calc(var(--nav-h) + var(--safe-bottom));padding-bottom:var(--safe-bottom);-webkit-backdrop-filter:saturate(160%)blur(18px);border-top:1px solid var(--border);z-index:10;background:#12161beb;display:flex;position:fixed;bottom:0;left:0;right:0}.app-nav a{min-width:0;color:var(--fg-dim);flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;gap:4px;font-size:.72em;font-weight:650;transition:color .15s;display:flex;position:relative}.app-nav a .icon{border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;line-height:1;transition:transform .18s;display:inline-flex}.app-nav a.active{color:var(--accent)}.app-nav a.active .icon{color:#1b1710;background:var(--accent);transform:translateY(-1px);box-shadow:0 4px 14px #ffd04d29}.app-nav a.active:before{content:none}.card{background:linear-gradient(180deg, #ffffff09, #ffffff03), var(--bg-elev-1);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1);margin-bottom:1em;padding:1em}.card.hero{background:linear-gradient(135deg, #ffd04d1f, #70c7ba14 72%), linear-gradient(180deg, var(--bg-elev-1), var(--bg-elev-2));border-color:#ffd04d42;position:relative;overflow:hidden}.card.hero:after{content:none}.card .title{align-items:center;gap:.45em;margin-bottom:4px;font-size:1em;font-weight:750;display:flex}.card .meta{color:var(--fg-muted);font-size:.85em;line-height:1.5}.card .meta+.body{margin-top:.6em}.grid{grid-template-columns:repeat(auto-fill,minmax(106px,1fr));gap:6px;display:grid}@media (width<=360px){.grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:4px}}@media (width>=600px){.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}}@media (width>=900px){.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}}.tile{aspect-ratio:1;border-radius:var(--radius-sm);background:var(--bg-elev-1);cursor:pointer;border:1px solid #ffffff0b;transition:transform .12s,box-shadow .12s;position:relative;overflow:hidden}.tile:active{filter:brightness(.82);box-shadow:var(--shadow-2);transform:scale(.97)}.tile img{object-fit:cover;background:var(--bg-elev-1);width:100%;height:100%;transition:opacity .4s}.tile img[data-loaded=false]{opacity:.4}.tile.skeleton{background:linear-gradient(90deg, var(--bg-elev-1) 0%, var(--bg-elev-2) 45%, var(--bg-elev-3) 50%, var(--bg-elev-2) 55%, var(--bg-elev-1) 100%);cursor:default;background-size:240% 100%;animation:1.4s linear infinite shimmer}.tile.skeleton:active{box-shadow:none;transform:none}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-100% 0}}.tile .badge{color:#fff;pointer-events:none;-webkit-backdrop-filter:blur(4px);background:#000000a6;border-radius:999px;padding:2px 7px;font-size:.7em;position:absolute;top:6px;right:6px}.state{text-align:center;color:var(--fg-muted);padding:4em 1em 1em;line-height:1.6}.state .icon{opacity:.95;margin-bottom:.4em;font-size:3em;display:block}.state .duck-wrap{width:96px;height:96px;margin:0 auto 1em}.state strong{color:var(--fg);margin-bottom:.3em;font-weight:600;display:block}.state small{color:var(--fg-dim);font-size:.85em}.btn{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:var(--radius);-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:.4em;padding:.7em 1.1em;font-weight:500;transition:background .12s,transform 80ms;display:inline-flex}.btn:active{filter:brightness(.88);transform:scale(.97)}.btn:hover{background:var(--bg-elev-3)}.btn-primary{background:var(--accent);color:#1b1710;border-color:var(--accent);font-weight:600;box-shadow:0 4px 12px #ffb40033}.btn-primary:hover{background:var(--accent-strong)}.btn-primary:disabled{opacity:.5;box-shadow:none}.btn-icon{border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;padding:0;font-size:1.05em;display:inline-flex}.search-bar{gap:8px;margin-bottom:1em;display:flex}.search-bar input{background:var(--bg-elev-1);border:1px solid var(--border);border-radius:var(--radius);color:var(--fg);flex:1;padding:.85em 1.05em;font-size:.95em;transition:border-color .15s,box-shadow .15s}.search-bar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);outline:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}button:focus-visible,a:focus-visible{outline-offset:3px}.viewer{z-index:9999;padding:var(--safe-top) 0 var(--safe-bottom);background:#000000f5;flex-direction:column;animation:.18s viewer-in;display:flex;position:fixed;inset:0}@keyframes viewer-in{0%{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}.viewer{animation:.16s ease-out viewer-in!important}.viewer-header{background:linear-gradient(#0000008c,#0000);align-items:center;gap:8px;padding:.7em 1em;display:flex}.viewer-header .title{color:var(--fg-muted);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:.88em;overflow:hidden}.viewer-header .actions{gap:4px;display:flex}.viewer-header .btn-icon{color:#fff;background:#ffffff14;border-color:#0000}.viewer-body{flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.viewer-body img,.viewer-body video{object-fit:contain;max-width:100%;max-height:100%}.viewer-side-btn{color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#00000073;border:1px solid #ffffff1f;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.6em;line-height:1;transition:background .15s,transform 80ms;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.viewer-side-btn:hover{background:#000000a6}.viewer-side-btn:active{transform:translateY(-50%)scale(.92)}.viewer-side-btn.left{left:12px}.viewer-side-btn.right{right:12px}@media (width<=720px){.viewer-side-btn{opacity:.3;width:44px;height:44px;font-size:1.3em}.viewer-side-btn:active{opacity:.9}}.viewer-meta{padding:1em 1.2em calc(1em + var(--safe-bottom,0px));color:var(--fg-muted);background:linear-gradient(#0000,#0000008c 40%,#000c);grid-template-columns:auto 1fr;gap:.45em 1em;max-height:40vh;font-size:.85em;display:grid;position:absolute;bottom:0;left:0;right:0;overflow-y:auto}.viewer-meta dt{color:var(--fg-dim);font-size:.85em}.viewer-meta dd{color:var(--fg);word-break:break-word;margin:0}.section-title{text-transform:uppercase;letter-spacing:.05em;color:var(--fg-dim);margin:1.2em .4em .5em;font-size:.78em;font-weight:600}.list{background:var(--bg-elev-1);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1em;overflow:hidden}.row{border-bottom:1px solid var(--border-soft);align-items:center;gap:1em;padding:.95em 1.1em;display:flex}.row:last-child{border-bottom:0}.row .info{flex:1;min-width:0}.row .label{font-size:.95em}.row .sub{color:var(--fg-muted);margin-top:2px;font-size:.8em;line-height:1.4}.row .danger{color:var(--danger)}.toggle{background:var(--bg-elev-3);cursor:pointer;border-radius:15px;flex-shrink:0;width:50px;height:30px;transition:background .2s;position:relative}.toggle.on{background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}.toggle:after{content:"";background:#fff;border-radius:50%;width:24px;height:24px;transition:left .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0006}.toggle.on:after{left:23px}.toast{left:50%;bottom:calc(var(--nav-h) + var(--safe-bottom) + 16px);background:var(--bg-elev-3);color:var(--fg);border:1px solid var(--border);box-shadow:var(--shadow-pop);z-index:10001;border-radius:999px;max-width:calc(100% - 2em);padding:.8em 1.2em;font-size:.88em;animation:.2s toast-in;position:fixed;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;margin:0 auto;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.btn.dining-hint{animation:2.4s ease-in-out 3 dining-hint-pulse;position:relative}@keyframes dining-hint-pulse{0%,to{box-shadow:0 0 #ffd23f00}50%{box-shadow:0 0 0 6px #ffd23f40}}.search-indeterminate-bar{background:var(--accent);border-radius:999px;width:30%;height:100%;animation:1.4s ease-in-out infinite search-indeterminate;position:absolute;inset:0 auto 0 0}@keyframes search-indeterminate{0%{transform:translate(-120%)}60%{transform:translate(330%)}to{transform:translate(330%)}}.fade-in{animation:.22s ease-out fade-in}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.voc-unread-badge{animation:2.2s ease-in-out infinite voc-pulse}@keyframes voc-pulse{0%,to{box-shadow:0 0 0 2px var(--bg);transform:scale(1)}50%{box-shadow:0 0 0 2px var(--bg), 0 0 0 6px #e85a4f2e;transform:scale(1.12)}}@keyframes heart-burst{0%{opacity:0;transform:translate(-50%,-50%)scale(.4)}25%{opacity:1;transform:translate(-50%,-50%)scale(1.4)}60%{opacity:.95;transform:translate(-50%,-50%)scale(1.2)}to{opacity:0;transform:translate(-50%,-50%)scale(2)}}.moi-bar-segment{transform-origin:0;animation:.7s cubic-bezier(.2,.8,.2,1) moi-bar-grow}@keyframes moi-bar-grow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.home-hero{grid-template-columns:auto 1fr;align-items:center;gap:.7em;margin-bottom:.8em;padding:.75em .95em;display:grid;position:relative;overflow:hidden}.home-hero:before{content:"";background-image:var(--hero-bg-url,none);filter:blur(36px)saturate(120%)brightness(.45);opacity:.55;z-index:0;pointer-events:none;background-position:50%;background-size:cover;position:absolute;inset:0;transform:scale(1.2)}.home-hero>*{z-index:1;position:relative}.home-hero .hero-logo{justify-content:center;align-items:center;width:40px;height:40px;display:flex}.home-hero .title{margin-bottom:.3em;font-size:1em}.home-stats{flex-wrap:wrap;gap:.35em;margin-top:0;display:flex}.pill{min-height:28px;color:var(--fg-muted);background:#ffffff0e;border:1px solid #ffffff12;border-radius:999px;align-items:center;padding:.28em .7em;font-size:.82em;font-weight:650;display:inline-flex}.pill.accent{color:#1b1710;background:var(--accent);border-color:var(--accent)}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:1.5em;display:grid}.feature-card{text-align:left;cursor:pointer;min-height:112px;margin-bottom:0}.feature-card .title{align-items:flex-start;line-height:1.35}.feature-card .feature-icon{border-radius:var(--radius);background:var(--teal-soft);width:32px;height:32px;color:var(--teal);flex:none;justify-content:center;align-items:center;display:inline-flex}.feature-card:nth-child(3n+1) .feature-icon{color:var(--accent);background:#ffd04d21}.feature-card:nth-child(3n+2) .feature-icon{color:var(--coral);background:#ff8b731f}.voc-shell{max-width:720px;margin:0 auto}.voc-topbar{justify-content:space-between;align-items:center;gap:.75em;margin-bottom:.85em;display:flex}.voc-viewer{color:var(--fg-muted);font-size:.86em}.field{width:100%;color:var(--fg);border:1px solid var(--border);border-radius:var(--radius);box-sizing:border-box;background:#0d1014d1;padding:.72em .82em}.field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);outline:none}.voc-list{flex-direction:column;gap:.6em;display:flex}.voc-item{background:linear-gradient(180deg, #ffffff09, #ffffff03), var(--bg-elev-1);border:1px solid var(--border);border-radius:var(--radius);color:inherit;padding:.95em;text-decoration:none;display:block}.voc-item.closed{opacity:.64}.voc-item-title{justify-content:space-between;align-items:baseline;gap:.5em;display:flex}.voc-item-title strong{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.voc-item-time{color:var(--fg-dim);flex-shrink:0;font-size:.78em}.voc-body-preview{color:var(--fg-muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:.35em;font-size:.88em;display:-webkit-box;overflow:hidden}.large-title{font-size:var(--text-2xl);font-weight:var(--font-extrabold);letter-spacing:-.02em;color:var(--color-text);margin-top:.4em;margin-bottom:.6em}::view-transition-old(root){animation-duration:.3s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}::view-transition-new(root){animation-duration:.3s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}::view-transition-new(root){animation-name:slide-in-right,fade-in}::view-transition-old(root){animation-name:slide-out-left,fade-out}@keyframes slide-in-right{0%{transform:translate(20px)}to{transform:translate(0)}}@keyframes slide-out-left{0%{transform:translate(0)}to{transform:translate(-20px)}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}