:root{
  color-scheme:light;
  --paper:#f7f1eb;
  --paper-2:#fbf8f4;
  --surface:rgba(255,252,248,.94);
  --surface-strong:#fffdf9;
  --ink:#46383b;
  --muted:#8e7d78;
  --muted-2:#aa9993;
  --line:#e2d4ca;
  --line-strong:#d7c5b9;
  --accent:#9d7f90;
  --accent-deep:#785c6b;
  --accent-soft:#efe3e9;
  --accent-soft-2:#f5edf1;
  --danger:#c75454;
  --wood:#b78d68;
  --shadow:0 18px 42px rgba(73,55,48,.10);
  --shadow-soft:0 8px 22px rgba(73,55,48,.07);
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Iowan Old Style","Baskerville",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","YuGothic",sans-serif;
  font-family:var(--sans);
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--paper)}
body{margin:0;min-height:100%;color:var(--ink);background:
  radial-gradient(circle at 18% 0%,rgba(255,255,255,.82),transparent 28%),
  radial-gradient(circle at 90% 12%,rgba(220,197,207,.23),transparent 22%),
  linear-gradient(180deg,#faf6f1 0,#f6eee8 62%,#efe4db 100%);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
input,textarea,select{width:100%;border:1px solid var(--line-strong);background:rgba(255,255,255,.78);border-radius:16px;padding:13px 14px;outline:none}
textarea{resize:vertical;min-height:110px}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(157,127,144,.12)}
[hidden]{display:none!important}
.app{width:min(760px,100%);margin:0 auto;padding:0 20px calc(132px + env(safe-area-inset-bottom));min-height:100dvh}
.topbar{padding:calc(22px + env(safe-area-inset-top)) 2px 18px}
.brand h1{margin:0;font:600 clamp(30px,8vw,48px)/1 var(--serif);letter-spacing:.01em;color:#4f3d43}
.brand p{margin:7px 0 0;color:var(--muted);font-size:12px}
.panel{display:none;animation:panelIn .22s ease}
.panel.active{display:block}
@keyframes panelIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.stack-kicker,.license-kicker,.insight-detail-kicker{font-size:10px;font-weight:800;letter-spacing:.22em;color:var(--accent);text-transform:uppercase}
.stack-title{margin:6px 0 0;font:500 clamp(34px,8vw,54px)/1.05 var(--serif);letter-spacing:.01em}
.stack-sub{margin:12px 0 0;color:var(--muted);font-size:12px;line-height:1.7;max-width:38em;text-wrap:balance}
.stack-header{padding:8px 4px 20px}
.stack-header-row,.wishlist-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.icon-share-btn{width:52px;height:52px;flex:0 0 auto;border:0;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:white;box-shadow:0 10px 24px rgba(103,76,91,.19)}
.icon-share-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Shelf */
.shelf-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;margin:2px 0 12px}
.search-shell{height:46px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:0 13px;box-shadow:var(--shadow-soft)}
.search-shell svg{width:18px;height:18px;stroke:var(--muted)}
.search-shell input{border:0;background:transparent;padding:0;box-shadow:none;min-width:0}
.view-toggle,.sort-compact{height:46px;border:1px solid var(--line);background:var(--surface);border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft)}
.view-toggle{padding:0 14px;font-size:12px;font-weight:800}
.sort-compact{padding:0 8px;gap:3px;color:var(--muted)}
.sort-compact select{border:0;background:transparent;padding:0 2px;width:auto;max-width:86px;box-shadow:none;font-size:11px;font-weight:700}
.status-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.status-tabs{display:flex;padding:4px;border-radius:999px;background:#ede4de}
.status-tab{border:0;background:transparent;border-radius:999px;padding:8px 14px;color:var(--muted);font-size:11px;font-weight:800}
.status-tab.active{background:var(--surface-strong);color:var(--ink);box-shadow:0 3px 10px rgba(80,59,49,.08)}
.count{font-size:11px;color:var(--muted)}
.library-scene{position:relative;border-radius:30px;overflow:hidden;border:1px solid rgba(213,192,175,.9);background:linear-gradient(180deg,#d4b28e 0,#b68c67 100%);box-shadow:var(--shadow)}
.bookshelf-canvas{display:block;width:100%;height:auto;min-height:470px;background:transparent}
.shelf-pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px;background:rgba(252,246,238,.78);backdrop-filter:blur(8px)}
.shelf-pager button{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#fffaf4;font-size:22px}
.shelf-page-label{font:500 12px var(--serif);color:var(--muted)}
#shelfEmptyNote:empty{display:none}
#shelfEmptyNote{margin-top:12px;text-align:center;color:var(--muted);font-size:12px}
.book-list{display:grid;gap:10px}
.book-row,.wishlist-card{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:14px 16px;box-shadow:var(--shadow-soft)}
.book-row strong,.wishlist-card strong{font:600 16px/1.4 var(--serif)}
.book-row .list-author,.wishlist-card .list-author{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.tag-list{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.tag-chip{border:1px solid #dfced7;background:#f8f0f4;color:#755f6d;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:700}

/* Stack */
.stack-period-shell{position:sticky;top:6px;z-index:18;margin:0 0 16px;padding:6px;border-radius:22px;background:rgba(250,245,240,.88);backdrop-filter:blur(12px);border:1px solid rgba(222,208,199,.85)}
.period-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:4px;border-radius:17px;background:#eee6e1}
.period-tabs button{min-width:0;min-height:44px;border:0;background:transparent;border-radius:14px;color:var(--muted);font-size:11px;font-weight:800}
.period-tabs button.active{background:#fffdf9;color:var(--ink);box-shadow:0 4px 12px rgba(70,50,45,.08)}
.stack-page-shell{position:relative}
.stack-page{display:none;padding:0 30px}
.stack-page.active{display:block}
.stack-page-nav{position:absolute;inset:0 -6px;pointer-events:none;display:flex;align-items:center;justify-content:space-between}
.stack-page-nav>button{pointer-events:auto;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:rgba(255,253,249,.94);box-shadow:var(--shadow-soft);font-size:24px;color:var(--ink)}
.stack-page-label{display:none}
.stack-hero,.comparison,.reading-insights{border:1px solid var(--line);background:var(--surface);border-radius:28px;box-shadow:var(--shadow);padding:18px}
.stack-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-bottom:1px solid var(--line);padding-bottom:14px}
.metric{text-align:left;padding:0 10px;border-right:1px solid var(--line)}
.metric:first-child{padding-left:0}.metric:last-child{border-right:0;padding-right:0}
.metric strong{display:block;font:500 clamp(25px,7vw,38px)/1 var(--serif)}
.metric span{display:block;margin-top:6px;color:var(--muted);font-size:9px}
.stack-live-label{text-align:center;margin:15px 0 0;color:#79656b;font-size:11px;font-weight:800}
.stack-stage{height:350px;display:flex;align-items:flex-end;justify-content:center;padding:34px 0 14px;border-radius:24px;background:linear-gradient(180deg,rgba(246,239,234,.38),rgba(244,235,228,.82))}
.stack-tower{width:min(290px,88%);display:flex;flex-direction:column-reverse;align-items:center;gap:3px}
.stack-book{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(80,58,51,.25);border-radius:5px 9px 9px 5px;color:#493d39;background:linear-gradient(180deg,var(--book-top,#d9c0cb) 0 10%,var(--book-bottom,#b494a3) 10% 87%,color-mix(in srgb,var(--book-bottom,#b494a3) 72%,#4f3c38) 87% 100%);box-shadow:0 4px 8px rgba(66,47,42,.10)}
.stack-book::before{content:"";position:absolute;left:9px;top:4px;bottom:4px;width:4px;border-left:1px solid rgba(59,45,41,.28);border-right:1px solid rgba(255,255,255,.22)}
.stack-book::after{content:"";position:absolute;right:7px;top:5px;bottom:5px;width:8px;border-radius:0 4px 4px 0;background:repeating-linear-gradient(180deg,#f6ead8 0 2px,#d9c6aa 2px 3px)}
.stack-book span{max-width:75%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;font-weight:800}
.stack-base{height:14px;margin:-1px auto 0;width:min(320px,94%);border-radius:999px;background:linear-gradient(180deg,#cda078,#a97754);box-shadow:0 10px 15px rgba(83,57,40,.16)}
.stack-summary{text-align:center;padding-top:14px}
.stack-height{font:500 42px/1 var(--serif)}
.stack-message{margin:5px auto 0;max-width:28em;color:var(--muted);font-size:11px;line-height:1.55;text-wrap:balance}
.stack-message:empty{display:none}.stack-missing{margin-top:6px;color:#9c6e63;font-size:10px}
.comparison-head h3{margin:0;font:500 clamp(28px,6vw,38px)/1.35 var(--serif);text-wrap:balance}
.comparison-copy{margin-top:8px;color:var(--muted);font-size:11px;line-height:1.7}
.comparison-stage{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end;min-height:270px;margin-top:20px}
.compare-col{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.compare-measure-wrap{height:180px;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 26px;gap:7px;align-items:end}
.compare-visual-stage{position:relative;height:180px;display:flex;align-items:flex-end;justify-content:center}
.compare-baseline{position:absolute;left:5px;right:5px;bottom:0;height:1px;background:#d6c4b6}
.reader-stack-visual{width:140px;max-width:100%;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start}
.reader-stack-visual .compare-book{position:relative;display:block;flex:0 0 auto;border:1px solid rgba(86,62,55,.24);border-radius:3px 7px 7px 3px;background:linear-gradient(180deg,var(--book-top,#d7c2ce) 0 10%,var(--book-bottom,#ab8da0) 10% 88%,color-mix(in srgb,var(--book-bottom,#ab8da0) 75%,#5b463e) 88% 100%);box-shadow:0 2px 5px rgba(67,48,42,.12)}
.reader-stack-visual .compare-book::before{content:"";position:absolute;left:6px;top:3px;bottom:3px;width:4px;border-left:1px solid rgba(72,51,45,.32);border-right:1px solid rgba(255,255,255,.2)}
.reader-stack-visual .compare-book::after{content:"";position:absolute;right:5px;top:3px;bottom:3px;width:6px;background:repeating-linear-gradient(180deg,#f4ead8 0 2px,#d5c3a8 2px 3px)}
.height-guide{position:relative;width:25px;align-self:end;border-left:1.5px solid var(--accent)}
.height-guide::before,.height-guide::after{content:"";position:absolute;left:-6px;width:10px;height:10px;border-left:1.5px solid var(--accent);border-top:1.5px solid var(--accent)}
.height-guide::before{top:1px;transform:rotate(45deg)}.height-guide::after{bottom:1px;transform:rotate(225deg)}
.height-guide-value{position:absolute;left:6px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-size:9px;font-weight:800;color:#796573;white-space:nowrap}
.compare-label{text-align:center;color:var(--muted);font-size:11px}.compare-label strong{display:block;color:var(--ink);font-size:13px;margin-bottom:2px}
.object-scale-box{display:flex;align-items:flex-end;justify-content:center;transform-origin:center bottom}
.object-visual{position:relative;display:flex;align-items:flex-end;justify-content:center}
.object-shape{position:relative;transform-origin:center bottom;transform:scale(var(--object-scale,1))}
.object-visual.ladybug .object-shape{width:42px;height:30px;border-radius:50% 50% 48% 48%;background:#d06462;border:1px solid #7b4a49}
.object-visual.ladybug .object-shape::before{content:"";position:absolute;left:50%;top:-7px;transform:translateX(-50%);width:14px;height:10px;border-radius:50%;background:#76504e}
.object-visual.ladybug .object-shape::after{content:"•  •";position:absolute;inset:5px 3px auto;text-align:center;color:#6c4444;font-size:18px;letter-spacing:6px}
.object-visual.sugar-cube .object-shape{width:42px;height:42px;background:linear-gradient(145deg,#fffaf0,#eee2d0);border:1px solid #d4c8b8;border-radius:7px}
.object-visual.bottle-cap .object-shape{width:54px;height:30px;border:2px solid #9e7467;border-radius:9px;background:repeating-linear-gradient(90deg,#c89983 0 5px,#b68672 5px 8px)}
.object-visual.eraser .object-shape{width:68px;height:34px;border-radius:6px;background:#dbc7c3;border:1px solid #a58c88}
.object-visual.mug .object-shape{width:58px;height:58px;border-radius:7px 7px 15px 15px;background:#d7c4b8;border:1px solid #967e72}
.object-visual.cd .object-shape{width:76px;height:76px;border-radius:8px;background:linear-gradient(135deg,#e1d7e9,#d2e0e9);border:1px solid #9e98aa}
.object-visual.book .object-shape{width:78px;height:118px;border-radius:5px;background:#ae8b9b;border:1px solid #775d69}
.object-visual.bottle .object-shape,.object-visual.two-liter .object-shape{width:48px;height:134px;border-radius:18px 18px 13px 13px;background:linear-gradient(90deg,#dbe7e3,#a9c2bd);border:1px solid #7d9b96}
.object-visual.sheet .object-shape{width:90px;height:126px;background:#f8f6ef;border:1px solid #cfc9bd}
.object-visual.chair .object-shape,.object-visual.desk .object-shape,.object-visual.ruler .object-shape,.object-visual.door .object-shape,.object-visual.hoop .object-shape,.object-visual.giraffe .object-shape,.object-visual.pole .object-shape,.object-visual.building .object-shape,.object-visual.building-tall .object-shape,.object-visual.tokyo .object-shape,.object-visual.skytree .object-shape,.object-visual.fuji .object-shape{width:68px;height:130px;background:linear-gradient(180deg,#c9aaa1,#9e7d74);border-radius:8px;clip-path:polygon(44% 0,56% 0,62% 25%,76% 38%,72% 47%,62% 43%,66% 100%,51% 100%,48% 61%,40% 100%,25% 100%,34% 43%,20% 46%,17% 36%,35% 28%)}
.footnote{color:var(--muted);font-size:9px;line-height:1.65;margin:10px 4px 0}

/* Reading record */
.reading-insights{display:grid;gap:12px}
.insight-summary{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.insight-summary-main strong{display:block;font:500 38px/1 var(--serif)}.insight-summary-main span,.insight-summary-period{font-size:10px;color:var(--muted)}
.insight-cards{display:grid;gap:9px}
.insight-card{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);background:#fffdf9;padding:14px 15px;border-radius:19px;box-shadow:var(--shadow-soft)}
.insight-card-label{font-size:10px;color:var(--accent);font-weight:800}.insight-card-value{margin-top:4px;font:500 27px/1 var(--serif)}.insight-card-sub{margin-top:5px;font-size:9px;color:var(--muted)}
.insight-mini-bars{display:flex;align-items:flex-end;gap:3px;width:58px;height:34px}.insight-mini-bars i{display:block;flex:1;border-radius:3px 3px 1px 1px;background:#c9bac2}.insight-mini-bars i.zero{height:0!important}
.full-subpage,.settings-subpage,.profile-editor-card{position:fixed;inset:0;z-index:4300;background:linear-gradient(180deg,#fbf7f3 0,#f4ece6 72%,#ede1d8 100%);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 max(20px,calc((100vw - 600px)/2)) calc(38px + env(safe-area-inset-bottom))}
body.reading-detail-open,body.settings-subpage-open,body.profile-editor-open{overflow:hidden}
.subpage-head,.profile-editor-card .feature-panel-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;justify-content:flex-start;min-height:82px;padding:calc(15px + env(safe-area-inset-top)) 2px 14px;background:rgba(251,247,243,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.subpage-head>button{width:44px;height:44px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;background:#fffdf9;font-size:25px}
.subpage-head h3,.profile-editor-card .feature-panel-head h3{margin:2px 0 0;font:500 28px/1.1 var(--serif)}
.profile-editor-card .feature-panel-head{justify-content:space-between}
.profile-editor-card .feature-panel-head button{border:0;background:transparent;color:var(--muted);font-weight:700}
.detail-summary{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:20px auto 10px;max-width:560px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.detail-summary span{font-size:10px;color:var(--muted)}.detail-summary strong{font:500 28px/1 var(--serif)}
.full-subpage .insight-chart{position:relative;max-width:560px;margin:12px auto 0;height:340px;display:flex;align-items:flex-end;gap:7px;padding:42px 14px 38px;border:1px solid var(--line);border-radius:24px;background:#fffdf9;overflow:hidden;box-shadow:var(--shadow-soft)}
.chart-grid-line{position:absolute;left:14px;right:14px;height:1px;background:#eee4dd}.chart-grid-line.top{top:56px}.chart-grid-line.mid{top:50%}.chart-grid-line.base{bottom:38px;background:#dacdc5}
.chart-col{position:relative;z-index:2;flex:1;height:100%;min-width:0;display:flex;align-items:flex-end;justify-content:center}
.chart-bar{width:min(34px,66%);border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,#b79cad,#927486)}
.chart-value{position:absolute;left:50%;bottom:calc(var(--bar-h) + 2px);transform:translate(-50%,-8px);font-size:10px;font-weight:800;color:#765e6a}
.chart-label{position:absolute;left:50%;bottom:-25px;transform:translateX(-50%);font-size:9px;color:var(--muted);white-space:nowrap}
.detail-list{width:100%;display:grid;gap:8px;align-self:flex-start}.detail-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;border:1px solid var(--line);border-radius:14px;background:#fffdfa}.detail-list span{font-size:10px;color:var(--muted)}

/* Wishlist & gacha */
#wishlistArea{display:grid;gap:10px}
.gacha-entry{height:46px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;background:#fffaf7;padding:0 13px;color:var(--accent-deep);box-shadow:var(--shadow-soft)}
.gacha-entry>span:nth-child(2){font-size:11px;font-weight:800}.gacha-entry>b{font-size:18px}.gacha-mini-machine{position:relative;width:22px;height:24px;border:2px solid currentColor;border-radius:50% 50% 8px 8px}.gacha-mini-machine i{position:absolute;left:5px;right:5px;bottom:-6px;height:7px;border:2px solid currentColor;border-top:0;border-radius:0 0 4px 4px}
.gacha-modal{display:none;position:fixed;inset:0;z-index:5000;align-items:flex-end;background:rgba(43,34,39,.48);padding:0}
.gacha-modal.open{display:flex}
.gacha-modal-card{position:relative;width:min(620px,100%);max-height:94dvh;overflow-y:auto;border-radius:32px 32px 0 0;padding:16px 20px calc(26px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#fffaf6,#f8eee8);box-shadow:0 -24px 64px rgba(45,33,38,.26)}
.gacha-handle{width:46px;height:5px;border-radius:999px;background:#c9b2bc;margin:2px auto 10px}
.gacha-close{position:absolute;right:18px;top:18px;width:48px;height:48px;border:0;border-radius:50%;background:#eee0df;color:#846875;font-size:30px}
.gacha-modal-head{text-align:center;padding:10px 50px 0}.gacha-modal-head h2{margin:8px 0 0;font:500 38px/1.1 var(--serif)}.gacha-modal-head p{margin:9px 0 0;font:500 12px/1.7 var(--serif);color:var(--muted)}
.gacha-hero{position:relative;min-height:320px;margin-top:4px}.gacha-machine-stage{height:300px;display:flex;align-items:center;justify-content:center}
.gacha-machine{position:relative;width:160px;height:250px;transform-origin:center 65%}
.gacha-globe{position:absolute;top:10px;left:14px;width:132px;height:132px;border:5px solid #a98294;border-radius:50%;background:radial-gradient(circle at 35% 18%,#fff,rgba(255,255,255,.58) 35%,rgba(233,216,224,.45));overflow:hidden;box-shadow:inset 0 -18px 22px rgba(142,102,122,.13)}
.gacha-globe i{position:absolute;width:38px;height:38px;border-radius:50%;border:2px solid rgba(119,87,102,.25);background:#d7bdc9}.gacha-globe i:nth-child(1){left:14px;top:46px}.gacha-globe i:nth-child(2){left:47px;top:20px;background:#e9d9bd}.gacha-globe i:nth-child(3){right:12px;top:36px;background:#c8bfd9}.gacha-globe i:nth-child(4){left:46px;bottom:8px;background:#cdb4c0}.gacha-globe i:nth-child(5){right:22px;bottom:25px;background:#bfc0dc}.gacha-globe i:nth-child(6){left:5px;top:18px;background:#efe6da}.gacha-globe i:nth-child(7){right:4px;top:18px;background:#dcc8d2}
.gacha-body{position:absolute;left:22px;right:22px;bottom:16px;height:112px;border:5px solid #7f6170;border-radius:18px 18px 28px 28px;background:linear-gradient(180deg,#bea0ad,#967787);box-shadow:0 16px 22px rgba(71,52,61,.18)}
.gacha-body>span{position:absolute;top:24px;left:0;right:0;text-align:center;color:#f8eef2;font:600 10px var(--serif);letter-spacing:.05em}
.gacha-knob{position:absolute;right:-4px;top:155px;width:36px;height:36px;border:5px solid #7c5f6d;border-radius:50%;background:#e8d7dc;z-index:3}
.gacha-mouth{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:52px;height:36px;border-radius:18px 18px 8px 8px;background:#6d5460}
.gacha-capsule{position:absolute;left:58px;bottom:-4px;width:42px;height:42px;border-radius:50%;background:linear-gradient(90deg,#f7f0e8 0 50%,#ccb4c0 50%);border:1px solid #a78d99;opacity:0}
.gacha-machine.is-pulling{animation:gachaShake .65s ease}.gacha-machine.is-pulling .gacha-knob{animation:knobTurn .65s ease}.gacha-machine.is-pulling .gacha-capsule{animation:capsuleDrop .9s .3s ease forwards}
@keyframes gachaShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-3deg)}40%{transform:rotate(3deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}@keyframes knobTurn{to{transform:rotate(360deg)}}@keyframes capsuleDrop{0%{opacity:0;transform:translateY(-22px)}30%{opacity:1}100%{opacity:1;transform:translateY(24px) rotate(120deg)}}
.gacha-note{position:absolute;font:500 10px/1.5 var(--serif);color:#9f7c87}.gacha-note.left{left:2px;top:60px;transform:rotate(-8deg)}.gacha-note.right{right:0;bottom:45px;text-align:right;transform:rotate(-7deg)}
.gacha-coin-card{position:absolute;right:0;top:40px;z-index:3;width:146px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:16px;background:rgba(255,253,249,.92);box-shadow:var(--shadow-soft)}
.coin-medal{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#ead2a7;border:2px solid #c8a468;color:#927044}
.gacha-coin-copy{min-width:0}.gacha-coin-copy small{display:block;font-size:8px;color:var(--muted);white-space:nowrap}.gacha-coin-copy strong{display:block;font:600 15px/1.1 var(--serif);white-space:nowrap}.gacha-coin-copy strong b{font-size:25px;font-weight:500}.gacha-coin-copy em{display:block;margin-top:3px;font-style:normal;font-size:7px;color:var(--muted);white-space:nowrap}
.gacha-actions{margin-top:-4px}.gacha-pull{width:100%;height:58px;border:0;border-radius:999px!important;background:var(--accent)!important;color:white!important;display:flex;align-items:center;justify-content:center;gap:14px;font-size:17px!important}
.gacha-result-label{display:flex;justify-content:space-between;gap:10px;align-items:flex-end;margin:20px 2px 8px;padding-top:15px;border-top:1px dashed var(--line-strong);font:500 15px var(--serif);color:#6f4f5b}.gacha-result-label span{font:500 8px/1.4 var(--sans);color:var(--muted);text-align:right}
.gacha-result-card{padding:14px;border:1px solid var(--line);border-radius:20px;background:#fffdf9;box-shadow:var(--shadow-soft)}
.gacha-result-layout{display:grid;grid-template-columns:88px minmax(0,1fr);gap:13px}.gacha-book-cover{min-height:132px;border-radius:8px;padding:10px 7px;background:linear-gradient(165deg,#343c5e,#735f78);color:white;display:flex;align-items:center;justify-content:center;text-align:center;font:600 11px/1.5 var(--serif);writing-mode:vertical-rl}.gacha-result-copy h4{margin:0 0 3px;font:600 17px var(--serif)}
.draw-impression{margin-top:9px;padding:10px;background:#faf3f3;border-left:3px solid #b58e9f;font:500 10px/1.65 var(--serif)}
.recommender{margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}

/* Reader ID / settings */
.mypage-hero{padding:8px 2px 14px}.mypage-brand{display:flex;align-items:center;gap:10px;color:#6f5661}.mypage-brand strong{display:block;font:600 16px var(--serif)}.mypage-brand small{font-size:9px;color:var(--muted)}
.brand-book{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;background:#fffaf6;font-size:18px}
.reading-license-wrap{margin-top:6px}
.reader-id-card{position:relative;overflow:hidden;border:1px solid #d9c9bf;border-radius:30px;padding:20px;background:
  radial-gradient(circle at 82% 8%,rgba(202,173,187,.18),transparent 26%),
  linear-gradient(145deg,rgba(255,253,249,.97),rgba(248,237,233,.98));box-shadow:var(--shadow)}
.reader-id-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 0 58%,rgba(255,255,255,.36) 58% 62%,transparent 62%);opacity:.6}
.license-topline,.reader-id-main,.license-divider,.license-year-head,.license-stats,.license-landmark,.license-bottom{position:relative;z-index:1}
.license-topline{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.license-topline h3{margin:7px 0 0;font:500 clamp(30px,8vw,48px)/1.05 var(--serif)}
.license-edit{width:48px;height:48px;border:0;border-radius:50%;background:#efe3e5;color:#8c6d7b;display:grid;place-items:center}.license-edit svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2}
.reader-id-main{display:grid;grid-template-columns:110px minmax(0,1fr) 120px;gap:16px;align-items:center;margin-top:22px}
.reader-id-person{text-align:center}.license-avatar{width:96px;height:96px;margin:auto;border-radius:50%;overflow:hidden;background:#eadfe1;border:6px solid rgba(255,255,255,.9);box-shadow:0 5px 16px rgba(73,54,61,.09);display:grid;place-items:center}
.license-avatar img{width:100%;height:100%;object-fit:cover}.default-avatar-person{position:relative;display:block;width:58px;height:62px}.default-avatar-person::before{content:"";position:absolute;left:50%;top:3px;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:#a88f98}.default-avatar-person::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:54px;height:34px;border-radius:50% 50% 14px 14px;background:#a88f98}
.reader-id-motto{margin-top:10px;font:500 10px/1.6 var(--serif);color:#8c7479}
.license-identity{display:grid;gap:12px}.license-identity>div{padding-bottom:9px;border-bottom:1px solid #e0d2ca}.license-identity span{display:block;font-size:8px;color:var(--muted)}.license-identity strong,.license-identity b{display:block;margin-top:4px;font:600 16px/1.4 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-id-art{color:#b5939e;text-align:center}.reader-id-art svg{width:110px;max-width:100%}.reader-id-art div{font:500 8px/1.25 var(--serif);letter-spacing:.1em}
.license-divider{height:1px;background:#dcccC3;margin:18px 0 13px}
.license-year-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid #ddd0c8}.license-year-head>div{display:flex;align-items:baseline;gap:6px}.license-year-head strong{font:500 22px var(--serif)}.license-year-head select{width:auto;border-radius:12px;padding:7px 10px;background:rgba(255,255,255,.62)}
.license-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px;padding-bottom:11px;border-bottom:1px solid #ddd0c8}.license-stat{padding:2px 8px;border-right:1px solid #ddd0c8}.license-stat:last-child{border-right:0}.license-stat strong{display:block;font:600 22px/1.1 var(--serif)}.license-stat span{display:block;margin-top:5px;font-size:8px;color:var(--muted)}
.license-landmark{display:flex;align-items:center;gap:10px;margin-top:12px;color:#735660;font:600 13px/1.4 var(--serif)}.profile-landmark-icon{width:44px;height:38px;display:flex;align-items:flex-end;justify-content:center;flex:0 0 auto}.profile-landmark-icon .object-scale-box{height:30px!important;width:40px}.profile-landmark-icon .object-visual{width:96px;height:150px}
.license-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid #ddd0c8}.license-bottom>span{font-size:9px}
.mypage-menu{display:grid;gap:10px;margin-top:18px}
.mypage-list-row{width:100%;min-height:70px;display:grid;grid-template-columns:40px minmax(0,1fr) 18px;align-items:center;gap:12px;text-align:left;padding:11px 14px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-soft)}
.mypage-row-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#f1e5ea;color:#9b7588;font-size:18px}.mypage-list-row strong{display:block;font-size:13px}.mypage-list-row small{display:block;margin-top:3px;font-size:9px;color:var(--muted)}.mypage-list-row>b{font-size:24px;font-weight:400;color:#a79199}
.subpage-content{padding:22px 2px 0;max-width:560px;margin:auto}.settings-subpage .account-box,.sync-detail-card,.settings-detail-card{padding:18px;border:1px solid var(--line);border-radius:22px;background:#fffdf9;box-shadow:var(--shadow-soft)}
.account-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.sync-pill{display:inline-flex;align-items:center;border-radius:999px;padding:6px 9px;background:#f0e4ea;color:#7e6170;font-size:9px;font-weight:800}.account-actions,.account-form-actions,.account-data-actions,.feature-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.account-user{display:grid;gap:4px;margin-top:14px}.account-user span{font-size:10px;color:var(--muted)}
.field,.profile-form label{display:grid;gap:6px;margin-top:12px;font-size:11px;font-weight:700}.account-data-tools{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.account-data-title{font-size:10px;color:var(--muted);font-weight:800}.account-delete{margin-top:18px;width:100%;border:0;border-radius:14px;padding:12px;background:#f8e0e0;color:#9d3f3f;font-weight:800}
.sync-detail-card{display:grid;gap:16px}.sync-detail-status{display:grid;gap:5px}.sync-detail-status span{font-size:11px;line-height:1.6;color:var(--muted)}
.settings-detail-card .row{margin-top:12px}.settings-divider{height:1px;background:var(--line);margin:18px 0}
.profile-photo-edit{display:flex;align-items:center;gap:18px;max-width:560px;margin:24px auto}.profile-form{max-width:560px;margin:auto}

/* Book editor */
.book-editor-page{display:none;position:fixed;inset:0;z-index:4500;height:100dvh;background:linear-gradient(180deg,#fbf7f3,#f2e9e2);overflow:hidden;flex-direction:column}
.book-editor-page.open{display:flex}
body.editor-open{overflow:hidden}
.editor-header{flex:0 0 auto;padding:calc(16px + env(safe-area-inset-top)) 20px 14px;border-bottom:1px solid var(--line);background:rgba(251,247,243,.94);backdrop-filter:blur(14px)}
.editor-header h2{margin:0;font:500 30px var(--serif)}
.editor-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 20px 24px}
.editor-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(251,247,243,.96);backdrop-filter:blur(14px)}
.form-section,.lookup-card,.scanner-card{max-width:620px;margin:0 auto 14px;padding:16px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-soft)}
.lookup-card>label,.form-section>label{display:block;margin-bottom:8px;font-size:11px;font-weight:800}.lookup-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}.lookup-row button,.tag-picker-toggle,.custom-tag-row button{border:1px solid var(--line-strong);background:#f2e7df;border-radius:14px;padding:0 13px;font-size:11px;font-weight:800;white-space:nowrap}.lookup-hint,.lookup-status,.recommend-status,.scanner-status{margin-top:8px;color:var(--muted);font-size:10px;line-height:1.55}.lookup-status.error,.scanner-status.error,.error.show{color:#a44949}
.lookup-results,.inline-suggestions{display:grid;gap:7px;margin-top:8px}.lookup-result{width:100%;text-align:left;border:1px solid var(--line);background:#fffdf9;border-radius:14px;padding:10px 12px}.lookup-result strong{display:block;font-size:13px}.lookup-result span{display:block;margin-top:3px;color:var(--muted);font-size:10px}
.scanner-card{background:#211b19;color:white;border-color:#3e322d}.scanner-card video{width:100%;border-radius:14px;background:#000}.scanner-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.scanner-head button{border:0;border-radius:999px;padding:7px 10px;background:#ffffff17;color:white}.scanner-video-wrap{position:relative;overflow:hidden;border-radius:14px;margin-top:10px;aspect-ratio:4/3}.scanner-video-wrap video{width:100%;height:100%;object-fit:cover}.scanner-guide{position:absolute;left:9%;right:9%;top:38%;height:25%;border:2px solid white;border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.22)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.row{display:grid;gap:6px}.row>label,.field>label{font-size:10px;color:var(--muted);font-weight:800}
.rating-recommend-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.rating-stars{display:flex;gap:4px}.rating-stars button{border:0;background:transparent;padding:0;color:#d2c7c4;font-size:28px}.rating-stars button.active{color:#aa8496}.rating-recommend-line #recommendBook{border:1px solid #d9c5d0;background:#f6ecf1;color:#755867;border-radius:999px;min-height:36px;padding:0 12px;font-size:10px;font-weight:800}
.tag-editor{display:grid;gap:8px}.selected-tags,.tag-options{display:flex;gap:6px;flex-wrap:wrap}.tag-picker{padding:12px;border:1px solid var(--line);border-radius:16px;background:#fffdf9}.tag-option{border:1px solid #dbcfd5;background:#f7f0f4;color:#6f586d;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:800}.tag-option.selected{background:var(--accent);color:white;border-color:var(--accent)}.custom-tag-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:10px}
.switch-row{display:flex;gap:18px;flex-wrap:wrap}.check-line{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700}.check-line input{width:auto}
.primary,.ghost,.danger{border:0;border-radius:14px;min-height:44px;padding:0 15px;font-weight:800}.primary{background:var(--accent);color:white}.ghost{background:#efe7e2;color:var(--ink)}.danger{background:var(--danger);color:white}.delete-spacer{flex:1}
#formError{color:#a44949;font-size:11px;line-height:1.5}

/* Bottom nav */
.bottom-nav{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1000;width:min(calc(100% - 28px),720px);display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:7px;border:1px solid rgba(226,212,202,.95);border-radius:30px;background:rgba(255,253,249,.92);backdrop-filter:blur(18px);box-shadow:0 14px 36px rgba(74,55,48,.16)}
.bottom-nav button{min-width:0;height:58px;border:0;border-radius:22px;background:transparent;color:#7e706b;font-size:10px;font-weight:800}
.bottom-nav button.active{background:#f0e5eb;color:#7b5d6b}

/* Responsive */
@media(max-width:560px){
  .app{padding-left:14px;padding-right:14px}
  .topbar{padding-left:6px;padding-right:6px}
  .stack-page{padding:0 18px}
  .stack-page-nav{inset:0 -8px}
  .stack-page-nav>button{width:44px;height:44px}
  .reader-id-main{grid-template-columns:82px minmax(0,1fr) 66px;gap:9px}
  .license-avatar{width:76px;height:76px;border-width:5px}.default-avatar-person{transform:scale(.8)}
  .reader-id-art svg{width:65px}
  .license-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .license-stat{padding:2px 5px}.license-stat strong{font-size:17px}.license-stat span{font-size:7px}
  .gacha-note.right{display:none}
  .gacha-coin-card{width:132px}.gacha-machine{transform:scale(.94)}
  .grid-2{grid-template-columns:1fr}
}
@media(max-width:390px){
  .shelf-toolbar{grid-template-columns:minmax(0,1fr) 48px 54px}.view-toggle{padding:0 8px}.sort-compact select{max-width:50px}
  .stack-page{padding:0 14px}.comparison-stage{gap:8px}.compare-measure-wrap{grid-template-columns:minmax(0,1fr) 22px}
  .reader-stack-visual{width:118px}
  .period-tabs button{font-size:10px}
  .gacha-coin-card{width:122px;right:-2px}.gacha-coin-copy strong{font-size:13px}.gacha-coin-copy strong b{font-size:22px}
  .license-topline h3{font-size:30px}
  .reader-id-main{grid-template-columns:72px minmax(0,1fr) 56px}
  .license-avatar{width:68px;height:68px}.reader-id-art svg{width:55px}
}