:root{
    --paper:#F5F2EB; --paper-2:#fffaf1; --ink:#2c251f; --muted:#7f7368;
    --wood:#A88C72; --wood-dark:#8D7560; --wood-light:#AE947C;
    --line:#dccfbe; --accent:#8b5f45; --accent-2:#b98b63;
    --shadow:0 18px 45px rgba(68,48,35,.15);
    --radius:22px;
  }
  *{box-sizing:border-box}
  html{background:var(--paper)}
  body{margin:0;font-family:ui-rounded,"SF Pro Rounded","Apple SD Gothic Neo",Pretendard,"Noto Sans KR",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper);min-height:100vh}
  button,input,select,textarea{font:inherit}
  button{cursor:pointer}
  .app{max-width:1280px;margin:0 auto;padding:24px clamp(16px,3vw,36px) 70px}
  .topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}
  .brand h1{margin:0;font-size:clamp(28px,4vw,46px);letter-spacing:-.04em}
  .brand p{margin:8px 0 0;color:var(--muted);font-size:15px}
  .top-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
  .btn{border:1px solid var(--line);background:rgba(255,250,241,.9);color:var(--ink);padding:11px 14px;border-radius:14px;box-shadow:0 5px 15px rgba(70,50,38,.06);display:inline-flex;align-items:center;gap:8px;min-height:44px}
  .btn.primary{background:var(--accent);color:white;border-color:transparent}
  .btn.small{padding:8px 11px;min-height:38px;font-size:14px}
  .btn.danger{color:#8a3f3f;border-color:#d8b8b1;background:#fff7f4}
  .btn.danger:hover{background:#fbeae5}
  .hero{display:grid;grid-template-columns:1.35fr .65fr;gap:16px;margin-bottom:16px}
  .hero-card,.stats{background:rgba(255,250,241,.78);border:1px solid rgba(220,207,190,.86);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(10px)}
  .hero-card{padding:24px;display:flex;align-items:center;gap:20px;overflow:hidden;position:relative}
  .hero-card:after{content:"";position:absolute;right:-45px;bottom:-65px;width:180px;height:180px;border-radius:50%;background:rgba(185,139,99,.16)}
  .hero-icon{font-size:54px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.08))}
  .hero-copy h2{margin:0 0 6px;font-size:23px;letter-spacing:-.03em}
  .hero-copy p{margin:0;color:var(--muted);line-height:1.7;max-width:650px;font-size:14px}
  .stats{padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
  .stat{background:rgba(255,255,255,.55);border:1px solid rgba(220,207,190,.75);border-radius:16px;padding:12px;text-align:center}
  .stat b{display:block;font-size:23px;margin-top:3px}.stat span{font-size:12px;color:var(--muted)}
  .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(255,250,241,.76);border:1px solid var(--line);padding:10px;border-radius:18px;box-shadow:0 10px 30px rgba(68,48,35,.08);position:sticky;top:8px;z-index:20;backdrop-filter:blur(16px)}
  .tabs{display:flex;gap:6px;flex-wrap:wrap;flex:1}
  .tab{border:0;background:transparent;padding:9px 12px;border-radius:12px;color:var(--muted);font-weight:700}
  .tab.active{background:#ece0d2;color:var(--ink)}
  .search{position:relative;min-width:min(100%,260px);flex:0 1 320px}
  .search input{width:100%;border:1px solid var(--line);background:#fffaf2;padding:10px 12px 10px 37px;border-radius:13px;outline:none;color:var(--ink)}
  .search:before{content:"⌕";position:absolute;left:12px;top:7px;font-size:22px;color:var(--muted)}
  .view-toggle{display:flex;background:#eee3d6;border-radius:12px;padding:3px}
  .view-toggle button{border:0;background:transparent;border-radius:9px;padding:7px 10px;color:var(--muted)}
  .view-toggle button.active{background:white;color:var(--ink);box-shadow:0 2px 7px rgba(0,0,0,.06)}
  .section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:26px 4px 10px}
  .section-head h3{font-size:21px;margin:0}.section-head p{margin:3px 0 0;color:var(--muted);font-size:13px}
  .sort{border:1px solid var(--line);background:#fffaf2;padding:8px 11px;border-radius:12px;color:var(--ink)}

  /* Bookshelf */
  .library{display:grid;gap:24px}
  .shelf-row{position:relative;padding:28px 22px 26px;border-radius:18px;background:
    linear-gradient(90deg,rgba(255,255,255,.10),transparent 20%,rgba(0,0,0,.035) 80%),
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.047)),var(--wood);box-shadow:inset 0 1px rgba(255,255,255,.2),0 14px 28px rgba(83,56,39,.16);min-height:250px;overflow:hidden}
  .shelf-row:before{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;background:linear-gradient(180deg,var(--wood-light),var(--wood-dark));box-shadow:0 -5px 10px rgba(49,31,19,.26),inset 0 2px rgba(255,255,255,.14)}
  .shelf-row:after{content:"";position:absolute;left:10px;right:10px;bottom:22px;height:4px;background:rgba(52,32,20,.20);filter:blur(1px)}
  .shelf-items{display:flex;align-items:flex-end;gap:5px;min-height:196px;overflow-x:auto;padding:3px 4px 8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
  .spine{border:0;color:white;border-radius:6px 6px 2px 2px;height:var(--h,180px);width:var(--w,54px);min-width:var(--w,54px);position:relative;box-shadow:inset 2px 0 rgba(255,255,255,.17),inset -3px 0 rgba(0,0,0,.14),3px 4px 6px rgba(0,0,0,.22);padding:7px 5px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;transition:transform .18s ease,filter .18s ease;overflow:hidden}
  .spine:hover,.spine:focus-visible{transform:translateY(-7px);filter:brightness(1.06);outline:2px solid rgba(255,255,255,.55);outline-offset:2px}
  .spine .type{font-size:15px;background:rgba(255,255,255,.18);width:27px;height:27px;border-radius:50%;display:grid;place-items:center;backdrop-filter:blur(3px)}
  .spine .spine-title{writing-mode:vertical-rl;text-orientation:mixed;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:800;letter-spacing:.02em;max-height:122px;text-shadow:0 1px 2px rgba(0,0,0,.25)}
  .spine .rating{font-size:10px;white-space:nowrap;color:#fff1bc;text-shadow:0 1px 2px rgba(0,0,0,.25)}
  .preview-note{color:white;background:rgba(34,22,15,.22);border:1px dashed rgba(255,255,255,.35);border-radius:15px;padding:18px;align-self:stretch;min-width:210px;display:flex;flex-direction:column;justify-content:center;gap:7px}
  .preview-note b{font-size:16px}.preview-note span{font-size:12px;color:rgba(255,255,255,.75);line-height:1.6}

  /* VHS shelf items - vertical case style */
  .vhs-spine{border:0;position:relative;align-self:flex-end;height:var(--h,186px);width:var(--w,62px);min-width:var(--w,62px);padding:8px 6px 10px;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#26272f,#131419);box-shadow:0 10px 18px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.08),inset -3px 0 rgba(0,0,0,.28);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between;transition:transform .18s ease,filter .18s ease}
  .vhs-spine:hover,.vhs-spine:focus-visible{transform:translateY(-7px);filter:brightness(1.05);outline:2px solid rgba(255,255,255,.55);outline-offset:2px}
  .vhs-spine:before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:7px;border-radius:999px;background:linear-gradient(180deg,var(--a,#e2ce9b),var(--b,#b58d49));box-shadow:inset 0 1px rgba(255,255,255,.45)}
  .vhs-spine:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  .vhs-cap,.vhs-foot,.vhs-label-vert{position:relative;z-index:1}
  .vhs-cap{margin-left:14px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff7ec;font-size:13px;backdrop-filter:blur(2px)}
  .vhs-label-vert{position:relative;margin:12px 0 12px 14px;width:calc(100% - 16px);flex:1;min-height:0;border-radius:8px;background:linear-gradient(rgba(255,248,238,.74),rgba(255,242,224,.62)),linear-gradient(180deg,var(--la,#efe1cb),var(--lb,#d9bf92));box-shadow:inset 0 1px rgba(255,255,255,.72);padding:25px 5px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#241b16;overflow:hidden}
  .vhs-kicker-vert{position:absolute;top:8px;left:4px;right:4px;font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;opacity:.72;line-height:1.05;text-align:center}
  .vhs-title-vert{writing-mode:vertical-rl;text-orientation:mixed;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:900;letter-spacing:.01em;line-height:1.1;max-height:104px;text-shadow:0 1px rgba(255,255,255,.42)}
  .vhs-foot{margin-left:14px;min-height:18px;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.12);color:#f6e7bf;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Card view */
  .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
  .media-card{border:1px solid var(--line);background:#fffaf2;border-radius:18px;overflow:hidden;box-shadow:0 9px 24px rgba(73,52,38,.08);text-align:left;padding:0;color:var(--ink)}
  .cover{aspect-ratio:4/5;background:linear-gradient(145deg,#a98163,#6f4c39);display:grid;place-items:center;overflow:hidden;position:relative}
  .cover img{width:100%;height:100%;object-fit:cover}.cover .fallback{font-size:42px}.cover .badge{position:absolute;left:9px;top:9px;background:rgba(255,250,241,.88);padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800;color:var(--ink)}
  .media-card .meta{padding:12px}.media-card .title{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-card .sub{font-size:12px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-card .stars{font-size:12px;margin-top:7px;color:#9b6a38}
  .empty{border:1px dashed #cdbca8;background:rgba(255,250,241,.6);border-radius:18px;padding:30px;text-align:center;color:var(--muted)}
  .empty .big{font-size:44px;margin-bottom:8px}.empty h4{margin:0 0 6px;color:var(--ink)}.empty p{font-size:13px;line-height:1.6;margin:0 0 14px}

  /* Modal */
  .modal-backdrop{position:fixed;inset:0;background:rgba(39,28,21,.46);display:none;align-items:center;justify-content:center;padding:18px;z-index:100;backdrop-filter:blur(5px)}
  .modal-backdrop.open{display:flex}
  .modal{width:min(760px,100%);max-height:min(92vh,920px);overflow:auto;background:#fffaf2;border:1px solid rgba(255,255,255,.6);border-radius:26px;box-shadow:0 25px 80px rgba(0,0,0,.28)}
  .modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 12px;position:sticky;top:0;background:linear-gradient(180deg,#fffaf2 76%,rgba(255,250,242,0));z-index:2}
  .modal-head h3{margin:0;font-size:22px}.icon-btn{border:0;background:#eee2d4;width:38px;height:38px;border-radius:50%;font-size:18px}
  .form{padding:4px 20px 22px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.field.full{grid-column:1/-1}.field label{display:block;font-size:12px;font-weight:800;color:#6b5d52;margin:0 0 6px 2px}.field input,.field select,.field textarea{width:100%;border:1px solid #d8c8b6;background:#fffdfa;border-radius:13px;padding:11px 12px;color:var(--ink);outline:none}.field textarea{min-height:100px;resize:vertical;line-height:1.6}.field input:focus,.field select:focus,.field textarea:focus{border-color:#a67b5b;box-shadow:0 0 0 3px rgba(166,123,91,.12)}
  .form-actions{display:flex;justify-content:space-between;gap:10px;margin-top:18px;flex-wrap:wrap}.right-actions{display:flex;gap:8px;margin-left:auto}.danger{color:#8a3f3f}.hint{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.5}
  .detail{padding:0 22px 24px}.detail-top{display:grid;grid-template-columns:170px 1fr;gap:20px}.detail-cover{aspect-ratio:4/5;border-radius:18px;background:linear-gradient(145deg,#a98163,#6f4c39);overflow:hidden;display:grid;place-items:center;font-size:48px}.detail-cover img{width:100%;height:100%;object-fit:cover}.detail h2{margin:4px 0 6px;font-size:30px;letter-spacing:-.04em}.detail .creator{color:var(--muted);margin-bottom:14px}.chips{display:flex;gap:7px;flex-wrap:wrap}.chip{background:#eee1d2;border-radius:999px;padding:7px 10px;font-size:12px}.detail-block{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.detail-block h4{margin:0 0 7px;font-size:13px;color:#6c5e53}.detail-block p{margin:0;white-space:pre-wrap;line-height:1.75}.quote{font-family:Georgia,"Noto Serif KR",serif;font-size:16px;color:#5f4c3f;background:#f5ecdf;padding:16px;border-radius:14px;border-left:4px solid #a77a58}
  .memory-list{display:grid;gap:12px}
  .memory-row{display:grid;grid-template-columns:28px minmax(0,1fr) 36px;gap:8px;align-items:start}
  .memory-number{width:28px;height:28px;border-radius:50%;background:#eee1d2;color:#6b5749;display:grid;place-items:center;font-size:12px;font-weight:900;margin-top:8px}
  .memory-main{min-width:0}
  .memory-input{min-height:78px!important}
  .memory-feature{border:1px solid #decdb9;background:#fffaf2;color:#806a58;border-radius:999px;padding:6px 10px;margin-top:7px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;gap:5px;box-shadow:none}
  .memory-feature.active{background:#efe0cb;border-color:#caa985;color:#6b4b32}
  .memory-remove{border:0;background:#f3e7df;color:#8a4b45;width:34px;height:34px;border-radius:50%;font-size:18px;line-height:1;margin-top:7px;display:grid;place-items:center}
  .memory-remove:hover{background:#ead8cf}
  .memory-add{margin-top:10px;background:#f5ecdf!important;border-color:#dfcdb8!important;color:#6a5546!important;box-shadow:none!important}
  .featured-memory{margin-top:15px;max-width:520px;padding:0 2px;font-family:Georgia,"Noto Serif KR",serif;font-size:14px;line-height:1.7;color:#66564b;font-style:italic;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .quote-list{display:grid;gap:10px}
  .quote-card{position:relative}
  .quote-card .quote{margin:0;padding-left:44px;min-height:54px}
  .quote-index{position:absolute;left:14px;top:14px;width:22px;height:22px;border-radius:50%;background:#dfc8b0;color:#604b3d;display:grid;place-items:center;font-size:11px;font-weight:900;z-index:1}

  .backup-panel{display:grid;gap:10px;padding:4px 20px 24px}.backup-panel p{color:var(--muted);font-size:13px;line-height:1.65;margin-top:0}.file-input{display:none}
  .footer-note{text-align:center;color:#9a8d80;font-size:12px;margin-top:30px}
  @media(max-width:800px){
    .hero{grid-template-columns:1fr}.topbar{flex-direction:column}.top-actions{justify-content:flex-start}.toolbar{top:4px}.search{order:3;flex-basis:100%}.section-head{align-items:center}.detail-top{grid-template-columns:110px 1fr}.detail h2{font-size:24px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.shelf-row{padding-left:13px;padding-right:13px}.stats{grid-template-columns:repeat(3,1fr)}
  }
  @media(max-width:480px){.app{padding-left:12px;padding-right:12px}.hero-card{padding:18px}.hero-icon{font-size:42px}.stats{padding:12px}.stat{padding:9px}.tab{padding:8px 9px}.detail-top{grid-template-columns:1fr}.detail-cover{width:130px}.modal{border-radius:22px}.top-actions .btn:not(.primary){display:none}}

  /* Keep the editor scrollbar inside the rounded dialog. */
  #editModal .modal{display:flex;flex-direction:column;overflow:hidden;max-height:min(92vh,920px)}
  #editModal .modal-head{position:relative;flex:0 0 auto;padding:20px 20px 12px;background:#fffaf2}
  #editModal .form{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0 10px 12px;padding:4px 12px 22px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#b4a18d #fffaf2;overscroll-behavior:contain}
  #editModal .form::-webkit-scrollbar{width:8px}
  #editModal .form::-webkit-scrollbar-track{background:#fffaf2}
  #editModal .form::-webkit-scrollbar-thumb{background:#b4a18d;border:2px solid #fffaf2;border-radius:999px}
  #editModal .form-grid > .field{min-width:0}
  #editModal .field input,#editModal .field select,#editModal .field textarea{box-sizing:border-box;max-width:100%}