/* 유정쌤의 작은 책 실험실 */
:root { color-scheme: light; --paper:#faf8ff; --surface:#fff; --ink:#39354f; --muted:#7a758d; --line:#e9e4f3; --accent:#7864b9; --accent-dark:#6953a6; --tint:#f0eafa; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(ellipse at 82% 8%,#eee7fa 0,transparent 37%),radial-gradient(ellipse at 5% 42%,#fff0ed 0,transparent 30%),var(--paper); color:var(--ink); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button,a,select { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.65; }
a { color:var(--accent-dark); }
:focus-visible { outline:3px solid #a497d6; outline-offset:4px; }
[hidden] { display:none!important; }
.page-header { display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1120px; margin:0 auto; padding:22px 28px; }
.lab-back { display:flex; align-items:center; gap:10px; padding:9px 13px; border-radius:17px; background:#ffffffb8; border:1px solid #fff; box-shadow:0 5px 18px #6b538309; text-decoration:none; backdrop-filter:blur(12px); }
.lab-icon { display:grid; place-items:center; width:34px; height:34px; background:#eee8fa; border-radius:12px; }
.lab-icon img { width:27px; height:27px; object-fit:contain; border-radius:7px; }
.lab-back small { display:block; font-size:9px; font-weight:700; letter-spacing:1.7px; line-height:1.5; color:#9385b9; }
.lab-back strong { display:block; font-size:13px; color:#5c536f; }
.research-badge { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; background:#fff9; border:1px solid #e8e0f3; color:#82709e; border-radius:30px; font-size:12px; }
.research-badge::before { content:""; width:6px; height:6px; background:#b6a3d8; border-radius:50%; }
main { max-width:1080px; margin:0 auto; padding:0 28px; }
.intro { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:13px 26px 26px; }
.intro-copy { min-width:0; }
.eyebrow { display:inline-flex; gap:8px; align-items:center; color:#8c7fa7; font-size:13px; font-weight:600; margin:0 0 13px; }
.eyebrow span { font-size:17px; }
.intro h1 { font-size:clamp(30px,4.2vw,43px); font-weight:800; letter-spacing:-1.8px; line-height:1.35; margin:0 0 15px; }
.intro h1 span { color:#8d78c4; }
.intro-description { margin:0; color:#7a7088; font-size:14px; line-height:1.8; word-break:keep-all; }
.hero-art { flex:0 0 250px; height:240px; position:relative; display:grid; place-items:center; isolation:isolate; }
.art-orbit { position:absolute; width:210px; height:194px; border-radius:43% 57% 51% 49% / 45% 49% 51% 55%; background:#ebe4f6; transform:rotate(-12deg); z-index:-1; }
.art-orbit::after { content:""; position:absolute; width:74px; height:74px; background:#f9e6dc; border-radius:50%; right:-17px; bottom:-9px; }
.hero-art img { width:186px; height:186px; object-fit:contain; transform:rotate(3deg); filter:drop-shadow(0 9px 5px #9478840b); }
.art-note { position:absolute; left:-10px; top:4px; background:#fff; border:1px solid #eee4f2; border-radius:14px 14px 3px 14px; padding:6px 12px; color:#9b86b2; font-size:12px; font-weight:600; transform:rotate(-7deg); box-shadow:0 5px 12px #9375a409; }
.art-book { position:absolute; bottom:10px; right:-3px; font-size:36px; transform:rotate(-13deg); }
.art-star { position:absolute; color:#bda3d6; font-size:29px; }
.star-one { top:37px; right:-6px; }
.star-two { bottom:22px; left:4px; color:#d6ad9d; font-size:23px; }
form { display:flex; align-items:flex-end; gap:13px; background:#fff; border:1px solid #e8e1f3; border-radius:25px; padding:19px 22px; box-shadow:0 7px 0 #eae4f344,0 14px 30px #9888b309; position:relative; }
label { display:flex; flex-direction:column; gap:7px; font-size:12px; font-weight:500; color:#8c829d; }
.query-field { flex:1; min-width:0; }
input,select { min-width:0; min-height:47px; border:1px solid #eae4f2; border-radius:13px; padding:10px 13px; color:#5b526f; background:#faf8fd; }
input { font-size:16px; width:100%; }
input::placeholder { color:#aaa1b8; font-size:14px; }
form select { min-width:115px; }
button { min-height:47px; border:0; border-radius:14px; padding:10px 27px; background:var(--accent); color:#fff; font-weight:700; box-shadow:0 4px 0 #6c5aaa1a; transition:background .18s ease,transform .18s ease; }
button:hover:not(:disabled) { background:var(--accent-dark); transform:translateY(-1px); }
.results-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:31px 4px 18px; }
.results-toolbar p { font-size:13px; font-weight:600; color:#776a90; margin:0; overflow-wrap:anywhere; }
.sort-label { flex-direction:row; align-items:center; flex-shrink:0; font-size:11px; gap:9px; }
.sort-label select { font-size:12px; min-height:38px; border-radius:11px; padding:6px 10px; background:#fff9; }
.book-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.book-card { min-width:0; border:1px solid #e9e3f1; border-radius:25px; background:var(--surface); padding:15px 17px 17px; display:flex; flex-direction:column; box-shadow:0 5px 0 #e7dfed38; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.book-card:hover { transform:translateY(-4px); border-color:#d4c6e9; box-shadow:0 12px 25px #8b75a313; }
.cover-wrap { display:grid; place-items:center; height:181px; margin:0 0 17px; background:#f1edf8; border-radius:17px; padding:16px; }
.book-card:nth-child(4n+2) .cover-wrap { background:#faf0ec; }
.book-card:nth-child(4n+3) .cover-wrap { background:#edf4ef; }
.book-card:nth-child(4n+4) .cover-wrap { background:#faf4e6; }
.cover-wrap img { display:block; max-width:100%; max-height:148px; object-fit:contain; border-radius:2px 4px 4px 2px; filter:drop-shadow(4px 6px 4px #4e3f5e1c); transition:transform .2s ease; }
.book-card:hover .cover-wrap img { transform:rotate(-2deg) translateY(-2px); }
.cover-placeholder { display:grid; place-items:center; width:103px; height:144px; background:#e4d9f3; color:#8c76ad; font-size:13px; border-radius:3px 10px 10px 3px; padding:14px; text-align:center; }
.book-card h2 { font-size:17px; font-weight:700; line-height:1.5; letter-spacing:-.6px; margin:0 4px 7px; min-height:3em; max-height:3em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.book-meta { font-size:12px; font-weight:500; color:#7a6b85; line-height:1.7; min-height:3.4em; max-height:3.4em; margin:0 4px 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.book-description { font-size:13px; color:#766c85; line-height:1.75; height:5.25em; margin:0 4px 18px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.book-detail { display:flex; align-items:center; justify-content:space-between; align-self:stretch; gap:8px; min-height:44px; padding:9px 14px; margin-top:auto; font-size:13px; font-weight:600; color:#75618f; background:#f5f0fb; border-radius:13px; text-decoration:none; }
.book-detail::after { content:"↗"; font-size:16px; }
.book-detail:hover { background:#eee5f8; color:#6a5094; }
.detail-unavailable { font-size:12px; color:var(--muted); padding:9px 4px; margin-top:auto; }
.empty-state { text-align:center; padding:34px 18px 22px; }
.empty-books { display:inline-grid; place-items:center; width:80px; height:73px; background:#f0e9f8; border:5px solid #fff9; border-radius:25px; font-size:32px; transform:rotate(-7deg); }
.empty-state h2 { font-size:17px; letter-spacing:-.5px; color:#91819f; margin:16px 0 6px; font-weight:600; }
.empty-state p { font-size:12px; color:#aaa0b5; margin:0; word-break:keep-all; }
.more-row { display:flex; justify-content:center; margin:27px 0 19px; }
#more-button { background:#fff; border:1px solid #e5dbee; color:#8b78a3; font-size:13px; border-radius:16px; padding:10px 32px; }
.source-note,footer { color:#a69baf; font-size:11px; text-align:center; }
.source-note { margin:22px 0; }
footer { padding:9px 20px 28px; }
#search-status[data-error="true"] { color:#b2576e; }
@media(max-width:800px) {
 .book-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .intro { padding:15px 6px 27px; gap:14px; }
 .hero-art { flex-basis:192px; height:220px; }
 .hero-art img { width:161px; height:161px; }
 .art-orbit { width:171px; height:167px; }
 .art-note { font-size:10px; left:-4px; top:14px; }.art-book { font-size:28px; right:-4px; bottom:19px; }.star-one { right:-2px; top:53px; font-size:22px; }
}
@media(max-width:540px) {
 .page-header { padding:16px; }.lab-back { padding:7px 10px; }.lab-back strong { font-size:12px; }.lab-icon { width:30px; height:30px; }
 main { padding:0 17px; }.intro { padding:20px 3px 25px; gap:0; position:relative; min-height:215px; }.intro-copy { width:100%; position:relative; z-index:1; }
 .eyebrow { font-size:10px; margin-bottom:12px; }.eyebrow span { font-size:14px; }.intro h1 { font-size:31px; letter-spacing:-1.5px; line-height:1.35; margin-bottom:13px; }
 .intro-description { font-size:11px; max-width:210px; line-height:1.8; }
 .hero-art { position:absolute; width:126px; height:160px; right:-3px; top:21px; pointer-events:none; }.hero-art img { width:125px; height:125px; margin-top:17px; }
 .art-orbit { width:115px; height:113px; }.art-orbit::after { width:42px; height:42px; right:-3px; bottom:-4px; }.art-note { top:-8px; left:2px; font-size:9px; padding:5px 7px; }
 .star-one { font-size:18px; top:28px; right:-4px; }.star-two { display:none; }.art-book { font-size:22px; bottom:-8px; right:6px; }
 form { padding:16px; gap:12px 9px; flex-wrap:wrap; border-radius:21px; }form>label:first-child { width:100%; }.query-field { flex-basis:100%; }form select { width:100%; min-height:43px; }input { min-height:47px; }#search-button { width:100%; }
 .results-toolbar { align-items:flex-start; flex-wrap:wrap; gap:12px; margin:27px 2px 16px; }.results-toolbar p { font-size:12px; flex:1 1 180px; align-self:center; }.sort-label { font-size:10px; }
 .book-grid { gap:13px; }.book-card { border-radius:20px; padding:10px 10px 12px; }.cover-wrap { height:144px; border-radius:13px; padding:10px; margin-bottom:12px; }.cover-wrap img { max-height:123px; }
 .cover-placeholder { width:78px; height:115px; font-size:11px; padding:8px; }.book-card h2 { font-size:14px; margin:0 2px 7px; letter-spacing:-.5px; }.book-meta { margin:0 2px 10px; font-size:11px; }
 .book-description { margin:0 2px 13px; font-size:12px; }.book-detail { min-height:44px; padding:8px 10px; border-radius:11px; font-size:12px; }
 .source-note { font-size:10px; line-height:1.8; padding:0 5px; }.empty-state { padding-top:27px; }.empty-state p { max-width:245px; margin:auto; line-height:1.8; }
}
@media(max-width:370px) {
 .hero-art { width:108px; right:-1px; top:30px; }.hero-art img { width:105px; height:105px; }.art-orbit { width:100px; height:100px; }.art-note { font-size:8px; }
 .intro h1 { font-size:28px; }.intro-description { font-size:10px; max-width:190px; }.book-grid { gap:10px; }.book-card { padding:8px 8px 10px; }.cover-wrap { height:131px; }.cover-wrap img { max-height:112px; }.book-card h2 { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

/* 검색과 공개 추천 책장을 같은 실험실 안에서 전환합니다. */
.book-tabs { display:flex; gap:5px; padding:5px; margin:4px 0 14px; width:fit-content; max-width:100%; background:#eee8f6; border:1px solid #e6ddf1; border-radius:18px; }
.book-tabs button { background:transparent; color:#8c7b9d; min-height:43px; box-shadow:none; font-size:13px; padding:9px 19px; border-radius:13px; }
.book-tabs button[aria-selected="true"] { background:#fff; color:#705a9c; box-shadow:0 3px 9px #7f669916; }
.book-tabs button:hover:not(:disabled) { background:#ffffffb3; color:#705a9c; transform:none; }
.pick-notice { display:flex; gap:12px; align-items:center; justify-content:space-between; font-size:13px; padding:12px 16px; background:#eef5ef; border:1px solid #dcebdd; color:#5a7d65; border-radius:16px; overflow-wrap:anywhere; }
.pick-notice[data-error="true"] { background:#fff0f2; border-color:#f2dbe0; color:#a45a70; }
.pick-undo { min-height:36px; padding:6px 12px; font-size:12px; white-space:nowrap; background:#fff; color:#587a64; box-shadow:none; }
.pick-intro { display:flex; align-items:center; gap:16px; background:#fff8; border:1px solid #e9e0f2; border-radius:23px; padding:20px 23px; }
.pick-stamp { display:grid; place-items:center; flex-shrink:0; width:51px; height:51px; font-size:30px; line-height:1; color:#ac7e9f; background:#f7e8f0; border-radius:18px; transform:rotate(-7deg); }
.pick-intro h2 { margin:0 0 4px; color:#7b6295; font-size:18px; letter-spacing:-.6px; }.pick-intro p { margin:0; color:#9c8ca8; font-size:12px; }
.picks-status { color:#8c7b9d; font-size:13px; margin:20px 4px; }
.book-card { position:relative; }
.pick-action { position:absolute; right:24px; top:24px; min-height:36px; padding:6px 11px; font-size:11px; line-height:1.5; border:1px solid #e7daef; border-radius:12px; color:#9876a7; background:#fffc; backdrop-filter:blur(8px); box-shadow:0 3px 9px #7254880d; z-index:1; }
.pick-action:hover:not(:disabled) { background:#f3e8f7; color:#815a92; }.pick-action.is-picked { color:#aa7e9c; background:#fceef5; opacity:1; cursor:default; }.pick-remove { color:#9b8298; }
#picks-more,#picks-retry { background:#fff; border:1px solid #e5dbee; color:#8b78a3; font-size:13px; }
@media(max-width:540px) {
 .book-tabs { width:100%; margin-top:0; border-radius:16px; }.book-tabs button { flex:1; font-size:11px; padding:8px 7px; min-height:43px; white-space:nowrap; }
 .pick-intro { padding:17px 15px; gap:12px; }.pick-intro h2 { font-size:16px; }.pick-intro p { font-size:11px; }.pick-stamp { width:42px; height:45px; font-size:26px; }
 .pick-action { top:16px; right:16px; min-height:36px; padding:6px 8px; font-size:10px; }.pick-notice { font-size:12px; padding:10px 12px; }
}