:root{--bg:#fefcf7;--surface:#fff;--text:#24271f;--muted:#5e6157;--line:#ece6d8;--field:#ddd5c3;--accent:#1f5c45;--on-accent:#fff;--chip:#f6f1e5;--bar:#fefcf7f0;--off:#e9e4d8;--off-text:#7a7d72;--danger:#b0322a;--scrim:#24271f66;--serif:"Noto Serif KR",serif;--sans:"Noto Sans KR",system-ui,sans-serif}:root[data-theme=dark]{--bg:#171a15;--surface:#20241d;--text:#f3efe3;--muted:#adafa1;--line:#343a2f;--field:#454c3f;--accent:#8dc7a5;--on-accent:#10241a;--chip:#2a3026;--bar:#171a15f0;--off:#2a3026;--off-text:#9a9c8f;--danger:#f2a29a;--scrim:#0000008c}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:var(--sans);margin:0}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:inherit}input,textarea{font-family:inherit}input::placeholder,textarea::placeholder{color:var(--off-text)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app{flex-direction:column;min-height:100vh;display:flex;position:relative}.main{flex-direction:column;flex:1;gap:25px;width:100%;max-width:1152px;margin:0 auto;padding:20px 20px 0;display:flex}.topbar{justify-content:space-between;align-items:center;height:44px;display:flex}.brand{font-family:var(--serif);color:var(--accent);font-size:17px;font-weight:700}.icon-btn{border:1px solid var(--line);background:var(--surface);width:44px;height:44px;color:var(--text);border-radius:22px;justify-content:center;align-items:center;padding:0;display:flex}.h1{font-family:var(--serif);letter-spacing:-.5px;margin:0;font-size:38px;font-weight:900;line-height:1.2}.sub{color:var(--muted);margin:6px 0 0;font-size:15px}.header{padding-top:4px}.summary{background:var(--surface);border:1px solid var(--line);border-radius:16px;align-items:center;gap:16px;padding:16px 18px;display:flex}.summary-ico{background:var(--chip);width:44px;height:44px;color:var(--accent);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.summary small{color:var(--muted);font-size:13px;display:block}.summary b{font-size:17px}.summary .acc{color:var(--accent)}.summary .mut{color:var(--muted);font-weight:500}.stats{display:none}.search{position:relative}.search svg{color:var(--muted);position:absolute;top:16px;left:18px}.search input{border:1px solid var(--line);background:var(--surface);width:100%;height:52px;color:var(--text);border-radius:26px;padding:0 18px 0 48px;font-size:16px}.sorts{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--line);background:var(--surface);height:40px;color:var(--text);white-space:nowrap;border-radius:20px;padding:0 16px;font-size:14px;font-weight:500}.chip[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:700}.count{color:var(--muted);font-size:15px;display:none}.grid{flex-direction:column;gap:14px;padding-bottom:24px;display:flex}.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;position:relative}.card-link{border-radius:20px;gap:16px;padding:16px;display:flex}.cover{width:84px;height:116px;font-family:var(--serif);color:#24271f;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;font-size:44px;font-weight:900;display:flex}.card-body{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.card-head{flex-direction:column;gap:2px;padding-right:32px;display:flex}.card h2{font-family:var(--serif);letter-spacing:-.2px;margin:0;font-size:19px;font-weight:900;line-height:1.35}.author{color:var(--muted);font-size:13px}.stars{letter-spacing:1px;color:var(--accent);font-size:15px}.stars i{color:var(--line);font-style:normal}.card p{overflow-wrap:anywhere;margin:0;font-size:15px;line-height:1.55}.date{color:var(--muted);align-items:center;gap:4px;font-size:12px;display:flex}.share{width:44px;height:44px;color:var(--muted);background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:8px;right:8px}.none{text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:20px;padding:48px 16px;font-size:15px}.empty{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;padding:32px 8px 48px;display:flex}.empty-art{background:var(--chip);border-radius:88px;justify-content:center;align-items:center;width:176px;height:176px;display:flex}.empty h2{font-family:var(--serif);margin:0 0 8px;font-size:22px;font-weight:900;line-height:1.4}.empty p{color:var(--muted);margin:0;font-size:15px;line-height:1.6}.bar{background:var(--bar);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);gap:10px;padding:16px 20px 28px;display:flex;position:sticky;bottom:0}.btn{background:var(--accent);height:56px;color:var(--on-accent);border:0;border-radius:28px;flex:1;justify-content:center;align-items:center;gap:8px;font-size:17px;font-weight:700;display:flex}.btn:disabled{background:var(--off);color:var(--off-text);cursor:not-allowed}.btn-ghost{border:1px solid var(--line);background:var(--surface);color:var(--text);flex:none;padding:0 20px;font-size:16px}.btn-danger{color:var(--danger)}.form{flex-direction:column;gap:22px;padding-bottom:24px;display:flex}.field{border:0;flex-direction:column;gap:8px;margin:0;padding:0;display:flex}.field label,.field legend{padding:0;font-size:14px;font-weight:700}.field legend{margin-bottom:8px}.req{color:var(--accent)}.field input,.field textarea{border:1px solid var(--field);background:var(--surface);color:var(--text);border-radius:14px;padding:0 16px;font-size:16px}.field input{height:52px}.field input.serif{font-family:var(--serif);font-weight:700}.field textarea{resize:none;padding:14px 16px;line-height:1.55}.row{justify-content:space-between;align-items:baseline;display:flex}.hint{color:var(--muted);font-size:13px}.rating{background:var(--surface);border:1px solid var(--line);border-radius:16px;align-items:center;gap:4px;padding:10px 12px;display:flex}.rating button{width:44px;height:44px;color:var(--muted);background:0 0;border:0;padding:0;font-size:30px;line-height:1}.rating button.on{color:var(--accent)}.rating span{color:var(--accent);margin-left:auto;font-size:15px;font-weight:700}.hero{justify-content:center;align-items:center;height:400px;display:flex;position:relative}.hero-actions{justify-content:space-between;display:flex;position:absolute;top:20px;left:20px;right:20px}.round{background:var(--surface);width:48px;height:48px;color:var(--text);border:0;border-radius:24px;justify-content:center;align-items:center;padding:0;display:flex;box-shadow:0 2px 8px #24271f1f}.big-cover{color:#24271f;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:10px;width:196px;height:272px;margin-top:36px;display:flex;box-shadow:0 18px 40px #24271f2e}.big-cover b{font-family:var(--serif);font-size:104px;font-weight:900;line-height:1}.big-cover span{font-family:var(--serif);opacity:.75;text-align:center;padding:0 12px;font-size:14px;font-weight:700}.detail{flex-direction:column;flex:1;gap:24px;padding:28px 24px 24px;display:flex}.detail header{text-align:center;flex-direction:column;align-items:center;gap:8px;display:flex}.detail h1{font-family:var(--serif);letter-spacing:-.5px;margin:0;font-size:32px;font-weight:900;line-height:1.25}.detail .by{color:var(--muted);margin:0;font-size:16px}.detail .rate{align-items:center;gap:10px;margin-top:4px;display:flex}.detail .rate .stars{letter-spacing:2px;font-size:26px}.detail .rate b{font-size:17px}.oneline{background:var(--surface);border:1px solid var(--line);border-radius:20px;flex-direction:column;gap:10px;padding:22px 22px 20px;display:flex}.oneline small{color:var(--accent);font-size:13px;font-weight:700}.oneline p{overflow-wrap:anywhere;margin:0;font-size:18px;font-weight:500;line-height:1.6}.oneline .date{font-size:13px}.dt-nav,.dt-only{display:none}.scrim{background:var(--scrim);z-index:10;align-items:flex-end;display:flex;position:fixed;inset:0}.dialog{background:var(--surface);border-radius:24px 24px 0 0;flex-direction:column;gap:20px;width:100%;padding:28px 20px 32px;display:flex}.dialog h2{font-family:var(--serif);margin:0 0 6px;font-size:22px;font-weight:900}.dialog p{color:var(--muted);margin:0;font-size:15px}.dialog .btns{gap:10px;display:flex}.dialog button{border:1px solid var(--line);background:var(--surface);height:52px;color:var(--text);border-radius:26px;flex:1;font-size:16px;font-weight:700}.dialog .del{background:var(--danger);color:var(--surface);border:0}@media (width>=768px){.main{padding:32px 40px 0}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.bar{justify-content:center}.bar .btn{max-width:420px}}@media (width>=1024px){.mobile-only{display:none!important}.dt-nav{border-bottom:1px solid var(--line);background:var(--surface);align-items:center;gap:32px;height:76px;padding:0 64px;display:flex}.dt-nav .brand{font-size:22px;font-weight:900}.dt-nav .search{flex:1;max-width:480px;margin:0 auto}.dt-nav .search svg{top:14px}.dt-nav .search input{background:var(--bg);border-radius:24px;height:48px;font-size:15px}.dt-nav .tools{align-items:center;gap:12px;margin-left:auto;display:flex}.dt-nav .icon-btn{border-radius:24px;width:48px;height:48px}.dt-nav .add{background:var(--accent);height:48px;color:var(--on-accent);border-radius:24px;align-items:center;gap:6px;padding:0 22px 0 16px;font-size:16px;font-weight:700;display:flex}.dt-nav .back{border:1px solid var(--line);border-radius:22px;align-items:center;gap:6px;height:44px;padding:0 18px 0 12px;font-size:15px;font-weight:500;display:flex}.dt-nav .spacer{width:112px}.dt-nav .brand.mid{margin:0 auto}.main{gap:32px;padding:48px 0 64px}.h1{font-size:52px;line-height:1.15}.sub{margin-top:8px;font-size:17px}.head-row{justify-content:space-between;align-items:flex-end;gap:32px;display:flex}.summary{display:none}.stats{gap:12px;display:flex}.stat{background:var(--surface);border:1px solid var(--line);border-radius:16px;flex-direction:column;gap:2px;min-width:140px;padding:16px 24px;display:flex}.stat small{color:var(--muted);font-size:13px}.stat b{font-family:var(--serif);font-size:26px;font-weight:900}.stat b.acc{color:var(--accent)}.toolrow{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding-bottom:20px;display:flex}.count{display:block}.chip{border-radius:22px;height:44px;padding:0 18px}.grid{grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:0}.card-link{gap:18px;padding:18px}.cover{width:92px;height:128px;font-size:48px}.card p{font-size:14px}.share{top:10px;right:10px}.bar.list-bar{display:none}.page-form{width:100%;max-width:640px;margin:0 auto}.form .dt-only,.dt-save{display:flex}.split{flex:1;grid-template-columns:520px minmax(0,1fr);display:grid}.hero{height:auto;padding:56px 0}.hero-actions{display:none}.big-cover{border-radius:22px;gap:14px;width:280px;height:390px;margin-top:0;box-shadow:0 24px 50px #24271f2e}.big-cover b{font-size:148px}.big-cover span{font-size:18px}.detail{justify-content:center;gap:32px;max-width:680px;padding:64px 80px}.detail header{text-align:left;align-items:flex-start;gap:10px}.detail h1{font-size:52px;line-height:1.2}.detail .by{font-size:18px}.detail .rate{margin-top:6px}.detail .rate .stars{font-size:28px}.detail .rate b{font-size:18px}.oneline{gap:12px;padding:28px 32px}.oneline p{font-size:22px}.detail-bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;justify-content:flex-start;padding:0;position:static}.detail-bar .btn{flex:none;order:-1;padding:0 28px}.detail-bar .btn-ghost{padding:0 24px}.scrim{justify-content:center;align-items:center}.dialog{border-radius:24px;width:440px;padding:32px 28px 28px}}.tools-m{align-items:center;gap:8px;display:flex}.auth-btn{border:1px solid var(--line);background:var(--surface);height:40px;color:var(--text);white-space:nowrap;border-radius:20px;padding:0 14px;font-size:14px;font-weight:500}.auth-btn.primary{border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:700}.alert{background:var(--surface);border:1px solid var(--danger);color:var(--danger);border-radius:14px;padding:14px 16px;font-size:14px}.loading{text-align:center;color:var(--muted);padding:48px 0}.gate{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;flex-direction:column;align-items:center;gap:12px;padding:40px 24px;display:flex}.gate h2{font-family:var(--serif);margin:0;font-size:22px;font-weight:900}.gate p{color:var(--muted);margin:0;font-size:15px;line-height:1.6}.gate-btn{flex:none;margin-top:8px;padding:0 28px}.main>.btn{flex:none}@media (width>=1024px){.dt-nav .auth-btn{height:44px}}