/* Home: Casuals rail, long-form shelf, and the one "+" sheet */

  #v-home, #v-casuals, #v-longform{max-width:960px; margin:0 auto; padding:28px 26px 90px;}
  /* Home only changes placement; Reader owns the shared control surfaces/geometry. */
  #primary-nav svg{display:none;}
  #home-controls #primary-nav svg{display:block; width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
  #home-controls .control-circle span{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  #home-controls .control-pill{cursor:pointer; font:600 13px var(--ui);}
  #v-home{padding-bottom:calc(90px + env(safe-area-inset-bottom));}

  /* ---- section headers ---- */
  .sec-head{display:flex; align-items:baseline; gap:12px; margin-bottom:4px;}
  .sec-head h2{font-family:var(--display); font-size:23px; font-weight:600; letter-spacing:-.7px;}
  .sec-head .sec-sub{font-size:13px; color:var(--soft); flex:1; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .sec-acts{display:flex; gap:5px; align-self:center; margin-left:auto;}
  .sec-acts button{width:30px; height:30px; border-radius:50%; border:1px solid var(--sec-act-line); background:var(--sec-act-bg);
    color:var(--sec-act-ink); cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:18px; line-height:1; font-family:var(--ui); transition:.15s;}
  .sec-acts button svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round;}
  .sec-acts button:hover{background:var(--sec-act-hover); border-color:var(--sec-act-hover-line); color:var(--sec-act-hover-ink);}

  /* ---- Casuals: a horizontal rail, one thumb per glass ---- */
  /* 레일이 페이지 여백 밖까지 흘러야 "옆으로 더 있다"가 잘려 보입니다. */
  /* scroll-padding 이 없으면 스냅이 안쪽 여백을 무시하고 첫 카드를 화면
     왼쪽 끝에 붙여 버립니다(레일이 저 혼자 18px 밀려 있는 것처럼 보임). */
  #casual-rail, .casual-rail{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity;
    padding:16px 26px 8px; margin:0 -26px; scroll-padding-left:26px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  #casual-rail::-webkit-scrollbar, .casual-rail::-webkit-scrollbar{display:none;}
  /* 피드 카드든 내 Casual이든 레일에서 차지하는 바깥 폭은 하나여야 합니다.
     사진·테두리·article/div 태그 차이에 flex 계산이 흔들리지 않게 명시합니다. */
  #casual-rail > .casual{flex:0 0 158px; width:158px; min-width:158px; max-width:158px;}
  .casual-rail > .casual{flex:0 0 158px; width:158px; min-width:158px; max-width:158px;}
  /* RSS는 평소 카드와 같은 리듬을 지킵니다. 방금 도착한 글은 들판에서 가져온
     바랜 초록 인쇄선 하나로만 알립니다 — 뱃지나 광택 효과는 쓰지 않습니다. */
  .casual.rss-card .thumb.rss-thumb{box-sizing:border-box; border:2.5px solid var(--rss-fresh-green);
    background:var(--rss-thumb); box-shadow:var(--shadow-card);}
  .casual.shared-card{border:0; padding:0; background:none; color:var(--ink); text-align:left; font:inherit;}
  .casual.shared-card .thumb{box-sizing:border-box; border:2.5px solid var(--red);
    background:var(--danger-tint); color:var(--ink);}
  .casual.shared-card .src{color:var(--danger); opacity:1; font-weight:700;}
  .casual.shared-card .lede{font-family:var(--serif); font-size:18px; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;}
  .casual.shared-card .shared-card-hint{margin-top:auto; color:var(--danger); font-size:11px; font-weight:600;}
  .casual.shared-card .ct{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; word-break:break-word;}
  .casual.rss-card .thumb.rss-thumb .cover{inset:2.5px; width:calc(100% - 5px); height:calc(100% - 5px);
    border-radius:12.5px;}
  .rss-card.busy{opacity:.55; pointer-events:none;}
  /* 이름 바꾸기·삭제로 가는 꾹 누르기 손짓입니다(attachLongPress). iOS 가 그
     자리를 먼저 사진 저장 콜아웃이나 드래그로 가져가면 우리 시트 대신 그것이
     뜹니다. 카드 전체와 표지 사진 모두 막습니다 — 사진은 손짓을 직접 받을
     이유가 없으므로 클릭도 카드로 넘깁니다(pointer-events:none). */
  .casual, .bookcard{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;}
  .casual .cover, .bookcard .cover{-webkit-touch-callout:none; -webkit-user-drag:none; pointer-events:none;}
  .casual{flex:0 0 158px; scroll-snap-align:start; cursor:pointer; position:relative;}
  .casual .thumb{aspect-ratio:9/16; border-radius:15px; overflow:hidden; position:relative;
    display:flex; flex-direction:column; padding:14px; transition:.18s;
    box-shadow:var(--shadow-card);}
  .casual:hover .thumb{transform:translateY(-3px); box-shadow:var(--shadow);}
  .casual .src{font-size:10.5px; letter-spacing:.9px; text-transform:uppercase; opacity:.75;
    margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .casual .lede{font-family:var(--serif); font-size:14px; line-height:1.45; word-break:break-word;
    display:-webkit-box; -webkit-line-clamp:9; -webkit-box-orient:vertical; overflow:hidden; opacity:.92;}
  .casual .thumb .wave{position:absolute; left:0; right:0; bottom:0; height:30%; pointer-events:none;}
  /* 표지 사진이 있으면 사진이 표지입니다. 없으면(붙여넣은 글, 사진 없는 기사)
     지금까지처럼 글 첫 문단이 표지 노릇을 합니다. */
  .casual .thumb .cover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .casual .thumb.has-cover{padding:0;}
  .casual .thumb.has-cover .lede, .casual .thumb.has-cover .wave{display:none;}
  .casual .thumb.has-cover .src{position:relative; z-index:1; margin:auto 0 0; color:var(--on-color); opacity:.95;
    padding:38px 12px 11px; text-shadow:var(--cover-src-shadow);
    background:var(--cover-src-veil);}
  .casual .bar{position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--card-bar);}
  .casual .bar i{display:block; height:3px; background:var(--blue);}
  .casual .ct{font-size:13.5px; font-weight:600; line-height:1.35; margin:9px 1px 3px; word-break:keep-all;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .casual .cm{font-size:11.5px; color:var(--soft2); margin:0 1px;}
  .casual.add .thumb{border:2px dashed var(--dash); box-shadow:none; align-items:center; justify-content:center;
    gap:8px; color:var(--soft); text-align:center;}
  .casual.add:hover .thumb{border-color:var(--blue); color:var(--blue); transform:none; box-shadow:none;}
  .casual.add .plus{font-size:30px; line-height:1;}
  .casual.add .lbl{font-size:12.5px; line-height:1.5;}
  .casual.more .thumb{border:1px solid var(--line); box-shadow:none; align-items:center; justify-content:center;}
  .casual.more:hover .thumb{border-color:var(--blue); color:var(--blue); transform:none; box-shadow:none;}
  .casual.more .plus{font-size:27px; line-height:1;}
  .casual.more .lbl{font-size:12.5px; line-height:1.5; text-align:center;}
  .cpal0 .thumb{background:var(--card1); color:var(--card1-ink);}
  .cpal1 .thumb{background:var(--card2); color:var(--card2-ink);}
  .cpal2 .thumb{background:var(--card3); color:var(--card3-ink);}
  .cpal3 .thumb{background:var(--card4); color:var(--card4-ink);}

  /* ---- Long-form shelf ---- */
  #longform{margin-top:44px;}
  #shelf{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px; margin-top:16px;}
  .bookcard{border-radius:20px; padding:24px 24px 0; height:250px; cursor:pointer; position:relative; overflow:hidden;
    transition:.18s; display:block;}
  .bookcard:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
  .bookcard .author{font-family:var(--serif); font-size:12.5px; letter-spacing:1.2px; margin-bottom:14px; opacity:.75;}
  .bookcard .bt{font-family:var(--serif); font-size:20px; line-height:1.3; word-break:keep-all;
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;}
  .bookcard .wave{position:absolute; left:0; right:0; bottom:0; height:34%; pointer-events:none;}
  .bookcard .prog{position:absolute; bottom:14px; left:24px; font-size:12px; opacity:.65; z-index:1;}
  /* ---- 백업 표시 겸 올리기 단추 ----
     화살표는 늘 보입니다. 이건 장식이 아니라 "이 책은 아직 이 기기에만 있다"는
     경고라서, 숨겨 두면 알아야 할 사람이 못 봅니다. 올라간 뒤에는 ✓ 로 바뀌고
     흐려집니다 — 누를 것이 없고, 안심시키는 일만 남습니다. */
  .bookcard .up{position:absolute; top:12px; right:12px; width:28px; height:28px; z-index:2;
    display:flex; align-items:center; justify-content:center;
    border:none; border-radius:50%; cursor:pointer; font-size:14px; line-height:1;
    background:var(--cover-badge); color:var(--cover-badge-ink); transition:.15s;}
  .bookcard .up:hover{background:var(--cover-badge-hover); color:var(--blue-deep); transform:translateY(-1px);}
  /* 표지 위 작은 단추만은 어두운 화면에서 규칙을 따로 둡니다. `.synced` 와
     우선순위가 얽혀 있어서, 토큰 하나로 합치면 눌린 상태의 색이 뒤집힙니다. */
  body.dark .bookcard .up{background:var(--cover-badge); color:var(--cover-badge-ink);}
  body.dark .bookcard .up:hover{background:var(--cover-badge-hover); color:var(--blue);}
  .bookcard.synced .up{opacity:.42; cursor:default; background:var(--cover-badge-quiet);}
  .bookcard.synced:hover .up{opacity:.75;}
  .bookcard.synced .up:hover{background:var(--cover-badge-hover-quiet); color:var(--cover-badge-ink); transform:none;}
  .bookcard.busy-sync .up{animation:bc-lift 1s ease-in-out infinite; cursor:default;}
  @keyframes bc-lift{0%,100%{transform:translateY(2px); opacity:.5} 50%{transform:translateY(-2px); opacity:1}}

  /* ---- 서버에만 있는 책 ----
     이름만 받아 온 흐린 자리. 내 것이지만 아직 여기 없다는 것을 그대로 보여 줍니다. */
  .bookcard.cloud{background:transparent; border:1px dashed var(--cloud-line); color:var(--soft);}
  .bookcard.cloud .bt{color:var(--ink); opacity:.55;}
  .bookcard.cloud .author{opacity:.6;}
  .bookcard.cloud:hover{border-color:var(--blue); border-style:solid;}
  .bookcard.cloud .getbtn{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    border:1px solid var(--line2); background:var(--sheet-quiet); color:var(--blue-deep);
    padding:9px 15px; border-radius:999px; font-size:12.5px; font-weight:600; cursor:pointer;
    width:calc(100% - 28px); max-width:220px; text-align:center; line-height:1.35;
    white-space:normal; transition:.15s;}
  .bookcard.cloud:hover .getbtn{border-color:var(--blue); background:var(--blue); color:var(--on-color);}
  .bookcard.cloud.busy-sync{pointer-events:none;}
  .bookcard.cloud.busy-sync .getbtn{opacity:.6;}
  /* 흐린 카드에만 ✕ 가 남습니다. 여기 있는 것은 이 기기에 없는 책이라 꾹 눌러
     열 것이 없고, 그래서 이 단추가 서버 사본을 지우는 유일한 길입니다.
     손가락에는 hover 가 없으므로 늘 보이되, 조용히 보입니다. */
  .bookcard.cloud .del{position:absolute; top:12px; right:12px; z-index:2;
    width:28px; height:28px; border:none; border-radius:50%; cursor:pointer;
    background:var(--cover-badge-hover-quiet); color:var(--cover-badge-ink); font-size:13px; opacity:.5; transition:.15s;}
  .bookcard.cloud:hover .del{opacity:1;}
  .bookcard.cloud .del:hover{background:var(--cover-badge-hover); color:var(--danger-strong);}
  body.dark .bookcard.cloud .del{background:var(--cloud-del); color:var(--cover-badge-ink);}

  .casual.cloud .thumb{border:1px dashed var(--line2); background:var(--cloud-thumb); filter:saturate(.25);}
  .casual.cloud .lede{opacity:.55; font-size:13px; line-height:1.45; padding:28px 18px;}
  .casual.cloud .cm{color:var(--blue);}
  .casual.cloud .del{position:absolute; top:8px; right:8px; z-index:4; width:25px; height:25px; border:0;
    border-radius:50%; background:var(--cloud-del); color:var(--soft); cursor:pointer;}
  body.dark .casual.cloud .del{background:var(--cloud-del);}

  .bookcard.add{border:2px dashed var(--dash); background:transparent; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:10px; color:var(--soft);}
  .bookcard.add:hover{border-color:var(--blue); color:var(--blue); box-shadow:none;}
  .bookcard.add .plus{font-size:34px; line-height:1;}
  .bookcard.add .lbl{font-size:13.5px; text-align:center; line-height:1.5;}
  .pal0{background:var(--cover1-bg); color:var(--cover1-ink);} .pal0 .author{color:var(--cover1-sub);}
  .pal1{background:var(--cover2-bg); color:var(--cover2-ink);} .pal1 .author{color:var(--cover2-sub);}
  .pal2{background:var(--cover3-bg); color:var(--cover3-ink);} .pal2 .author{color:var(--cover3-sub);}

  /* 아직 안 들여온 무료 고전. 눌러야 실제로 받습니다. */
  .bookcard.classic{background:transparent; border:1px solid var(--cloud-line); color:var(--soft);}
  .bookcard.classic .bt{color:var(--ink); opacity:.85;}
  .bookcard.classic:hover{border-color:var(--blue);}
  .bookcard.classic .get{position:absolute; bottom:16px; left:24px; font-size:12px; color:var(--blue); z-index:1;}
  .bookcard.classic.has-cover{border-color:transparent;}
  .bookcard.classic.has-cover .get{color:var(--on-color); text-shadow:var(--cover-text-shadow);}
  .bookcard.classic.busy{opacity:.6; pointer-events:none;}
  /* Backrooms covers already carry their source artwork title. Keep the branded
     Breeze name and series marker in separate edges so neither covers that art. */
  .bookcard.longread.has-cover .author{position:absolute; top:12px; right:14px; z-index:2;
    margin:0; padding:4px 6px; border-radius:999px; background:var(--cover-badge);
    color:var(--cover-badge-ink); font:600 8px/1.2 var(--ui); letter-spacing:.65px; opacity:.96;}
  .bookcard.longread.has-cover .bt{position:absolute; left:16px; right:16px; bottom:42px; z-index:2;
    margin:0; color:var(--on-color); font-size:14px; line-height:1.25; text-shadow:var(--cover-text-shadow);}
  .bookcard.longread.has-cover .get{left:auto; right:16px; bottom:12px; z-index:2;
    font-size:11px; color:var(--on-color); text-shadow:var(--cover-text-shadow);}

  /* ---- 지금 읽는 중 ----
     따로 "Continue reading" 칸을 두면 같은 책이 화면에 두 번 나옵니다.
     대신 읽던 것 하나만 테두리와 글귀로 표시합니다. */
  .now-ring{outline:2.5px solid var(--blue); outline-offset:2px;}
  .now-ring .prog, .now-ring + .ct + .cm{color:var(--blue-deep); opacity:1; font-weight:600;}

  /* ---- 라이브러리 두 개 ----
     홈은 "무엇을 읽지"에, 여기는 "그때 그거 어디 갔지"에 답합니다.
     같은 카드를 격자에만 다시 깝니다. */
  #v-casuals .head, #v-longform .head{display:flex; align-items:center; gap:12px; margin-bottom:6px;}
  #v-casuals h1, #v-longform h1{font-size:24px; font-weight:500; letter-spacing:-.5px;}
  #v-casuals .casual-library-row{margin-bottom:28px;}
  #v-casuals .casual-library-head{display:flex; align-items:center; gap:12px; margin-bottom:0;}
  #v-casuals .casual-library-head .cnt{color:var(--soft); font-size:14px;}
  #v-casuals .casual-rail{padding-top:14px; margin-left:-26px; margin-right:-26px;}
  #casual-discover-empty{text-align:center; color:var(--soft); padding:20px 0 8px; font-size:13px;}
  #v-casuals .cnt, #v-longform .cnt{color:var(--soft); font-size:14px; flex:1;}
  #longform-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px; margin-top:22px;}
  #casual-empty, #longform-empty{text-align:center; color:var(--soft); padding:70px 0 40px;
    font-size:14.5px; line-height:1.9;}

  /* 긴 글 카드도 표지를 답니다 — 없으면 지금까지의 색 카드 그대로입니다. */
  .bookcard .cover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .bookcard.has-cover .wave{display:none;}
  /* `.prog`는 카드 바닥에 절대 위치로 붙어 있습니다. 글씨를 하얗게 만들자고
     position 을 건드리면 제목 옆으로 흘러 들어가 겹칩니다. z-index 만 얹습니다. */
  .bookcard.has-cover .author, .bookcard.has-cover .bt{
    position:relative; z-index:1; color:var(--on-color); text-shadow:var(--cover-text-shadow);}
  .bookcard.has-cover .prog{z-index:1; color:var(--on-color); opacity:.95; text-shadow:var(--cover-text-shadow);}
  .bookcard.has-cover::after{content:''; position:absolute; inset:0;
    background:var(--cover-veil);}

  /* ---- 하나뿐인 추가 시트 ---- */
  #add-modal{position:fixed; inset:0; z-index:160; background:var(--scrim); display:none;
    align-items:center; justify-content:center; padding:20px;}
  #add-modal.on{display:flex;}
  #am-card{background:var(--sheet); border-radius:22px; padding:30px 28px; width:100%; max-width:520px;
    box-shadow:var(--shadow); max-height:88vh; overflow-y:auto;}
  #am-card h2{font-size:20px; font-weight:600; margin-bottom:6px;}
  #am-card .desc{font-size:13.5px; color:var(--soft); line-height:1.65; margin-bottom:16px;}
  #am-card .desc b{color:var(--ink); font-weight:600;}
  #am-close{float:right; border:none; background:var(--quiet); width:30px; height:30px; border-radius:50%;
    font-size:14px; cursor:pointer; color:var(--quiet-ink);}
  #am-card .am-step{display:none;} #am-card .am-step.on{display:block;}
  .am-choices{display:flex; flex-direction:column; gap:12px; margin-top:18px;}
  .am-big{display:flex; align-items:center; gap:16px; text-align:left; width:100%; cursor:pointer;
    border:1px solid var(--field-line); border-radius:18px; padding:18px 20px; background:var(--field-soft);
    font-family:var(--ui); color:var(--ink); transition:.15s;}
  /* Casuals에는 붙여넣기와 URL만 남깁니다. `.am-big`의 display:flex가 브라우저의
     기본 [hidden] 규칙을 덮어써서 파일 항목이 다시 보이고 있었습니다. */
  .am-big[hidden]{display:none!important;}
  .am-big:hover{border-color:var(--blue); background:var(--big-hover);}
  .am-big .am-ico{width:46px; height:46px; min-width:46px; border-radius:14px; background:var(--ico-bg);
    color:var(--blue); display:flex; align-items:center; justify-content:center;}
  .am-big .am-ico svg{width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8;
    stroke-linecap:round; stroke-linejoin:round;}
  .am-big .am-t{font-size:16px; font-weight:600; display:block; margin-bottom:3px;}
  .am-big .am-d{font-size:12.5px; color:var(--soft); display:block; line-height:1.5;}
  .am-back{border:none; background:none; color:var(--soft); font-size:13px; cursor:pointer;
    font-family:var(--ui); padding:0 0 12px;}
  .am-back:hover{color:var(--blue);}
  #am-text{width:100%; height:210px; resize:vertical; border:1px solid var(--field-line); border-radius:14px;
    padding:14px 15px; font:15px/1.65 var(--ui); color:var(--ink); background:var(--field-soft);
    outline:none; margin-bottom:10px;}
  #am-text:focus{border-color:var(--blue);}
  #am-preview{font-size:12.5px; color:var(--soft2); min-height:19px; margin-bottom:12px; text-align:center;}
  #am-preview b{color:var(--blue); font-weight:600;}
  #am-url{width:100%; border:1px solid var(--field-line); border-radius:14px; padding:13px 15px; font-size:15px;
    font-family:var(--ui); color:var(--ink); background:var(--field-soft); outline:none; margin-bottom:12px;}
  #am-url:focus{border-color:var(--blue);}
  #am-url-status{font-size:12.5px; color:var(--soft2); min-height:19px; margin-bottom:12px; text-align:center;
    line-height:1.6;}
  #am-url-status.bad{color:var(--danger);}
  /* ---- 정보 바꾸기 시트 (꾹 누르기) ----
     추가 시트와 상자·큰 버튼 모양을 같이 씁니다(.am-big, .am-choices). */
  #edit-modal{position:fixed; inset:0; z-index:170; background:var(--scrim); display:none;
    align-items:center; justify-content:center; padding:20px;}
  #edit-modal.on{display:flex;}
  #ed-card{background:var(--sentence-glass-solid); color:var(--sentence-glass-ink);
    border:1px solid var(--sentence-glass-line);border-radius:22px;padding:22px;
    width:100%;max-width:460px;box-shadow:var(--sentence-glass-shadow);max-height:88vh;overflow-y:auto;}
  #ed-card h2{font-size:20px; font-weight:600; margin-bottom:14px;}
  #ed-card .desc{font-size:13px; color:var(--sentence-glass-secondary); line-height:1.6; margin-bottom:4px;}
  #ed-card .desc b{color:var(--ink); font-weight:600;}
  #ed-close{float:right; border:none; background:var(--quiet); width:30px; height:30px; border-radius:50%;
    font-size:14px; cursor:pointer; color:var(--quiet-ink);}
  #ed-card .ed-step{display:none;} #ed-card .ed-step.on{display:block;}
  .ed-lbl{display:block;font-size:12px;color:var(--sentence-glass-secondary);margin:16px 0 7px;letter-spacing:.3px;}
  #ed-title{width:100%; border:1px solid var(--field-line); border-radius:14px; padding:12px 14px; font-size:15px;
    font-family:var(--ui); color:var(--ink); background:var(--field-soft); outline:none;}
  #ed-title:focus{border-color:var(--blue);}
  #ed-covers{display:flex; gap:9px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none;}
  #ed-covers::-webkit-scrollbar{display:none;}
  .ed-cover{flex:0 0 62px; height:88px; border-radius:11px; overflow:hidden; cursor:pointer; padding:0;
    border:1px solid var(--sentence-glass-line); background:var(--sentence-glass-action); position:relative; color:var(--sentence-glass-ink);
    font-family:var(--ui); font-size:11.5px;}
  .ed-cover img{width:100%; height:100%; object-fit:cover; display:block;}
  .ed-cover.on{border-color:color-mix(in srgb,var(--s1-line) 45%,var(--sentence-glass-line));
    outline:2px solid color-mix(in srgb,var(--s1) 22%,transparent);outline-offset:1px;}
  .ed-cover-actions{display:flex;gap:8px;margin-top:12px;}
  #ed-pick-file{display:grid;place-items:center;flex:1;min-height:38px;
    padding:7px 9px;border:1px solid var(--sentence-glass-line);border-radius:12px;
    background:var(--sentence-glass-action);color:var(--sentence-glass-ink);
    font:500 12px var(--ui);cursor:pointer;text-align:center;}
  #ed-pick-file:hover{background:var(--sentence-glass-action-hover);}
  #ed-cover-source{display:block;margin-top:10px;font-size:12px;color:var(--sentence-glass-secondary);}
  #ed-cover-source[hidden]{display:none;}
  .ed-acts{display:flex; gap:10px; margin-top:26px;}
  .ed-acts .sm-btn{flex:1; margin-bottom:0;}
  #ed-card .am-back{color:var(--sentence-glass-secondary);}
  #ed-card .ed-acts .sm-btn.primary{border:1px solid var(--sentence-glass-line);
    background:color-mix(in srgb,var(--s1) 14%,var(--sentence-glass-action));
    color:var(--sentence-glass-ink);}
  .sm-btn.danger{background:var(--danger-bg); color:var(--danger);}
  .sm-btn.danger:hover{background:var(--danger-bg-hover);}
  .ed-all .am-ico{background:var(--danger-ico-bg); color:var(--danger);}
  .ed-all:hover{border-color:var(--danger); background:var(--danger-tint);}

  /* 파도는 밝은 종이 위에서 옅게 보이라고 흰색입니다. 어두운 화면에서는
     그대로 두면 카드 아래 3분의 1이 회색 띠가 됩니다 — tokens.css 가 낮춥니다. */
  .casual .thumb .wave{opacity:var(--wave-dark-opacity);}

/* Loading occupies the exact discovery card geometry; only opacity changes. */
#casual-rail .rss-loading,#casual-rail .rss-pending{pointer-events:none;}
#casual-rail .rss-loading .thumb{box-sizing:border-box;border:0;box-shadow:none;}
#casual-rail .rss-skeleton{position:absolute;inset:0 0 0;z-index:4;border-radius:18px;
  overflow:hidden;pointer-events:none;opacity:0;transition:opacity .65s ease;
  background:var(--rss-skeleton-surface);
  box-shadow:var(--rss-skeleton-edge);
}
#casual-rail .rss-loading .rss-skeleton,#casual-rail .rss-pending .rss-skeleton{opacity:1;}
#casual-rail .rss-skeleton::after{content:'';position:absolute;inset:0;
  background:var(--rss-skeleton-shimmer);
  transform:translateX(-100%);animation:rss-glass-shimmer 4.8s ease-in-out infinite;}
#casual-rail .rss-skeleton-source{position:absolute;left:15px;top:17px;width:28%;height:10px;}
#casual-rail .rss-skeleton-title{position:absolute;left:15px;right:15px;bottom:20px;display:grid;gap:9px;}
#casual-rail .rss-skeleton-title i{display:block;width:92%;height:15px;}
#casual-rail .rss-skeleton-title i:nth-child(2){width:79%;}
#casual-rail .rss-skeleton-title i:last-child{width:53%;}
#casual-rail .rss-skeleton-source,#casual-rail .rss-skeleton-title i{border-radius:5px;
  background:var(--rss-skeleton-line);
  box-shadow:var(--rss-skeleton-line-edge);}
#casual-rail .rss-card:not(.rss-pending) .rss-skeleton::after{animation:none;}
@keyframes rss-glass-shimmer{0%,18%{transform:translateX(-100%)}82%,100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){
  #casual-rail .rss-skeleton{transition:none;}
  #casual-rail .rss-skeleton::after{animation:none;}
}
.feed-categories{display:flex;gap:8px;overflow-x:auto;padding:8px 8px 16px;margin:6px -8px 6px;scrollbar-width:none}
.feed-categories::-webkit-scrollbar{display:none}
.feed-categories button{position:relative;flex:none;min-height:38px;padding:7px 15px;border-radius:12px;border:1px solid var(--sentence-glass-line);background:var(--sentence-glass-action);color:var(--sentence-glass-secondary);font:500 13px var(--ui);cursor:pointer;touch-action:manipulation}
.feed-categories button span{position:relative;z-index:3}
.feed-categories button[aria-pressed="true"]{color:var(--sentence-glass-ink);background:color-mix(in srgb,var(--blue) 11%,var(--sentence-glass-action));border-color:color-mix(in srgb,var(--blue) 26%,var(--sentence-glass-line));font-weight:600}
.feed-categories button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Home: discovery is large; the two Library shelves share one card footprint. */
#v-home .sec-head{margin-bottom:14px;}
#v-home #casual-rail{gap:12px;padding-top:0;padding-bottom:8px;scroll-snap-type:x mandatory;}
#v-home #casual-rail > .casual{
  flex:0 0 min(61vw,560px);width:min(61vw,560px);
  min-width:min(61vw,560px);max-width:min(61vw,560px);
}
#v-home #casual-rail .thumb{aspect-ratio:3/4;border-radius:18px;}
#v-home #casual-rail .rss-card .rss-thumb{border:0;box-shadow:none;}
#v-home #casual-rail .rss-card .rss-thumb .cover{inset:0;width:100%;height:100%;border-radius:0;}
#v-home #casual-rail .rss-card{position:relative;}
#v-home #casual-rail .rss-card .thumb::after{content:'';position:absolute;inset:45% 0 0;
  background:linear-gradient(transparent,rgba(0,0,0,.7));pointer-events:none;}
#v-home #casual-rail .rss-card .src{position:absolute;top:0;left:0;right:0;z-index:2;
  margin:0;padding:14px 15px;background:none;color:var(--on-color);text-shadow:var(--cover-text-shadow);}
#v-home #casual-rail .rss-card .ct{position:absolute;left:15px;right:15px;bottom:17px;z-index:2;
  margin:0;color:var(--on-color);font-size:18px;line-height:1.3;text-shadow:var(--cover-text-shadow);}
#v-home #casual-rail .rss-card .cm{display:none;}
#v-home #longform{margin-top:42px;}
#v-home #home-casuals{margin-top:42px;}
#v-home #shelf,#v-home #home-casual-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:0 26px 8px;margin:0 -26px;scroll-padding-left:26px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
#v-home #shelf::-webkit-scrollbar,#v-home #home-casual-rail::-webkit-scrollbar{display:none;}
#v-home #shelf > .home-regular-tile,#v-home #home-casual-rail > .home-regular-tile{
  flex:0 0 170px;width:170px;min-width:170px;max-width:170px;scroll-snap-align:start;}
:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .bookcard,:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .casual,
:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .casual .thumb{
  display:block;width:100%;height:auto;aspect-ratio:4/5;border-radius:14px;}
:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .casual .thumb{width:100%;height:100%;aspect-ratio:auto;border-radius:14px;box-shadow:none;}
:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .bookcard{box-sizing:border-box;border:0;}
:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .casual.cloud .thumb{border:0;filter:none;}
:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .casual .ct,:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .casual .cm,
:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .casual .lede,:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .bookcard .bt{display:none;}
:is(#v-home,#v-casuals,#v-longform) .home-regular-tile{cursor:pointer;}
:is(#v-home,#v-casuals,#v-longform) .home-regular-title{margin-top:9px;color:var(--ink);font-size:13.5px;font-weight:600;
  line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
:is(#v-home,#v-casuals,#v-longform) .home-cover-meta{position:absolute;left:10px;right:10px;top:10px;z-index:3;
  color:var(--on-color);font-size:10.5px;font-weight:600;line-height:1.3;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 5px rgba(0,0,0,.7);}
:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .bookcard .author,:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .casual .src{display:none;}
:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .casual .thumb.has-cover .home-cover-meta{margin:0;padding:0;background:none;opacity:1;}
:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .casual .thumb:not(.has-cover) .home-cover-meta,
:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .bookcard:not(.has-cover) .home-cover-meta{
  color:var(--ink);text-shadow:none;}
:is(#v-home,#v-longform) .home-add-tile > .bookcard.add,#v-home .home-add-tile > .casual.add .thumb{
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  width:100%;height:auto;aspect-ratio:4/5;border-radius:14px;}
#v-home .home-add-tile > .casual.add{height:auto;aspect-ratio:4/5;}
:is(#v-home,#v-longform) .home-add-tile .home-regular-title{visibility:hidden;}
:is(#v-home,#v-longform) .home-add-tile > .bookcard.add{border:2px dashed var(--dash);font:inherit;}
#v-home #home-casual-rail .casual.cloud .thumb{border:0;filter:none;}
#v-home #home-casual-rail .casual.add:hover .thumb,
#v-home #shelf .bookcard.add:hover{border-color:var(--dash);color:var(--soft);}
#v-home .now-ring{outline:0;}
#v-home .now-ring .prog{color:inherit;opacity:.65;font-weight:400;}
#v-home .bookcard.has-cover.now-ring .prog{color:var(--on-color);}
#v-casuals #casual-grid,#v-longform #longform-grid{
  display:grid;grid-template-columns:repeat(auto-fill,min(41vw,190px));gap:24px 12px;
  justify-content:center;margin:16px 0 0;padding:0;overflow:visible;}
#v-casuals #casual-grid > .home-regular-tile,#v-longform #longform-grid > .home-regular-tile{width:100%;}
@media (max-width:600px){
  #v-casuals #casual-grid,#v-longform #longform-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  #v-home #casual-rail{gap:12px;padding:0 18px 8px;margin:0 -18px;scroll-padding-left:18px;}
  #v-home #casual-rail > .casual{flex-basis:61vw;width:61vw;min-width:61vw;max-width:61vw;}
  #v-home #shelf,#v-home #home-casual-rail{padding:0 18px 8px;margin:0 -18px;scroll-padding-left:18px;}
  #v-home #shelf > .home-regular-tile,#v-home #home-casual-rail > .home-regular-tile{
    flex-basis:39vw;width:39vw;min-width:39vw;max-width:170px;}
}
@media (min-width:761px) and (max-width:899px){
  #v-home #casual-rail > .casual{
    flex:0 0 38vw;width:38vw;min-width:38vw;max-width:38vw;
  }
}
@media (min-width:900px){
  #v-home #casual-rail > .casual{
    flex:0 0 calc((100% - 36px)/4);width:calc((100% - 36px)/4);
    min-width:calc((100% - 36px)/4);max-width:calc((100% - 36px)/4);
  }
}

/* Quiet typographic jackets when no real cover is available. */
.editorial-cover .cover-art{position:absolute;left:50%;top:19%;width:76%;height:43%;
  transform:translateX(-50%);fill:none;stroke:currentColor;stroke-width:1;
  opacity:.27;pointer-events:none;}
.editorial-cover.has-cover .cover-art{display:none;}
.casual .thumb.editorial-cover:not(.has-cover){padding:17px 16px;
  background-image:linear-gradient(145deg,transparent 35%,color-mix(in srgb,currentColor 5%,transparent));}
.casual .thumb.editorial-cover:not(.has-cover) .src{font-size:9px;letter-spacing:1.1px;opacity:.65;}
.casual .thumb.editorial-cover:not(.has-cover) .lede{margin-top:auto;margin-bottom:9px;
  font-size:16px;line-height:1.3;font-weight:400;-webkit-line-clamp:3;opacity:.9;}
.casual .thumb.editorial-cover:not(.has-cover) .wave{display:none;}
.casual .thumb.editorial-cover:not(.has-cover) .shared-card-hint{margin-top:0;font-size:10px;opacity:.65;}
.bookcard.editorial-cover:not(.has-cover){padding:22px 24px;}
.bookcard.editorial-cover:not(.has-cover) .author{font-family:var(--ui);font-size:10px;
  letter-spacing:1px;max-width:85%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.6;}
.bookcard.editorial-cover:not(.has-cover) .bt{position:relative;z-index:1;margin-top:22px;
  max-width:85%;font-size:21px;line-height:1.3;-webkit-line-clamp:3;}
.bookcard.editorial-cover:not(.has-cover) .cover-art{left:auto;right:-26px;top:auto;bottom:-32px;
  width:155px;height:155px;transform:rotate(-12deg);opacity:.18;}
.bookcard.editorial-cover:not(.has-cover) .wave{display:none;}

/* No-cover cards identify the actual document rather than a generic pattern. */
:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .casual .thumb:not(.has-cover) .lede,
:is(#v-home,#v-casuals,#v-longform) .home-regular-tile > .bookcard:not(.has-cover) .bt{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
  font-size:clamp(17px,2vw,23px);line-height:1.35;overflow-wrap:anywhere;}
:is(#v-home,#v-casuals,#v-longform) .home-regular-title{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.7em;}
:is(.casual,.bookcard)[role="button"]:focus-visible{outline:2px solid var(--blue);outline-offset:4px;}

/* No persistent bubble over artwork. Long press remains the primary action;
   this named control stays reachable to assistive technology and keyboard. */
.home-regular-tile{position:relative;}
.home-card-actions{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;}
.home-card-actions:focus-visible{width:auto;height:auto;min-width:44px;min-height:44px;margin:0;
  top:6px;right:6px;padding:8px 12px;clip-path:none;border-radius:12px;
  background:var(--sentence-glass-solid,var(--bg));color:inherit;outline:2px solid var(--blue);}

/* Card replacement must not anchor the rail to an outgoing skeleton/card. */
#v-home #casual-rail{overflow-anchor:none;}