/* isle — 장소·사람 책장.
   겉모습은 시간 책장(bookshelf.css)의 유리 앨범을 그대로 따른다. 앞표지·뒤표지·책등·설명 글자는
   같은 클래스를 다시 쓰고, 바깥 틀만 이름을 달리했다(.lens-row/.lens-book/.lens-empty).
   년도 책장 검사가 .shelf-row·.shelf-year·.shelf-empty 를 화면 전체에서 찾기 때문이다. */

/* 책장을 묶는 기준 고르개: 시간 · 장소 · 사람. 모서리는 전역 button 규칙(--ui-radius-sm)을 따른다. */
.library-lens-bar{display:flex;align-items:center;gap:6px;padding:14px 24px 0}
.library-lens-button{min-height:34px;padding:0 14px;font-family:inherit;font-size:12px;font-weight:800;background:var(--surface);color:var(--ink-dim);border:1px solid var(--line-strong);cursor:pointer}
.library-lens-button[aria-pressed="true"]{background:var(--fill);color:var(--ink)}
.library-lens-button:disabled{opacity:.3;cursor:default}   /* 장소·사람: 아직 없음 */
.library-lens-button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 책장 둘 중 하나만 보인다. 책장 틀의 display:block 이 hidden 속성을 이기지 않게 한 단계 높여 둔다. */
.library-overview-shelf.shelf-host[hidden],
.library-overview-shelf.library-lens-host[hidden]{display:none}
.library-overview-shelf.library-lens-host{min-width:0;display:block;padding:14px 24px 14px}
.library-lens-host>.shelf-heading{justify-content:flex-end;min-height:34px}

.lens-row{display:flex;gap:34px;overflow-x:auto;align-items:flex-end;min-height:188px;padding:18px 20px 12px;perspective:1100px;border-bottom:9px solid var(--surface-3);box-shadow:0 8px 8px -6px #0004,inset 0 -1px #fff8;scrollbar-width:thin}
.lens-slot{flex:0 0 122px;min-width:0;text-align:center}
button.lens-book{position:relative;display:block;width:104px;height:136px;padding:0;margin:0 auto 12px;background:none;border:0;cursor:pointer;transform:rotateY(-31deg) rotateX(11deg) rotateZ(-4deg);transform-style:preserve-3d;transition:transform .35s}
button.lens-book:hover,
button.lens-book:focus-visible,
button.lens-book[aria-pressed="true"]{transform:translateY(-8px) rotateY(-24deg) rotateX(8deg) rotateZ(-3deg)}
button.lens-book:focus-visible{outline:2px solid var(--ink);outline-offset:6px}

/* 년도는 숫자 네 자라 위쪽에 붙지만, 장소·사람 이름은 길이가 제각각이라 가운데에 둔다.
   글꼴은 보관함 제목(.library-overview-copy h1)과 같은 세리프 스택이다. */
.lens-book .shelf-year-face{align-items:center;padding:12px 12px 12px 16px;text-align:center}
.lens-book-name{position:relative;z-index:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font:700 17px/1.2 Georgia,"Noto Serif KR",serif;letter-spacing:-.02em;word-break:keep-all;color:#5f5868;text-shadow:0 1px 1px #fff}
[data-theme="dark"] .lens-book-name{color:#f3eef3;text-shadow:0 1px 1px #0008}
.lens-slot .shelf-year-caption{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lens-empty{font-size:13px;color:var(--ink-dim);align-self:center}

/* 사람 책: 앞표지에 얼굴 동그라미와 이름. 얼굴 영역(face bank region) 가운데로 사진을 맞춘다. */
.person-book .shelf-year-face{flex-direction:column;justify-content:center;gap:7px}
.person-book-photo{position:relative;z-index:1;flex:0 0 auto;width:50px;height:50px;overflow:hidden;border-radius:50%;border:2px solid #ffffffb0;box-shadow:0 2px 7px #0003;background:var(--surface-2)}
.person-book-photo img{display:block;width:100%;height:100%;object-fit:cover}
.person-book .lens-book-name{font-size:15px;-webkit-line-clamp:2}

@media (prefers-reduced-motion: reduce){button.lens-book{transition:none}}
@media (max-width:760px){
  .library-lens-bar{padding:12px 18px 0}
  .library-overview-shelf.library-lens-host{padding:12px 18px}
}

/* 장소 책장: 도시 디오라마를 고르면 오른쪽 목록이 그 도시의 장소 파일로 바뀐다. */
.library-overview-shelf.library-lens-host{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#ffffff10,#ffffff02)}
.city-diorama-browser{display:grid;grid-template-columns:minmax(480px,1.35fr) minmax(290px,.8fr);align-items:start;gap:clamp(24px,4vw,54px);max-width:1120px;margin:0 auto;padding:clamp(20px,3vw,34px) clamp(6px,2vw,24px) 28px}
.city-diorama-browser.is-collapsed{grid-template-columns:1fr;max-width:660px}
.city-diorama-browser.is-collapsed .city-diorama-gallery{width:100%;margin:0 auto}
.city-diorama-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:clamp(12px,2vw,20px);min-width:0}
button.city-diorama{min-width:0;padding:10px 10px 12px;color:var(--ink);background:#ffffff08;border:1px solid transparent;text-align:left;cursor:pointer;transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}
button.city-diorama:hover{transform:translateY(-3px);background:#ffffff18;border-color:var(--line)}
button.city-diorama[aria-pressed="true"]{background:#ffffff22;border-color:var(--line-strong);box-shadow:0 13px 28px #38405018}
button.city-diorama:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.city-diorama-visual{position:relative;display:block;min-width:0;isolation:isolate}
.city-diorama-visual::after{content:"";position:absolute;z-index:-1;left:12%;right:12%;bottom:7%;height:15%;border-radius:50%;background:#7d829a26;filter:blur(24px)}
.city-diorama-visual img{display:block;width:100%;height:auto;max-height:245px;object-fit:contain;filter:drop-shadow(0 12px 14px #38405024)}
.city-diorama-card-copy{display:grid;grid-template-columns:1fr auto;align-items:end;gap:3px 8px;padding:2px 4px 0}
.city-diorama-card-copy .eyebrow{grid-column:1/-1;font-size:9px;letter-spacing:.18em;color:var(--ink-dim)}
.city-diorama-card-copy strong{font:700 22px/1.1 Georgia,"Noto Serif KR",serif;letter-spacing:-.03em}
.city-diorama-card-copy>span:last-child{font-size:11px;color:var(--ink-dim)}
.city-diorama-info{align-self:start;min-width:0;padding:12px 0 0}
.city-diorama-info .eyebrow{margin:0 0 8px;font-size:11px;letter-spacing:.2em;color:var(--ink-dim)}
.city-diorama-info h2{margin:0;font:700 clamp(30px,4vw,48px)/1 Georgia,"Noto Serif KR",serif;letter-spacing:-.04em}
.city-diorama-progress{margin:13px 0 12px;color:var(--ink-dim);font-size:13px}
.city-diorama-progress strong{font:700 21px/1 Georgia,"Noto Serif KR",serif;color:var(--ink)}
.city-diorama-meter{height:5px;margin:0 0 20px;background:var(--surface-3);overflow:hidden}
.city-diorama-meter i{display:block;width:calc(var(--visit-stage) / 3 * 100%);height:100%;background:linear-gradient(90deg,#b9dfe2,#e8bfd4 55%,#dac9ee)}
.city-diorama-files{display:grid;gap:6px;max-height:342px;overflow:auto;padding-right:4px;scrollbar-width:thin}
.city-diorama-files button{width:100%;min-height:36px;padding:7px 10px;text-align:left;font:inherit;font-size:12px;font-weight:700;line-height:1.35;color:var(--ink);background:#ffffff18;border:1px solid var(--line);cursor:pointer}
.city-diorama-files button::after{content:"↗";float:right;color:var(--ink-dim)}
.city-diorama-files button:hover,.city-diorama-files button:focus-visible{background:var(--fill);border-color:var(--line-strong)}
.lens-message{min-height:188px;display:grid;place-content:center;gap:7px;text-align:center;color:var(--ink-dim)}
.lens-message strong{font:700 20px/1.2 Georgia,"Noto Serif KR",serif;color:var(--ink)}
.lens-message button{justify-self:center;margin-top:6px}

@media(max-width:820px){
  .city-diorama-browser{grid-template-columns:1fr;gap:20px;max-width:680px}
  .city-diorama-visual img{max-height:250px}
  .city-diorama-info{padding:0 6px 16px}
}
@media(max-width:460px){
  .city-diorama-browser{padding-top:10px}
  .city-diorama-gallery{grid-template-columns:1fr}
  button.city-diorama{display:grid;grid-template-columns:minmax(145px,.9fr) minmax(110px,.6fr);align-items:center}
  .city-diorama-visual img{max-height:190px}
  .city-diorama-card-copy{display:block;padding:0 4px}
  .city-diorama-card-copy>*{display:block;margin-top:5px}
  .city-diorama-files button{font-size:11px}
}

/* 문서 책장(캡처): 텍스트 · 논텍스트 두 줄, 텍스트는 대화 상대별 책. 책을 누르면 그 묶음의 캡처 격자. 폰 앱에서만. */
.work-shelf{display:grid;gap:4px}
.work-head{margin:10px 2px 0;font-size:13px;font-weight:600;color:var(--ink-dim)}
.work-head strong{margin-right:6px;font-size:15px;color:var(--ink)}
/* 문서 디스크 줄: 월 파일(bookshelf-phone.css .sp-card)처럼 왼쪽이 위로 겹치고(45%), 고른 파일이 솟아 앞으로 나온다. 진한 단색. */
.work-row{position:relative;display:flex;align-items:flex-end;min-height:170px;padding:22px 26px 14px 8px;overflow-x:hidden;overflow-y:visible;scrollbar-width:none;touch-action:pan-y}
.work-row::-webkit-scrollbar{display:none}
.work-row.is-empty{min-height:60px;align-items:center}
button.work-file{position:relative;flex:0 0 112px;height:140px;margin-right:-50px;padding:0;color:#fff;background:var(--tone);border:0;border-radius:10px;
  box-shadow:inset 0 1px 0 #ffffff2e,inset 0 -2px 0 #0000003a,3px 8px 16px #0006;cursor:pointer;
  transition:transform .46s cubic-bezier(.2,.8,.2,1),box-shadow .2s,filter .2s;text-align:left;font-family:inherit}
button.work-file:last-child{margin-right:0}
button.work-file{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
button.work-file.is-focused{transform:translateY(-14px) scale(1.07);box-shadow:inset 0 1px 0 #ffffff3a,0 0 0 2px var(--info,#60a5fa),6px 16px 24px #0008}
button.work-file:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* 플로피디스크: 정사각 몸체, 위 금속 셔터, 아래 흰 이름표, 왼쪽 아래 쓰기 방지 홈 */
button.work-file.is-floppy{flex-basis:118px;height:124px;margin-right:-54px;border-radius:6px 14px 6px 6px}
.work-file.is-floppy .wf-shutter{position:absolute;top:0;left:50%;width:56%;height:36%;transform:translateX(-50%);border-radius:0 0 3px 3px;background:linear-gradient(180deg,#d9dde3,#9aa2ad);box-shadow:inset 0 -1px 0 #0003}
.work-file.is-floppy .wf-shutter i{position:absolute;top:18%;right:16%;width:22%;height:58%;border-radius:2px;background:var(--tone);filter:brightness(.7)}
.work-file.is-floppy .wf-notch{position:absolute;left:7px;bottom:7px;width:8px;height:8px;border-radius:1px;background:#0006}
.work-file.is-floppy .wf-label{position:absolute;left:18%;right:7%;bottom:7px;height:44%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:2px;padding:5px 6px;border-radius:3px;
  background:repeating-linear-gradient(180deg,#f4f1ea 0 9px,#dcd6c9 9px 10px);color:#2a2a2a}
.work-file.is-floppy .wf-label b{max-width:100%;font:800 12px/1.15 "Pretendard",sans-serif;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-file.is-floppy .wf-label small{font:600 10px/1 "Pretendard",sans-serif;color:#555}
.work-file.is-floppy:not(.is-focused):not(:last-child) .wf-label{left:46%}
button.work-file.is-dim{filter:brightness(.38) saturate(.4)}
button.work-file.is-dim.is-focused{transform:none;box-shadow:inset 0 1px 0 #ffffff2e,3px 8px 16px #0006}
/* 위 검색창: 고른 디스크 이름이 뜨고, 이름·대화 상대를 쳐서 찾는다 */
.work-search{position:relative;display:flex;align-items:center;gap:8px;min-height:40px;margin:0 0 2px;padding:0 6px 0 12px;background:var(--fill,#ffffff12);border:1px solid var(--line-strong);border-radius:12px}
.work-search:focus-within{border-color:var(--info,#60a5fa)}
.work-search svg{flex:0 0 16px;width:16px;height:16px;fill:none;stroke:var(--ink-dim);stroke-width:2;stroke-linecap:round}
.work-search input{flex:1;min-width:0;height:38px;padding:0;font:600 15px "Pretendard",sans-serif;color:var(--ink);background:none;border:0;outline:none;-webkit-appearance:none;appearance:none}
.work-search input::-webkit-search-cancel-button{display:none}
.work-search input::placeholder{color:var(--ink-dim);font-weight:500}
.work-search button{flex:0 0 30px;height:30px;padding:0;font:600 18px/1 "Pretendard",sans-serif;color:var(--ink-dim);background:none;border:0;border-radius:15px;cursor:pointer}
.work-search button[hidden]{display:none}
.work-search-note{margin:2px 4px 0;font-size:12px;color:var(--ink-dim)}
.work-search-note[hidden]{display:none}
/* 대화 앱 고르기(카카오톡·당근마켓·인스타 DM·문자)와 디스크 이름표의 앱 표시 */
.work-apps{display:flex;gap:6px;margin:8px 0 0;overflow-x:auto;scrollbar-width:none}
.work-apps::-webkit-scrollbar{display:none}
.work-apps button{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 12px;font:600 13px "Pretendard",sans-serif;color:var(--ink-dim);background:none;border:1px solid var(--line-strong);border-radius:16px;cursor:pointer}
.work-apps button[aria-pressed="true"]{color:var(--ink);background:var(--fill,#ffffff14);border-color:var(--ink-dim)}
i.wf-app{display:inline-grid;place-items:center;width:15px;height:15px;margin-right:2px;border-radius:4px;font:800 9px/1 "Pretendard",sans-serif;font-style:normal;color:#1c1c1c;vertical-align:-2px}
i.wf-app.is-kakao{background:#fee500}
i.wf-app.is-daangn{background:#ff7e36;color:#fff}
i.wf-app.is-instagram{background:linear-gradient(135deg,#f58529,#dd2a7b 55%,#8134af);color:#fff}
i.wf-app.is-sms{background:#34c759;color:#fff}
.work-file.is-floppy .wf-label small{display:flex;align-items:center;gap:1px;white-space:nowrap}
/* 분류 파일 칸 문서 날짜 파일 ⋮ → 통합(app.js mergeWorkPerson): 같은 사람 고르기 */
.work-merge-pick{display:grid;gap:8px}
.work-merge-pick[hidden]{display:none}
.work-merge-list{display:grid;max-height:40vh;overflow-y:auto}
.dialog-form .work-merge-list label{display:flex;grid-template-columns:none;text-align:left;align-items:center;gap:10px;min-height:44px;padding:0 4px;border-bottom:1px solid var(--line-strong,#0002)}
.work-merge-list label[hidden]{display:none}
.dialog-form .work-merge-list input[type="checkbox"]{flex:0 0 auto;width:20px;height:20px;margin:0}
.dialog-form .work-merge-list span{flex:1;min-width:0;font-weight:600}
.dialog-form .work-merge-list em{flex:0 0 auto;white-space:nowrap}
.work-merge-list em{font-style:normal;font-size:12px;opacity:.7}
.work-merge-empty{margin:8px 0;font-size:13px;opacity:.7}
.work-merge-error{margin:0;font-size:12px;color:#d93025}
.work-merge-error[hidden]{display:none}
@media (prefers-reduced-motion: reduce){button.work-file{transition:none}}
.work-progress{margin:8px 2px 0;font-size:12px;color:var(--ink-dim)}

/* 홈 지도 단추 느낌표(새로 찾은 탐험 배지·여행지 칸, library-lens.js) */
.map-open-btn{position:relative}
.map-open-btn.has-news::after{content:'!';position:absolute;top:4px;right:3px;min-width:15px;height:15px;border-radius:8px;background:#E8553D;color:#fff;font:800 11px/15px system-ui,-apple-system,sans-serif;text-align:center;box-shadow:0 0 0 2px var(--bg,#fff);animation:map-news-pop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes map-news-pop{from{transform:scale(0)}to{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.map-open-btn.has-news::after{animation:none}}