/* 연두의 서재 — 페이퍼컷(색종이 콜라주) 스타일
   색·크기는 여기 변수만 바꾸면 전체에 반영된다. */
:root{
  --cream:#f7f0de;        /* 바탕 종이 */
  --paper:#fffaf0;        /* 덧붙인 흰 종이 */
  --ink:#2e2a25;
  --ink-soft:#655b4c;
  --yeondu:#b9d56f;
  --yeondu-deep:#46600f;
  --yellow:#f3cf5b;
  --pink:#f0a3ad;
  --kraft:#c0935e;        /* 선반 */
  --kraft-light:#d8b384;
  --board:#efe4c8;        /* 책장 뒷판 종이 */
  --shadow:rgba(70,50,20,.24);
  --row:214px;            /* 책장 한 칸 높이 (선반 포함) */
  --plank:16px;           /* 선반 두께 */
  --display:"Jua","Gowun Dodum",sans-serif;
  --serif:"Gowun Batang","Nanum Myeongjo",serif;
  --sans:"Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  /* 종이 결 */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--grain),var(--cream);color:var(--ink);
  font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--yeondu-deep);outline-offset:2px}

/* ── 찢은 종이: 글자는 그대로 두고 뒤에 깔린 종이만 가장자리를 거칠게 ── */
.paper{position:relative;isolation:isolate}
.paper::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--grain),var(--bg,var(--paper));
  filter:url(#torn) drop-shadow(2px 3px 0 var(--shadow));
}

/* ── 마스킹테이프 ── */
.tape{
  position:absolute;z-index:2;width:96px;height:26px;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 7px,transparent 7px 14px),var(--tape,#f0a3ad);
  opacity:.88;
  clip-path:polygon(0 0,4% 25%,0 50%,4% 75%,0 100%,100% 100%,96% 75%,100% 50%,96% 25%,100% 0);
}
.tape.t1{top:-11px;left:-26px;rotate:-32deg}
.tape.t2{top:-11px;right:-26px;rotate:28deg;--tape:#9cc9e6}
.tape.t3{top:-13px;left:50%;margin-left:-48px;rotate:-2deg;--tape:#b9d56f}

/* ── 머리말 ── */
.top{max-width:1100px;margin:0 auto;padding:54px 20px 26px;text-align:center}
.title-card{display:inline-block;padding:26px 56px 22px;rotate:-1.2deg}
.eyebrow{margin:0;color:var(--yeondu-deep);letter-spacing:.18em;font-size:.85rem}
.top h1{
  font-family:var(--display);font-weight:400;font-size:clamp(2.3rem,7vw,3.6rem);line-height:1.15;
  margin:.1em 0 .05em;color:var(--ink);text-shadow:3px 3px 0 var(--yeondu);text-wrap:balance;
}
.count{margin:0;color:var(--ink-soft);min-height:1.6em}
.deco{position:absolute;z-index:1;filter:drop-shadow(1.5px 2px 0 var(--shadow));pointer-events:none}
.deco.leaf{width:38px;left:-22px;bottom:-18px;rotate:-28deg}
.deco.sun{width:46px;right:-24px;bottom:14px;rotate:12deg}
.deco.moon{width:24px;right:26px;bottom:-12px}
.blog-link{
  display:inline-block;margin:22px 0 0 14px;padding:6px 16px;rotate:1.5deg;
  background:var(--grain),var(--yeondu);color:var(--ink);text-decoration:none;font-size:.95rem;
  box-shadow:2px 3px 0 var(--shadow);
  clip-path:polygon(0 6%,98% 0,100% 94%,2% 100%);
}
.blog-link:hover{rotate:0deg;background:var(--grain),var(--yellow)}

/* ── 필터 ── */
.controls{max-width:1100px;margin:0 auto;padding:8px 20px 26px;display:grid;gap:14px}
.row{display:flex;gap:10px;align-items:flex-start}
.row-search{align-items:stretch}
.label{
  flex:none;width:3em;margin-top:3px;text-align:center;font-family:var(--display);font-size:.95rem;
  background:var(--grain),var(--pink);rotate:-3deg;box-shadow:1.5px 2px 0 var(--shadow);
}
#tagRow .label{background:var(--grain),#9cc9e6;rotate:2deg}
#search,#sort{
  background:var(--grain),var(--paper);border:2px dashed #b9a67c;border-radius:4px;
  box-shadow:2px 3px 0 var(--shadow);
}
#search{flex:1;min-width:0;padding:11px 16px}
#search::placeholder{color:var(--ink-soft)}
#sort{padding:0 12px}
#search:focus,#sort:focus{border-color:var(--yeondu-deep);border-style:solid;outline:none}
.chips{display:flex;flex-wrap:wrap;gap:8px 9px}
.chip{
  border:0;border-radius:2px;padding:3px 12px;font-size:.9rem;white-space:nowrap;
  background:var(--grain),var(--paper);box-shadow:1.5px 2px 0 var(--shadow);
  clip-path:polygon(0 4%,99% 0,100% 96%,1.5% 100%);
  transition:rotate .15s,translate .15s;
}
.chip:nth-child(3n+1){rotate:-1.3deg}
.chip:nth-child(3n+2){rotate:1deg}
.chip:nth-child(4n){clip-path:polygon(1.5% 0,100% 5%,98.5% 100%,0 95%)}
#tagChips .chip{background:var(--grain),#f1e2bf}
.chip small{color:var(--ink-soft);margin-left:4px}
.chip:hover{translate:0 -2px;rotate:0deg}
.chip.on,#tagChips .chip.on{background:var(--grain),var(--yeondu);font-weight:700}
.chip.on small{color:#33450a}
.chip.more,#tagChips .chip.more{background:none;box-shadow:none;border:2px dashed #b9a67c;color:var(--ink-soft);clip-path:none}
.row-toggles{justify-content:space-between;flex-wrap:wrap;margin-top:4px}
.seg{display:inline-flex;gap:6px}
.seg button{
  border:0;padding:6px 14px;font-size:.9rem;border-radius:2px;
  background:var(--grain),var(--paper);box-shadow:1.5px 2px 0 var(--shadow);
}
.seg button:nth-child(odd){rotate:-1deg}.seg button:nth-child(even){rotate:1deg}
.seg button.on{background:var(--grain),var(--yellow);font-weight:700;translate:0 -2px}

/* ── 책장 ── */
.library{max-width:1100px;margin:0 auto;padding:0 20px 40px}
.case{--bg:var(--board);margin-bottom:46px;padding:20px 18px 22px}
.case:nth-child(3n+2) .t1{--tape:#f3cf5b}
.case:nth-child(3n) .t2{--tape:#c3b0de}
.case h2{
  font-family:var(--display);font-weight:400;font-size:1.3rem;margin:0 0 14px 6px;
  display:inline-flex;align-items:baseline;gap:8px;padding:2px 14px;rotate:-1.5deg;
  background:var(--grain),var(--paper);box-shadow:1.5px 2px 0 var(--shadow);
  clip-path:polygon(0 5%,99% 0,100% 95%,1% 100%);
}
.case h2 small{font-family:var(--sans);font-size:.85rem;color:var(--ink-soft)}
.shelf{
  display:flex;flex-wrap:wrap;align-items:flex-end;padding:0 14px;min-height:var(--row);
  /* 한 칸마다 반복: 위쪽 선반 그림자 → 빈 벽 → 선반(밝은 윗면 + 크라프트지 앞면) */
  background:
    linear-gradient(to bottom,
      rgba(70,50,20,.14) 0, rgba(70,50,20,.14) 5px,
      transparent 5px, transparent calc(var(--row) - var(--plank)),
      var(--kraft-light) calc(var(--row) - var(--plank)), var(--kraft-light) calc(var(--row) - var(--plank) + 4px),
      var(--kraft) calc(var(--row) - var(--plank) + 4px), var(--kraft) var(--row));
  background-size:100% var(--row);
}
.book{
  flex:none;height:var(--row);padding:0 1.5px var(--plank);margin:0;border:0;background:none;
  display:flex;align-items:flex-end;
  filter:drop-shadow(1.5px 0 0 rgba(70,50,20,.22));
}
.spine{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:var(--w);height:var(--h);padding:30px 0 24px;
  background:var(--grain),var(--c);color:var(--t);
  transform-origin:50% 100%;transition:translate .18s ease,rotate .18s ease;
  clip-path:polygon(4% 1%,97% 0,100% 100%,0 100%);
}
/* 가위질이 조금씩 다른 책등 */
.book:nth-child(4n+2) .spine{clip-path:polygon(0 0,96% 2%,100% 100%,2% 100%)}
.book:nth-child(4n+3) .spine{clip-path:polygon(5% 0,100% 1.5%,98% 100%,0 100%)}
.book:nth-child(4n) .spine{clip-path:polygon(0 2%,100% 0,100% 100%,3% 100%)}
.book:nth-child(9n+4) .spine{rotate:1.3deg}
.book:nth-child(13n+7) .spine{rotate:-1.1deg}
.spine::before{ /* 덧붙인 종이 띠 */
  content:"";position:absolute;left:0;right:0;top:11px;height:10px;background:rgba(255,250,240,.62);
}
.spine::after{ /* 동그란 종이 조각 */
  content:"";position:absolute;left:50%;bottom:9px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:currentColor;opacity:.5;
}
.spine span{
  writing-mode:vertical-rl;font-size:.86rem;line-height:1.15;letter-spacing:.02em;
  max-height:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.book:hover .spine,.book:focus-visible .spine{translate:0 -12px;rotate:0deg}

/* 표지 보기 */
.shelf.covers{--row:238px;gap:0 16px;padding:0 20px}
.shelf.covers .book{padding:0 0 var(--plank);filter:drop-shadow(2px 2px 0 var(--shadow))}
.face{
  width:118px;height:172px;position:relative;overflow:hidden;
  background:var(--grain),var(--c);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transform-origin:50% 100%;transition:translate .18s ease,rotate .18s ease;
  clip-path:polygon(1% 0,100% 1%,99% 100%,0 99%);
}
.face.photo{background:var(--paper);padding:5px}   /* 표지 사진은 흰 종이에 붙인 것처럼 */
.face img{width:100%;height:100%;object-fit:cover;display:block}
.face .ph{ /* 색종이 위에 붙인 제목 딱지 */
  width:84%;padding:9px 7px;rotate:-2deg;background:var(--grain),var(--paper);
  font-family:var(--serif);font-weight:700;font-size:.9rem;line-height:1.35;text-align:center;word-break:keep-all;
  box-shadow:1.5px 2px 0 rgba(70,50,20,.25);
}
.face .ph em{display:block;margin-top:6px;font-style:normal;font-weight:400;font-family:var(--sans);font-size:.74rem;color:var(--ink-soft)}
.shelf.covers .book:nth-child(5n+1) .face{rotate:-2.4deg}
.shelf.covers .book:nth-child(5n+2) .face{rotate:1.6deg}
.shelf.covers .book:nth-child(5n+3) .face{rotate:-1deg}
.shelf.covers .book:nth-child(5n+4) .face{rotate:2.6deg}
.shelf.covers .book:nth-child(5n) .face{rotate:.6deg}
.shelf.covers .book:hover .face,.shelf.covers .book:focus-visible .face{translate:0 -10px;rotate:0deg}

.empty{text-align:center;color:var(--ink-soft);padding:60px 0;font-family:var(--serif)}

/* ── 안내 ── */
.notice{max-width:560px;margin:0 auto 60px;padding:30px 28px;text-align:center}
.notice[hidden]{display:none}
.notice h2{font-family:var(--display);font-weight:400;font-size:1.25rem;margin:0 0 8px}
.notice p{margin:0 0 16px;color:var(--ink-soft);font-size:.95rem}
.file-btn{display:inline-block;padding:8px 20px;background:var(--grain),var(--yellow);box-shadow:2px 3px 0 var(--shadow);cursor:pointer;rotate:-1deg}

.foot{text-align:center;color:var(--ink-soft);font-size:.85rem;padding:10px 20px 50px}

/* ── 상세 보기 ── */
dialog{
  border:0;padding:0;background:none;color:var(--ink);overflow:visible;
  width:min(720px,calc(100vw - 36px));max-height:none;
}
dialog::backdrop{background:rgba(46,42,37,.6)}
.close{
  position:absolute;top:-12px;right:-10px;z-index:3;width:38px;height:38px;border:0;border-radius:50%;
  background:var(--grain),var(--pink);font-size:1.5rem;line-height:1;color:var(--ink);
  box-shadow:2px 3px 0 var(--shadow);rotate:6deg;
}
.close:hover{rotate:-6deg}
.d-body{display:flex;gap:30px;padding:40px 34px 22px;max-height:calc(100dvh - 130px);overflow-y:auto}
.d-cover{flex:none;position:relative;padding-top:6px}
.d-cover .face{width:170px;height:248px;rotate:-3deg;filter:none}
.d-cover{filter:drop-shadow(3px 4px 0 var(--shadow))}
.d-cover .face .ph{font-size:1.05rem}
.d-cover::before{ /* 표지를 붙인 테이프 */
  content:"";position:absolute;z-index:2;top:-6px;left:50%;width:74px;height:22px;margin-left:-37px;rotate:4deg;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 7px,transparent 7px 14px),var(--yellow);opacity:.9;
}
.d-text{min-width:0;flex:1}
.d-genre{
  display:inline-block;margin:0;padding:1px 12px;font-family:var(--display);font-size:.9rem;rotate:-2deg;
  background:var(--grain),var(--yeondu);box-shadow:1.5px 2px 0 var(--shadow);
}
.d-text h2{font-family:var(--serif);font-size:1.65rem;line-height:1.3;margin:.35em 0 .2em;word-break:keep-all}
.d-author,.d-date{margin:0;color:var(--ink-soft);font-size:.95rem}
blockquote{ /* 감상은 노란 메모지에 */
  position:relative;isolation:isolate;margin:20px 0 20px;padding:16px 20px;rotate:-.6deg;
  font-family:var(--serif);font-size:1.04rem;line-height:1.8;white-space:pre-line;word-break:keep-all;color:var(--ink);
}
blockquote[hidden]{display:none}
blockquote::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--grain),#fbe7a1;
  filter:url(#cut) drop-shadow(2px 3px 0 var(--shadow));
}
.d-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.d-tags button{border:0;border-radius:2px;background:var(--grain),#f1e2bf;padding:2px 11px;font-size:.86rem;box-shadow:1.5px 2px 0 var(--shadow)}
.d-tags button:nth-child(odd){rotate:-1.5deg}
.d-tags button:hover{background:var(--grain),var(--yeondu)}
.d-link{
  display:inline-block;padding:8px 18px;background:var(--grain),var(--ink);color:var(--paper);text-decoration:none;font-size:.95rem;
  box-shadow:2px 3px 0 var(--shadow);rotate:-.8deg;clip-path:polygon(0 5%,99% 0,100% 95%,1% 100%);
}
.d-link[hidden]{display:none}
.d-link:hover{background:var(--grain),var(--yeondu-deep)}
.d-nav{display:flex;justify-content:space-between;margin:0 22px;padding:10px 0 18px;border-top:2px dashed #b9a67c}
.d-nav button{border:0;background:none;color:var(--ink-soft);padding:6px 10px}
.d-nav button:hover:not(:disabled){color:var(--ink)}
.d-nav button:disabled{opacity:.35;cursor:default}

@media (max-width:600px){
  :root{--row:188px}
  .top{padding-top:40px}
  .title-card{padding:22px 30px 18px}
  .library,.controls{padding-left:14px;padding-right:14px}
  .case{padding:16px 10px 18px}
  .shelf{padding:0 6px}
  .tape{width:74px;height:22px}
  .tape.t1{left:-18px}.tape.t2{right:-18px}
  .shelf.covers{--row:200px;gap:0 10px;padding:0 8px}
  .shelf.covers .face{width:94px;height:138px}
  .face .ph{font-size:.8rem;padding:7px 5px}
  .d-body{flex-direction:column;align-items:center;padding:36px 20px 16px;gap:18px}
  .d-cover .face{width:124px;height:182px}
  .d-text{width:100%}
  .row-search{flex-wrap:wrap}
  #sort{padding:9px 12px}
  .close{right:-6px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}