/* Copyright (c) 2026 geniuskey and SemiBooks contributors. MIT. */
/* 서가 홈. books 포털의 어두운 서재와 세로 표지를 따르되, 반도체 서가는 밤의 클린룸 천장 격자와 스테인리스 선반으로 꾸민다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap");
:root { --bg:#f6f7fb; --bg-elev:#fff; --surface:#eef1f7; --border:#d6dce8; --text:#141a26; --text-dim:#566178; --text-faint:#6f7b91; --accent:#2f5f96; --accent-2:#d9480f; --shadow:#0f172a; --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; color-scheme:light; }
@media(prefers-color-scheme:dark) { :root:not([data-theme=light]) { --bg:#0b0f17; --bg-elev:#121826; --surface:#192131; --border:#273248; --text:#e6ebf5; --text-dim:#9aa6bf; --text-faint:#7b88a1; --accent:#8db8ea; --accent-2:#ff922b; --shadow:#000; color-scheme:dark; } }
:root[data-theme=dark] { --bg:#0b0f17; --bg-elev:#121826; --surface:#192131; --border:#273248; --text:#e6ebf5; --text-dim:#9aa6bf; --text-faint:#7b88a1; --accent:#8db8ea; --accent-2:#ff922b; --shadow:#000; color-scheme:dark; }
* { box-sizing:border-box; } [hidden] { display:none!important; }
html { scroll-behavior:smooth; scroll-padding-top:64px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.65 var(--font); word-break:keep-all; overflow-wrap:anywhere; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; } button,input { font:inherit; } button { cursor:pointer; } a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.wrap { max-width:1220px; margin:auto; padding:0 20px; }
.eyebrow { font:600 10.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }

/* 머리말: 서재와 이어지도록 테마와 상관없이 어둡게 둔다 */
.top { position:sticky; top:0; z-index:20; color:#eef3fb; background:rgba(13,19,32,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid #26324a; }
.top-inner { max-width:1220px; height:56px; margin:auto; padding:0 20px; display:flex; align-items:center; gap:14px; }
.logo { display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:18px; letter-spacing:-.03em; white-space:nowrap; }
.logo:hover { text-decoration:none; }.logo>svg { width:28px; height:28px; flex:none; }.logo small { margin-left:10px; color:#9fb0c9; font-weight:500; font-size:12px; letter-spacing:0; }
.top-nav { display:flex; gap:2px; margin-left:auto; }.top-nav a { color:#c4cfdf; font-size:13.5px; padding:6px 10px; border-radius:8px; }.top-nav a:hover { background:#1f2a40; color:#fff; text-decoration:none; }
.nav-actions { display:flex; gap:8px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 12px; border:1px solid #33425e; border-radius:9px; background:#172034; color:#e4ebf6; font-size:13px; }.btn:hover { border-color:#8db8ea; background:#1d2940; color:#fff; text-decoration:none; }.btn.icon { width:36px; padding:0; }
.top :focus-visible { outline-color:#8db8ea; }

/* 서재 */
.library { --lib-text:#eef3fb; --lib-dim:#b6c2d6; --lib-faint:#8d9ab1; --lib-line:rgba(255,255,255,.14); --gap:22px; position:relative; overflow:hidden; color:var(--lib-text); padding:22px 0 30px;
  background:
    radial-gradient(ellipse 55% 60% at 10% -14%, rgba(141,184,234,.22), transparent 72%),
    radial-gradient(ellipse 42% 55% at 94% -10%, rgba(255,146,43,.15), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,.024) 79px 80px),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(255,255,255,.016) 79px 80px),
    linear-gradient(165deg, #121b2d, #0c1220 52%, #111726); }
.library .eyebrow { color:#ffc078; }
.library :focus-visible { outline-color:#ffc078; }
.welcome { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; }
.welcome h1 { margin:6px 0 0; font-size:clamp(28px,3.4vw,44px); line-height:1.2; letter-spacing:-.045em; }
.welcome h1 em { font-style:normal; background:linear-gradient(100deg,#9cc4f0,#ffb46b 85%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.welcome-side { max-width:410px; padding-bottom:4px; }
.welcome-side p { margin:0; color:var(--lib-dim); font-size:13.5px; line-height:1.6; }
.welcome-side .stats { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:9px; color:var(--lib-faint); font-size:12px; }
.stats b { margin-right:2px; color:var(--lib-text); font:700 14px var(--mono); }

.shelf-controls { display:flex; align-items:center; justify-content:space-between; gap:10px 16px; margin:22px 0 4px; }
.filters { display:flex; flex-wrap:wrap; align-items:center; gap:6px 4px; }
.filters button { display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border:1px solid #ffffff26; border-radius:999px; background:#ffffff08; color:#d6dfec; font-size:12.5px; white-space:nowrap; transition:background .15s, border-color .15s, color .15s; }
.filters button:hover { background:#ffffff17; border-color:#ffffff4d; }
.filters button span { color:#8f9cb3; font:600 10px var(--mono); }
.filters button[aria-pressed=true] { background:#eef3fb; border-color:#eef3fb; color:#0d1320; font-weight:600; }.filters button[aria-pressed=true] span { color:#4c5a72; }
.filters .chain { color:#5f6d86; font-size:11px; }
.filters .sep { width:1px; height:18px; margin:0 6px; background:#ffffff26; }
.shelf-tools { display:flex; align-items:center; gap:10px; flex:0 1 300px; min-width:220px; }
.search { position:relative; display:flex; align-items:center; flex:1; }.search>svg { position:absolute; left:11px; color:#8f9cb3; pointer-events:none; }
.search input { width:100%; height:36px; padding:0 10px 0 34px; border:1px solid #ffffff2b; border-radius:999px; background:#ffffff0d; color:#fff; font-size:13px; }
.search input::placeholder { color:#8592a9; }.search input:focus { border-color:#ffc078; outline:none; background:#ffffff14; }
#book-count { color:var(--lib-faint); font:11px var(--mono); white-space:nowrap; }

/* 책장: 표지는 같은 줄 높이의 선반 위에 서고, 빈 칸에도 선반이 이어진다(js가 칸을 채움) */
.bookcase { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); column-gap:var(--gap); row-gap:24px; margin:18px calc(var(--gap) / -2) 0; padding:0 calc(var(--gap) / 2); }
.book { min-width:0; position:relative; }
.book-stand { position:relative; }
.book-stand::after { content:""; position:absolute; left:calc(var(--gap) / -2 - .5px); right:calc(var(--gap) / -2 - .5px); top:100%; height:9px; border-radius:1px; background:linear-gradient(#e6ecf3 0 1px, #b3bdca 1.5px, #7f8b9c 4px, #4f5a6a 7.5px, #262d38 9px); box-shadow:0 7px 9px rgba(0,0,0,.45), 0 16px 24px rgba(0,0,0,.22); }
.book-slot .book-stand { aspect-ratio:7/9; }
.book-cover { container-type:inline-size; position:relative; z-index:1; display:flex; flex-direction:column; width:90%; aspect-ratio:7/10; margin:0 auto; padding:11% 9% 8% 13%; overflow:hidden; color:#fff; border-radius:3px 7px 7px 3px;
  background:linear-gradient(90deg,#0006,#ffffff24 3%,#0002 5.5%,transparent 10%,#0001 94%,#ffffff1c), linear-gradient(180deg,rgba(0,0,0,.16),transparent 42%), repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px), var(--c);
  box-shadow:1.5px 0 0 #c8d0db, 3.5px 1.5px 0 #eef2f7, 5.5px 2.5px 0 #a9b3c1, 7px 10px 18px -5px rgba(0,0,0,.65);
  transition:transform .2s ease, box-shadow .2s ease; -webkit-touch-callout:none; }
.book-cover:hover { text-decoration:none; transform:translateY(-6px) rotate(-.6deg); box-shadow:1.5px 0 0 #c8d0db, 3.5px 1.5px 0 #eef2f7, 5.5px 2.5px 0 #a9b3c1, 9px 18px 24px -6px rgba(0,0,0,.7); }
.book-cover:focus-visible { outline:2px solid #ffc078; outline-offset:4px; }
.book-top { display:flex; justify-content:space-between; align-items:flex-start; gap:4px; min-height:1.4em; font-size:max(8.5px,8.6cqi); line-height:1.4; }
.book-top small { opacity:.85; font-size:inherit; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.book-top b { flex:none; padding:0 5px; border:1px dashed #ffffffa6; border-radius:999px; background:#ffffff26; font-weight:600; font-size:inherit; }
.book-cover strong { margin-top:7%; font-size:clamp(11.5px,15cqi,19px); line-height:1.25; letter-spacing:-.035em; text-shadow:0 1px 2px rgba(0,0,0,.25); }
.book-art { flex:1; min-height:0; display:flex; align-items:center; margin:5% 0 4%; opacity:.92; }
.book-art .cover-art { display:block; width:100%; height:100%; max-height:100%; }
.book-foot { display:flex; justify-content:space-between; align-items:flex-end; gap:6px; padding-top:6%; border-top:1px solid #ffffff59; font-size:max(8.5px,8.4cqi); line-height:1.3; letter-spacing:.02em; }
.book-foot span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.book-foot span:last-child { flex:none; font-family:var(--mono); opacity:.75; }
.book.writing .book-cover { background:linear-gradient(90deg,#0006,#ffffff24 3%,#0002 5.5%,transparent 10%,#0001 94%,#ffffff1c), repeating-linear-gradient(135deg,#ffffff09 0 6px,transparent 6px 12px), var(--c); }
.book-label { margin-top:19px; padding:0 3%; }
.book-label p { margin:0; color:var(--lib-dim); font-size:12px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.book-meta { display:flex; flex-wrap:wrap; gap:0 6px; margin-top:3px; color:var(--lib-faint); font-size:10.5px; }
.book-meta>*+*::before { content:"·"; margin-right:6px; color:var(--lib-faint); }
.book-meta a { color:#a9c6ea; }.book-meta a:hover { color:#fff; }
.book-meta .writing { color:#ffc078; }
.empty { margin:30px 0 6px; text-align:center; color:var(--lib-dim); font-size:14px; }
.noscript { color:var(--lib-dim); font-size:13px; } .noscript a { color:#a9c6ea; }

/* 아래 구역 */
.block { padding:34px 0 38px; border-top:1px solid var(--border); }
.sec-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:6px 24px; margin-bottom:16px; }
.sec-head h2 { margin:4px 0 0; font-size:clamp(22px,2.6vw,28px); line-height:1.3; letter-spacing:-.035em; }
.sec-head p { margin:0; max-width:34em; color:var(--text-dim); font-size:13.5px; line-height:1.6; }

/* 대표 실험: 겹쳐 놓은 카드 덱. 넓은 화면에서는 가까운 카드가 옆으로 비켜난다(js) */
.experiments { --card-width:300px; display:grid; grid-template-columns:repeat(var(--gaps,5),minmax(0,1fr)) var(--card-width); padding:10px 0 18px; isolation:isolate; }
.experiment { --c:var(--c-light,var(--accent)); position:relative; display:flex; flex-direction:column; width:var(--card-width); min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--bg-elev); color:var(--text); box-shadow:-8px 4px 22px color-mix(in srgb,var(--shadow) 12%,transparent); transition:border-color .2s, transform .28s ease, box-shadow .28s ease; }
.experiment:nth-child(even) { transform:translateY(7px) rotate(1deg); }
.experiment:hover, .experiment:focus-visible { z-index:2; text-decoration:none; border-color:var(--c); transform:translateY(-10px) rotate(-1deg); box-shadow:0 18px 36px color-mix(in srgb,var(--shadow) 24%,transparent); }
.experiment-image { display:block; aspect-ratio:16/9; overflow:hidden; background:#fff; border-bottom:1px solid var(--border); }
.experiment-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.experiment-body { display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:14px 16px 16px; }
.experiment-book { color:var(--c); font:700 10.5px var(--mono); letter-spacing:.03em; }
.experiment strong { margin:6px 0; font-size:16.5px; line-height:1.4; letter-spacing:-.025em; }
.experiment-desc { margin:0 0 12px; color:var(--text-dim); font-size:13px; line-height:1.55; }
.experiment-action { margin-top:auto; color:var(--c); font-size:13px; font-weight:700; }
@media (min-width:1001px) and (hover:hover) and (prefers-reduced-motion:no-preference) {
  .experiments.dock-active>.experiment { z-index:var(--dock-z,0); transform:translateX(var(--dock-x,0px)); transition:transform .38s cubic-bezier(.22,1,.36,1), border-color .2s, box-shadow .28s ease; }
  .experiments.dock-active>.dock-current { transform:translate(var(--dock-x,0px),-14px) scale(1.025); border-color:var(--c); box-shadow:0 20px 38px color-mix(in srgb,var(--shadow) 26%,transparent); }
}
@media (max-width:1000px), (hover:none) {
  .experiments { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:12px 4px 18px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
  .experiment { flex:0 0 min(var(--card-width),84%); width:auto; scroll-snap-align:start; }
  .experiment:nth-child(even) { transform:none; }
}

/* 읽는 순서 */
.paths { background:linear-gradient(180deg,var(--surface),var(--bg)); }
.path-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.path { min-width:0; padding:14px 15px 15px; border:1px solid var(--border); border-radius:12px; background:var(--bg-elev); }
.path h3 { margin:0; font-size:15.5px; letter-spacing:-.02em; }
.path p { margin:2px 0 11px; color:var(--text-dim); font-size:12.5px; line-height:1.5; }
.path ol { display:flex; flex-wrap:wrap; align-items:center; gap:6px 4px; margin:0; padding:0; list-style:none; }
.path li { display:flex; align-items:center; gap:4px; }
.path li+li::before { content:"→"; color:var(--text-faint); font-size:11px; }
.path a { --c:var(--c-light,var(--accent)); display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 3px; border:1px solid color-mix(in srgb,var(--c) 35%,var(--border)); border-radius:7px; background:color-mix(in srgb,var(--c) 8%,var(--bg-elev)); color:var(--text); font-size:12.5px; font-weight:600; white-space:nowrap; }
.path a:hover { border-color:var(--c); text-decoration:none; }
.path a .sq { display:grid; place-items:center; width:28px; height:20px; border-radius:4px; background:var(--c-light,var(--accent)); color:#fff; font:700 8.5px var(--mono); letter-spacing:.02em; }
:root[data-theme=dark] :is(.experiment,.path a) { --c:var(--c-dark,var(--accent)); }
@media(prefers-color-scheme:dark) { :root:not([data-theme=light]) :is(.experiment,.path a) { --c:var(--c-dark,var(--accent)); } }

.foot { border-top:1px solid var(--border); color:var(--text-faint); font-size:12px; }
.foot .wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; padding-top:16px; padding-bottom:22px; }
.foot p { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:0; }
.foot-brand { color:var(--text); font-size:14px; font-weight:800; }
.foot-links a { color:var(--text-dim); }
.foot small { width:100%; font-size:11px; }

@media (max-width:1100px) {
  .bookcase { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .top-nav a { padding-inline:7px; }
}
@media (max-width:920px) {
  .bookcase { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .welcome { display:block; }.welcome-side { max-width:600px; padding:10px 0 0; }
  .shelf-controls { flex-wrap:wrap; }.shelf-tools { flex:1 1 100%; }
  .path-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .top-nav { display:none; }.nav-actions { margin-left:auto; }.logo small { display:none; }
  .top-inner, .wrap { padding:0 16px; }
  .library { --gap:16px; padding:18px 0 24px; }
  .bookcase { grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:20px; }
  .filters :is(.chain,.sep) { display:none; }
  .book-label { margin-top:16px; padding:0; }
}
@media (max-width:560px) {
  .bookcase { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .welcome h1 { font-size:clamp(25px,7.4vw,32px); }
  .welcome-side p { font-size:13px; }
  .filters button { padding:5px 9px; font-size:12px; }
  .book-label p { font-size:11px; }
  .book-meta { font-size:10px; }
  .path-list { grid-template-columns:1fr; }
  .sec-head p { font-size:13px; }
}
@media (max-width:390px) {
  .library { --gap:12px; }
  .all-books span { display:none; }.all-books { width:36px; padding:0; }
  .logo { font-size:17px; gap:8px; }
}
@container (max-width:96px) { .book-top small, .book-foot span:last-child { display:none; } }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .book-cover, .experiment, .filters button { transition:none; }
  .book-cover:hover, .experiment:nth-child(even), .experiment:hover, .experiment:focus-visible { transform:none; }
}

/* MusicBooks: forthcoming volumes are non-interactive. */
.planned .book-cover { opacity:.65; cursor:default; }
.planned .book-cover:hover { transform:none; }
.experiments { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:620px) { .experiments { grid-template-columns:1fr; } }
@media(min-width:1001px) {
  .bookcase { grid-template-columns:repeat(4,minmax(0,1fr)); --gap:32px; }
  .path-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .experiments { max-width:820px; gap:24px; }
  .experiment { width:100%; }
}