@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --text: #16181d;
  --muted: #7d838f;
  --muted-2: #a8adb7;
  --ring: rgba(18, 24, 40, .07);
  --shadow: 0 10px 34px rgba(34, 43, 69, .07), inset 0 1px rgba(255,255,255,.72);
  --accent: #3866D6;
  --accent-soft: rgba(56, 102, 214, .11);
  --green: #23a45d;
  --danger: #d44949;
  --sidebar: rgba(250,251,252,.88);
  --radius-card: 20px;
  --radius-row: 12px;
  --page-gap: 26px;
}

[data-theme="dark"] {
  --bg: #111317;
  --surface: #191c21;
  --surface-2: #20242a;
  --text: #f4f5f7;
  --muted: #9da3ad;
  --muted-2: #747b86;
  --ring: rgba(255,255,255,.07);
  --shadow: 0 14px 38px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.035);
  --accent-soft: rgba(83, 125, 228, .16);
  --sidebar: rgba(20,22,27,.9);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.app { min-height: 100vh; display: grid; grid-template-columns: 230px minmax(0,1fr); }
.app.is-locked { filter: blur(8px); pointer-events: none; user-select: none; }

.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 18px 22px; background: var(--sidebar); backdrop-filter: blur(18px); border-right: 1px solid var(--ring); display:flex; flex-direction:column; }
.brand-row { display:flex; gap:11px; align-items:center; padding:0 7px 25px; }
.brand-mark { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--accent); color:#fff; font-weight:750; letter-spacing:-.6px; box-shadow: inset 0 1px rgba(255,255,255,.26); }
.brand-mark.large { width:48px; height:48px; border-radius:15px; margin-bottom:20px; }
.brand-name { font-size:17px; font-weight:720; letter-spacing:-.6px; }
.brand-caption { font-size:11px; color:var(--muted); margin-top:2px; }
.folder-nav { display:flex; flex-direction:column; gap:4px; overflow:auto; min-height:0; }
.nav-item { width:100%; border:0; background:transparent; display:flex; align-items:center; justify-content:space-between; padding:9px 10px; border-radius:10px; font-size:13px; cursor:pointer; color:var(--muted); text-align:left; }
.nav-item:hover { background:var(--surface-2); color:var(--text); }
.nav-item.active { color:var(--text); background:var(--surface); box-shadow:0 1px 0 var(--ring), 0 5px 20px rgba(30,40,70,.05); font-weight:650; }
.nav-count { font-size:11px; color:var(--muted-2); }
.folder-child { padding-left:21px; }
.sidebar-actions { margin-top:auto; display:grid; gap:4px; padding-top:20px; }
.text-button { border:0; background:transparent; color:var(--muted); padding:9px 10px; text-align:left; border-radius:10px; cursor:pointer; font-size:12px; }
.text-button:hover { background:var(--surface-2); color:var(--text); }

.main { min-width:0; padding:0 var(--page-gap) 56px; }
.topbar { height:82px; display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:10; background:linear-gradient(var(--bg) 68%, transparent); }
.mobile-brand { display:none; font-weight:750; letter-spacing:-.6px; }
.search-box { flex:1; max-width:620px; height:42px; border-radius:14px; background:var(--surface); display:flex; align-items:center; gap:9px; padding:0 13px; box-shadow:0 0 0 1px var(--ring), var(--shadow); }
.search-box svg { width:17px; fill:none; stroke:var(--muted); stroke-width:1.7; }
.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--text); font-size:13px; }
.search-box input::placeholder { color:var(--muted-2); }
.top-actions { margin-left:auto; display:flex; gap:8px; align-items:center; }
.icon-button, .primary-button, .secondary-button, .danger-button { border:0; cursor:pointer; transition:.16s ease; }
.icon-button { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--surface); box-shadow:0 0 0 1px var(--ring), var(--shadow); }
.icon-button:hover { transform:translateY(-1px); }
.icon-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#viewIcon { fill:currentColor; stroke:none; }
.primary-button { min-height:40px; padding:0 15px; border-radius:12px; background:var(--accent); color:white; font-weight:650; font-size:13px; box-shadow: inset 0 1px rgba(255,255,255,.22); }
.primary-button:hover { filter:brightness(1.04); transform:translateY(-1px); }
.primary-button span { font-size:18px; line-height:0; vertical-align:-1px; margin-right:5px; font-weight:400; }
.primary-button.wide { width:100%; }
.secondary-button { min-height:40px; padding:0 15px; border-radius:12px; background:var(--surface-2); }
.danger-button { min-height:40px; padding:0 14px; border-radius:12px; background:rgba(212,73,73,.1); color:var(--danger); }

.content-head { display:flex; align-items:flex-end; justify-content:space-between; padding:18px 2px 24px; }
.eyebrow { margin:0 0 7px; color:var(--muted); font-size:11px; letter-spacing:1.25px; font-weight:720; }
.content-head h1 { margin:0; font-size:26px; line-height:1.1; letter-spacing:-.85px; }
.result-count { font-size:12px; color:var(--muted); padding-bottom:2px; }

.mobile-folders { display:none; gap:7px; overflow-x:auto; padding:0 0 14px; scrollbar-width:none; }
.mobile-folders::-webkit-scrollbar { display:none; }
.mobile-folder-chip { flex:0 0 auto; border:0; border-radius:10px; padding:7px 10px; background:var(--surface); box-shadow:0 0 0 1px var(--ring); color:var(--muted); font-size:11px; cursor:pointer; }
.mobile-folder-chip.active { background:var(--text); color:var(--bg); }

.bookmark-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:18px; align-items:start; }
.bookmark-card { background:var(--surface); border-radius:var(--radius-card); overflow:hidden; box-shadow:0 0 0 1px var(--ring), var(--shadow); transition:transform .18s ease, box-shadow .18s ease; position:relative; }
.bookmark-card:hover { transform:translateY(-2px); box-shadow:0 0 0 1px var(--ring), 0 14px 38px rgba(34,43,69,.1); }
.thumb { aspect-ratio: 16 / 10.2; background:linear-gradient(145deg,var(--surface-2),var(--accent-soft)); overflow:hidden; position:relative; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb-fallback { height:100%; display:grid; place-items:center; font-size:34px; font-weight:750; letter-spacing:-1px; color:var(--accent); }
.card-body { padding:14px 15px 15px; }
.domain-row { display:flex; align-items:center; gap:7px; min-width:0; margin-bottom:7px; }
.favicon { width:14px; height:14px; border-radius:4px; object-fit:cover; }
.domain { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-title { font-size:14px; line-height:1.45; font-weight:650; letter-spacing:-.25px; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; font-size:11px; color:var(--muted); }
.folder-pill { max-width:65%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:4px 7px; border-radius:8px; background:var(--surface-2); color:var(--muted); }
.card-actions { position:absolute; top:10px; right:10px; display:flex; opacity:0; transition:.15s; }
.bookmark-card:hover .card-actions { opacity:1; }
.mini-button { border:0; width:31px; height:31px; border-radius:50%; cursor:pointer; background:rgba(20,22,27,.72); color:white; backdrop-filter:blur(8px); display:grid; place-items:center; }
.mini-button svg { width:14px; fill:none; stroke:currentColor; stroke-width:1.8; }
.card-link { color:inherit; text-decoration:none; }

.bookmark-grid.list-view { display:flex; flex-direction:column; gap:10px; }
.list-view .bookmark-card { width:100%; display:grid; grid-template-columns:116px minmax(0,1fr); min-height:92px; border-radius:16px; }
.list-view .thumb { aspect-ratio:auto; height:100%; min-height:92px; }
.list-view .card-body { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:18px; align-content:center; }
.list-view .domain-row { grid-column:1; }
.list-view .card-title { grid-column:1; -webkit-line-clamp:1; }
.list-view .card-meta { grid-column:2; grid-row:1 / span 2; align-self:center; margin:0; flex-direction:column; align-items:flex-end; }

.empty-state { text-align:center; padding:100px 20px; color:var(--muted); }
.empty-mark { width:48px; height:48px; border-radius:50%; margin:0 auto 17px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-size:20px; }
.empty-state h2 { margin:0 0 7px; color:var(--text); font-size:18px; letter-spacing:-.5px; }
.empty-state p { margin:0; font-size:13px; }
.load-more { display:block; margin:28px auto 0; min-width:130px; border:0; border-radius:12px; padding:11px 16px; background:var(--surface); box-shadow:0 0 0 1px var(--ring); color:var(--muted); cursor:pointer; }

.lock-screen { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:color-mix(in srgb,var(--bg) 88%, transparent); backdrop-filter:blur(22px); padding:24px; }
.lock-screen[hidden] { display:none; }
.lock-card { width:min(390px,100%); background:var(--surface); border-radius:24px; padding:28px; box-shadow:0 0 0 1px var(--ring), 0 24px 70px rgba(18,24,40,.15); }
.lock-card h1 { margin:0 0 10px; font-size:26px; letter-spacing:-.85px; }
.lock-copy, .dialog-copy { font-size:13px; line-height:1.55; color:var(--muted); margin:0 0 18px; }

.dialog { border:0; padding:0; background:transparent; color:var(--text); }
.dialog::backdrop { background:rgba(20,22,27,.28); backdrop-filter:blur(8px); }
.dialog-card { width:min(500px, calc(100vw - 32px)); max-height:min(760px, calc(100vh - 48px)); overflow:auto; background:var(--surface); border-radius:22px; padding:22px; box-shadow:0 0 0 1px var(--ring), 0 24px 70px rgba(18,24,40,.18); }
.dialog-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.dialog-head h2 { margin:0; font-size:21px; letter-spacing:-.7px; }
.close-button { border:0; background:var(--surface-2); width:34px; height:34px; border-radius:50%; font-size:21px; color:var(--muted); cursor:pointer; }
.dialog label { display:block; font-size:12px; color:var(--muted); margin:0 0 13px; }
.field { width:100%; border:0; outline:0; background:var(--surface-2); color:var(--text); min-height:43px; border-radius:11px; padding:10px 12px; margin-top:6px; box-shadow:inset 0 0 0 1px var(--ring); }
.textarea { min-height:90px; resize:vertical; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.dialog-actions.split { justify-content:space-between; }
.dialog-actions.split > div { display:flex; gap:8px; }
.error-text { min-height:17px; font-size:11px; color:var(--danger); margin:8px 0 0; }
.inline-form { display:flex; gap:8px; margin-bottom:15px; }
.inline-form .field { margin-top:0; }
.folder-manager { display:grid; gap:7px; }
.folder-manager-row { display:flex; align-items:center; gap:8px; min-height:44px; background:var(--surface-2); border-radius:11px; padding:7px 9px 7px 12px; }
.folder-manager-row span { flex:1; font-size:13px; }
.folder-manager-row button { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; }
.file-drop { display:grid !important; place-items:center; min-height:110px; border:1px dashed color-mix(in srgb,var(--muted) 35%,transparent); border-radius:14px; background:var(--surface-2); cursor:pointer; margin-bottom:14px !important; }
.file-drop input { display:none; }
.file-drop span { color:var(--muted); font-size:13px; }
.import-status { font-size:12px; line-height:1.55; color:var(--muted); min-height:34px; padding:3px 0 13px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,18px); background:var(--text); color:var(--bg); border-radius:12px; padding:10px 14px; font-size:12px; opacity:0; pointer-events:none; transition:.2s; z-index:120; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 820px) {
  :root { --page-gap:16px; }
  .app { display:block; }
  .sidebar { display:none; }
  .mobile-brand { display:block; }
  .topbar { height:auto; padding:15px 0 11px; flex-wrap:wrap; }
  .mobile-brand { order:0; margin-right:auto; }
  .top-actions { order:0; }
  .search-box { order:2; flex-basis:100%; max-width:none; }
  .content-head { padding-top:14px; }
  .mobile-folders { display:flex; }
  .bookmark-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .card-body { padding:12px; }
  .list-view .bookmark-card { grid-template-columns:92px minmax(0,1fr); }
}

@media (max-width: 520px) {
  .bookmark-grid { grid-template-columns:1fr; }
  .bookmark-grid:not(.list-view) .thumb { aspect-ratio:16/9; }
  .icon-button#viewBtn { display:none; }
  .primary-button#addBtn { width:40px; padding:0; border-radius:50%; font-size:0; }
  .primary-button#addBtn span { margin:0; font-size:21px; }
}