/* 2026-10-28 개인 서재(다락방) 첫 화면 정리 + 노션식 표지 바꾸기
   되돌리기: index.html에서 scene-cover.css / scene-cover.js 두 줄을 빼면 이전 화면으로 돌아갑니다. */

/* 1) 겹치는 안내 줄이기: 머리말 상태 문구, 장면 속 버튼 3개, '다락이와 놀기' 막대, 장면 설명 줄, 작은 머리글
   - 책장 = 머리말 '오늘의 서가', 다락이에게 말 걸기 = '책 찾아보기'·소개의 버튼, 다락이와 놀기 = 다락이 누르기와 같은 기능 */
.site-header .status{display:none!important}
#explore .scene-hotspot,#explore .pet-controls,#explore .scene-caption,#explore .scene-pan-hint,#explore .scene-copy .eyebrow{display:none!important}

/* 2) 전시 책은 아래 칸 5권만. 그림 속 아래 칸의 그려진 책은 지운 그림(bookstore-soft-daylight-display.webp)을 쓰고,
   실제 표지는 책장 칸 안쪽(위 판 아래 57.85% ~ 선반 면 64.95%)에 들어가는 크기로, 표지 비율(약 0.7)을 지켜 잘리지 않게 둡니다. */
#explore .display-book.counter,#explore .display-book.upper{display:none!important}
#explore .display-book.lower{top:57.85%;width:3.33%;height:7.1%;box-shadow:0 1px 2px rgb(40 25 10/.35),0 4px 8px -3px rgb(40 25 10/.4)}
#explore .display-book.lower.original-cover{box-shadow:none}
#explore .display-book.lower-1{left:37.99%}#explore .display-book.lower-2{left:44.19%}#explore .display-book.lower-3{left:50.09%}#explore .display-book.lower-4{left:56.04%}#explore .display-book.lower-5{left:62.39%}

/* 3) 다락이 크기: 처음의 70% → 15% 키움 → 다시 20% 키움(2026-10-28, 기본값) */
.resident-cat{width:calc(169px * var(--dm-scale,1));height:calc(185px * var(--dm-scale,1))}
@media(max-width:600px){.resident-cat{width:calc(136px * var(--dm-scale,1));height:calc(146px * var(--dm-scale,1))}}
@media(max-width:850px){
  #explore .resident-cat{width:calc(108px * var(--dm-scale,1));height:calc(118px * var(--dm-scale,1))}
  #explore .scene-canvas .resident-cat{width:calc(18.4% * var(--dm-scale,1));height:auto;top:59%}
}

/* 4) 표지 바꾸기 막대 (운영자에게만) */
.scene-cover-bar{position:absolute;z-index:9;top:16px;right:16px;display:flex;align-items:stretch;background:rgb(255 255 255/.92);border:1px solid rgb(0 0 0/.12);border-radius:8px;box-shadow:0 2px 8px rgb(0 0 0/.08);overflow:hidden;font:500 14px/1 var(--font-reading,sans-serif);opacity:.78;transition:opacity .15s}
#explore:hover .scene-cover-bar,.scene-cover-bar:focus-within,.scene-cover-bar.is-open{opacity:1}
html:not([data-role=operator]) .scene-cover-bar,html:not([data-role=operator]) .scene-cover-menu{display:none!important}
.scene-cover-bar button{min-height:40px;min-width:0;margin:0;padding:0 14px;border:0;border-left:1px solid rgb(0 0 0/.1);background:transparent;color:#2b2b2b;font:inherit;cursor:pointer}
.scene-cover-bar button:first-child{border-left:0}
.scene-cover-bar button:hover{background:rgb(0 0 0/.05)}
.scene-cover-bar button:disabled{color:#9a9a9a;cursor:not-allowed;background:transparent}
.scene-cover-bar button:focus-visible,.scene-cover-menu button:focus-visible,.scene-cover-menu label:focus-within{outline:3px solid #1d6f78;outline-offset:-3px}
.scene-cover-bar .scene-cover-dl{padding:0 12px}.scene-cover-bar svg{width:16px;height:16px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:2}
.scene-cover-menu{position:absolute;z-index:10;top:64px;right:16px;width:300px;padding:14px;background:#fff;color:#222;border:1px solid rgb(0 0 0/.12);border-radius:10px;box-shadow:0 10px 30px rgb(0 0 0/.16);font:400 14px/1.5 var(--font-reading,sans-serif)}
.scene-cover-menu[hidden]{display:none}
.scene-cover-menu h3{margin:0 0 10px;font-size:14px;font-weight:600}
.scene-cover-menu .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scene-cover-menu .opt{display:grid;gap:6px;margin:0;padding:6px;border:1px solid #ddd;border-radius:8px;background:#fff;color:#222;font:inherit;text-align:left;cursor:pointer}
.scene-cover-menu .opt[aria-pressed=true]{border-color:#1d6f78;box-shadow:0 0 0 1px #1d6f78}
.scene-cover-menu .opt img,.scene-cover-menu .opt .ph{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:5px;background:#f2f2f2}
.scene-cover-menu .opt .ph{display:grid;place-items:center;color:#666;font-size:24px}
.scene-cover-menu .opt input{position:absolute;width:1px;height:1px;opacity:0}
.scene-cover-menu small{display:block;margin-top:10px;color:#5d5d5d;font-size:12px}
.scene-cover-menu .msg{margin:10px 0 0;color:#1d6f78;font-size:13px}.scene-cover-menu .msg:empty{display:none}
.scene-cover-reposition{position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 16px;border-radius:8px;background:rgb(0 0 0/.6);color:#fff;font:500 14px/1.4 var(--font-reading,sans-serif);pointer-events:none}
#explore.is-repositioning{cursor:ns-resize;touch-action:none}
#explore.is-repositioning .display-books,#explore.is-repositioning .resident-cat{pointer-events:none;opacity:.55}

/* 5) 바꾼 그림 쓰기: 그림은 칸을 채우고(cover) 세로 위치는 --scene-y */
html[data-scene=custom] #explore.explore-stage{background-image:var(--scene-img)!important;background-size:cover!important;background-position:50% var(--scene-y,50%)!important;background-repeat:no-repeat!important}
@media(max-width:850px){
  html[data-scene=custom] #explore.explore-stage{background-image:none!important}
  html[data-scene=custom] #explore .scene-canvas{background:var(--scene-img) 50% var(--scene-y,50%)/cover no-repeat!important}
}
/* 바꾼 그림에는 원래 그림의 전시대가 없으므로, 같은 5권을 아래 가운데 반투명 선반에 둡니다 */
html[data-scene=custom] #explore .display-books:before{content:'';position:absolute;left:32.5%;width:35%;bottom:13.5%;height:16%;background:rgb(255 255 255/.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:6px;box-shadow:0 4px 18px rgb(0 0 0/.12)}
html[data-scene=custom] #explore .display-book.lower{top:auto;bottom:15.5%;height:12%;width:5.33%}
html[data-scene=custom] #explore .display-book.lower-1{left:34.25%}html[data-scene=custom] #explore .display-book.lower-2{left:40.78%}html[data-scene=custom] #explore .display-book.lower-3{left:47.31%}html[data-scene=custom] #explore .display-book.lower-4{left:53.84%}html[data-scene=custom] #explore .display-book.lower-5{left:60.37%}
html[data-scene=custom] #explore .scene-copy{background:rgb(255 255 255/.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;padding:18px 22px;color:#193b3d}
.scene-cover-bar,.scene-cover-reposition{pointer-events:auto}
.scene-cover-reposition{pointer-events:none}
/* PC는 화면 전체 축소(0.72)와 장면 축소(0.833)가 겹쳐 글자가 작아지므로 막대·메뉴만 되돌려 키웁니다 */
@media(min-width:851px) and (max-width:1023px){.scene-cover-bar,.scene-cover-menu{zoom:1.15}}
@media(min-width:1024px){.scene-cover-bar,.scene-cover-menu{zoom:1.4}.scene-cover-menu{top:52px}}
/* 휴대폰: 막대는 그림 오른쪽 위, 고르기 메뉴는 그림 바로 아래 한 줄 */
@media(max-width:850px){
  .scene-cover-bar{top:8px;right:8px;font-size:13px}.scene-cover-bar button{min-height:36px;padding:0 10px}
  .scene-cover-menu{position:static;grid-column:1/-1;width:auto;margin:4px 0 0;box-shadow:none}
}
/* 빈 전시 자리: 바꾼 그림 위에서는 운영자에게만 점선 칸으로, 방문자에게는 숨김 */
html[data-scene=custom][data-role=operator] #explore .display-book.original-cover{background:rgb(255 255 255/.5)!important;outline:1.5px dashed #1d6f78;outline-offset:-2px}
html[data-scene=custom]:not([data-role=operator]) #explore .display-book.original-cover{display:none!important}
@media(prefers-reduced-motion:reduce){.scene-cover-bar{transition:none}}

/* 6) '다락이에게 부탁하기' 구역: 겹치던 설명을 한 번만, 다락이 말풍선 */
#request .request-note{margin:18px 0 0;font-size:14px;line-height:1.7;color:#5b6661;max-width:32em}
.darak-cta-card{align-items:center}
.darak-cta-bubble{position:relative;display:inline-block;margin:0 0 16px;padding:10px 16px;border-radius:16px;background:#fff6e8;border:1px solid #f0d9b5;color:#3a2f22;font-size:17px;font-weight:600;line-height:1.4}
.darak-cta-bubble:before{content:'';position:absolute;left:-7px;top:50%;width:12px;height:12px;margin-top:-6px;background:#fff6e8;border-left:1px solid #f0d9b5;border-bottom:1px solid #f0d9b5;transform:rotate(45deg)}
.darak-cta-hint{margin:12px 0 0;font-size:13px;color:#6b6b6b}
@media (max-width:600px){.darak-cta-card{align-items:center}.darak-cta-bubble{margin-top:4px}.darak-cta-bubble:before{left:50%;top:-7px;margin:0 0 0 -6px;border-left:1px solid #f0d9b5;border-bottom:0;border-top:1px solid #f0d9b5}}

/* 7) 입고 버튼 하나로: 원래 두 버튼은 숨기고(기능은 고르기 창에서 그대로 엶) */
#coverImportOpen,#shelfIntakeOpen{display:none!important}
html[data-shelf=server]:not([data-role=operator]) #intakeChooserOpen{display:none!important}
.intake-chooser{width:min(460px,calc(100vw - 32px));padding:0;border:1px solid #ddd;border-radius:14px;background:#fff;color:#222;box-shadow:0 20px 50px rgb(0 0 0/.18)}
.intake-chooser::backdrop{background:rgb(0 0 0/.35)}
.intake-chooser .ic-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 6px}
.intake-chooser h2{margin:0;font-size:19px;font-weight:600}
.intake-chooser .ic-close{min-width:44px;min-height:44px;border:0;background:none;font-size:24px;cursor:pointer;color:#555}
.intake-chooser .ic-options{display:grid;gap:10px;padding:8px 20px 20px}
.intake-chooser .ic-option{display:flex;gap:14px;align-items:center;width:100%;min-height:72px;padding:14px;border:1px solid #e3e3e3;border-radius:10px;background:#fff;color:#222;text-align:left;font:inherit;cursor:pointer}
.intake-chooser .ic-option[hidden]{display:none}
.intake-chooser .ic-option:hover{border-color:#243735;background:#f7f9f8}
.intake-chooser .ic-option:focus-visible,.intake-chooser .ic-close:focus-visible{outline:3px solid #1d6f78;outline-offset:2px}
.intake-chooser .ic-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#f1efe9}
.intake-chooser .ic-icon svg{width:24px;height:24px;fill:none;stroke:#243735;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.intake-chooser strong{display:block;font-size:16px;font-weight:600}
.intake-chooser small{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:#5f6662}
@media (min-width:1024px){.intake-chooser{max-height:calc((100dvh - 32px) / var(--site-zoom,1))}}

/* 9) '다락이에게 부탁하기' 오른쪽 카드는 뺐어요(다락이를 누르면 같은 기능) */
#request.hero{grid-template-columns:1fr}
#request .request-hint{margin:18px 0 0;font-size:15px;line-height:1.7;color:#3a3a3a;max-width:34em}

/* 10) 다락이 활동 구역(PC): 서점 그림 + 아래 구역 */
.darak-roam{position:relative}
@media(min-width:851px){
  .darak-roam>.resident-cat{position:absolute;z-index:6;top:var(--darak-floor,60%);bottom:auto;width:calc(140px * var(--dm-scale,1));height:calc(154px * var(--dm-scale,1))}
}
@media(min-width:1024px){.darak-roam>.dm-pill,.darak-roam>.dm-menu,.darak-roam>.dm-compose,.darak-roam>.dm-bubble{zoom:1.17}}
@media(min-width:851px) and (max-width:1023px){.darak-roam>.dm-pill,.darak-roam>.dm-menu,.darak-roam>.dm-compose,.darak-roam>.dm-bubble{zoom:.96}}

/* 11) 다락이 대화창 사진 버튼 → 방법 고르기(입고 고르기 창과 같은 모양) */
.darak-compose{position:relative}
.darak-attach-menu{position:absolute;z-index:5;left:0;bottom:calc(100% + 8px);display:grid;gap:8px;width:min(400px,calc(100vw - 48px));padding:10px;border:1px solid #e3e3e3;border-radius:14px;background:#fff;box-shadow:0 14px 36px rgb(0 0 0/.16)}
.darak-attach-menu[hidden]{display:none}
.darak-attach-menu .ic-option{display:flex;gap:12px;align-items:center;width:100%;min-height:60px;padding:10px 12px;border:1px solid #ececec;border-radius:10px;background:#fff;color:#222;text-align:left;font:inherit;cursor:pointer}
.darak-attach-menu .ic-option:hover{border-color:#243735;background:#f7f9f8}
.darak-attach-menu .ic-option:focus-visible{outline:3px solid #1d6f78;outline-offset:2px}
.darak-attach-menu .ic-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#f1efe9}
.darak-attach-menu .ic-icon svg{width:22px;height:22px;fill:none;stroke:#243735;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.darak-attach-menu strong{display:block;font-size:15px;font-weight:600}
.darak-attach-menu small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:#5f6662}

/* 12) 머리말: 운영자 · 나의 서재 · 사내 서재 한 줄 */
.site-header [data-space-switch].is-merged{display:none!important}
.header-personal-actions .company-link[hidden]{display:none!important}

/* 13) 다락방 첫 화면 안의 '나의 서재'(본인에게만) — /my와 같은 내용 */
.mine-section{padding:72px clamp(22px,8vw,128px) 64px;border-top:1px solid #e6e1d6;background:#fffdf8;scroll-margin-top:90px}
.mine-section[hidden]{display:none}
.mine-section h2{margin:6px 0 8px;font-size:clamp(26px,2.6vw,36px);font-weight:500;letter-spacing:-.025em}
.mine-lead{margin:0 0 6px;color:#555;font-size:15px}
.mine-section #myStatus{margin:0 0 8px;font-size:13px;color:#777}
.mine-section #myRoot{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;align-items:start}
.mine-section .my-section{margin:0;padding:18px;border:1px solid #e3ddcf;border-radius:12px;background:#fff}
.mine-section .my-section h2{margin:0 0 10px;font-size:17px;font-weight:600;letter-spacing:0}
.mine-section .my-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid #eee8dc;overflow-wrap:anywhere}
.mine-section .my-row>span{flex:1 1 200px;font-size:15px}
.mine-section .my-row small{display:block;margin-top:3px;color:#666;font-size:12.5px}
.mine-section .my-row a{display:inline-flex;align-items:center;min-height:40px;color:#285247}
.mine-section .my-row button,.mine-section .my-settings select{min-height:40px;padding:6px 12px;border:1px solid #c9c2b2;border-radius:8px;background:#fff;color:#244b3f;font:inherit;font-size:14px;cursor:pointer}
.mine-section .my-empty{margin:4px 0 0;color:#777;font-size:14px}
.mine-section .my-settings{display:grid;gap:12px}.mine-section .my-settings label{display:grid;gap:6px;font-size:14px}
@media(max-width:600px){.mine-section{padding:48px 18px}}