/* ───────── 휴대폰·태블릿 웹앱 화면 (마지막에 불러와 기존 규칙을 정리합니다) ───────── */

/* 데스크톱: 새 감싸개는 배치에 영향을 주지 않습니다. 기존 화면 그대로입니다. */
.scene-scroller,.scene-canvas{display:contents}
.scene-pan-hint,.tabbar,.install-button{display:none}
html{-webkit-text-size-adjust:100%}
button,a,summary,label{-webkit-tap-highlight-color:rgba(36,55,53,.12)}

/* 웹앱 설치 안내 창 (모든 폭) */
.install-sheet{width:min(440px,calc(100vw - 32px));padding:24px;border:1px solid #ccc;background:#fff;color:#222;box-shadow:0 24px 70px rgb(0 0 0 / 22%)}
.install-sheet::backdrop{background:rgb(0 0 0 / 30%)}
.install-sheet h3{margin:0 0 12px;font-size:20px}
.install-sheet ol{margin:0 0 18px;padding-left:22px;line-height:1.8;font-size:16px}
.install-sheet button{min-height:44px;width:100%;border:1px solid #222;background:#222;color:#fff;font:600 16px/1.4 var(--font-reading)}

/* 표지 사진 입고: 폴더 선택 / 붙여넣기 (모든 폭) */
.cover-source{margin:18px 0}
.cover-source-label{margin:0 0 10px;font-weight:600;font-size:16px}.cover-source-label small{display:block;margin-top:2px;font-weight:400;font-size:13px;color:#666}
.cover-source-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cover-source-option{position:relative;display:grid;gap:4px;min-height:92px;padding:14px 16px;border:1px solid #243735;border-radius:10px;background:#fff;color:#222;cursor:pointer;text-align:left}
.cover-source-option strong{font-size:15px;line-height:1.4}.cover-source-option span{font-size:13px;line-height:1.55;color:#5b6660}
.cover-source-option:hover{background:#f6f8f6}.cover-source-option:focus-within,.cover-paste-zone:focus-visible{outline:3px solid #26717b;outline-offset:2px}
.cover-file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.cover-source-status{margin:8px 0 0;font-size:13px;color:#4c5a54}
@media (max-width:600px){.cover-source-options{grid-template-columns:1fr}.cover-source-option{min-height:0}}

/* 표지 넣기 방법 선택 창 (모든 폭) */
.cover-choice{box-sizing:border-box;width:min(640px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid #ccc;background:#fff;color:#222;box-shadow:0 24px 70px rgb(0 0 0 / 22%);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.cover-choice::backdrop{background:rgb(0 0 0 / 25%);backdrop-filter:blur(3px)}
.cover-choice .cover-import-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cover-choice .cover-import-head h3{margin:4px 0 0;font-size:22px;line-height:1.4}
.cover-choice .cover-import-head button{min-width:44px;min-height:44px;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer}
.cover-choice-book{margin:10px 0 18px;color:#555;font-size:15px;line-height:1.6}
.cover-choice-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cover-choice-options[hidden],.cover-choice-search[hidden],.cover-choice-note[hidden]{display:none}
.cover-choice-option{display:grid;gap:6px;min-height:120px;padding:18px;border:1px solid #243735;border-radius:10px;background:#fff;color:#222;text-align:left;cursor:pointer;font:inherit}
.cover-choice-option strong{font-size:17px;line-height:1.4}
.cover-choice-option span{font-size:14px;line-height:1.6;color:#5b6660}
.cover-choice-option[data-cover-choice="ium"]{background:#243735;color:#fff}
.cover-choice-option[data-cover-choice="ium"] span{color:#d9e4dd}
.cover-choice-option:hover{filter:brightness(.97)}
.cover-choice-option:focus-visible,.cover-candidate:focus-visible,.cover-choice-actions button:focus-visible{outline:3px solid #26717b;outline-offset:3px}
.cover-choice-search .cover-import-status{margin:0 0 14px;font-size:15px;line-height:1.6}
.cover-choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.cover-choice-grid[aria-busy="true"]{min-height:80px}
.cover-candidate{display:grid;grid-template-rows:auto 1fr;gap:10px;padding:10px;border:1px solid #d5dbd7;border-radius:10px;background:#fff;color:#222;text-align:left;cursor:pointer;font:inherit}
.cover-candidate img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;background:#f2f2f2}
.cover-candidate span{display:grid;gap:3px}
.cover-candidate strong{font-size:14px;line-height:1.45}
.cover-candidate small{font-size:12px;line-height:1.5;color:#5b6660}
.cover-candidate em{margin-top:6px;padding:9px 8px;border-radius:6px;background:#243735;color:#fff;font:600 13px/1.3 var(--font-reading);font-style:normal;text-align:center}
.cover-candidate:hover{border-color:#243735}
.cover-choice-note{margin:14px 0 0;font-size:13px;line-height:1.6;color:#5b6660}
.cover-choice-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cover-choice-actions button{min-height:44px;padding:0 14px;border:1px solid #222;border-radius:6px;background:#fff;color:#222;font:500 14px/1.3 var(--font-reading);cursor:pointer}

/* ───────── 850px 이하: 전시 서가를 웹과 같은 그림·같은 위치로 ───────── */
@media (max-width:850px){
  #explore.explore-stage{--scene-h:min(560px,max(500px,130vw));display:flex;flex-direction:column;min-height:0;aspect-ratio:auto;background:#f4f0e8;border-bottom:0;overflow:hidden}
  #explore.explore-stage:after{content:none}
  #explore .scene-copy{position:relative;top:auto;left:auto;width:auto;max-width:none;margin:16px 16px 14px;padding:20px 20px 22px;flex:none}
  #explore .scene-copy .eyebrow{font-size:13px;margin-bottom:10px}
  #explore .scene-copy h1{font-size:clamp(24px,7.2vw,34px);line-height:1.38;margin:0 0 10px}
  #explore .scene-copy p:last-child{font-size:15px;line-height:1.75}

  /* 그림을 크게 보여주고 좌우로 밀어서 둘러봅니다. 책 자리는 데스크톱과 같은 비율 좌표를 씁니다. */
  #explore .scene-scroller{display:block;position:relative;flex:none;height:var(--scene-h);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pan-y}
  #explore .scene-scroller::-webkit-scrollbar{display:none}
  #explore .scene-canvas{display:block;position:relative;height:100%;width:calc(var(--scene-h) * 1.5);background:url('assets/bookstore-soft-daylight-display.webp') center/100% 100% no-repeat}
  #explore .display-books{position:absolute;inset:0;display:block;padding:0;gap:0;overflow:visible;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;scroll-snap-type:none}
  #explore .display-book.counter,#explore .display-book.upper,#explore .display-book.lower{position:absolute;flex:none;scroll-snap-align:none}
  #explore .display-book.counter{top:41.8%;width:3.6%;height:7.05%}#explore .display-book.counter-1{left:19.1%}#explore .display-book.counter-2{left:23.25%}
  #explore .display-book.upper{top:49.8%;height:6.8%;width:3.45%}#explore .display-book.upper-1{left:45.1%}#explore .display-book.upper-2{left:48.6%}#explore .display-book.upper-3{left:52.1%}#explore .display-book.upper-4{left:55.6%}
  #explore .display-book.lower{top:58.45%;height:6.75%;width:4.5%}#explore .display-book.lower-1{left:37.4%}#explore .display-book.lower-2{left:43.6%}#explore .display-book.lower-3{left:49.5%}#explore .display-book.lower-4{left:55.45%}#explore .display-book.lower-5{left:61.8%}
  /* 손가락으로 누르기 쉽게 보이지 않는 터치 영역을 넓힙니다. */
  #explore .display-book:before{content:'';position:absolute;inset:-7px -4px}
  /* 데스크톱처럼 이름표는 평소에 숨기고, 키보드로 선택했을 때만 보여줍니다. */
  #explore .display-book b{left:50%;bottom:calc(100% + 8px);width:max-content;max-width:160px;max-height:none;padding:6px 8px;background:#fff;border:1px solid #222;font:600 12px/1.3 var(--font-reading);opacity:0;transform:translate(-50%,4px);overflow:visible}
  #explore .display-book:focus-visible b{opacity:1;transform:translate(-50%,0)}

  #explore .scene-caption{display:none}
  #explore .scene-pan-hint{display:flex;position:absolute;z-index:7;left:50%;top:calc(var(--scene-top,0px) + 74px);transform:translateX(-50%);align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:rgba(37,62,64,.86);color:#fffdf4;font:500 13px/1.4 var(--font-reading);white-space:nowrap;pointer-events:none;transition:opacity .4s}
  #explore .scene-pan-hint.is-hidden{opacity:0}

  /* 장면 위 버튼: 상단은 책장·다락이와 놀기, 하단은 대화·카운터 */
  #explore .scene-hotspot{z-index:6;min-width:0;max-width:none;padding:9px 12px;background:rgba(255,253,244,.93);border:1px solid #c4cfc4;border-radius:10px;box-shadow:0 2px 10px #2941481f;text-shadow:none}
  #explore .scene-hotspot:before,#explore .scene-hotspot:after{content:none}
  #explore .scene-hotspot span{font-size:15px;line-height:1.4}
  #explore .scene-hotspot small{font-size:12px;line-height:1.4}
  #explore .shelf-hotspot{top:calc(var(--scene-top,0px) + 12px);left:12px;right:auto;bottom:auto}
  #explore .window-hotspot{left:12px;right:auto;top:auto;bottom:12px;width:calc(50% - 18px)}
  #explore .counter-hotspot{left:auto;right:12px;top:auto;bottom:12px;width:calc(50% - 18px)}
  #explore .resident-cat{width:112px;height:122px;bottom:70px;z-index:5}
  #explore .pet-controls{top:calc(var(--scene-top,0px) + 12px);right:12px;bottom:auto;width:auto;min-width:0;max-width:calc(100% - 24px)}
  #explore .pet-controls:not([open]) .pet-actions,#explore .pet-controls:not([open]) .pet-options,#explore .pet-controls:not([open]) p{display:none}
  #explore .pet-controls[open]{bottom:auto;width:min(300px,calc(100% - 24px));max-height:calc(var(--scene-h) - 90px);overflow:auto}
  #explore .pet-controls summary{padding:10px 14px;background:rgba(255,253,244,.93);border-radius:10px;text-shadow:none}
  #explore .pet-controls{border-radius:10px}
}

/* 태블릿·휴대폰 공통: 입력할 때 화면이 확대되지 않게, 검색칸과 분류 버튼은 손가락 크기로 */
@media (max-width:850px),(pointer:coarse){
  input:not([type=radio]):not([type=checkbox]),textarea,select{font-size:16px}
  #store .store-search{min-height:48px}
  #store .store-search input{font-size:16px;min-height:40px}
  #store .category-tabs button{min-width:44px}
  .site-header .brand{min-height:44px;display:inline-flex;align-items:center}
}

/* 손가락으로 쓰는 기기: 눌렀을 때 들림 효과가 남지 않게 */
@media (hover:none){
  .display-book:hover{transform:none;filter:none}
  .display-book:hover b{opacity:0}
  .scene-hotspot:hover{transform:none}
}

/* ───────── 700px 이하: 앱처럼 쓰는 화면 ───────── */
@media (max-width:700px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  /* 상단은 이름만 짧게, 메뉴는 하단 탭으로 */
  .site-header{position:sticky;top:0;min-height:0;height:auto;padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));flex-wrap:nowrap;gap:12px;align-items:center}
  .site-header>nav,.site-header .status{display:none}
  .site-header .brand{font-size:19px;padding:6px 0}
  .install-button{display:inline-flex;margin-left:auto;align-items:center;min-height:40px;padding:0 14px;border:1px solid #243735;border-radius:999px;background:#fff;color:#243735;font:600 14px/1 var(--font-reading)}
  .install-button[hidden]{display:none}

  .tabbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;z-index:20;left:0;right:0;bottom:0;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:rgba(255,255,255,.97);border-top:1px solid #ddd;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:60px;padding:6px 2px;color:#6b746f;text-decoration:none;font:500 12px/1.2 var(--font-reading);letter-spacing:-.02em}
  .tabbar a svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a[aria-current="true"]{color:#243735;font-weight:700}
  .tabbar a[aria-current="true"]:after{content:'';position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:#243735}
  .tabbar b{position:absolute;top:6px;left:calc(50% + 7px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#df836a;color:#fff;font:700 11px/18px var(--font-reading);text-align:center}
  .tabbar b[data-zero]{display:none}
  section[id]{scroll-margin-top:70px}

  /* 입력칸 16px 이상: 아이폰이 입력할 때 화면을 확대하지 않습니다. */
  input:not([type=radio]):not([type=checkbox]),textarea,select{font-size:16px}
  #store .store-search{min-height:48px;padding:4px 0}
  #store .store-search input{font-size:16px;min-height:40px}

  /* 분류는 한 줄로, 옆으로 밀어서 선택 */
  #store .store-actions{min-width:0;max-width:100%}
  #store .category-tabs{align-self:stretch;box-sizing:border-box;width:calc(100% + 40px);min-width:0;max-width:none;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:4px -20px 0;padding:2px 20px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #store .category-tabs::-webkit-scrollbar{display:none}
  #store .category-tabs button{flex:none;min-height:44px;padding:0 16px;border:1px solid #cfd6d1;border-radius:999px;font-size:15px;white-space:nowrap;text-decoration:none}
  #store .category-tabs button.active{background:#243735;border-color:#243735;color:#fff;text-decoration:none}
  #store .store-actions{display:flex;flex-direction:column;align-items:stretch;gap:14px}
  #store .cover-import-open{width:100%;min-height:48px;font-size:16px}
  #store .owned-book-actions button{min-height:44px}

  /* 표지 사진: 휴대폰에서는 카메라·앨범 버튼으로 */
  input[type=file]{max-width:100%;font-size:15px}
  input[type=file]::file-selector-button{min-height:44px;margin-right:10px;padding:0 16px;border:1px solid #222;border-radius:6px;background:#fff;color:#222;font:600 15px/1 var(--font-reading)}
  .request-cover-label strong{font-size:16px}
  .suggestions button,#searchButton,.auto-recommend-button{min-height:48px}
  .auto-recommend-button{display:block;box-sizing:border-box;width:100%;margin-left:0;margin-right:0}

  /* 팝업: 화면 아래에서 올라오는 시트 형태, 가로 넘침 없음 */
  .cover-choice{width:calc(100% - 16px);max-height:calc(100dvh - 24px - env(safe-area-inset-top));margin:auto auto calc(8px + env(safe-area-inset-bottom));padding:20px}
  .cover-choice-options{grid-template-columns:1fr}
  .cover-choice-option{min-height:0}
  .cover-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cover-choice-actions button{flex:1 1 auto}
  .cover-import,.stock-date,.delete-book-dialog,.reading-note-dialog,.display-picker{box-sizing:border-box;width:calc(100% - 16px);max-width:none;max-height:calc(100dvh - 24px - env(safe-area-inset-top));margin:auto auto calc(8px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  .cover-import-form,.reading-note-form{padding:20px}
  .darak-chat{box-sizing:border-box;width:calc(100% - 16px)!important;max-width:none!important;max-height:calc(100dvh - 24px)!important;left:8px!important;right:8px!important;top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;margin:0!important}
  .darak-chat .chat-drag-hint{display:none}
  .darak-chat-prompts button,.darak-chat-form button{min-height:44px}
  .book-detail{padding-bottom:env(safe-area-inset-bottom)}
  .book-detail-nav button{min-height:44px}

  /* 하단 정보 글씨가 배경에 묻히지 않게 */
  footer span,footer .mono{color:#5b6d62!important;opacity:1}
  footer{padding-bottom:28px}
}

/* 홈 화면에서 앱으로 실행했을 때 */
@media (display-mode:standalone){
  .install-button{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  #explore .scene-pan-hint{transition:none}
}

/* 공개 영상 메타데이터: 조회수·게시일·검토 범위 */
.book-videos .video-facts{font-size:14px;line-height:1.7;color:#243735}.book-videos small{display:block;font-size:13px;line-height:1.6;color:#666}.book-videos button{display:block;min-height:44px;margin-top:14px}.book-videos .video-scope{font-size:13px;line-height:1.8;color:#666}.book-videos iframe{display:block;width:100%;max-width:100%;aspect-ratio:16/9;height:auto;border:0}

/* ───────── PC 화면: 전체를 한눈에 보이도록 축소하고 가운데 정렬, 좌우 여백 확보 ─────────
   --site-zoom 하나로 비율을 조절합니다. 휴대폰·태블릿(1024px 미만)은 영향 없음. */
@media (min-width:1024px){
  html{--site-zoom:.72;background:#efece4}
  body{zoom:var(--site-zoom);max-width:1440px;margin:0 auto;background:#fff;box-shadow:0 0 0 1px #e2ddd1,0 20px 60px rgb(40 50 45 / 8%);min-height:100vh}
}

/* ───────── 상단 서점 장면: 이미지 영역 60% · 하단 보도블럭 세로 절반 ─────────
   그림(3:2) 하단 16%가 보도블럭 → 아래 8%를 잘라 보도블럭을 절반만 보이게 합니다.
   책 자리는 '잘리지 않은 원본 그림' 기준 좌표를 쓰도록 .scene-canvas(3:2)를 기준 상자로 둡니다. */
:root{--scene-crop:.92}
@media (min-width:851px){
  /* 그림·문구·버튼·고양이를 한꺼번에 같은 비율로 축소(zoom). 퍼센트 폭은 zoom 영향을 받지 않으므로 폭 = z×100%, 좌측 여백 = (1-z)/2 */
  #explore.explore-stage{--stage-zoom:.833;zoom:var(--stage-zoom);width:calc(var(--stage-zoom) * 100%);margin:28px 0 0 calc((1 - var(--stage-zoom)) / 2 * 100%);min-height:0;aspect-ratio:1.5/var(--scene-crop);background-size:100% auto;background-position:center top}
  #explore .scene-scroller{display:contents}
  #explore .scene-canvas{display:block;position:absolute;left:0;top:0;width:100%;aspect-ratio:3/2;pointer-events:none}
  #explore .display-books{position:absolute;inset:0}
}
@media (max-width:850px){
  #explore .scene-canvas{height:calc(var(--scene-h) / var(--scene-crop));width:calc(var(--scene-h) / var(--scene-crop) * 1.5)}
}

/* PC 축소(zoom) 상태에서도 팝업은 화면 높이를 꽉 쓰도록 보정 (zoom이 화면높이 단위까지 줄이는 문제) */
@media (min-width:1024px){
  .book-detail{height:calc(100dvh / var(--site-zoom))}
  .cover-import,.stock-date,.reading-note-dialog,.cover-choice,.darak-chat{max-height:calc((100dvh - 32px) / var(--site-zoom))}
  .display-picker{max-height:calc((100dvh - 32px) / var(--site-zoom));overflow:auto}
}

/* 영상 목록: YouTube 검색 결과처럼 왼쪽 썸네일 + 오른쪽 정보 */
.book-videos .video-card{display:grid;grid-template-columns:minmax(200px,320px) minmax(0,1fr);gap:20px;align-items:start;padding:16px;border:1px solid #e3e3e3;border-radius:12px;background:#fff;margin:0 0 14px}
.book-videos .video-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;padding:0;border:0;border-radius:10px;overflow:hidden;background:#111;cursor:pointer;min-height:0}
.book-videos .video-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s}
.book-videos .video-thumb:hover img{transform:scale(1.03)}
.book-videos .video-play{position:absolute;left:50%;top:50%;width:56px;height:40px;margin:-20px 0 0 -28px;border-radius:12px;background:rgb(0 0 0 / 72%);color:#fff;font-size:18px;line-height:40px;text-align:center}
.book-videos .video-thumb:hover .video-play,.book-videos .video-thumb:focus-visible .video-play{background:#e00}
.book-videos .video-thumb:focus-visible{outline:3px solid #26717b;outline-offset:3px}
.book-videos .video-frame{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:10px;display:block}
.book-videos .video-info{min-width:0}.book-videos .video-info h4{margin:0 0 6px;font-size:16px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.book-videos .video-info p{margin:0 0 4px}.book-videos .video-info a{display:inline-block;margin-top:8px}
@media (max-width:600px){.book-videos .video-card{grid-template-columns:1fr;gap:12px;padding:12px}}

/* 책 소개 화면(PC): 제목 80% · 나머지 글자 120% · 이미지(표지·영상 썸네일)는 현재 크기 유지
   --detail-zoom 1.2로 화면 전체를 키우고, 제목·이미지는 역보정합니다. */
@media (min-width:1024px){
  .book-detail{--detail-zoom:1.2;zoom:var(--detail-zoom);height:calc(100dvh / (var(--site-zoom) * var(--detail-zoom)))}
  .book-detail #bookDetailTitle{zoom:calc(.8 / var(--detail-zoom))}
  .book-detail img{zoom:calc(1 / var(--detail-zoom))}
  .book-detail .book-videos .video-card{grid-template-columns:minmax(167px,267px) minmax(0,1fr)}
}

/* 오늘의 서가: 한 줄에 3권 (휴대폰 600px 이하는 읽기 쉽도록 2권) */
@media (min-width:601px){
  #store .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px}
}

/* 오늘의 서가 왼쪽 열: 검색 → 표지 사진으로 입고 버튼 → 분류 목록, 모두 제목과 같은 왼쪽 선에 정렬 */
@media (min-width:701px){
  #store .store-actions{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:22px;margin-top:24px;width:100%}
  #store .cover-import-open{order:-2;align-self:stretch;max-width:420px}
  #store .category-tabs{order:-1;align-items:flex-start;margin:0;padding:0}
  #store .category-tabs button{padding-left:0;margin-left:0}
}

/* 오늘의 서가(PC): 왼쪽 열을 더 왼쪽·더 좁게, 책은 한 줄에 4권 */
@media (min-width:1024px){
  #store{grid-template-columns:minmax(220px,300px) minmax(0,1fr);column-gap:48px;padding-left:40px;padding-right:40px}
  #store .shop-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 24px}
  #store .cover-import-open{max-width:none}
}

/* ───────── 다락이(= 예전 IUM) 통합 대화창 ───────── */
.darak-chat-form .darak-compose{display:flex;gap:8px;align-items:stretch}
.darak-chat-form .darak-compose input[type=text],.darak-chat-form #darakMessage{flex:1;min-width:0}
.darak-attach{flex:none;width:48px;min-height:44px;display:grid;place-items:center;border:1px solid #c9d2cd;border-radius:10px;background:#fff;color:#243735;cursor:pointer;padding:0}
.darak-attach svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.darak-attach:hover{background:#f3f6f4}.darak-attach:focus-visible{outline:3px solid #26717b;outline-offset:2px}
.darak-attach-chip{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:8px;border:1px solid #d5dbd7;border-radius:10px;background:#f7f8f6}
.darak-attach-chip[hidden]{display:none}
.darak-attach-chip img{width:40px;height:56px;object-fit:cover;border-radius:4px;background:#ddd}
.darak-attach-chip span{flex:1;font-size:13px;line-height:1.5;color:#3e4b45}
.darak-attach-chip button{width:36px;height:36px;border:0;border-radius:50%;background:transparent;font-size:20px;cursor:pointer}
.darak-attach-hint{margin:8px 0 0;font-size:12px;line-height:1.5;color:#6a756f}
.darak-chat [data-send]:disabled{opacity:.55;cursor:progress}
.darak-book-card{display:flex;gap:12px;align-items:flex-start;margin:6px 0 10px;padding:10px;border:1px solid #e1e5e2;border-radius:10px;background:#fff}
.darak-book-card img{width:52px;height:74px;flex:none;object-fit:contain;background:#f2f2f2;border-radius:4px}
.darak-book-card div{display:grid;gap:3px;min-width:0}
.darak-book-card strong{font-size:14px;line-height:1.45}
.darak-book-card small{font-size:12px;line-height:1.5;color:#5b6660}
.darak-book-card button{justify-self:start;margin-top:4px;min-height:36px;padding:0 12px;border:1px solid #243735;border-radius:6px;background:#fff;color:#243735;font:600 13px/1 var(--font-reading);cursor:pointer}

/* 상단 '다락이에게 말 걸기' 안내 카드 (예전 IUM 입력 카드 자리) */
.darak-cta-card{display:flex;gap:22px;align-items:flex-start;padding:28px;border:1px solid #dcdcdc;background:#fff}
.darak-cta-cat{flex:none;width:96px;height:auto}
.darak-cta-title{margin:0 0 8px;font-size:20px;font-weight:700;color:#243735}
.darak-cta-text{margin:0 0 18px;font-size:15px;line-height:1.75;color:#4b5752}
.darak-cta-card .primary{width:100%}
.darak-cta-card .suggestions{margin-top:12px}
@media (max-width:600px){.darak-cta-card{flex-direction:column;align-items:center;text-align:left;padding:20px}.darak-cta-cat{width:80px}}

/* 재사용 사진 넣기 영역 (image-drop.js) */
.image-drop-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;pointer-events:none}
.image-drop{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 14px;margin:10px 0 4px;padding:16px 18px;border:1.5px dashed #9fb0a7;border-radius:12px;background:#f8faf8;color:#243735;cursor:pointer;text-align:left}
.image-drop svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.image-drop-text{display:grid;gap:2px}.image-drop-text strong{font-size:15px;line-height:1.45}.image-drop-text small{font-size:12px;line-height:1.5;color:#5f6b65;font-weight:400}
.image-drop-pick{padding:8px 12px;border:1px solid #243735;border-radius:8px;background:#fff;font-size:13px;font-weight:600;white-space:nowrap}
.image-drop-status{grid-column:1/-1;font-size:13px;color:#2f5f55}.image-drop-status:empty{display:none}
.image-drop:hover{background:#f1f5f2}.image-drop:focus-visible{outline:3px solid #26717b;outline-offset:2px}
.image-drop.is-drop-over,.cover-source.is-drop-over,.cover-choice.is-drop-over,.darak-chat.is-drop-over{border-color:#26717b;background:#eaf4f1;box-shadow:inset 0 0 0 2px #26717b}
@media (max-width:600px){.image-drop{grid-template-columns:auto 1fr}.image-drop-pick{grid-column:1/-1;justify-self:start}}

/* 서가 분류 선택 */
.shelf-category-field{display:grid;gap:6px;margin:14px 0;font-weight:600;font-size:15px}
.shelf-category-field select,.detail-category-edit select{min-height:44px;padding:0 12px;border:1px solid #b8c2bb;border-radius:8px;background:#fff;font:inherit;font-weight:400}
.shelf-category-field small,[data-category-hint]{font-size:12px;font-weight:400;color:#5f6b65}
.detail-category-edit{display:inline-block;margin-left:10px;vertical-align:middle}.detail-category-edit select{min-height:34px;font-size:13px}
.book-detail dd [data-category-hint]{display:block;margin-top:4px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ───────── 휴대폰·태블릿(850px 이하): 서점 그림을 화면 폭에 딱 맞게 — 옆으로 밀 필요 없음 ─────────
   그림 안 책 자리·다락이는 PC와 같은 비율 좌표, 장면 버튼은 그림 아래 한 줄로 */
@media (max-width:850px){
  #explore.explore-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 12px 14px;background:#f4f0e8}
  #explore .scene-copy{grid-column:1/-1;margin:16px 4px 6px}
  #explore .scene-scroller{grid-column:1/-1;height:auto;margin:0 -12px;overflow:hidden;touch-action:auto}
  #explore .scene-canvas{position:relative;width:100%;height:auto;aspect-ratio:1.5/var(--scene-crop);overflow:hidden;background:url('assets/bookstore-soft-daylight-display.webp') center top/100% auto no-repeat}
  #explore .display-books{inset:auto;top:0;left:0;width:100%;height:auto;aspect-ratio:3/2}
  #explore .scene-pan-hint{display:none!important}
  #explore .scene-hotspot{position:static;inset:auto;width:auto;min-width:0;max-width:none;margin:0;padding:10px 8px;text-align:center;justify-items:center}
  #explore .scene-hotspot span{font-size:14px}#explore .scene-hotspot small{font-size:11px}
  #explore .pet-controls{position:static;grid-column:1/-1;width:auto;max-width:none;min-width:0;justify-self:stretch}
  #explore .pet-controls[open]{width:auto;max-height:none}
  #explore .scene-canvas .resident-cat{position:absolute;width:19%;height:auto;aspect-ratio:192/208;top:58%;bottom:auto;z-index:5}
  #explore .scene-canvas .resident-cat .cat-art{width:100%;height:100%}
}

/* '제목이 생각나지 않아도 괜찮아요.' 제목: 모든 화면에서 지금의 80% */
#request .hero-copy h2{zoom:.8}

/* 책 소개의 분류: 값 자체를 눌러 바꾸는 선택칸으로 표시 */
.book-detail dd [data-category]{display:none}
.detail-category-edit{margin-left:0}
.detail-category-edit select{min-height:38px;padding:0 34px 0 12px;border:1px solid #9fb0a7;border-radius:999px;background:#f6f8f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243735' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/14px no-repeat;appearance:none;-webkit-appearance:none;color:#243735;font-weight:600;cursor:pointer}
.detail-category-edit select:hover{background-color:#eaf1ec}
.detail-category-edit select:focus-visible{outline:3px solid #26717b;outline-offset:2px}

/* 휴대폰: 장면 아래 버튼 줄(책장·카운터·다락이에게 말 걸기)과 '다락이와 놀기' 막대 삭제 — 다락이를 누르면 바로 놀기 */
@media (max-width:850px){
  #explore .scene-hotspot,#explore .pet-controls{display:none!important}
  #explore .cat-bubble{position:absolute;z-index:8;margin:0;transform:translate(-50%,calc(-100% - 6px));padding:6px 10px;border-radius:12px;background:#fffdf4;color:#243735;border:1px solid #c9d6cf;box-shadow:0 4px 14px #2941481f;font:600 12px/1.4 var(--font-reading);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
  #explore .cat-bubble.show{opacity:1}
  #explore .cat-bubble:after{content:'';position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:#fffdf4}
}

/* 공유 서가(서버) 모드: 운영자가 아니면 입고·삭제·표지 바꾸기·분류 바꾸기·빈 전시 자리를 숨깁니다 */
html[data-shelf=server]:not([data-role=operator]) #coverImportOpen,
html[data-shelf=server]:not([data-role=operator]) .owned-book-actions,
html[data-shelf=server]:not([data-role=operator]) .display-book.original-cover,
html[data-shelf=server]:not([data-role=operator]) [data-stock]{display:none!important}
html[data-shelf=server]:not([data-role=operator]) .shop-cover-missing,
html[data-shelf=server]:not([data-role=operator]) [data-category-select]{pointer-events:none}
html[data-shelf=server]:not([data-role=operator]) [data-category-select]{appearance:none;-webkit-appearance:none;background-image:none}
html[data-shelf=server]:not([data-role=operator]) [data-category-hint]{display:none}

/* 사이트 소개 */
.about-section{max-width:1100px;margin:0 auto;padding:72px 40px 80px;border-top:1px solid #e6e1d6}
.about-section h2{margin:6px 0 14px;font-size:clamp(1.6rem,2.6vw,2.2rem)}
.about-lead{max-width:640px;font-size:1.08rem;line-height:1.75;color:#3f3c35;margin:0 0 30px}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.about-grid article{padding:22px;border:1px solid #e6e1d6;border-radius:12px;background:#fffdf8}
.about-grid h3{margin:0 0 8px;font-size:1.12rem}
.about-grid p{margin:0 0 14px;line-height:1.7;color:#4a4740}
.about-grid a,.about-grid button{font:inherit;color:#2b2925;background:none;border:0;border-bottom:1px solid currentColor;padding:0;cursor:pointer}
.about-note{margin:24px 0 0;color:#6b6659;font-size:.95rem}
@media (max-width:850px){.about-section{padding:48px 20px 96px}.about-grid{grid-template-columns:1fr}}

/* 카카오 책 소개 원문 링크 */
.external-intro-link{display:inline-block;margin:6px 0 0;font-size:.9rem;color:#5a4b2e;text-decoration:underline}