:root {
  --bg:#070809;
  --sidebar:#08090b;
  --panel:#0d0f11;
  --panel-2:#141619;
  --line:rgba(255,255,255,.075);
  --line-soft:rgba(255,255,255,.045);
  --text:#f2f0ea;
  --muted:#96999d;
  --muted-2:#60646a;
  --accent:#efd09a;
  --accent-strong:#e7c17f;
  --sidebar-width:260px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,"Pretendard","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{overflow-x:clip;width:100vw;max-width:100vw}
/* 18104: plain home M fullscreen uses the root element. Keep that top-layer
   element as the vertical scroll container instead of letting Chromium clamp
   the long home document to one viewport. Intro/Reader locks defined later
   still override this with overflow:hidden when a surface intentionally opens. */
html:fullscreen,
html:-webkit-full-screen{overflow-x:hidden!important;overflow-y:auto!important}
/* 18130: Reader가 열린 상태에서 M을 누르면 blur compositor 보호를 위해 body가
   Fullscreen 대상이 될 수 있다. 완독/닫기로 Reader surface가 사라진 뒤에도
   fullscreenElement는 body로 남으므로, 이때 body 자체를 홈의 세로 스크롤
   컨테이너로 복구한다. Reader가 열려 있는 동안의 overflow:hidden은 그대로 유지한다. */
body:fullscreen:not(.is-reader-open),
body:-webkit-full-screen:not(.is-reader-open){
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
/* 18065: classic vertical scrollbar가 나타났다/사라져도 홈의 가로 기준폭은 viewport로 고정한다.
   스크롤바 자체는 필요할 때만 보이되 app-shell/main-view는 clientWidth 변화에 재배치되지 않는다. */
.app-shell{width:100vw;max-width:100vw}
.main-view{width:calc(100vw - var(--sidebar-width));max-width:calc(100vw - var(--sidebar-width))}
button,a{font:inherit;color:inherit}
button{border:0}
a{text-decoration:none}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.app-shell{min-height:100vh;background:#08090a}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);display:flex;flex-direction:column;padding:32px 18px 26px;background:linear-gradient(180deg,#08090b 0%,#08090a 70%,#070809 100%);border-right:1px solid var(--line);z-index:30}
.brand{padding:0 12px 30px}
.brand-ko{display:inline-block;font-family:Georgia,"Noto Serif KR",serif;font-size:31px;font-weight:800;letter-spacing:-.06em;line-height:1;color:#f5f1e7;border-bottom:2px solid #a8a5d8;text-shadow:0 0 14px rgba(164,157,238,.18)}
.brand-en{margin-top:6px;color:#868894;font-family:Georgia,serif;font-size:9px;letter-spacing:.38em}
.nav-list{display:flex;flex-direction:column;gap:6px}
.nav-item{position:relative;display:flex;align-items:center;gap:14px;min-height:48px;padding:0 14px;border-radius:9px;color:#a4a7ab;font-size:15px;font-weight:600;transition:.15s ease}
.nav-item:hover{background:rgba(255,255,255,.035);color:#d9dadd}
.nav-item.is-active{background:#202125;color:#f4f4f2}
.nav-item.is-active:before{content:"";position:absolute;left:-18px;top:15px;width:3px;height:18px;border-radius:99px;background:var(--accent)}

/* 비로그인 상태의 개인 기록 메뉴: 자물쇠 대신 명도만 낮춰 조용하게 구분 */
.nav-item.is-account-only{
  color:#696d72;
  opacity:.72;
}
.nav-item.is-account-only .nav-icon{opacity:.72}
.nav-item.is-account-only:hover{
  color:#8b8f94;
  opacity:.9;
  background:rgba(255,255,255,.018);
}
.nav-icon{display:grid;place-items:center;width:20px;height:20px;color:#aeb0b4;flex:0 0 auto}
.sidebar-bottom{margin-top:auto;padding:20px 8px 0}
.help-button{width:100%;height:46px;display:flex;align-items:center;gap:13px;padding:0 12px;background:transparent;color:#c5c7ca;border-radius:9px;cursor:pointer;font-weight:700;text-align:left}
.help-button:hover{background:#17191b;color:#f3f3f0}
.legal{margin:24px 4px 0;color:#4f5257;font-size:10px;line-height:1.6}.legal.links{margin-top:10px;color:#5a5d62}

.main-view{margin-left:var(--sidebar-width);min-height:100vh;background:linear-gradient(180deg,#0a0b0c 0%,#08090a 42%,#070809 100%)}
.hero-section{position:relative;min-height:505px;margin-top:-88px;padding-top:88px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.03)}
.hero-bg{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 88% 28%,rgba(110,94,69,.24),transparent 31%),radial-gradient(circle at 63% 0%,rgba(72,59,42,.13),transparent 38%),linear-gradient(90deg,#090a0b 0%,#0a0a0a 50%,#17140f 100%);--hero-bg-image:none}
.hero-bg::before{content:"";position:absolute;z-index:0;inset:-14% -5% -16% 36%;background-image:linear-gradient(90deg,rgba(8,9,10,.94) 0%,rgba(8,9,10,.68) 22%,rgba(8,9,10,.22) 58%,rgba(8,9,10,.12) 100%),linear-gradient(180deg,rgba(7,8,9,.16),rgba(7,8,9,.32)),var(--hero-bg-image);background-size:cover;background-position:center 35%;filter:blur(8px) saturate(.98) brightness(.81);transform:scale(1.06);opacity:.74;transition:opacity .34s ease,transform .58s cubic-bezier(.2,.75,.25,1),filter .42s ease;will-change:opacity,transform,filter;pointer-events:none}
.hero-bg:after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(8,9,10,.84) 0%,rgba(8,9,10,.52) 39%,rgba(8,9,10,.08) 76%,rgba(8,9,10,.18) 100%),linear-gradient(180deg,rgba(6,7,8,.03) 0%,rgba(6,7,8,.06) 52%,rgba(4,5,6,.68) 90%,#08090a 100%);pointer-events:none}
.topbar{--topbar-bg-alpha:0;--topbar-border-alpha:0;--topbar-shadow-alpha:0;--topbar-blur:0px;position:sticky;top:0;z-index:50;height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 42px 0 38px;background:rgba(9,10,11,var(--topbar-bg-alpha));border-bottom:1px solid rgba(255,255,255,var(--topbar-border-alpha));box-shadow:0 8px 26px rgba(0,0,0,var(--topbar-shadow-alpha));backdrop-filter:blur(var(--topbar-blur)) saturate(1.05);-webkit-backdrop-filter:blur(var(--topbar-blur)) saturate(1.05);transition:background-color .08s linear,border-color .08s linear,box-shadow .08s linear,backdrop-filter .08s linear,-webkit-backdrop-filter .08s linear}
.search-shell{width:min(545px,42vw);height:46px;display:flex;align-items:center;gap:12px;padding:0 19px;border:1px solid rgba(255,255,255,.075);border-radius:24px;background:rgba(24,25,28,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.015);color:#6d7075}
.search-shell .search-icon{display:grid;place-items:center;color:#6b6d72}.search-shell .search-icon svg{width:18px;height:18px}.search-placeholder{font-size:13px}
.account-preview{display:flex;align-items:center;gap:8px;color:#dddcd7;font-size:13px}.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,#626b64,#303431);box-shadow:0 0 0 2px rgba(255,255,255,.035)}.chevron{color:#777b80;font-size:14px}
.hero-content{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);min-height:410px;padding:6px 50px 26px 42px}
.hero-copy{align-self:center;max-width:800px;padding:5px 0 10px}
.eyebrow{color:var(--accent-strong);font-size:13px;font-weight:800;letter-spacing:.01em;margin-bottom:20px}
.hero-copy h1{margin:0 0 22px;font-family:Georgia,"Noto Serif KR",serif;font-size:56px;line-height:1.03;letter-spacing:-.055em;font-weight:800;color:#f6f2e9}
.hero-copy h2{margin:0 0 9px;font-size:16px;line-height:1.5;color:#bfc0c0;font-weight:750}
.hero-description{margin:0;color:#9b9d9f;font-size:15px;line-height:1.8;letter-spacing:-.01em}
.hero-meta{display:flex;gap:31px;align-items:center;margin-top:26px;color:#8c8f92;font-size:13px}.hero-meta span{display:flex;align-items:center;gap:8px;white-space:nowrap}.hero-meta svg{width:17px;height:17px;color:#818489}
.hero-actions{display:flex;gap:14px;margin-top:28px}.primary-button,.secondary-button{height:53px;border-radius:28px;padding:0 30px;font-size:15px;font-weight:800;cursor:pointer}.primary-button{display:flex;align-items:center;gap:11px;background:var(--accent);color:#171717;box-shadow:0 8px 30px rgba(224,188,127,.08)}.primary-button .play{font-size:11px}.secondary-button{background:rgba(8,9,10,.25);border:1px solid rgba(255,255,255,.17);color:#eee}
.hero-pager{display:flex;align-items:center;gap:7px;margin-top:0}.hero-pager span{width:16px;height:4px;border-radius:99px;background:#33353a}.hero-pager .is-active{width:24px;background:var(--accent)}
.hero-cover-zone{position:relative;display:flex;align-items:center;justify-content:flex-end;padding:0 104px 0 22px}.hero-cover-zone::after{content:"";position:absolute;right:82px;top:50%;width:320px;height:320px;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,rgba(247,221,158,.34) 0%,rgba(217,177,94,.18) 30%,rgba(132,96,43,.08) 52%,rgba(20,18,14,0) 74%);filter:blur(6px);pointer-events:none;z-index:1;opacity:.94}.hero-cover-glow{display:none}
.hero-book-webgl{position:relative;z-index:2;width:300px;height:382px;transform:translateY(-5px);cursor:pointer;filter:drop-shadow(22px 22px 28px rgba(0,0,0,.30));transition:transform .28s cubic-bezier(.2,.75,.25,1),filter .28s ease}
.hero-book-webgl:hover{transform:translateY(-9px);filter:drop-shadow(26px 28px 34px rgba(0,0,0,.38))}
.hero-book-canvas{position:absolute;inset:-12px -22px -16px -20px;z-index:3;pointer-events:auto}
.hero-book-canvas canvas{display:block;width:100%!important;height:100%!important;outline:0}
.hero-book-canvas{opacity:0;visibility:hidden;transition:opacity .16s ease,visibility 0s linear .16s}.hero-book-webgl.is-webgl-loading .hero-book-canvas{opacity:0;visibility:hidden}.hero-book-webgl.is-webgl-loading .hero-cover{opacity:1;visibility:visible}.hero-book-webgl.is-webgl-ready .hero-book-canvas{opacity:1;visibility:visible;transition:opacity .16s ease,visibility 0s linear 0s}
.hero-cover{position:absolute;z-index:2;left:35px;top:19px;width:230px;aspect-ratio:2/3;object-fit:cover;border-radius:3px;box-shadow:20px 20px 34px rgba(0,0,0,.46);transition:opacity .18s ease,visibility .18s ease;user-select:none;-webkit-user-drag:none}
.hero-book-webgl.is-webgl-ready .hero-cover{opacity:0;visibility:hidden}
.hero-book-webgl.is-webgl-fallback .hero-cover{opacity:1;visibility:visible}

.content-section{position:relative;padding:31px 34px 0 30px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}.section-head.compact{margin-bottom:17px}.section-kicker{margin-bottom:5px;color:#74777b;font-size:10px;font-weight:800;letter-spacing:.12em}.section-head h3{margin:0;color:#eee;font-size:18px;letter-spacing:-.02em}.section-head .accent{color:var(--accent)}
.text-action{background:transparent;color:#6f7276;font-size:12px;cursor:pointer}.text-action span{padding-left:5px;font-size:18px;vertical-align:-1px}

.genre-section{padding-top:30px}.genre-rail{display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));gap:15px;overflow:visible}.genre-card{position:relative;height:155px;overflow:hidden;border-radius:8px;background-image:var(--genre-image);background-size:cover;background-position:center 28%;text-align:left;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.16);isolation:isolate;transform:translateY(0) scale(1);transition:transform .2s cubic-bezier(.2,.75,.25,1),box-shadow .2s ease,filter .2s ease;will-change:transform}.genre-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,5,6,.15),rgba(4,5,6,.82));z-index:0}.genre-card:after{content:"";position:absolute;inset:0;background:rgba(4,5,6,.27);z-index:0;transition:background .2s ease}.genre-card:hover,.genre-card:focus-visible{z-index:3;transform:translateY(-5px) scale(1.025);box-shadow:0 18px 34px rgba(0,0,0,.34);filter:brightness(1.07) saturate(1.035)}.genre-card:hover:after,.genre-card:focus-visible:after{background:rgba(4,5,6,.18)}.genre-card.is-selected{box-shadow:inset 0 0 0 1px rgba(235,207,159,.33),0 10px 26px rgba(0,0,0,.2)}.genre-card.is-selected:after{background:rgba(4,5,6,.12)}.genre-card.is-selected:hover,.genre-card.is-selected:focus-visible{box-shadow:inset 0 0 0 1px rgba(235,207,159,.46),0 18px 34px rgba(0,0,0,.34)}
.genre-label{position:absolute;z-index:2;left:17px;bottom:15px;display:flex;flex-direction:column;gap:5px}.genre-label strong{color:#f5f3ee;font-size:18px}.genre-label span{color:#a5a8aa;font-size:11px}

.recommendation-section{padding-top:37px}.book-rail{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:22px;overflow:visible}.book-card{min-width:0;position:relative}.book-card img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:4px;box-shadow:0 10px 22px rgba(0,0,0,.24);transform:translateY(0) scale(1);transform-origin:center bottom;transition:transform .2s cubic-bezier(.2,.75,.25,1),box-shadow .2s ease,filter .2s ease;will-change:transform;cursor:pointer}.book-card:hover img{transform:translateY(-7px) scale(1.065);box-shadow:0 18px 34px rgba(0,0,0,.38);filter:brightness(1.045)}.book-info{display:flex;flex-direction:column;gap:4px;padding:10px 1px 0}.book-info strong{font-size:13px;color:#e7e7e3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.book-info span{font-size:10.5px;color:#6f7276;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ranking-section{padding-top:48px;padding-bottom:72px}.ranking-rail{display:flex;gap:12px;overflow-x:auto;overflow-y:visible;padding:8px 10px 18px 2px;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none;overscroll-behavior-x:contain;scroll-behavior:auto}.ranking-rail::-webkit-scrollbar{display:none}.ranking-rail.is-dragging{cursor:grabbing}.rank-card{position:relative;flex:0 0 232px;height:272px;overflow:visible}.rank-number{position:absolute;z-index:0;left:3px;bottom:12px;font-family:Georgia,serif;font-size:150px;line-height:.90;color:#232529;-webkit-text-stroke:1px #55585d;letter-spacing:-.11em;white-space:nowrap}.rank-card > img{position:absolute;z-index:1;right:9px;bottom:8px;width:168px;aspect-ratio:2/3;object-fit:cover;border-radius:4px;box-shadow:none;transform:translateY(0) scale(1);transform-origin:center bottom;transition:transform .2s cubic-bezier(.2,.75,.25,1),box-shadow .2s ease,filter .2s ease;will-change:transform;cursor:inherit;-webkit-user-drag:none;user-select:none}.rank-card:hover > img{transform:translateY(-6px) scale(1.04);box-shadow:none;filter:brightness(1.02)}

@media(max-width:1280px){:root{--sidebar-width:220px}.sidebar{padding-left:14px;padding-right:14px}.hero-content{grid-template-columns:minmax(0,1fr) 320px}.hero-cover-zone{padding-right:62px}.hero-book-webgl{width:268px;height:350px}.hero-cover{left:32px;top:19px;width:205px}.hero-copy h1{font-size:48px}.genre-rail{grid-template-columns:repeat(5,220px);overflow:auto;padding-bottom:4px}.book-rail{grid-template-columns:repeat(7,150px);overflow:auto;padding-bottom:4px}.ranking-rail{gap:10px;padding-bottom:16px}.rank-card{flex-basis:214px;height:252px}.rank-number{left:2px;bottom:10px;font-size:150px;line-height:.90}.rank-card img{right:16px;width:136px}}
@media(max-width:820px){:root{--sidebar-width:82px}.sidebar{align-items:center;padding:24px 10px}.brand{padding:0 0 26px}.brand-ko{font-size:22px}.brand-en{display:none}.nav-list{width:100%}.nav-item{justify-content:center;padding:0}.nav-item span:last-child{display:none}.sidebar-bottom{width:100%;padding-left:0;padding-right:0}.help-button{justify-content:center}.help-button span:last-child,.legal{display:none}.hero-content{grid-template-columns:1fr;padding-right:28px}.hero-cover-zone{display:none}.topbar{padding-left:25px;padding-right:25px}.search-shell{width:72vw}.account-name,.chevron{display:none}.hero-copy h1{font-size:44px}.hero-description br{display:none}.hero-meta{flex-wrap:wrap;gap:14px}.genre-rail,.book-rail,.ranking-rail{overflow:auto}.content-section{padding-left:24px;padding-right:22px}}

/* =========================================================
   v10 - Hero 자동 추천 전환 + 비로그인 계정 팝업
   ========================================================= */
.account-area{position:relative;display:flex;align-items:center;align-self:stretch}
.account-preview{display:flex;align-items:center;gap:8px;padding:5px 7px 5px 5px;border-radius:22px;background:transparent;color:#dddcd7;cursor:pointer;transition:background .16s ease,color .16s ease}
.account-preview:hover,.account-area.is-open .account-preview{background:rgba(255,255,255,.045);color:#f5f2eb}
.account-preview .avatar{display:grid;place-items:center}
.avatar-guest{background:linear-gradient(145deg,#4a4d4c,#272a29)}
.avatar-guest svg{width:19px;height:19px;color:#a8aba9}
.account-popover{position:absolute;top:70px;right:0;width:268px;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(24,25,27,.97);box-shadow:0 22px 55px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.025);backdrop-filter:blur(22px) saturate(1.08);-webkit-backdrop-filter:blur(22px) saturate(1.08);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:top right;transition:opacity .18s ease,transform .18s cubic-bezier(.2,.75,.25,1),visibility .18s;pointer-events:none}
.account-area.is-open .account-popover{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto}
.account-popover-head{display:flex;align-items:center;gap:11px;padding:10px 10px 12px}
.popover-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#343638;color:#bfc1c1}
.popover-avatar svg{width:21px;height:21px}
.account-popover-head>div{display:flex;min-width:0;flex-direction:column;gap:3px}
.account-popover-head strong{font-size:14px;color:#f0efeb}
.account-popover-head span{font-size:10.5px;color:#777b7f}
.account-popover-divider{height:1px;margin:5px 3px;background:rgba(255,255,255,.07)}
.account-menu-item{position:relative;width:100%;min-height:44px;display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:7px 10px;border-radius:10px;background:transparent;color:#d0d1d0;text-align:left;cursor:pointer;transition:background .14s ease,color .14s ease}
.account-menu-item:hover{background:rgba(255,255,255,.055);color:#f4f2ed}
.account-menu-item.is-primary{color:#f0d29c}
.account-menu-icon{display:grid;place-items:center;color:#999da0}.account-menu-item.is-primary .account-menu-icon{color:#e0be83}.account-menu-icon svg{width:18px;height:18px}
.account-menu-item>span:nth-child(2){font-size:13px;font-weight:650}
.account-menu-item small{grid-column:2/4;margin-top:2px;color:#666a6e;font-size:9.5px;white-space:nowrap}
.account-menu-arrow{justify-self:end;color:#777b80;font-size:20px;line-height:1}

.hero-copy,.hero-cover-zone{transition:opacity .30s ease,transform .46s cubic-bezier(.2,.75,.25,1),filter .30s ease}
.hero-section.is-hero-switching .hero-copy{opacity:0;transform:translateY(11px);filter:blur(2px)}
.hero-section.is-hero-switching .hero-cover-zone{opacity:0;transform:translateX(18px) scale(.985);filter:blur(2px)}
.hero-section.is-hero-switching .hero-bg::before{opacity:.36;transform:scale(1.07);filter:blur(9px) saturate(.94) brightness(.74)}
.hero-pager button{width:16px;height:4px;padding:0;border:0;border-radius:99px;background:#33353a;cursor:pointer;transition:width .22s ease,background .22s ease,transform .18s ease}
.hero-pager button:hover{background:#55585d;transform:scaleY(1.3)}
.hero-pager button.is-active{width:24px;background:var(--accent)}

@media(max-width:820px){.account-popover{position:fixed;top:74px;right:14px;width:min(268px,calc(100vw - 100px))}}

/* v13: Hero controls beside the five indicators */
.hero-pager-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
}
.hero-nav{
  position:static;
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:grid;
  place-items:center;
  padding:0 0 2px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:50%;
  background:rgba(17,18,20,.28);
  color:rgba(238,233,222,.46);
  font-family:Arial,sans-serif;
  font-size:18px;
  font-weight:300;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.hero-nav:hover{
  background:rgba(37,38,40,.68);
  border-color:rgba(238,207,149,.22);
  color:#f1d39a;
  transform:scale(1.08);
}
.hero-nav:active{transform:scale(.94)}
.hero-nav:focus-visible{outline:1px solid rgba(241,211,154,.45);outline-offset:3px}
@media(max-width:820px){
  .hero-pager-row{gap:8px}
  .hero-nav{width:22px;height:22px;flex-basis:22px;font-size:17px}
}


/* =========================================================
   v40 - TOP 10 static WebGL book mockups
   Geometry proportions adapted from CommonerOfWestWall/book-3d-generator (MIT).
   A single local regl context renders each cover once into its card canvas.
   No per-book animation / WebGL loop is kept alive.
   ========================================================= */
.ranking-rail{position:relative;isolation:isolate}
.rank-card{z-index:0;perspective:none}
.rank-card:hover{z-index:4}
.rank-card .rank-number{z-index:0;line-height:.86;transition:color .18s ease,-webkit-text-stroke-color .18s ease}
.rank-card:hover .rank-number{color:#2b2d31;-webkit-text-stroke-color:#666a70}
.rank-card:nth-child(1) .rank-number,
.rank-card:nth-child(2) .rank-number,
.rank-card:nth-child(3) .rank-number,
.rank-card:nth-child(4) .rank-number,
.rank-card:nth-child(5) .rank-number,
.rank-card:nth-child(6) .rank-number,
.rank-card:nth-child(7) .rank-number,
.rank-card:nth-child(8) .rank-number,
.rank-card:nth-child(9) .rank-number,
.rank-card:nth-child(10) .rank-number{font-size:150px}

.rank-mockup3d{
  position:absolute;
  z-index:1;
  right:0;
  bottom:4px;
  width:176px;
  height:252px;
  transform-origin:54% 86%;
  transition:transform .20s cubic-bezier(.2,.75,.25,1),filter .20s ease;
  pointer-events:none;
}
.rank-mockup-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0;
  transition:opacity .18s ease;
}
.rank-mockup-fallback{
  position:absolute!important;
  z-index:0!important;
  right:18px!important;
  bottom:14px!important;
  width:142px!important;
  height:auto!important;
  aspect-ratio:2/3;
  object-fit:cover;
  border-radius:3px!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  transition:opacity .14s ease!important;
}
.rank-mockup3d.is-ready .rank-mockup-canvas{opacity:1}
.rank-mockup3d.is-ready .rank-mockup-fallback{opacity:0!important;visibility:hidden!important}
.rank-card:hover .rank-mockup3d{transform:translateY(-4px) scale(1.06);filter:brightness(1.025)}
@media(max-width:1280px){
  .rank-mockup3d{right:0;bottom:1px;width:164px;height:236px}
  .rank-mockup-fallback{right:17px!important;bottom:13px!important;width:132px!important}
}

/* =========================================================
   v32 - Dark / Light theme toggle
   ========================================================= */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}

.topbar-actions{display:flex;align-items:center;gap:10px;align-self:stretch}
.theme-toggle{
  width:38px;height:38px;display:grid;place-items:center;position:relative;flex:0 0 38px;
  padding:0;border:1px solid rgba(255,255,255,.075);border-radius:50%;
  background:rgba(24,25,28,.66);color:#a7aaad;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.theme-toggle:hover{background:rgba(38,39,42,.88);border-color:rgba(239,208,154,.18);color:#efd09a;transform:translateY(-1px)}
.theme-toggle:active{transform:translateY(0) scale(.95)}
.theme-toggle:focus-visible{outline:1px solid rgba(239,208,154,.48);outline-offset:3px}
.theme-icon{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .2s ease,transform .28s cubic-bezier(.2,.75,.25,1)}
.theme-icon svg{width:18px;height:18px}
html[data-theme="dark"] .theme-icon-sun{opacity:1;transform:rotate(0deg) scale(1)}
html[data-theme="dark"] .theme-icon-moon{opacity:0;transform:rotate(-32deg) scale(.68)}
html[data-theme="light"] .theme-icon-sun{opacity:0;transform:rotate(32deg) scale(.68)}
html[data-theme="light"] .theme-icon-moon{opacity:1;transform:rotate(0deg) scale(1)}

/* warm paper-like light theme rather than pure white */
html[data-theme="light"]{
  --bg:#f5f2ec;
  --surface:#fbfaf7;
  --surface-2:#f0ece4;
  --line:rgba(46,42,35,.10);
  --text:#25231f;
  --muted:#716f69;
  --muted-2:#98958d;
  --accent:#d2a967;
  --accent-strong:#a8742f;
}
html[data-theme="light"] body{background:#f5f2ec;color:#25231f}
html[data-theme="light"] .app-shell{background:#f5f2ec}
html[data-theme="light"] .sidebar{
  background:linear-gradient(180deg,#f8f5ef 0%,#f5f2ec 72%,#f2eee7 100%);
  border-right-color:rgba(48,43,35,.10);
  box-shadow:8px 0 30px rgba(92,76,49,.025);
}
html[data-theme="light"] .brand-ko{color:#2d2a25;border-bottom-color:#aaa2ce;text-shadow:none}
html[data-theme="light"] .brand-en{color:#8e8b84}
html[data-theme="light"] .nav-item{color:#686762}
html[data-theme="light"] .nav-icon{color:#767570}
html[data-theme="light"] .nav-item:hover{background:rgba(72,64,53,.055);color:#2f2d29}
html[data-theme="light"] .nav-item.is-active{background:#e9e4db;color:#282622;box-shadow:inset 0 0 0 1px rgba(70,59,43,.025)}
html[data-theme="light"] .nav-item.is-account-only{color:#aaa69e;opacity:.86}
html[data-theme="light"] .nav-item.is-account-only:hover{color:#8d8981;background:rgba(72,64,53,.03)}
html[data-theme="light"] .help-button{color:#66645f}
html[data-theme="light"] .help-button:hover{background:#ebe6de;color:#25231f}
html[data-theme="light"] .legal{color:#aaa69e}
html[data-theme="light"] .legal.links{color:#9b978f}

html[data-theme="light"] .main-view{background:linear-gradient(180deg,#f7f4ee 0%,#f5f2ec 44%,#f2efe8 100%)}
html[data-theme="light"] .hero-section{border-bottom-color:rgba(59,51,40,.08)}
html[data-theme="light"] .hero-bg{
  background:radial-gradient(circle at 88% 28%,rgba(197,158,97,.18),transparent 31%),radial-gradient(circle at 64% 0%,rgba(168,139,95,.10),transparent 38%),linear-gradient(90deg,#f7f4ee 0%,#f6f2ea 52%,#eee7dc 100%);
}
html[data-theme="light"] .hero-bg::before{
  background-image:linear-gradient(90deg,rgba(247,244,238,.97) 0%,rgba(247,244,238,.80) 24%,rgba(247,244,238,.42) 58%,rgba(247,244,238,.18) 100%),linear-gradient(180deg,rgba(246,241,232,.30),rgba(235,225,210,.20)),var(--hero-bg-image);
  filter:blur(10px) saturate(.86) brightness(1.04);opacity:.42;
}
html[data-theme="light"] .hero-bg:after{
  background:linear-gradient(90deg,rgba(247,244,238,.80) 0%,rgba(247,244,238,.52) 40%,rgba(247,244,238,.08) 76%,rgba(247,244,238,.18) 100%),linear-gradient(180deg,rgba(247,244,238,.02) 0%,rgba(247,244,238,.04) 55%,rgba(242,238,230,.66) 91%,#f5f2ec 100%);
}
html[data-theme="light"] .topbar{
  background:rgba(247,244,238,var(--topbar-bg-alpha));
  border-bottom-color:rgba(61,53,42,var(--topbar-border-alpha));
  box-shadow:0 8px 26px rgba(80,65,45,var(--topbar-shadow-alpha));
}
html[data-theme="light"] .search-shell{
  border-color:rgba(53,47,39,.10);background:rgba(255,255,255,.70);color:#9a968e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 6px 22px rgba(85,68,43,.035);
}
html[data-theme="light"] .search-shell .search-icon{color:#96928a}
html[data-theme="light"] .theme-toggle{border-color:rgba(53,47,39,.10);background:rgba(255,255,255,.72);color:#756f65;box-shadow:0 6px 22px rgba(85,68,43,.04)}
html[data-theme="light"] .theme-toggle:hover{background:#fff;border-color:rgba(168,116,47,.20);color:#9c6d2d}
html[data-theme="light"] .account-preview{color:#4f4c46}
html[data-theme="light"] .account-preview:hover,html[data-theme="light"] .account-area.is-open .account-preview{background:rgba(62,53,42,.055);color:#25231f}
html[data-theme="light"] .avatar-guest{background:linear-gradient(145deg,#e0ddd6,#c8c4bb)}
html[data-theme="light"] .avatar-guest svg{color:#706d66}
html[data-theme="light"] .chevron{color:#928f88}

html[data-theme="light"] .eyebrow{color:#a36e27}
html[data-theme="light"] .hero-copy h1{color:#24211d}
html[data-theme="light"] .hero-copy h2{color:#55514b}
html[data-theme="light"] .hero-description{color:#6f6b64}
html[data-theme="light"] .hero-meta{color:#77736c}
html[data-theme="light"] .hero-meta svg{color:#817c73}
html[data-theme="light"] .primary-button{background:#d4aa68;color:#211d17;box-shadow:0 8px 30px rgba(156,109,45,.10)}
html[data-theme="light"] .secondary-button{background:rgba(255,255,255,.48);border-color:rgba(48,43,36,.16);color:#34312c}
html[data-theme="light"] .secondary-button:hover{background:rgba(255,255,255,.75)}
html[data-theme="light"] .hero-nav{border-color:rgba(61,53,42,.11);background:rgba(255,255,255,.42);color:rgba(65,59,51,.58)}
html[data-theme="light"] .hero-nav:hover{background:rgba(255,255,255,.82);border-color:rgba(168,116,47,.22);color:#9f6d2a}
html[data-theme="light"] .hero-pager button{background:#c8c3ba}
html[data-theme="light"] .hero-pager button:hover{background:#a9a39a}
html[data-theme="light"] .hero-pager button.is-active{background:#b7813c}

html[data-theme="light"] .section-kicker{color:#99958d}
html[data-theme="light"] .section-head h3{color:#34312c}
html[data-theme="light"] .text-action{color:#8a867e}
html[data-theme="light"] .book-info strong{color:#35322d}
html[data-theme="light"] .book-info span{color:#89857d}
html[data-theme="light"] .book-card img{box-shadow:0 10px 22px rgba(70,56,37,.14)}
html[data-theme="light"] .book-card:hover img{box-shadow:0 18px 34px rgba(70,56,37,.22)}

/* Genre art remains image-led; only the selected rim is warmed for light mode. */
html[data-theme="light"] .genre-card{box-shadow:0 10px 25px rgba(70,56,37,.13)}
html[data-theme="light"] .genre-card.is-selected{box-shadow:inset 0 0 0 1px rgba(173,124,59,.42),0 10px 24px rgba(70,56,37,.14)}

html[data-theme="light"] .ranking-section{background:transparent}
html[data-theme="light"] .rank-card .rank-number{color:#d8d3ca;-webkit-text-stroke-color:#b2aba1}
html[data-theme="light"] .rank-card:hover .rank-number{color:#d1cbc2;-webkit-text-stroke-color:#988f84}
html[data-theme="light"] .rank-shelf-cover{outline-color:rgba(55,48,39,.12)}
html[data-theme="light"] .rank-shelf-spine{background:linear-gradient(90deg,#b7b0a5 0%,#e3ddd3 22%,#e3ddd3 78%,#aaa297 100%)}
html[data-theme="light"] .rank-shelf-back{background:#d8d2c8}
html[data-theme="light"] .rank-shelf-pages{background:linear-gradient(90deg,#d4cec2 0%,#fbf9f4 46%,#dad3c6 100%);box-shadow:inset 1px 0 rgba(255,255,255,.72),inset -1px 0 rgba(91,79,63,.10)}

html[data-theme="light"] .account-popover{
  border-color:rgba(55,48,39,.10);background:rgba(253,252,249,.98);
  box-shadow:0 22px 55px rgba(79,62,39,.18),inset 0 1px 0 rgba(255,255,255,.88);
}
html[data-theme="light"] .popover-avatar{background:#ece8e1;color:#747069}
html[data-theme="light"] .account-popover-head strong{color:#2d2a26}
html[data-theme="light"] .account-popover-head span{color:#8a867f}
html[data-theme="light"] .account-popover-divider{background:rgba(54,47,38,.09)}
html[data-theme="light"] .account-menu-item{color:#4c4944}
html[data-theme="light"] .account-menu-item:hover{background:rgba(72,61,47,.055);color:#25231f}
html[data-theme="light"] .account-menu-item.is-primary{color:#9b6926}
html[data-theme="light"] .account-menu-icon{color:#8f8b83}
html[data-theme="light"] .account-menu-item.is-primary .account-menu-icon{color:#af792f}
html[data-theme="light"] .account-menu-item small{color:#9a968e}
html[data-theme="light"] .account-menu-arrow{color:#97938b}

/* Smooth only theme-relevant surfaces; avoid touching 3D transform animations. */
body,.app-shell,.sidebar,.main-view,.hero-section,.hero-bg,.topbar,.search-shell,.account-popover,.nav-item,.help-button,.secondary-button,.rank-number,.book-info strong,.book-info span{
  transition-property:background-color,border-color,color,box-shadow;
  transition-duration:.24s;
  transition-timing-function:ease;
}

@media(max-width:820px){
  .topbar-actions{gap:6px}
  .theme-toggle{width:34px;height:34px;flex-basis:34px}
}


/* =========================================================
   v35 - focused visual polish (7 high-impact improvements)
   ========================================================= */

/* 1) Light theme: warmer ivory / paper palette */
html[data-theme="light"]{
  --bg:#f6f4ef;
  --surface:#fcfbf8;
  --surface-2:#f1ede5;
  --line:rgba(77,62,43,.072);
  --text:#27231d;
  --muted:#71695f;
  --muted-2:#999184;
  --accent:#d3aa67;
  --accent-strong:#9d6d2e;
}
html[data-theme="light"] body,
html[data-theme="light"] .app-shell{background:#f6f4ef;color:#27231d}
html[data-theme="light"] .main-view{background:linear-gradient(180deg,#faf8f4 0%,#f7f4ee 47%,#f3efe7 100%)}
html[data-theme="light"] .sidebar{
  background:linear-gradient(180deg,#fbfaf7 0%,#f8f5ef 68%,#f3efe8 100%);
  border-right-color:rgba(78,62,42,.075);
  box-shadow:8px 0 30px rgba(88,67,38,.018);
}
html[data-theme="light"] .search-shell{
  background:rgba(255,255,255,.84);
  border-color:rgba(82,65,43,.082);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 22px rgba(92,68,34,.022);
}
html[data-theme="light"] .topbar{background:rgba(250,248,244,var(--topbar-bg-alpha))}

/* 2) Hero artwork in light mode: watercolor-like presence, no dark blotch */
html[data-theme="light"] .hero-bg{
  background:radial-gradient(circle at 86% 29%,rgba(202,164,100,.08),transparent 34%),radial-gradient(circle at 66% 2%,rgba(185,151,99,.04),transparent 40%),linear-gradient(90deg,#faf8f4 0%,#f9f7f2 54%,#f2eee6 100%);
}
html[data-theme="light"] .hero-bg::before{
  inset:-12% -4% -15% 40%;
  background-image:linear-gradient(90deg,rgba(250,248,244,.985) 0%,rgba(250,248,244,.90) 25%,rgba(250,248,244,.68) 55%,rgba(250,248,244,.44) 78%,rgba(250,248,244,.35) 100%),linear-gradient(180deg,rgba(252,249,244,.24),rgba(241,235,226,.14)),var(--hero-bg-image);
  filter:blur(8px) saturate(.68) brightness(1.15);
  opacity:.22;
  transform:scale(1.04);
}
html[data-theme="light"] .hero-bg:after{
  background:linear-gradient(90deg,rgba(250,248,244,.85) 0%,rgba(250,248,244,.66) 42%,rgba(250,248,244,.24) 78%,rgba(250,248,244,.30) 100%),linear-gradient(180deg,rgba(250,248,244,.02),rgba(250,248,244,.04) 56%,rgba(244,239,231,.46) 91%,#f6f4ef 100%);
}

/* 3) Hero book: lighter grounding shadow in the light theme */
html[data-theme="light"] .hero-book-webgl{
  filter:drop-shadow(12px 16px 18px rgba(70,53,31,.14));
}
html[data-theme="light"] .hero-book-webgl:hover{
  filter:drop-shadow(15px 20px 23px rgba(70,53,31,.18));
}
html[data-theme="light"] .hero-cover{
  box-shadow:12px 16px 22px rgba(70,53,31,.17);
}

/* 4) Hero composition: bring the book inward; JS also uses a more frontal angle */
.hero-cover-zone{padding-right:142px}
@media(max-width:1280px){.hero-cover-zone{padding-right:84px}}

/* 5) Sidebar hierarchy: lighter active slab, personal menus still readable */
html[data-theme="light"] .nav-item.is-active{
  background:#ede8de;
  color:#29241e;
  box-shadow:inset 0 0 0 1px rgba(95,72,43,.025);
}
html[data-theme="light"] .nav-item.is-account-only{
  color:#918b81;
  opacity:.96;
}
html[data-theme="light"] .nav-item.is-account-only .nav-icon{opacity:.84}
html[data-theme="light"] .nav-item.is-account-only:hover{
  color:#6f685e;
  background:rgba(104,81,50,.04);
}

/* 6) Genre rail: let the artwork breathe in light mode */
html[data-theme="light"] .genre-card:before{
  background:linear-gradient(180deg,rgba(4,5,6,.08),rgba(4,5,6,.68));
}
html[data-theme="light"] .genre-card:after{background:rgba(4,5,6,.16)}
html[data-theme="light"] .genre-card:hover:after,
html[data-theme="light"] .genre-card:focus-visible:after{background:rgba(4,5,6,.09)}
html[data-theme="light"] .genre-card.is-selected:after{background:rgba(4,5,6,.07)}

/* 7) Rhythm: subtler dividers + more consistent section spacing */
.hero-section{border-bottom-color:rgba(255,255,255,.025)}
.genre-section{padding-top:34px}
.recommendation-section{padding-top:40px}
.ranking-section{padding-top:40px}
html[data-theme="light"] .hero-section{border-bottom-color:rgba(80,63,43,.035)}
html[data-theme="light"] .text-action{color:#777064}
html[data-theme="light"] .text-action:hover{color:#9f6d2d}


/* =========================================================
   v37 - hero halo + reduced background blur
   ========================================================= */
.hero-book-webgl{position:relative;z-index:2}
.hero-book-webgl::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:50%;
  background:radial-gradient(circle at 52% 48%,rgba(244,220,166,.18) 0%,rgba(205,163,83,.10) 34%,rgba(0,0,0,0) 70%);
  filter:blur(14px);
  opacity:.78;
  pointer-events:none;
  z-index:-1;
}
.hero-cover{box-shadow:18px 18px 30px rgba(0,0,0,.40)}
.hero-book-webgl:hover::before{opacity:.88}
@media(max-width:1280px){
  .hero-cover-zone::after{right:44px;width:278px;height:278px}
}
html[data-theme="light"] .hero-cover-zone::after{
  background:radial-gradient(circle,rgba(255,246,223,.88) 0%,rgba(238,214,162,.46) 28%,rgba(220,193,139,.18) 48%,rgba(255,255,255,0) 74%);
  filter:blur(8px);
  opacity:.88;
}
html[data-theme="light"] .hero-book-webgl::before{
  background:radial-gradient(circle at 52% 48%,rgba(255,249,236,.72) 0%,rgba(240,220,180,.32) 34%,rgba(255,255,255,0) 72%);
  filter:blur(16px);
  opacity:.82;
}
html[data-theme="light"] .hero-cover{box-shadow:10px 14px 20px rgba(84,64,38,.10)}


/* =========================================================
   v41 - stable TOP 10 CSS 3D books
   Geometry approach adapted from gonta223/cc-books (MIT):
   preserve-3d body + right page face + top/bottom physical faces.
   No TOP 10 JavaScript, WebGL, canvas, or image-to-texture copy.
   ========================================================= */
.rank-card{perspective:900px;perspective-origin:58% 46%;}
.rank-bk3d{
  --rank-depth:20px;
  position:absolute;
  z-index:1;
  right:9px;
  bottom:12px;
  width:150px;
  height:225px;
  transform-style:preserve-3d;
  transform-origin:46% 82%;
  transform:rotateY(-21deg) rotateX(1.6deg);
  transition:transform .20s cubic-bezier(.2,.75,.25,1),filter .20s ease;
  pointer-events:none;
  backface-visibility:hidden;
}
.rank-bk-front,
.rank-bk-back,
.rank-bk-pages,
.rank-bk-top,
.rank-bk-bottom{position:absolute;display:block;transform-style:preserve-3d;backface-visibility:hidden;}
.rank-bk-front{
  inset:0;
  z-index:5;
  transform:translateZ(calc(var(--rank-depth) / 2));
  border-radius:2px 4px 4px 2px;
  overflow:hidden;
  background:#171719;
  outline:1px solid rgba(255,255,255,.055);
}
.rank-bk-front img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  border:0!important;
  border-radius:2px 4px 4px 2px!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
  transition:none!important;
  user-select:none;
  -webkit-user-drag:none;
}
.rank-bk-back{
  inset:1px 0 1px 0;
  z-index:0;
  transform:translateZ(calc(var(--rank-depth) / -2));
  border-radius:2px 4px 4px 2px;
  background:#262426;
}
.rank-bk-pages{
  top:4px;
  bottom:4px;
  left:calc(100% - 1px);
  width:var(--rank-depth);
  z-index:3;
  transform-origin:left center;
  transform:translateZ(calc(var(--rank-depth) / 2)) rotateY(90deg);
  border-radius:0 2px 2px 0;
  overflow:hidden;
  background:linear-gradient(90deg,#d8d0c2 0%,#f3eee5 42%,#ded6c8 100%);
  box-shadow:inset 1px 0 rgba(255,255,255,.46),inset -1px 0 rgba(83,74,62,.12);
}
.rank-bk-pages::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(42,36,30,.12),transparent 36%,rgba(42,36,30,.035));
}
.rank-bk-top,
.rank-bk-bottom{
  left:4px;
  width:calc(100% - 8px);
  height:var(--rank-depth);
  background:linear-gradient(180deg,#eee8de 0%,#d8d0c3 100%);
}
.rank-bk-top{
  top:0;
  transform-origin:center top;
  transform:translateZ(calc(var(--rank-depth) / 2)) rotateX(90deg);
}
.rank-bk-bottom{
  bottom:0;
  transform-origin:center bottom;
  transform:translateZ(calc(var(--rank-depth) / 2)) rotateX(-90deg);
  filter:brightness(.82);
}
.rank-card:hover .rank-bk3d{
  transform:translateY(-4px) scale(1.055) rotateY(-21deg) rotateX(1.6deg);
  filter:brightness(1.025);
}
html[data-theme="light"] .rank-bk-front{outline-color:rgba(52,45,38,.10)}
html[data-theme="light"] .rank-bk-back{background:#e6ded1}
html[data-theme="light"] .rank-bk-pages{background:linear-gradient(90deg,#d8d0c2 0%,#fffdf8 46%,#ddd4c6 100%)}
html[data-theme="light"] .rank-bk-top,
html[data-theme="light"] .rank-bk-bottom{background:linear-gradient(180deg,#fffdf8 0%,#ddd4c6 100%)}
@media(max-width:1280px){
  .rank-bk3d{right:8px;bottom:10px;width:140px;height:210px;--rank-depth:18px}
}


/* =========================================================
   v42 - keep TOP 10 hover scaling on the 3D object itself
   ========================================================= */
.rank-bk3d{pointer-events:none;will-change:transform,filter}
.rank-bk-front img{transform:none!important;filter:none!important}
.rank-card:hover .rank-bk-front img{transform:none!important;filter:none!important}
.rank-card:hover .rank-bk3d{
  transform:translateY(-5px) scale(1.065) rotateY(-21deg) rotateX(1.6deg);
  filter:brightness(1.03);
}
html[data-theme="light"] .rank-card:hover .rank-bk3d{filter:brightness(1.02)}


/* =========================================================
   v43 - Hero-quality static TOP 10 previews + light-ramp hover
   ========================================================= */
.rank-card{perspective:none}
.rank-hero3d-preview{
  position:absolute;
  z-index:1;
  right:0;
  bottom:3px;
  width:207px;
  height:270px;
  pointer-events:auto;
  isolation:isolate;
}
.rank-hero3d-preview::before,
.rank-hero3d-preview::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-48%) scale(.92);
  pointer-events:none;
  z-index:0;
  transition:opacity .52s cubic-bezier(.2,.72,.2,1),transform .62s cubic-bezier(.2,.72,.2,1),filter .52s ease;
}
/* Broad, always-on faint lamp glow. */
.rank-hero3d-preview::before{
  width:202px;
  height:242px;
  background:radial-gradient(circle,rgba(247,211,126,.17) 0%,rgba(218,170,77,.095) 38%,rgba(184,127,39,.035) 58%,rgba(0,0,0,0) 76%);
  filter:blur(12px);
  opacity:.42;
}
/* Smaller inner lamp that ramps up on hover. */
.rank-hero3d-preview::after{
  width:164px;
  height:202px;
  background:radial-gradient(circle,rgba(255,232,164,.25) 0%,rgba(226,178,79,.11) 45%,rgba(0,0,0,0) 74%);
  filter:blur(9px);
  opacity:.15;
}
.rank-card:hover .rank-hero3d-preview::before{
  opacity:.94;
  transform:translate(-50%,-48%) scale(1.12);
  filter:blur(15px);
}
.rank-card:hover .rank-hero3d-preview::after{
  opacity:.88;
  transform:translate(-50%,-48%) scale(1.08);
  filter:blur(11px);
}
.rank-hero3d-preview > img{
  position:absolute!important;
  z-index:1!important;
  left:28px!important;
  top:11px!important;
  width:163px!important;
  height:245px!important;
  object-fit:cover!important;
  border-radius:3px!important;
  box-shadow:none!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
  visibility:visible!important;
  transition:opacity .16s ease,visibility 0s linear .16s!important;
  pointer-events:none!important;
}
.rank-hero3d-canvas{
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0;
  visibility:hidden;
  transform:none!important;
  filter:none!important;
  transition:opacity .18s ease,visibility 0s linear .18s;
  pointer-events:none;
}
.rank-hero3d-preview.is-rank-hero-ready .rank-hero3d-canvas{
  opacity:1;
  visibility:visible;
  transition:opacity .18s ease,visibility 0s linear 0s;
}
.rank-hero3d-preview.is-rank-hero-ready > img{opacity:0!important;visibility:hidden!important}
/* Explicitly no scale/motion on TOP 10 hover. Only the glow changes. */
.rank-card:hover .rank-hero3d-preview,
.rank-card:hover .rank-hero3d-canvas,
.rank-card:hover .rank-hero3d-preview > img{
  transform:none!important;
}
html[data-theme="light"] .rank-hero3d-preview::before{
  background:radial-gradient(circle,rgba(237,185,81,.14) 0%,rgba(211,154,49,.075) 40%,rgba(0,0,0,0) 76%);
  opacity:.34;
}
html[data-theme="light"] .rank-hero3d-preview::after{
  background:radial-gradient(circle,rgba(242,196,99,.22) 0%,rgba(211,151,41,.08) 46%,rgba(0,0,0,0) 74%);
}
html[data-theme="light"] .rank-card:hover .rank-hero3d-preview::before{opacity:.82}
html[data-theme="light"] .rank-card:hover .rank-hero3d-preview::after{opacity:.76}
@media(max-width:1280px){
  .rank-hero3d-preview{right:-3px;bottom:2px;width:191px;height:253px}
  .rank-hero3d-preview > img{left:27px!important;top:11px!important;width:150px!important;height:224px!important}
}


/* =========================================================
   v44 - brighter TOP 10 zone + stronger lamp glow
   ========================================================= */
.ranking-section{
  background:linear-gradient(180deg,rgba(255,255,255,.018) 0%,rgba(255,255,255,.028) 42%,rgba(255,255,255,.012) 100%);
}
.rank-hero3d-preview::before{
  background:radial-gradient(circle,rgba(255,220,132,.34) 0%,rgba(231,180,79,.19) 38%,rgba(199,139,43,.07) 58%,rgba(0,0,0,0) 77%);
  opacity:.66;
}
.rank-hero3d-preview::after{
  background:radial-gradient(circle,rgba(255,238,180,.48) 0%,rgba(236,187,84,.22) 45%,rgba(0,0,0,0) 75%);
  opacity:.30;
}
.rank-card:hover .rank-hero3d-preview::before{
  opacity:1;
  transform:translate(-50%,-48%) scale(1.16);
  filter:blur(16px);
}
.rank-card:hover .rank-hero3d-preview::after{
  opacity:1;
  transform:translate(-50%,-48%) scale(1.12);
  filter:blur(12px);
}
html[data-theme="light"] .ranking-section{
  background:linear-gradient(180deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.52) 45%,rgba(255,255,255,.22) 100%);
}
html[data-theme="light"] .rank-hero3d-preview::before{
  background:radial-gradient(circle,rgba(239,190,88,.28) 0%,rgba(219,159,51,.15) 40%,rgba(0,0,0,0) 77%);
  opacity:.58;
}
html[data-theme="light"] .rank-hero3d-preview::after{
  background:radial-gradient(circle,rgba(247,204,111,.42) 0%,rgba(221,160,46,.16) 46%,rgba(0,0,0,0) 75%);
  opacity:.26;
}
html[data-theme="light"] .rank-card:hover .rank-hero3d-preview::before{opacity:1}
html[data-theme="light"] .rank-card:hover .rank-hero3d-preview::after{opacity:.98}


/* =========================================================
   v45 - lightweight hover scale for static TOP 10 canvases
   ========================================================= */
.rank-hero3d-preview{
  transform:translateY(0) scale(1);
  transform-origin:52% 78%;
  transition:transform .26s cubic-bezier(.2,.75,.25,1);
  will-change:transform;
}
.rank-card:hover .rank-hero3d-preview{
  transform:translateY(-3px) scale(1.055)!important;
}
/* Keep the rendered 3D canvas internally unchanged; scale its parent as one object. */
.rank-card:hover .rank-hero3d-canvas,
.rank-card:hover .rank-hero3d-preview > img{
  transform:none!important;
}
@media(prefers-reduced-motion:reduce){
  .rank-hero3d-preview{transition:none}
}


/* =========================================================
   v46 - distinct charcoal stage for TOP 10 in dark mode
   ========================================================= */
html[data-theme="dark"] .ranking-section{
  position:relative;
  background:
    radial-gradient(ellipse at 52% 18%,rgba(255,255,255,.028) 0%,rgba(255,255,255,0) 58%),
    linear-gradient(180deg,#14171a 0%,#121518 46%,#101215 100%);
  border-top:1px solid rgba(255,255,255,.038);
  border-bottom:1px solid rgba(255,255,255,.025);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.014),
    inset 0 18px 42px rgba(255,255,255,.008);
}
html[data-theme="dark"] .ranking-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.012) 50%,rgba(255,255,255,0) 100%);
}
html[data-theme="dark"] .ranking-section .section-head,
html[data-theme="dark"] .ranking-section .ranking-rail{
  position:relative;
  z-index:1;
}
html[data-theme="dark"] .ranking-section .section-head h3{color:#f0f0ec}
html[data-theme="dark"] .ranking-section .text-action{color:#85898d}
html[data-theme="dark"] .ranking-section .text-action:hover{color:#d6b678}

/* =========================================================
   v48 - TOP 10 rounded display table instead of full-width charcoal band
   ========================================================= */
/* Return the section itself to the normal page background. */
.ranking-section,
html[data-theme="dark"] .ranking-section,
html[data-theme="light"] .ranking-section{
  background:transparent;
  border-top:0;
  border-bottom:0;
  box-shadow:none;
}
html[data-theme="dark"] .ranking-section::before{content:none;display:none}

/* Only the books/numbers sit on a centered rounded stage. */
.ranking-section .ranking-rail{
  box-sizing:border-box;
  margin:8px 10px 0;
  padding:26px 20px 32px;
  border-radius:26px;
  background:rgba(20,23,26,.92);
  border:1px solid rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
html[data-theme="dark"] .ranking-section .ranking-rail{
  background:
    radial-gradient(ellipse at 50% 18%,rgba(255,255,255,.026) 0%,rgba(255,255,255,0) 58%),
    linear-gradient(180deg,#171a1d 0%,#14171a 52%,#121518 100%);
  border-color:rgba(255,255,255,.05);
}
html[data-theme="light"] .ranking-section .ranking-rail{
  background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(248,246,241,.82) 100%);
  border-color:rgba(74,63,50,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}

/* Keep the title outside the rounded stage. */
.ranking-section .section-head{margin-bottom:12px}

@media(max-width:1280px){
  .ranking-section .ranking-rail{
    margin-left:6px;
    margin-right:6px;
    padding:22px 16px 28px;
    border-radius:22px;
  }
}


/* =========================================================
   v49 - TOP 10 unified rounded stage
   Heading + books now share one darker charcoal stage.
   ========================================================= */

/* The whole ranking section becomes the rounded stage so the title sits inside it. */
.ranking-section,
html[data-theme="dark"] .ranking-section,
html[data-theme="light"] .ranking-section{
  box-sizing:border-box;
  position:relative;
  margin:42px 22px 0 14px;
  padding:28px 22px 62px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.035);
  overflow:hidden;
}

/* Dark mode: closer to black than the previous charcoal so it blends with the page. */
html[data-theme="dark"] .ranking-section{
  background:
    radial-gradient(ellipse at 48% 10%,rgba(255,255,255,.018) 0%,rgba(255,255,255,0) 54%),
    linear-gradient(180deg,#101214 0%,#0d0f11 54%,#0a0c0e 100%);
  border-color:rgba(255,255,255,.036);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.012);
}

/* Light mode keeps the same stage layout, but stays quiet and paper-like. */
html[data-theme="light"] .ranking-section{
  background:linear-gradient(180deg,rgba(255,255,255,.70) 0%,rgba(248,247,243,.88) 100%);
  border-color:rgba(65,57,48,.065);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

/* Remove the old rail-only rounded panel; the section itself is now the panel. */
.ranking-section .ranking-rail,
html[data-theme="dark"] .ranking-section .ranking-rail,
html[data-theme="light"] .ranking-section .ranking-rail{
  margin:10px 0 0;
  padding:18px 4px 12px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* Heading now belongs to the stage. */
.ranking-section .section-head{
  position:relative;
  z-index:2;
  margin:0 2px 10px;
}
html[data-theme="dark"] .ranking-section .section-head h3{color:#efefeb}
html[data-theme="dark"] .ranking-section .text-action{color:#7d8286}
html[data-theme="dark"] .ranking-section .text-action:hover{color:#d5b777}

/* Slightly tighter rail so the initial viewport reveals about one more book. */
.ranking-section .ranking-rail{gap:6px}
.ranking-section .rank-card{flex-basis:228px}

@media(max-width:1280px){
  .ranking-section,
  html[data-theme="dark"] .ranking-section,
  html[data-theme="light"] .ranking-section{
    margin-left:10px;
    margin-right:16px;
    padding:24px 18px 54px;
    border-radius:24px;
  }
  .ranking-section .ranking-rail{
    gap:5px;
    padding-left:2px;
    padding-right:2px;
  }
  .ranking-section .rank-card{flex-basis:212px}
}

@media(max-width:820px){
  .ranking-section,
  html[data-theme="dark"] .ranking-section,
  html[data-theme="light"] .ranking-section{
    margin-left:12px;
    margin-right:12px;
    padding:22px 14px 44px;
    border-radius:22px;
  }
}


/* =========================================================
   v51 - true TOP 10 cover-to-cover tightening + distance-based rec focus
   ========================================================= */
/* TOP 10: do not fake it by shrinking the books. Keep the same 3D book size,
   but tighten the actual visible spacing by slightly overlapping the card lanes. */
.ranking-section .ranking-rail{
  gap:0;
  padding-right:18px;
}
.ranking-section .rank-card{
  flex-basis:228px;
}
.ranking-section .rank-card + .rank-card{
  margin-left:-18px;
}
@media(max-width:1280px){
  .ranking-section .ranking-rail{gap:0;padding-right:14px}
  .ranking-section .rank-card{flex-basis:212px}
  .ranking-section .rank-card + .rank-card{margin-left:-16px}
}
@media(max-width:820px){
  .ranking-section .ranking-rail{gap:0;padding-right:8px}
  .ranking-section .rank-card + .rank-card{margin-left:-10px}
}

/* =========================================================
   v52 - TOP 10 depth / hierarchy polish
   Number behind, glow middle, 3D book front.
   ========================================================= */
/* Pull the books slightly upward and make the rank number rise behind them. */
.ranking-section .rank-card{
  position:relative;
  overflow:visible;
}
.ranking-section .rank-number{
  z-index:0;
  left:0;
  bottom:84px;
  color:#1a1d20;
  -webkit-text-stroke:1.15px #666b70;
  text-shadow:0 1px 0 rgba(255,255,255,.018);
  opacity:.96;
}
.ranking-section .rank-hero3d-preview{
  z-index:2;
  bottom:15px;
}

/* Keep the lamp behind the book, but let it bloom a little outside the silhouette. */
.ranking-section .rank-hero3d-preview::before,
.ranking-section .rank-hero3d-preview::after{
  left:54%;
  top:49%;
  z-index:0;
}
.ranking-section .rank-hero3d-preview::before{
  width:226px;
  height:264px;
}
.ranking-section .rank-hero3d-preview::after{
  width:182px;
  height:218px;
}
.ranking-section .rank-hero3d-canvas,
.ranking-section .rank-hero3d-preview > img{
  z-index:2!important;
}

/* The stage title and the books should read as one composition. */
.ranking-section .section-head{
  margin-bottom:2px;
}
.ranking-section .ranking-rail,
html[data-theme="dark"] .ranking-section .ranking-rail,
html[data-theme="light"] .ranking-section .ranking-rail{
  margin-top:2px;
  padding-top:8px;
}

/* Keep the current cover-to-cover tightening; do not compress the 3D books further. */
.ranking-section .rank-card + .rank-card{margin-left:-18px}

/* Dark-stage hierarchy: number is readable but still clearly behind the cover. */
html[data-theme="dark"] .ranking-section .rank-number{
  color:#181b1e;
  -webkit-text-stroke-color:#5c6268;
}
html[data-theme="dark"] .ranking-section .rank-card:hover .rank-number{
  color:#202429;
  -webkit-text-stroke-color:#70767c;
}

/* Light mode uses a warm-gray rank rather than a dark outline. */
html[data-theme="light"] .ranking-section .rank-number{
  color:#e0dcd4;
  -webkit-text-stroke-color:#aaa49a;
  text-shadow:none;
}
html[data-theme="light"] .ranking-section .rank-card:hover .rank-number{
  color:#d8d3ca;
  -webkit-text-stroke-color:#938c82;
}

@media(max-width:1280px){
  .ranking-section .rank-number{bottom:76px}
  .ranking-section .rank-hero3d-preview{bottom:13px}
  .ranking-section .rank-hero3d-preview::before{width:208px;height:244px}
  .ranking-section .rank-hero3d-preview::after{width:168px;height:202px}
}

@media(max-width:820px){
  .ranking-section .rank-number{bottom:68px}
  .ranking-section .rank-hero3d-preview{bottom:10px}
}


/* =========================================================
   v54 - subtle 1px gold rim on focused recommendation cover
   ========================================================= */
@media (hover:hover) and (pointer:fine){
  .recommendation-section .book-card img{
    outline:1px solid rgba(224,187,116,0);
    outline-offset:-1px;
    transition-property:transform,box-shadow,filter,outline-color;
  }
  .recommendation-section .book-card:hover img{
    outline-color:rgba(224,187,116,.28);
  }
  html[data-theme="light"] .recommendation-section .book-card:hover img{
    outline-color:rgba(181,132,62,.26);
  }
}


/* =========================================================
   v55 - readable TOP 10 ranks + balanced stage + edge autoscroll affordance
   ========================================================= */
/* Raise the bottom edge: keep the books where they are and remove dead space below. */
.ranking-section,
html[data-theme="dark"] .ranking-section,
html[data-theme="light"] .ranking-section{
  padding-bottom:34px;
}
.ranking-section .ranking-rail,
html[data-theme="dark"] .ranking-section .ranking-rail,
html[data-theme="light"] .ranking-section .ranking-rail{
  padding-bottom:5px;
}

/* Rank readability now wins over decorative hiding.
   The number still lives on the book's left shoulder, but remains legible. */
.ranking-section .rank-number{
  z-index:4;
  left:-10px;
  bottom:92px;
  pointer-events:none;
  opacity:.92;
  color:#2b3035;
  -webkit-text-stroke:1.15px #747b82;
  text-shadow:0 1px 0 rgba(255,255,255,.025);
}
.ranking-section .rank-hero3d-preview{z-index:2}
/* Two-digit rank needs more breathing room so 10 never reads as 1. */
.ranking-section .rank-card:nth-child(10) .rank-number{
  left:-22px;
  letter-spacing:-.13em;
}
html[data-theme="dark"] .ranking-section .rank-number{
  color:#292e33;
  -webkit-text-stroke-color:#747b82;
}
html[data-theme="dark"] .ranking-section .rank-card:hover .rank-number{
  color:#33393f;
  -webkit-text-stroke-color:#858c93;
}
html[data-theme="light"] .ranking-section .rank-number{
  color:#d4d0c8;
  -webkit-text-stroke-color:#989188;
  opacity:.96;
}
html[data-theme="light"] .ranking-section .rank-card:hover .rank-number{
  color:#c8c3ba;
  -webkit-text-stroke-color:#857e75;
}

/* Very subtle visual hint at the two edge-hover scroll zones. */
.ranking-section::before,
.ranking-section::after{
  content:"";
  position:absolute;
  z-index:5;
  top:68px;
  bottom:18px;
  width:44px;
  pointer-events:none;
  opacity:0;
  transition:opacity .22s ease;
}
.ranking-section::before{
  left:0;
  background:linear-gradient(90deg,rgba(224,184,105,.055),rgba(224,184,105,0));
}
.ranking-section::after{
  right:0;
  background:linear-gradient(270deg,rgba(224,184,105,.055),rgba(224,184,105,0));
}
.ranking-section.is-edge-scroll-left::before,
.ranking-section.is-edge-scroll-right::after{opacity:1}

@media(max-width:1280px){
  .ranking-section,
  html[data-theme="dark"] .ranking-section,
  html[data-theme="light"] .ranking-section{padding-bottom:30px}
  .ranking-section .rank-number{left:-8px;bottom:84px}
  .ranking-section .rank-card:nth-child(10) .rank-number{left:-18px}
}
@media(max-width:820px){
  .ranking-section,
  html[data-theme="dark"] .ranking-section,
  html[data-theme="light"] .ranking-section{padding-bottom:26px}
  .ranking-section .rank-number{left:-5px;bottom:74px}
  .ranking-section .rank-card:nth-child(10) .rank-number{left:-12px}
  .ranking-section::before,.ranking-section::after{display:none}
}

/* =========================================================
   v56 - faster edge autoscroll + clearer TOP 10 rank placement
   ========================================================= */
/* Make the TOP 10 numbers sit more in the left gap of each book so they stay legible.
   Single digits move outward; two digits move further outward. */
.ranking-section .rank-number{
  left:-26px;
  bottom:88px;
  z-index:4;
}
.ranking-section .rank-card:first-child .rank-number{
  left:2px;
}
.ranking-section .rank-card:nth-child(n+2) .rank-number{
  left:-26px;
}
.ranking-section .rank-card:nth-child(10) .rank-number{
  left:-52px;
  letter-spacing:-.08em;
}

/* Keep books and numbers vertically balanced after the shift. */
.ranking-section .rank-hero3d-preview{
  bottom:16px;
}

@media(max-width:1280px){
  .ranking-section .rank-number{left:-22px;bottom:80px}
  .ranking-section .rank-card:first-child .rank-number{left:0}
  .ranking-section .rank-card:nth-child(10) .rank-number{left:-44px}
  .ranking-section .rank-hero3d-preview{bottom:14px}
}
@media(max-width:820px){
  .ranking-section .rank-number{left:-16px;bottom:72px}
  .ranking-section .rank-card:first-child .rank-number{left:-2px}
  .ranking-section .rank-card:nth-child(10) .rank-number{left:-34px}
  .ranking-section .rank-hero3d-preview{bottom:11px}
}

/* =========================================================
   Integrated app shell - routed views + stable Step122 reader bridge
   ========================================================= */
[hidden]{display:none!important}
.global-search-input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:13px}
.global-search-input::placeholder{color:#666a6f}
html[data-theme="light"] .global-search-input{color:#282520}
html[data-theme="light"] .global-search-input::placeholder{color:#9a948b}

.route-view{min-height:calc(100vh - 88px);padding:44px 34px 76px 30px}
.route-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px;padding:8px 4px 22px;border-bottom:1px solid rgba(255,255,255,.055)}
.route-page-head>div:first-child{min-width:0}
.route-kicker{display:block;margin-bottom:9px;color:#777b80;font-size:10px;font-weight:800;letter-spacing:.16em}
.route-page-head h1{margin:0;color:#f0efea;font-family:Georgia,"Noto Serif KR",serif;font-size:34px;letter-spacing:-.045em}
.route-page-head p{margin:10px 0 0;color:#7f8387;font-size:13px;line-height:1.7}
.route-result-count{flex:0 0 auto;color:#777c81;font-size:12px}
.route-query{margin:-10px 4px 24px;color:#b8b9b6;font-size:13px}
.route-book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:34px 22px;align-items:start}
.route-book-card{position:relative;min-width:0}
.route-cover-button{display:block;width:100%;padding:0;background:transparent;text-align:left;cursor:pointer}
.route-cover-wrap{position:relative;display:block;width:100%;max-width:190px;aspect-ratio:2/3;overflow:hidden;border-radius:5px;background:#121416;box-shadow:0 12px 24px rgba(0,0,0,.26);transform:translateY(0) scale(1);transform-origin:center bottom;transition:transform .28s cubic-bezier(.2,.75,.25,1),box-shadow .28s ease}
.route-cover-wrap img{display:block;width:100%;height:100%;object-fit:cover}
.route-cover-button:hover .route-cover-wrap,.route-cover-button:focus-visible .route-cover-wrap{transform:translateY(-6px) scale(1.035);box-shadow:0 20px 34px rgba(0,0,0,.38)}
.route-cover-button:focus-visible{outline:0}
.route-book-badge{position:absolute;left:8px;bottom:8px;padding:5px 8px;border-radius:999px;background:rgba(8,9,10,.78);border:1px solid rgba(255,255,255,.11);color:#ddd3c2;font-size:9px;font-weight:800;backdrop-filter:blur(8px)}
.route-book-copy{display:flex;flex-direction:column;gap:4px;padding:11px 1px 0;max-width:190px}
.route-book-copy strong{overflow:hidden;color:#e5e5e1;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.route-book-copy span,.route-book-copy small{overflow:hidden;color:#707479;font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}
.route-progress{height:3px;margin-top:5px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.07)}
.route-progress i{display:block;height:100%;border-radius:inherit;background:#d5b472}
.route-book-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap;max-width:200px;margin-top:9px}
.route-book-actions button,.route-owned{min-height:27px;padding:0 9px;border:1px solid rgba(255,255,255,.075);border-radius:999px;background:rgba(255,255,255,.025);color:#898d91;font-size:9.5px;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}
.route-book-actions button:hover{background:rgba(255,255,255,.065);border-color:rgba(226,190,123,.20);color:#e4c78f}
.route-book-actions button.is-selected{border-color:rgba(226,190,123,.20);color:#dfbd7a}
.route-owned{display:inline-flex;align-items:center;color:#777c80;cursor:default}
.route-chip-row{display:flex;gap:8px;overflow-x:auto;margin:0 3px 26px;padding:0 0 5px;scrollbar-width:none}
.route-chip-row::-webkit-scrollbar{display:none}
.route-chip{flex:0 0 auto;height:34px;padding:0 14px;border:1px solid rgba(255,255,255,.07);border-radius:999px;background:#111315;color:#85898d;font-size:11px;cursor:pointer}
.route-chip:hover{color:#d5d4d0;border-color:rgba(255,255,255,.12)}
.route-chip.is-selected{border-color:rgba(224,186,113,.24);background:rgba(224,186,113,.09);color:#e2c78f}
.route-subhead{display:flex;align-items:center;justify-content:space-between;margin:0 3px 20px}
.route-subhead strong{font-size:16px;color:#dddcd7}.route-subhead span{font-size:11px;color:#686c70}
.route-empty{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid rgba(255,255,255,.045);border-radius:20px;background:rgba(255,255,255,.012);color:#777b80}
.route-empty-mark{margin-bottom:12px;color:#ad9160;font-size:20px}.route-empty strong{color:#c5c5c1;font-size:15px}.route-empty p{max-width:420px;margin:8px 20px 0;font-size:12px;line-height:1.7}
.hero-wishlist-action{cursor:pointer;transition:color .16s ease}.hero-wishlist-action:hover{color:#e6c88e}

/* Reader is the original Step122 engine, isolated in an iframe so its stable layout logic is not rewritten. */
body.is-reader-open{overflow:hidden}
.legacy-reader-layer{position:fixed;z-index:9999;inset:0;background:transparent}
.legacy-reader-layer iframe{position:absolute;z-index:1;inset:0;width:100%;height:100%;border:0;background:transparent}
/* 18065: 최초 lazy iframe이 about:blank 흰 배경을 paint하지 못하게 handshake 전에는 숨긴다. */
.legacy-reader-layer.is-runtime-pending iframe{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
/* 18089: intro handoff의 iframe은 child가 작은 책 상태를 paint할 준비가 끝날 때까지
   부모에서 opacity만 0으로 gate한다. visibility:hidden은 child rAF/레이아웃을 늦출 수 있어 쓰지 않는다. */
.legacy-reader-layer.is-intro-paint-gated iframe{opacity:0!important;pointer-events:none!important;transition:none!important}
.legacy-reader-loading{display:none!important}


@keyframes shortbookReaderSpin{to{transform:rotate(360deg)}}

html[data-theme="light"] .route-page-head{border-bottom-color:rgba(66,56,44,.08)}
html[data-theme="light"] .route-page-head h1{color:#2b2722}
html[data-theme="light"] .route-page-head p,html[data-theme="light"] .route-kicker{color:#898278}
html[data-theme="light"] .route-query{color:#615c55}
html[data-theme="light"] .route-cover-wrap{background:#eeeae3;box-shadow:0 12px 24px rgba(75,59,39,.13)}
html[data-theme="light"] .route-cover-button:hover .route-cover-wrap{box-shadow:0 20px 34px rgba(75,59,39,.20)}
html[data-theme="light"] .route-book-copy strong{color:#36322d}
html[data-theme="light"] .route-book-copy span,html[data-theme="light"] .route-book-copy small{color:#898278}
html[data-theme="light"] .route-progress{background:rgba(61,50,38,.08)}
html[data-theme="light"] .route-book-actions button,html[data-theme="light"] .route-owned{border-color:rgba(62,52,40,.08);background:rgba(255,255,255,.38);color:#777067}
html[data-theme="light"] .route-chip{border-color:rgba(62,52,40,.08);background:rgba(255,255,255,.44);color:#777067}
html[data-theme="light"] .route-chip.is-selected{border-color:rgba(166,116,48,.20);background:rgba(190,139,68,.09);color:#956725}
html[data-theme="light"] .route-empty{border-color:rgba(62,52,40,.07);background:rgba(255,255,255,.28)}
html[data-theme="light"] .route-empty strong{color:#5b554d}

@media(max-width:1280px){
  .route-view{padding-left:24px;padding-right:22px}
  .route-book-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:30px 18px}
}
@media(max-width:820px){
  .route-view{padding:30px 18px 60px}
  .route-page-head{align-items:flex-start;flex-direction:column;margin-bottom:22px}
  .route-page-head h1{font-size:28px}
  .route-book-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:26px 14px}
}

/* Integrated runtime surface: the current app remains the visual background. */
.legacy-reader-layer[data-surface="settings"] .legacy-reader-loading{background:transparent}
[data-theme="light"] .legacy-reader-layer[data-surface="settings"] .legacy-reader-loading{color:#242321}


/* Hero 3D book grab interaction */
.hero-book-webgl[data-hero-book-webgl]{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hero-book-webgl[data-hero-book-webgl].is-book-dragging{cursor:grabbing}

/* =========================================================
   runtime-cut-3 - test login gate + scheduled home feeds
   ========================================================= */
.test-login-toggle{
  width:100%;min-height:46px;margin:0 0 14px;padding:7px 10px;
  display:flex;align-items:center;gap:10px;border:1px dashed rgba(224,188,127,.22);
  border-radius:12px;background:rgba(224,188,127,.035);color:#b4b0a7;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease
}
.test-login-toggle:hover{background:rgba(224,188,127,.075);border-color:rgba(224,188,127,.34);color:#e0d8c9}
.test-login-dot{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:#6f7475;box-shadow:0 0 0 4px rgba(111,116,117,.08);transition:background .18s ease,box-shadow .18s ease}
.test-login-copy{display:flex;min-width:0;flex:1;align-items:center;justify-content:space-between;gap:8px}.test-login-copy small{font-size:8.5px;letter-spacing:.11em;color:#777b7e}.test-login-copy strong{font-size:11px;color:#85898c}
html[data-test-login="on"] .test-login-dot{background:#d8b777;box-shadow:0 0 0 4px rgba(216,183,119,.10)}
html[data-test-login="on"] .test-login-copy strong{color:#e1c58e}
.nav-item.is-auth-locked{opacity:.28;cursor:not-allowed;filter:saturate(.35)}
.nav-item.is-auth-locked:hover{background:transparent;color:#96999b}
.auth-toast{position:fixed;z-index:12000;left:calc(var(--sidebar-width) + 28px);bottom:28px;padding:11px 15px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(22,23,25,.94);box-shadow:0 14px 34px rgba(0,0,0,.34);backdrop-filter:blur(14px);color:#d9d7d1;font-size:12px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.auth-toast.is-visible{opacity:1;transform:translateY(0)}

.book-cover-shell{position:relative;display:block;width:100%}
.book-match{position:absolute;top:8px;right:8px;z-index:2;padding:5px 7px;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(8,9,10,.72);backdrop-filter:blur(8px);color:#ead4a6;font-size:9px;font-weight:800;letter-spacing:-.01em;pointer-events:none}
.book-rail.is-feed-switching .book-card{opacity:.45;transform:translateY(4px)}
.book-rail .book-card{transition:opacity .28s ease,transform .34s cubic-bezier(.2,.75,.25,1)}

/* Main Hero: the object can be spun through front / spine / back. */
.hero-book-webgl[data-hero-book-webgl]{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hero-book-webgl[data-hero-book-webgl].is-book-dragging{cursor:grabbing;filter:drop-shadow(30px 32px 38px rgba(0,0,0,.44))}

html[data-theme="light"] .test-login-toggle{border-color:rgba(141,103,48,.18);background:rgba(161,119,56,.035);color:#70695f}
html[data-theme="light"] .auth-toast{border-color:rgba(75,61,45,.10);background:rgba(250,247,241,.96);color:#4f4942;box-shadow:0 14px 34px rgba(78,61,41,.16)}
html[data-theme="light"] .book-match{border-color:rgba(78,61,41,.10);background:rgba(248,244,236,.88);color:#9a6e2e}

@media(max-width:820px){
  .test-login-toggle{min-height:42px;padding:6px;justify-content:center}.test-login-copy{display:none}.test-login-dot{width:11px;height:11px}
  .auth-toast{left:96px;right:14px;bottom:18px;text-align:center}
}


/* =========================================================
   runtime-cut-4 - recommendation / login / TOP10 interactions
   ========================================================= */
/* 로그인된 테스트 상태에서는 개인 기록 메뉴도 일반 메뉴와 같은 위계로 복원한다. */
html[data-test-login="on"] .nav-item.is-account-only {
  color:#a4a7ab;
  opacity:1;
  filter:none;
}
html[data-test-login="on"] .nav-item.is-account-only .nav-icon{opacity:1}
html[data-test-login="on"] .nav-item.is-account-only:hover{
  background:rgba(255,255,255,.035);
  color:#d9dadd;
  opacity:1;
}
html[data-theme="light"][data-test-login="on"] .nav-item.is-account-only{color:#686762;opacity:1}
html[data-theme="light"][data-test-login="on"] .nav-item.is-account-only .nav-icon{opacity:1}
html[data-theme="light"][data-test-login="on"] .nav-item.is-account-only:hover{background:rgba(72,64,53,.055);color:#2f2d29}

/* 맞춤성은 표지를 가리지 않고 제목/작가 묶음 오른쪽에 놓는다. */
.book-info.book-info-with-match{
  display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:8px;
}
.book-copy-stack{display:flex;min-width:0;flex:1;flex-direction:column;gap:4px}
.book-copy-stack strong,.book-copy-stack span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.book-match-inline{
  flex:0 0 auto;margin-top:1px;padding:4px 6px;border:1px solid rgba(255,255,255,.08);border-radius:999px;
  background:rgba(255,255,255,.025);color:#cdb27d!important;font-size:8.5px!important;font-weight:800;line-height:1;letter-spacing:-.02em;
}
html[data-theme="light"] .book-match-inline{border-color:rgba(92,71,42,.09);background:rgba(119,85,37,.035);color:#9b702f!important}

/* 추천 rail은 주변 책 크기를 건드리지 않는다. 오직 hover한 책만 강조한다. */
@media (hover:hover) and (pointer:fine){
  .recommendation-section .book-card img{
    transition:transform .34s cubic-bezier(.22,.72,.22,1),box-shadow .28s ease,filter .28s ease,outline-color .2s ease;
  }
  .recommendation-section .book-card:hover img{
    transform:translateY(-7px) scale(1.07)!important;
    box-shadow:0 18px 34px rgba(0,0,0,.38);
    filter:brightness(1.045);
  }
  html[data-theme="light"] .recommendation-section .book-card:hover img{box-shadow:0 18px 34px rgba(70,56,37,.22)}
}

/* TOP10 확대 시 기존 가로 스크롤 rail의 위쪽 clip에 걸리지 않도록
   clip 경계만 위로 올리고 실제 책의 시작 위치는 거의 그대로 유지한다. */
.ranking-section .ranking-rail,
html[data-theme="dark"] .ranking-section .ranking-rail,
html[data-theme="light"] .ranking-section .ranking-rail{
  margin-top:-8px!important;
  padding-top:36px!important;
}
.ranking-section .rank-card{cursor:pointer}
.ranking-section .ranking-rail.is-dragging .rank-card{cursor:grabbing}

/* 모든 책표지 공통 우클릭 메뉴 */
.book-context-menu{
  position:fixed;z-index:13000;width:218px;padding:7px;border:1px solid rgba(255,255,255,.09);border-radius:13px;
  background:rgba(20,22,24,.97);box-shadow:0 20px 52px rgba(0,0,0,.48);backdrop-filter:blur(18px) saturate(1.05);
  opacity:0;transform:translateY(-4px) scale(.985);transform-origin:top left;pointer-events:none;
  transition:opacity .13s ease,transform .13s ease;
}
.book-context-menu.is-open{opacity:1;transform:none;pointer-events:auto}
.book-context-menu button{
  width:100%;min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;border:0;border-radius:9px;
  background:transparent;color:#d2d3d1;font-size:12px;text-align:left;cursor:pointer;
}
.book-context-menu button:hover{background:rgba(255,255,255,.055);color:#f0efe9}
.book-context-menu button small{color:#7d8185;font-size:9px}
.book-context-menu .is-danger{color:#cf8782}
.book-context-menu .is-cancel{margin-top:4px;border-top:1px solid rgba(255,255,255,.06);border-radius:0 0 9px 9px;color:#898d90}
html[data-theme="light"] .book-context-menu{border-color:rgba(75,61,45,.11);background:rgba(249,246,240,.98);box-shadow:0 20px 52px rgba(71,54,34,.18)}
html[data-theme="light"] .book-context-menu button{color:#4d4841}
html[data-theme="light"] .book-context-menu button:hover{background:rgba(70,55,38,.055);color:#211f1b}
html[data-theme="light"] .book-context-menu .is-danger{color:#a6534d}

/* ================================================================
   runtime-cut-6 - 이어읽기 + host-side legacy backdrop
   ================================================================ */
.continue-reading-card{
  width:100%;min-width:0;min-height:138px;display:grid;grid-template-columns:68px minmax(0,1fr) 12px;align-items:center;gap:11px;
  margin:0 0 9px;padding:12px 10px 12px 12px;border:1px solid rgba(226,190,123,.10);border-radius:13px;
  background:rgba(255,255,255,.018);color:#d8d7d2;text-align:left;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.continue-reading-card[hidden]{display:none!important}
.continue-reading-card:hover{background:rgba(226,190,123,.055);border-color:rgba(226,190,123,.22);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.continue-reading-cover{display:block;width:68px;height:102px;object-fit:cover;border-radius:5px;background:#181a1b;box-shadow:0 5px 15px rgba(0,0,0,.30)}
.continue-reading-copy{display:flex;min-width:0;flex-direction:column;justify-content:center}
.continue-reading-copy small{margin-bottom:6px;color:#a98d5d;font-size:9px;font-weight:750;letter-spacing:.045em}
.continue-reading-copy strong{overflow:hidden;color:#d8d7d2;font-size:13px;font-weight:750;line-height:1.28;text-overflow:ellipsis;white-space:nowrap}
.continue-reading-author{display:block;overflow:hidden;margin-top:3px;color:#74787b;font-size:9.5px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.continue-reading-progress{height:4px;margin:11px 0 6px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.07)}
.continue-reading-progress i{display:block;width:0;height:100%;border-radius:inherit;background:#d5b472;transition:width .22s ease}
.continue-reading-copy em{color:#85898b;font-size:9px;font-style:normal}
.continue-reading-arrow{color:#696d70;font-size:18px;line-height:1;transition:color .18s ease,transform .18s ease}
.continue-reading-card:hover .continue-reading-arrow{color:#d8b778;transform:translateX(1px)}
html[data-theme="light"] .continue-reading-card{border-color:rgba(125,93,48,.10);background:rgba(72,61,48,.025);color:#38342f}
html[data-theme="light"] .continue-reading-card:hover{border-color:rgba(145,105,50,.22);background:rgba(145,105,50,.06);box-shadow:0 8px 22px rgba(76,58,34,.08)}
html[data-theme="light"] .continue-reading-copy strong{color:#38342f}
html[data-theme="light"] .continue-reading-author{color:#91897f}
html[data-theme="light"] .continue-reading-progress{background:rgba(63,52,39,.08)}
html[data-theme="light"] .continue-reading-copy em{color:#8e877e}

/* 전면 배경 dim/blur는 background_effect_controller.js의 단일 host 레이어가 담당한다. */

@media (max-height:760px){
  .continue-reading-card{min-height:112px;grid-template-columns:54px minmax(0,1fr) 10px;padding:9px 8px 9px 9px}.continue-reading-cover{width:54px;height:81px}
  .continue-reading-copy small{margin-bottom:4px}.continue-reading-progress{margin-top:7px}
}
@media (max-width:760px){
  .continue-reading-card{display:none!important}
}

/* Reader/Settings surface는 투명한 기능 레이어로만 유지한다. */
.legacy-reader-layer{
  background:transparent!important;
  isolation:isolate;
}
.legacy-reader-layer iframe{
  z-index:2!important;
  background:transparent!important;
  color-scheme:normal;
}
.legacy-reader-loading{
  z-index:4!important;
  background:transparent!important;
}
html[data-theme="light"] .legacy-reader-loading{
  background:transparent!important;
}

/* =========================================================
   runtime-cut-16 - fully suspended parent composition
   Reader가 열려 있는 동안 홈은 정적인 배경으로만 남는다. 긴 app-shell 전체에
   filter를 걸면 전체 문서 크기의 offscreen GPU surface가 생길 수 있으므로,
   홈 blur 합성은 제거하고 viewport dim overlay만 사용한다.
   ========================================================= */
body.is-reader-open .app-shell{
  pointer-events:none;
  filter:none!important;
  transform:none!important;
  will-change:auto!important;
  contain:paint;
}
body.is-home-runtime-paused .app-shell,
body.is-home-runtime-paused .app-shell *{
  animation-play-state:paused!important;
  will-change:auto!important;
}
/* WebGL/Canvas 결과는 홈에서는 필요하지만 Reader 뒤에서는 이미 로드된 2D 표지면
   충분하다. canvas compositor surface를 제외해 Reader 페이지 turn에 GPU를 양보한다. */
body.is-home-runtime-paused .hero-book-canvas{
  display:none!important;
}
body.is-home-runtime-paused .hero-cover{
  opacity:1!important;
  visibility:visible!important;
}
/* 18065: TOP 10은 이미 렌더된 정적 2D canvas에 3D 책 형태가 담겨 있다.
   Reader 뒤에서 이 canvas를 평면 cover로 교체해도 실질적인 WebGL 실행 절감은 없고
   책 두께/원근만 사라지므로, runtime pause 중에도 완성된 3D 형태를 그대로 유지한다. */
body.is-home-runtime-paused .rank-hero3d-preview.is-rank-hero-ready .rank-hero3d-canvas{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
}
body.is-home-runtime-paused .rank-hero3d-preview.is-rank-hero-ready > img{
  opacity:0!important;
  visibility:hidden!important;
}
/* =========================================================
   18041 - 사이드바 이어읽기 강조 + TEST LOGIN 상단 이동
   ========================================================= */
.sidebar-bottom{
  padding-top:14px;
}
.continue-reading-card{
  min-height:176px;
  grid-template-columns:82px minmax(0,1fr) 10px;
  gap:12px;
  margin:0 0 14px;
  padding:15px 11px 15px 13px;
  border-radius:16px;
}
.continue-reading-cover{
  width:82px;
  height:123px;
  border-radius:6px;
}
.continue-reading-copy small{
  margin-bottom:8px;
  font-size:9.5px;
}
.continue-reading-copy strong{
  font-size:14px;
  line-height:1.35;
}
.continue-reading-author{
  margin-top:5px;
  font-size:10px;
}
.continue-reading-progress{
  margin:14px 0 7px;
}
.continue-reading-copy em{
  font-size:9.5px;
}
.sidebar-bottom .legal{
  margin-top:18px;
}
.sidebar-bottom .legal.links{
  margin-top:9px;
}

/* 개발 전용 토글은 실제 서비스용 사이드바 자리를 차지하지 않는다. */
.test-login-toggle.test-login-toggle-topbar{
  width:auto;
  min-width:112px;
  min-height:36px;
  margin:0;
  padding:6px 10px;
  flex:0 0 auto;
  border-radius:999px;
  background:rgba(224,188,127,.025);
}
.test-login-toggle-topbar .test-login-copy{
  gap:10px;
}
.test-login-toggle-topbar .test-login-copy small{
  font-size:8px;
}
.test-login-toggle-topbar .test-login-copy strong{
  font-size:10px;
}

@media(max-width:1280px){
  .continue-reading-card{min-height:152px;grid-template-columns:68px minmax(0,1fr) 9px;padding:12px 9px 12px 11px}
  .continue-reading-cover{width:68px;height:102px}
  .test-login-toggle.test-login-toggle-topbar{min-width:102px;padding-left:9px;padding-right:9px}
}
@media(max-width:920px){
  .test-login-toggle.test-login-toggle-topbar{min-width:36px;width:36px;padding:0;justify-content:center}
  .test-login-toggle-topbar .test-login-copy{display:none}
}
@media(max-width:820px){
  .sidebar-bottom{padding-top:8px}
}

/* =========================================================
   18042 - 이어읽기 카드 시인성 + 진행률 가독성
   UI 전용 변경: Reader/책갈피/진행률 계산 로직은 변경하지 않는다.
   ========================================================= */
.continue-reading-card{
  min-height:184px;
  grid-template-columns:86px minmax(0,1fr) 10px;
  gap:13px;
  padding:15px 12px 15px 13px;
  border-color:rgba(220,181,108,.24);
  background:rgba(255,255,255,.032);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012),0 8px 26px rgba(0,0,0,.08);
}
.continue-reading-card:hover{
  border-color:rgba(224,188,119,.38);
  background:rgba(226,190,123,.065);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018),0 10px 28px rgba(0,0,0,.16);
}
.continue-reading-cover{
  width:86px;
  height:129px;
  box-shadow:0 6px 18px rgba(0,0,0,.36);
}
.continue-reading-copy small{
  margin-bottom:8px;
  color:#c8a566;
  font-size:11px;
  font-weight:800;
  letter-spacing:.035em;
}
.continue-reading-copy strong{
  color:#e4e2dc;
  font-size:15px;
}
.continue-reading-author{
  font-size:10.5px;
}
.continue-reading-progress{
  height:5px;
  margin:14px 0 8px;
  background:rgba(255,255,255,.085);
}
.continue-reading-copy em{
  color:#9b9d9d;
  font-size:11.5px;
  font-weight:650;
  line-height:1.25;
}
html[data-theme="light"] .continue-reading-card{
  border-color:rgba(141,103,49,.20);
  background:rgba(105,83,52,.042);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20),0 8px 22px rgba(76,58,34,.055);
}
html[data-theme="light"] .continue-reading-card:hover{
  border-color:rgba(145,105,50,.34);
  background:rgba(145,105,50,.075);
}
html[data-theme="light"] .continue-reading-copy small{color:#9b7136}
html[data-theme="light"] .continue-reading-copy em{color:#746d65}

@media(max-width:1280px){
  .continue-reading-card{min-height:158px;grid-template-columns:72px minmax(0,1fr) 9px;gap:10px;padding:12px 9px 12px 11px}
  .continue-reading-cover{width:72px;height:108px}
  .continue-reading-copy small{font-size:10px;margin-bottom:5px}
  .continue-reading-copy strong{font-size:13.5px}
  .continue-reading-author{font-size:9.75px}
  .continue-reading-progress{height:5px;margin:9px 0 7px}
  .continue-reading-copy em{font-size:10.5px}
}



/* ================================================================
   18061 - Book intro handoff stage
   18160: 모든 공식 책 표지 선택에서 JS가 노출한다. 소개창과 실제 책 열기 애니메이션 조건은 분리한다.
   소개 표지와 Reader 첫 표지는 같은 full-reader geometry × entranceScale을 사용한다.
   배경은 stage가 만들지 않고 단일 background effect module을 공유한다.
   ================================================================ */
html.shortbook-book-intro-open,
body.shortbook-book-intro-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
.shortbook-book-intro-stage{
  position:fixed; inset:0; z-index:10020; overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, visibility 0s linear .18s;
}
.shortbook-book-intro-stage[hidden]{display:none!important}
.shortbook-book-intro-stage.is-visible,
.shortbook-book-intro-stage.is-launching{
  opacity:1; visibility:visible; pointer-events:auto;
  transition-delay:0s;
}
/* 18182: 빠른 '바로 읽기'도 상세창 CTA의 동일한 intro handoff를 사용하되
   소개 카드 자체는 노출하지 않는다. Reader paint gate/book opening contract만 공유한다. */
.shortbook-book-intro-stage.is-direct-launch,
.shortbook-book-intro-stage.is-direct-launch.is-launching{
  opacity:0!important; visibility:hidden!important; pointer-events:none!important; transition:none!important;
}
.shortbook-book-intro-backdrop{
  position:absolute; inset:0;
  background:transparent;
}
.shortbook-book-intro-cover,
.shortbook-book-intro-card{
  position:absolute;
  top:var(--book-intro-top);
  width:var(--book-intro-cover-width);
  height:var(--book-intro-cover-height);
  box-sizing:border-box;
}
.shortbook-book-intro-cover{
  left:var(--book-intro-cover-left);
  z-index:4;
  transform:translate3d(0,0,0);
  transition:transform 360ms cubic-bezier(.20,.78,.20,1);
  will-change:transform;
}
.shortbook-book-intro-stage.is-launching .shortbook-book-intro-cover{
  transform:translate3d(var(--book-intro-shift-x),0,0);
}
.shortbook-book-intro-cover-button{
  display:block; width:100%; height:100%; padding:0; margin:0; border:0;
  overflow:hidden; cursor:pointer; background:transparent;
  box-shadow:0 24px 64px rgba(0,0,0,.42);
}
.shortbook-book-intro-cover-button img{
  display:block; width:100%; height:100%; object-fit:contain;
  background:transparent; user-select:none; -webkit-user-drag:none;
}
.shortbook-book-intro-card{
  /* 18183: 상세창은 최종 위치에서 갑자기 나타나지 않는다.
     처음에는 표지와 같은 X 위치에 두어 z-index가 높은 표지 뒤에 완전히 숨기고,
     stage가 보이는 순간 표지 한 장 너비만큼 오른쪽으로 미끄러져 나온다. */
  left:var(--book-intro-cover-left);
  z-index:3;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:clamp(28px,2.35vw,42px);
  border:1px solid rgba(217,174,99,.18);
  border-left:0;
  background:linear-gradient(150deg,rgba(31,33,34,.98),rgba(15,17,18,.98));
  box-shadow:0 24px 64px rgba(0,0,0,.34);
  color:#f0ede7;
  opacity:1; filter:blur(0); transform:translate3d(0,0,0);
  transition:opacity 230ms ease 80ms, filter 260ms ease 60ms, transform 430ms cubic-bezier(.18,.82,.20,1), width 340ms cubic-bezier(.22,1,.36,1);
  will-change:transform;
  overflow:hidden;
}
.shortbook-book-intro-stage.is-visible .shortbook-book-intro-card{
  transform:translate3d(var(--book-intro-shift-x),0,0);
}
/* 18204: 소개/목차는 같은 카드 안에서 유지하되, 데스크톱에서는 목차 패널이
   표지 뒤쪽에서 슬라이드되어 소개창 위를 덮는 오버레이로 열린다. */
.shortbook-book-intro-card.is-panel-transition-fast{
  transition:transform 220ms cubic-bezier(.22,1,.36,1),opacity 140ms ease,filter 160ms ease!important;
}
.shortbook-book-intro-card.is-panel-swapping{
  pointer-events:none!important;
}
.shortbook-book-intro-details-view,
.shortbook-book-intro-toc-view{
  display:flex;flex:1 1 auto;min-height:0;flex-direction:column;
}
.shortbook-book-intro-details-view[hidden],
.shortbook-book-intro-toc-view[hidden]{display:none!important}
@media(min-width:920px){
  .shortbook-book-intro-card{position:absolute;overflow:hidden}
  .shortbook-book-intro-details-view{position:relative;z-index:1;opacity:1;transform:translate3d(0,0,0);filter:blur(0);transition:opacity 160ms ease,transform 260ms cubic-bezier(.22,1,.36,1),filter 180ms ease}
  .shortbook-book-intro-toc-view{
    position:absolute;inset:0;z-index:2;padding:inherit;
    background:linear-gradient(150deg,rgba(31,33,34,.985),rgba(15,17,18,.985));
    opacity:0;pointer-events:none;transform:translate3d(-58px,0,0);
    transition:opacity 180ms ease,transform 280ms cubic-bezier(.22,1,.36,1);
  }
  .shortbook-book-intro-card.is-toc-open .shortbook-book-intro-details-view{
    opacity:.14;pointer-events:none;transform:translate3d(14px,0,0);filter:blur(3px);
  }
  .shortbook-book-intro-card.is-toc-open .shortbook-book-intro-toc-view{
    opacity:1;pointer-events:auto;transform:translate3d(0,0,0);
  }
}
.shortbook-book-intro-stage.is-launching .shortbook-book-intro-card{
  opacity:.05; filter:blur(8px); transform:translate3d(calc(var(--book-intro-shift-x) + 8px),0,0);
  pointer-events:none;
}
/* 18155: 소개창을 실제로 읽을 수 있는 크기로 키우고 정보 사이 여백을 확보한다. */
.shortbook-book-intro-kicker{font-size:11.5px;font-weight:850;letter-spacing:.22em;color:#d5a657;margin-bottom:16px}
.shortbook-book-intro-card h2{margin:0;font-size:clamp(28px,2.15vw,38px);line-height:1.16;letter-spacing:-.035em;color:#fff;word-break:keep-all;overflow-wrap:break-word}
.shortbook-book-intro-author{margin:11px 0 0;color:rgba(239,235,226,.67);font-size:14.5px}
/* 18174: 장르 태그와 예상시간을 한 줄의 compact metadata로 통합한다. */
.shortbook-book-intro-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:24px 0 0;min-width:0}
.shortbook-book-intro-genres{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.shortbook-book-intro-genres span{padding:6px 10px;border-radius:999px;background:rgba(211,160,82,.10);border:1px solid rgba(211,160,82,.18);color:#d9bd8b;font-size:11.5px;font-weight:750}
.shortbook-book-intro-reading-time{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;color:rgba(239,235,226,.66);font-size:12px;line-height:1.2}
.shortbook-book-intro-reading-time[hidden]{display:none!important}
.shortbook-book-intro-reading-time>span{color:#d5a657;font-size:12px}
.shortbook-book-intro-reading-time>strong{font-weight:720;color:rgba(245,241,232,.76)}
.shortbook-book-intro-reactions{display:flex;align-items:center;gap:8px;margin:13px 0 0}
.shortbook-book-intro-reactions button{min-height:36px;padding:0 12px;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.075);border-radius:999px;background:rgba(255,255,255,.035);color:rgba(239,235,226,.68);font:750 12px/1 inherit;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
.shortbook-book-intro-reactions button:hover:not(:disabled){transform:translateY(-1px);background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.13);color:#f4f0e8}
.shortbook-book-intro-reactions button.is-selected{border-color:rgba(215,167,91,.34);background:rgba(211,160,82,.12);color:#efd29d}
.shortbook-book-intro-reactions button:disabled{cursor:default;opacity:.48}
.shortbook-book-intro-reactions button>span{font-size:13px}
.shortbook-book-intro-reactions button>strong{font:inherit}
.shortbook-book-intro-reactions button>em{min-width:12px;color:rgba(239,235,226,.50);font:800 11px/1 inherit;font-style:normal;font-variant-numeric:tabular-nums}
.shortbook-book-intro-reactions button.is-selected>em{color:rgba(248,222,173,.76)}
.shortbook-book-intro-hook{margin:22px 0 0;color:rgba(248,244,235,.90);font-size:15.5px;font-weight:690;line-height:1.68;letter-spacing:-.012em;white-space:normal;overflow:visible}
.shortbook-book-intro-hook[hidden]{display:none!important}
.shortbook-book-intro-toc-button{
  margin-top:auto;min-height:42px;padding:0 14px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid rgba(211,160,82,.18);border-radius:10px;
  background:rgba(211,160,82,.045);color:rgba(235,218,187,.82);
  font:760 12.5px/1 inherit;cursor:pointer;
  transition:background 180ms ease,border-color 180ms ease,color 180ms ease,transform 180ms ease;
}
.shortbook-book-intro-toc-button>span{font-size:16px;color:#d5a657;line-height:1}
.shortbook-book-intro-toc-button>strong{font:inherit}
.shortbook-book-intro-toc-button:hover{background:rgba(211,160,82,.085);border-color:rgba(211,160,82,.30);color:#f0d7a8;transform:translateY(-1px)}
.shortbook-book-toc-topline{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 34px 15px 0}
.shortbook-book-toc-topline>span{color:#a98c58;font-size:10px;font-weight:850;letter-spacing:.18em}
.shortbook-book-toc-back{padding:0;border:0;background:transparent;color:rgba(239,235,226,.62);font:760 12px/1 inherit;cursor:pointer}
.shortbook-book-toc-back:hover{color:#f2d49e}
.shortbook-book-intro-toc-view h2{margin:0;color:#fff;font-size:clamp(25px,1.8vw,33px);line-height:1.18;letter-spacing:-.035em}
.shortbook-book-toc-summary{margin:10px 0 15px;color:rgba(239,235,226,.56);font-size:12px;line-height:1.5}
.shortbook-book-toc-list{flex:1;min-height:0;overflow:auto;padding:1px 6px 4px 0;scrollbar-width:thin;scrollbar-color:rgba(211,160,82,.20) transparent}
.shortbook-book-toc-row{padding:12px 11px;margin:0 0 8px;border:1px solid rgba(255,255,255,.055);border-radius:11px;background:rgba(255,255,255,.018)}
.shortbook-book-toc-row-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0}
.shortbook-book-toc-row-head>span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:22px;padding:0 7px;border-radius:999px;background:rgba(211,160,82,.10);color:#d7ae68;font-size:10.5px;font-weight:850}
.shortbook-book-toc-row-head>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eeeae2;font-size:13px;font-weight:790}
.shortbook-book-toc-row-head>em{color:rgba(239,235,226,.42);font-size:10.5px;font-weight:650;font-style:normal;white-space:nowrap}
.shortbook-book-toc-row-bottom{display:flex;align-items:flex-end;gap:10px;margin:7px 0 0 42px}
.shortbook-book-toc-row p{flex:1;min-width:0;margin:0;color:rgba(239,235,226,.54);font-size:11px;line-height:1.45;word-break:keep-all}
.shortbook-book-toc-read{flex:0 0 auto;min-height:29px;padding:0 10px;border:1px solid rgba(217,173,84,.30);border-radius:8px;background:rgba(217,173,84,.08);color:#e2bd75;font:800 10.5px/1 inherit;cursor:pointer;white-space:nowrap;transition:background 150ms ease,border-color 150ms ease,color 150ms ease,transform 150ms ease}
.shortbook-book-toc-read:hover:not(:disabled){background:rgba(217,173,84,.15);border-color:rgba(239,201,108,.52);color:#f0cf8d;transform:translateY(-1px)}
.shortbook-book-toc-read:active:not(:disabled){transform:translateY(0)}
.shortbook-book-toc-read:disabled{opacity:.34;cursor:not-allowed}
.shortbook-book-toc-loading,.shortbook-book-toc-empty{min-height:190px;display:grid;place-content:center;text-align:center;color:#777b7e;font-size:12px}
.shortbook-book-toc-empty{gap:7px}.shortbook-book-toc-empty strong{color:#c9c6bf;font-size:13px}.shortbook-book-toc-empty span{max-width:290px;line-height:1.55}


@media(max-width:560px){
  .shortbook-book-toc-row-bottom{align-items:stretch;flex-direction:column;margin-left:42px}
  .shortbook-book-toc-read{width:100%;min-height:34px}
}

/* 18164: 소개창의 핵심 CTA는 댓글 버튼보다 한 단계 강하게 보이도록
   크기/대비/깊이를 키운다. Reader 진입 로직에는 관여하지 않는다. */
.shortbook-book-intro-read-button{
  margin-top:auto;min-height:56px;padding:0 20px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid rgba(255,226,171,.52);border-radius:13px;
  background:linear-gradient(135deg,#e4b866 0%,#d4a052 52%,#c98d38 100%);
  color:#1d160e;font:900 16px/1 inherit;letter-spacing:-.015em;
  cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.28),0 0 0 1px rgba(211,160,82,.08),inset 0 1px 0 rgba(255,255,255,.34);
  opacity:1;visibility:visible;position:relative;overflow:hidden;
  transition:transform 150ms ease,filter 150ms ease,box-shadow 150ms ease,border-color 150ms ease,opacity 90ms linear,visibility 0s linear
}
.shortbook-book-intro-read-button::before{
  content:'▶';display:grid;place-items:center;width:27px;height:27px;flex:0 0 27px;
  border-radius:50%;background:rgba(31,23,14,.14);color:#24190d;font-size:10px;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(67,43,18,.10)
}
.shortbook-book-intro-read-button[data-read-mode='resume']::before{content:'↻';font-size:15px;font-weight:900}
.shortbook-book-intro-read-button:hover{
  transform:translateY(-2px);filter:brightness(1.055);border-color:rgba(255,235,195,.74);
  box-shadow:0 16px 38px rgba(0,0,0,.34),0 0 22px rgba(211,160,82,.16),inset 0 1px 0 rgba(255,255,255,.42)
}
.shortbook-book-intro-read-button:active{transform:translateY(0) scale(.985);filter:brightness(.98)}
.shortbook-book-intro-read-button:focus-visible{outline:2px solid rgba(244,201,121,.95);outline-offset:3px}
/* 18061: cover가 소개 카드를 덮는 동안 금색 CTA가 한두 frame 조각처럼 남지 않게
   버튼 자체만 즉시 fade-out한다. 카드 배경은 기존처럼 cover 아래에서 사라진다. */
.shortbook-book-intro-stage.is-launching .shortbook-book-intro-read-button{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity 75ms linear,visibility 0s linear 75ms!important}
.shortbook-book-intro-close{position:absolute;right:12px;top:10px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.52);font-size:22px;line-height:1;cursor:pointer}
.shortbook-book-intro-close:hover{background:rgba(255,255,255,.06);color:#fff}
.shortbook-book-intro-stage.is-launching .shortbook-book-intro-close{pointer-events:none}
/* 표지/카드만 빠르게 넘긴다. 배경 레이어는 handoff 동안 그대로 유지된다. */
.shortbook-book-intro-stage.is-handoff{
  opacity:1!important; visibility:visible!important; pointer-events:none!important; transition:none!important
}
.shortbook-book-intro-stage.is-handoff .shortbook-book-intro-cover,
.shortbook-book-intro-stage.is-handoff .shortbook-book-intro-card{
  opacity:0!important; filter:blur(2px)!important; transition:opacity 55ms linear,filter 70ms ease!important
}


/* 18194 - 상세창 통합 댓글 전환
   댓글 패널이 우측에서 날아오는 대신, 기존 소개 카드가 표지와 함께 살짝 왼쪽으로 이동하면서
   오른쪽으로 2칸 폭까지 자연스럽게 늘어난다. 소개/목차 내용은 먼저 사라지고, 확장된 면 위에
   댓글 내용이 짧게 fade-in 된다. 표지의 반 권 폭 이동은 18186 geometry를 그대로 유지한다. */
.shortbook-book-intro-stage.is-comments-open .shortbook-book-intro-cover{
  transform:translate3d(calc(-1 * var(--book-comments-cover-shift, calc(var(--book-intro-shift-x) / 2))),0,0);
  transition:transform 340ms cubic-bezier(.22,1,.36,1);
}
.shortbook-book-intro-stage.is-comments-open .shortbook-book-intro-card{
  width:calc(var(--book-intro-cover-width) * 2);
  opacity:1;filter:blur(0);pointer-events:none;
  transform:translate3d(calc(var(--book-intro-shift-x) - var(--book-comments-cover-shift, calc(var(--book-intro-shift-x) / 2))),0,0);
  transition:width 340ms cubic-bezier(.22,1,.36,1),transform 340ms cubic-bezier(.22,1,.36,1),opacity 120ms ease,filter 120ms ease;
}
.shortbook-book-intro-details-view,
.shortbook-book-intro-toc-view{
  opacity:1;
  transition:opacity 160ms ease 180ms;
}
.shortbook-book-intro-close{
  opacity:1;
  transition:background .16s ease,color .16s ease,opacity 150ms ease 180ms;
}
/* 18220: 댓글 버튼을 누르는 바로 그 순간 소개/목차 내용은 완전히 숨긴다.
   카드 확장과 댓글 패널 fade/slide 애니메이션은 기존 타이밍을 그대로 유지한다. */
.shortbook-book-intro-stage.is-comments-open .shortbook-book-intro-details-view,
.shortbook-book-intro-stage.is-comments-open .shortbook-book-intro-toc-view,
.shortbook-book-intro-stage.is-comments-open .shortbook-book-intro-close{
  opacity:0!important;
  visibility:hidden!important;
  transition:none!important;
  transition-delay:0s!important;
}

.shortbook-book-intro-stage.is-comments-closing .shortbook-book-intro-cover{
  transition:transform 340ms cubic-bezier(.22,1,.36,1);
}
.shortbook-book-intro-stage.is-comments-closing .shortbook-book-intro-card{
  transition:width 340ms cubic-bezier(.22,1,.36,1),transform 340ms cubic-bezier(.22,1,.36,1),opacity 120ms ease,filter 120ms ease;
}
.shortbook-comments-layer.is-book-intro-comments{
  top:var(--book-comments-top);left:var(--book-comments-left);right:auto;bottom:auto;
  width:var(--book-comments-width);height:var(--book-comments-height);
  opacity:0;visibility:visible;pointer-events:none;
  transform:translate3d(10px,0,0) scale(.992);
  transform-origin:left center;
  will-change:opacity,transform;
  transition:opacity 150ms ease,transform 210ms cubic-bezier(.22,1,.36,1),visibility 0s linear 210ms;
}
.shortbook-comments-layer.is-book-intro-comments.is-visible{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0) scale(1);
  transition:opacity 230ms ease 135ms,transform 300ms cubic-bezier(.22,1,.36,1) 110ms,visibility 0s linear 0s;
}
.shortbook-comments-layer.is-book-intro-comments .shortbook-comments-panel{
  border-radius:0 16px 16px 0;border-right:1px solid rgba(255,255,255,.08);
  box-shadow:18px 24px 64px rgba(0,0,0,.34);
}

/* 18160 - 모바일에서도 책 소개/댓글 진입점을 유지한다.
   모바일은 Reader handoff 애니메이션 없이 세로형 소개 카드로만 표시한다. */
@media(max-width:919px){
  .shortbook-comments-layer.is-book-intro-comments{top:0;left:auto;right:0;bottom:0;width:min(430px,96vw);height:auto;transform:translate3d(24px,0,0)}
  .shortbook-comments-layer.is-book-intro-comments.is-visible{transform:translate3d(0,0,0)}
  .shortbook-book-intro-stage{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
    overflow-x:hidden;
    overflow-y:auto;
    padding:max(18px,env(safe-area-inset-top)) 14px max(24px,env(safe-area-inset-bottom));
    box-sizing:border-box;
  }
  .shortbook-book-intro-stage[hidden]{display:none!important}
  .shortbook-book-intro-backdrop{position:fixed}
  .shortbook-book-intro-cover,
  .shortbook-book-intro-card{
    position:relative;
    top:auto;
    left:auto;
    width:auto;
    height:auto;
  }
  .shortbook-book-intro-cover{
    flex:0 0 auto;
    width:min(44vw,190px);
    aspect-ratio:2/3;
    margin:2px auto 0;
    transform:none!important;
    transition:none!important;
  }
  /* 모바일은 기존 세로형 카드 레이아웃을 유지하고 데스크톱 slide-out을 적용하지 않는다. */
  .shortbook-book-intro-stage.is-visible .shortbook-book-intro-card,
  .shortbook-book-intro-stage.is-launching .shortbook-book-intro-card{
    transform:none!important;
    transition:none!important;
  }
  .shortbook-book-intro-cover-button{border-radius:12px 12px 0 0;box-shadow:0 18px 46px rgba(0,0,0,.38)}
  .shortbook-book-intro-cover-button img{object-fit:cover}
  .shortbook-book-intro-card{
    flex:0 0 auto;
    width:min(100%,560px);
    min-height:0;
    max-height:none;
    margin:0 auto;
    padding:22px 20px 20px;
    border-left:1px solid rgba(217,174,99,.18);
    border-radius:18px;
    overflow:visible;
    box-shadow:0 18px 52px rgba(0,0,0,.34);
  }
  .shortbook-book-intro-kicker{margin-bottom:10px;font-size:10.5px}
  .shortbook-book-intro-card h2{font-size:clamp(25px,8vw,32px)}
  .shortbook-book-intro-author{margin-top:8px;font-size:13px}
  .shortbook-book-intro-meta{margin-top:16px;gap:10px}
  .shortbook-book-intro-genres{gap:6px}
  .shortbook-book-intro-reactions{margin-top:11px;gap:7px}
  .shortbook-book-intro-reactions button{min-height:35px;padding:0 11px;font-size:11.5px}
  .shortbook-book-intro-hook{margin-top:16px;font-size:14.5px;line-height:1.56}
  .shortbook-book-intro-actions{padding-top:18px;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
  .shortbook-book-intro-comments-button{min-height:50px}
  .shortbook-book-intro-read-button{min-height:56px}
  .shortbook-book-intro-stage.is-launching .shortbook-book-intro-cover{transform:none!important}
  .shortbook-book-intro-toc-button{margin-top:16px}
  .shortbook-book-intro-card.is-panel-swapping{transition:none!important}
  .shortbook-book-toc-list{max-height:none;overflow:visible}
  .shortbook-book-intro-toc-view{min-height:340px}
}


@media(max-width:480px){
  .shortbook-book-intro-stage{padding-left:10px;padding-right:10px}
  .shortbook-book-intro-cover{width:min(42vw,168px)}
  .shortbook-book-intro-card{padding:20px 17px 17px}
  .shortbook-book-intro-actions{gap:8px}
  .shortbook-book-intro-comments-button{font-size:13px}
  .shortbook-book-intro-read-button{min-height:54px;font-size:15px}
}

/* 18107 - book comments */
.shortbook-book-intro-actions{margin-top:10px;padding-top:0;display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:10px}
.shortbook-book-intro-read-button{margin-top:0}
.shortbook-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.shortbook-book-intro-comments-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 16px;border:1px solid rgba(211,160,82,.20);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(211,160,82,.055));color:#f0ede7;font:800 14px/1 inherit;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.03);transition:background 220ms ease,border-color 220ms ease,color 220ms ease,transform 320ms cubic-bezier(.22,1,.36,1),box-shadow 220ms ease}
.shortbook-book-intro-comments-button:hover{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(211,160,82,.10));border-color:rgba(211,160,82,.34);box-shadow:0 10px 22px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.05);transform:translate3d(0,-1px,0)}
.shortbook-book-intro-comments-button:active{transform:translate3d(0,0,0)}
.shortbook-book-intro-comments-button>strong{font:780 13px/1 inherit;letter-spacing:-.01em}
.shortbook-book-intro-comments-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:0;overflow:visible;color:#f2d8a4}
.shortbook-book-intro-comments-icon svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 0 6px rgba(211,160,82,.12))}
.shortbook-book-intro-stage.is-launching .shortbook-book-intro-actions{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity 75ms linear,visibility 0s linear 75ms!important}
.shortbook-comments-layer{position:fixed;top:0;right:0;bottom:0;z-index:10060;width:min(460px,92vw);opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(28px,0,0);will-change:transform,opacity;transition:opacity 220ms ease,transform 320ms cubic-bezier(.22,1,.36,1),visibility 0s linear 320ms}
.shortbook-comments-layer[hidden]{display:none!important}
.shortbook-comments-layer.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0);transition-delay:0s}
.shortbook-comments-backdrop{display:none!important}
.shortbook-comments-panel{position:absolute;inset:0;width:100%;max-height:none;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-right:0;border-radius:22px 0 0 22px;background:linear-gradient(160deg,#17191a,#101112 72%);box-shadow:-24px 0 70px rgba(0,0,0,.42);color:#eeeae2}
.shortbook-comments-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px 18px;border-bottom:1px solid rgba(255,255,255,.055)}
.shortbook-comments-head span{display:block;margin-bottom:6px;color:#a18a60;font-size:10.5px;font-weight:850;letter-spacing:.18em}.shortbook-comments-head h2{margin:0;color:#f0ede7;font-size:22px;letter-spacing:-.035em}
.shortbook-comments-close{width:36px;height:36px;border:1px solid rgba(255,255,255,.08);border-radius:50%;background:rgba(255,255,255,.025);color:#a5a7a8;font-size:24px;line-height:1;cursor:pointer}.shortbook-comments-close:hover{color:#fff;background:rgba(255,255,255,.06)}
.shortbook-comments-list{flex:1;min-height:180px;overflow:auto;padding:12px 24px 8px}
.shortbook-comments-empty{min-height:210px;display:grid;place-content:center;text-align:center;gap:7px;color:#777b7e}.shortbook-comments-empty strong{color:#c9c6bf;font-size:14px}.shortbook-comments-empty span{font-size:12px}
.shortbook-comments-empty.is-error{gap:9px}.shortbook-comments-retry{justify-self:center;height:34px;margin-top:5px;padding:0 14px;border:1px solid rgba(211,160,82,.22);border-radius:9px;background:rgba(211,160,82,.08);color:#d8b56f;font:800 12px/1 inherit;cursor:pointer}.shortbook-comments-retry:hover{background:rgba(211,160,82,.14);color:#efca80}.shortbook-comments-retry:disabled{opacity:.55;cursor:default}
.shortbook-comment{display:grid;grid-template-columns:38px minmax(0,1fr);gap:13px;margin:8px 0 10px;padding:15px 14px;border:1px solid rgba(255,255,255,.055);border-radius:14px;background:rgba(255,255,255,.018)}
.shortbook-comment:last-child{margin-bottom:0}.shortbook-comment-avatar{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(210,173,104,.20);border-radius:11px;background:rgba(210,173,104,.07);color:#d8b875;font:800 13.5px/1 Georgia,serif}
.shortbook-comment-main{min-width:0}.shortbook-comment-meta{display:flex;align-items:center;gap:7px;min-height:20px}.shortbook-comment-meta strong{color:#f0eee8;font-size:14.5px;font-weight:800}.shortbook-comment-meta time{margin-left:auto;color:#84888b;font-size:11px}.shortbook-comment-badge{padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.055);color:#a0a4a6;font-size:10.5px;font-weight:760}.shortbook-comment-badge.is-title{color:#d3b56f;background:rgba(204,164,91,.09)}
.shortbook-comment.is-pending{border-color:rgba(211,160,82,.12);background:rgba(211,160,82,.025)}.shortbook-comment-pending{padding:3px 7px;border-radius:999px;background:rgba(211,160,82,.09);color:#c9aa6a;font-size:10.5px;font-weight:800}.shortbook-comment.is-pending .shortbook-comment-body{color:#d4d1ca}
.shortbook-comment-body{margin:9px 0 0;color:#deddd8;font-size:15.5px;font-weight:500;line-height:1.72;letter-spacing:-.008em;white-space:pre-wrap;word-break:break-word}.shortbook-comment.is-deleted .shortbook-comment-body{color:#777b7d;font-style:italic}
.shortbook-comment-actions{display:flex;gap:11px;margin-top:10px}.shortbook-comment-action{padding:0;border:0;background:transparent;color:#8a8e91;font:700 12px/1 inherit;cursor:pointer}.shortbook-comment-action:hover{color:#d2d0ca}.shortbook-comment-action.is-danger:hover{color:#d68b82}.shortbook-comment-action:disabled{opacity:.45;cursor:default}
.shortbook-comment-replies{margin-top:13px;padding-left:14px;border-left:2px solid rgba(209,171,100,.22)}.shortbook-comment-replies .shortbook-comment{grid-template-columns:32px minmax(0,1fr);margin:8px 0 0;padding:13px 12px;border-color:rgba(255,255,255,.04);background:rgba(255,255,255,.012)}.shortbook-comment-replies .shortbook-comment-avatar{width:30px;height:30px;border-radius:9px;font-size:11.5px}
.shortbook-comments-compose{padding:16px 24px 20px;border-top:1px solid rgba(255,255,255,.055);background:rgba(0,0,0,.08)}
/* 18224 - 전체책에 완독 포함 / 완독 탭 중복 배지 제거 / 댓글 작성 텍스트 대비 강화 */
.shortbook-comments-form textarea,.shortbook-comment-inline-form textarea{width:100%;resize:vertical;min-height:74px;max-height:180px;padding:12px 13px;border:1px solid rgba(255,255,255,.11);border-radius:11px;outline:none;background:#17191a;color:#fffaf2;caret-color:#f1c66f;font:650 15px/1.68 inherit;letter-spacing:-.006em;text-shadow:0 0 1px rgba(255,255,255,.08)}.shortbook-comments-form textarea::placeholder,.shortbook-comment-inline-form textarea::placeholder{color:#8f9395;opacity:1}.shortbook-comments-form textarea:focus,.shortbook-comment-inline-form textarea:focus{border-color:rgba(211,160,82,.42);background:#141617;box-shadow:0 0 0 2px rgba(211,160,82,.055)}
.shortbook-comments-form-footer,.shortbook-comment-inline-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}.shortbook-comments-form-footer{justify-content:flex-end}.shortbook-comments-form-footer span{color:#626669;font-size:10.5px}.shortbook-comment-submit{height:34px;padding:0 14px;border:0;border-radius:8px;background:#d3a052;color:#231b12;font:850 11.5px/1 inherit;cursor:pointer}.shortbook-comment-submit.is-small{height:31px;padding:0 12px}
.shortbook-comment-inline-form{margin-top:11px}.shortbook-comment-inline-actions{justify-content:flex-end}.shortbook-comment-inline-actions .shortbook-comment-action{height:31px;padding:0 8px}
.shortbook-comments-login-gate{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;color:#85898b;font-size:12px}.shortbook-comments-login-gate button{height:34px;padding:0 14px;border:1px solid rgba(211,160,82,.18);border-radius:8px;background:rgba(211,160,82,.06);color:#cfad6d;font-weight:800;cursor:pointer}
html[data-theme="light"] .shortbook-comments-panel{background:linear-gradient(160deg,#f5f1e9,#ece7df 76%);border-color:rgba(75,57,35,.12);color:#37322d}html[data-theme="light"] .shortbook-comments-head{border-color:rgba(70,52,31,.08)}html[data-theme="light"] .shortbook-comments-head h2,html[data-theme="light"] .shortbook-comment-meta strong{color:#3c3731}html[data-theme="light"] .shortbook-comment-body{color:#544f49}html[data-theme="light"] .shortbook-comments-compose{border-color:rgba(70,52,31,.08);background:rgba(255,255,255,.22)}html[data-theme="light"] .shortbook-comments-form textarea,html[data-theme="light"] .shortbook-comment-inline-form textarea{background:#fffaf1;color:#403a34;border-color:rgba(70,52,31,.12)}html[data-theme="light"] .shortbook-comment{border-color:rgba(70,52,31,.09);background:rgba(255,255,255,.28)}html[data-theme="light"] .shortbook-book-intro-comments-button{background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(211,160,82,.08));border-color:rgba(75,57,35,.14);color:#3f392f}html[data-theme="light"] .shortbook-book-intro-comments-button:hover{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(211,160,82,.14));border-color:rgba(211,160,82,.34)}html[data-theme="light"] .shortbook-book-intro-comments-icon{color:#be8e42}
@media(max-width:720px){.shortbook-comments-layer{width:min(430px,96vw)}.shortbook-comments-panel{width:100%;max-height:none;border-radius:17px 0 0 17px}.shortbook-comments-head,.shortbook-comments-compose{padding-left:17px;padding-right:17px}.shortbook-comments-list{padding-left:17px;padding-right:17px}.shortbook-comment-meta{flex-wrap:wrap}.shortbook-comment-meta time{margin-left:0;width:100%}}


/* =========================================================
   18065 - bookmark progress badge
   책 진행률 Source of Truth는 책갈피가 있는 카드의 canonical readingProgress.
   카드 우측 하단에 표시하고 클릭/3D 렌더링에는 관여하지 않는다.
   ========================================================= */
.book-cover-shell,
.route-cover-wrap{
  position:relative;
}
.shortbook-bookmark-progress-badge{
  position:absolute;
  right:7px;
  bottom:7px;
  z-index:9;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:31px;
  height:20px;
  padding:0 7px;
  box-sizing:border-box;
  border:1px solid rgba(255,224,150,.28);
  border-radius:999px;
  background:rgba(13,15,17,.76);
  box-shadow:0 3px 10px rgba(0,0,0,.24);
  color:#f2c66f;
  font-size:10px;
  font-weight:800;
  line-height:1;
  letter-spacing:.01em;
  pointer-events:none;
  user-select:none;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.hero-book-webgl > .shortbook-bookmark-progress-badge{
  right:26px;
  bottom:28px;
  z-index:12;
}
.rank-hero3d-preview > .shortbook-bookmark-progress-badge{
  right:15px;
  bottom:13px;
}
.route-cover-wrap > .shortbook-bookmark-progress-badge{
  right:8px;
  bottom:8px;
}
.shortbook-bookmark-progress-badge.is-completed{
  min-width:38px;padding-inline:8px;font-weight:800;letter-spacing:-.02em;
}
html[data-theme="light"] .shortbook-bookmark-progress-badge{
  border-color:rgba(144,103,38,.24);
  background:rgba(255,252,244,.88);
  box-shadow:0 3px 10px rgba(85,63,29,.13);
  color:#9a681e;
}

/* ================================================================
   18168 - My Library tabs: reading state + separate archive button
   ================================================================ */
.library-view-tabs{
  display:flex;
  align-items:center;
  gap:14px;
  margin:4px 0 28px;
  width:max-content;
  max-width:100%;
}
.library-view-primary-tabs{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(255,255,255,.035);
}
.library-view-tabs button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:0 14px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(238,239,241,.62);
  font-size:13px;
  font-weight:650;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.library-view-tabs button span{
  color:rgba(238,239,241,.42);
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.library-view-tabs button:hover{
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.055);
}
.library-view-tabs button.is-selected{
  color:#f5f5f3;
  background:rgba(255,255,255,.11);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 4px 14px rgba(0,0,0,.16);
}
.library-view-tabs button.is-selected span{color:rgba(255,255,255,.62)}
.library-view-tabs button:focus-visible{outline:2px solid rgba(226,191,111,.72);outline-offset:2px}
.library-view-tabs .library-view-archive-tab{
  min-height:44px;
  padding:0 17px;
  border:1px solid rgba(211,160,82,.22);
  background:rgba(211,160,82,.045);
  color:#cdb385;
}
.library-view-tabs .library-view-archive-tab:hover{
  border-color:rgba(211,160,82,.36);
  background:rgba(211,160,82,.09);
  color:#ead2a3;
}
.library-view-tabs .library-view-archive-tab.is-selected{
  border-color:rgba(225,183,105,.42);
  background:rgba(211,160,82,.14);
  color:#f0d8aa;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 5px 16px rgba(0,0,0,.18);
}
html[data-theme="light"] .library-view-primary-tabs{
  border-color:rgba(78,61,38,.12);
  background:rgba(80,61,38,.04);
}
html[data-theme="light"] .library-view-tabs button{color:rgba(56,43,28,.62)}
html[data-theme="light"] .library-view-tabs button span{color:rgba(56,43,28,.42)}
html[data-theme="light"] .library-view-tabs button:hover{color:#3b2e20;background:rgba(80,61,38,.07)}
html[data-theme="light"] .library-view-tabs button.is-selected{
  color:#2f251b;
  background:rgba(80,61,38,.11);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 4px 12px rgba(84,64,38,.08);
}
html[data-theme="light"] .library-view-tabs button.is-selected span{color:rgba(47,37,27,.58)}
html[data-theme="light"] .library-view-tabs .library-view-archive-tab{
  border-color:rgba(154,107,38,.20);background:rgba(169,119,47,.06);color:#8f6329
}
html[data-theme="light"] .library-view-tabs .library-view-archive-tab.is-selected{
  border-color:rgba(143,94,27,.30);background:rgba(164,112,39,.13);color:#684515
}
@media (max-width:640px){
  .library-view-tabs{margin-bottom:22px;gap:10px;overflow-x:auto;scrollbar-width:none}
  .library-view-tabs::-webkit-scrollbar{display:none}
  .library-view-primary-tabs{flex:0 0 auto}
  .library-view-tabs button{min-height:34px;padding:0 12px;font-size:12px;flex:0 0 auto}
  .library-view-tabs .library-view-archive-tab{min-height:42px;padding:0 15px}
}


/* =========================================================
   18071 - Guest / Free / Premium mock access state
   auth/plan Source of Truth는 shared/user_access_state.js.
   data-test-login은 18070 호환용 mirror만 유지한다.
   ========================================================= */
html[data-access-mode="guest"] .test-login-dot{background:#6f7475;box-shadow:0 0 0 4px rgba(111,116,117,.08)}
html[data-access-mode="guest"] .test-login-copy strong{color:#85898c}
html[data-access-mode="free"] .test-login-dot{background:#d8b777;box-shadow:0 0 0 4px rgba(216,183,119,.10)}
html[data-access-mode="free"] .test-login-copy strong{color:#e1c58e}
html[data-access-mode="premium"] .test-login-toggle{border-color:rgba(224,188,127,.40);background:rgba(224,188,127,.085)}
html[data-access-mode="premium"] .test-login-dot{background:#f0ce8a;box-shadow:0 0 0 4px rgba(240,206,138,.16),0 0 14px rgba(240,206,138,.22)}
html[data-access-mode="premium"] .test-login-copy strong{color:#f0ce8a}
html[data-access-mode="premium"] .account-name{color:#e7c681}
html[data-theme="light"][data-access-mode="premium"] .test-login-toggle{border-color:rgba(145,101,37,.28);background:rgba(168,119,47,.08)}
html[data-theme="light"][data-access-mode="premium"] .test-login-copy strong,
html[data-theme="light"][data-access-mode="premium"] .account-name{color:#946723}


/* =========================================================
   18074 - bookmark progress badge emphasis integration
   진행률 배지는 표지와 같은 cover shell 안에서 함께 확대되도록 한다.
   책갈피 진행률 계산/Source of Truth에는 관여하지 않는다.
   ========================================================= */
.shortbook-bookmark-progress-badge{
  right:6px;
  bottom:6px;
  min-width:39px;
  height:26px;
  padding:0 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:850;
  box-shadow:0 3px 11px rgba(0,0,0,.27);
}
.hero-book-webgl > .shortbook-bookmark-progress-badge{
  right:24px;
  bottom:25px;
  min-width:43px;
  height:28px;
  font-size:12.5px;
}
.rank-hero3d-preview > .shortbook-bookmark-progress-badge{
  right:13px;
  bottom:11px;
  min-width:41px;
  height:27px;
  font-size:12px;
}
.route-cover-wrap > .shortbook-bookmark-progress-badge{
  right:7px;
  bottom:7px;
}

/* 일반 추천 카드는 기존 img 단독 확대 대신 cover shell 전체를 확대한다.
   배지와 표지가 같은 transform 좌표계를 사용하므로 hover 중에도 떨어져 보이지 않는다. */
.recommendation-section .book-card > .book-cover-shell{
  transform:translateY(0) scale(1);
  transform-origin:center bottom;
  transition:transform .34s cubic-bezier(.22,.72,.22,1);
  will-change:transform;
}
.recommendation-section .book-card > .book-cover-shell > img{
  transform:none!important;
}
@media (hover:hover) and (pointer:fine){
  .recommendation-section .book-card:hover > .book-cover-shell{
    transform:translateY(-7px) scale(1.07);
  }
  .recommendation-section .book-card:hover > .book-cover-shell > img{
    transform:none!important;
    box-shadow:0 18px 34px rgba(0,0,0,.38);
    filter:brightness(1.045);
  }
  html[data-theme="light"] .recommendation-section .book-card:hover > .book-cover-shell > img{
    box-shadow:0 18px 34px rgba(70,56,37,.22);
  }
}
@media(prefers-reduced-motion:reduce){
  .recommendation-section .book-card > .book-cover-shell{transition:none}
}

/* 18080 - auth dialog polish: larger/stable panel, email first, stricter signup password */
/* =========================================================
   18075 - account authentication dialog
   Auth UI is independent from Reader lifecycle/pagination.
   ========================================================= */
body.is-auth-dialog-open{overflow:hidden}
.auth-dialog[hidden]{display:none!important}
.auth-dialog{
  position:fixed;inset:0;z-index:15000;display:grid;place-items:center;padding:24px;
  background:rgba(2,3,4,.68);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;transition:opacity .18s ease;
}
.auth-dialog.is-open{opacity:1}
.auth-dialog-panel{
  position:relative;box-sizing:border-box;width:min(466px,calc(100vw - 32px));height:660px;overflow-y:auto;padding:35px 36px 28px;
  border:1px solid rgba(255,255,255,.09);border-radius:22px;
  background:linear-gradient(180deg,rgba(28,29,31,.985),rgba(18,19,21,.985));
  box-shadow:0 32px 90px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.025);
  transform:translateY(10px) scale(.985);transition:transform .20s cubic-bezier(.2,.75,.25,1);
}
.auth-dialog.is-open .auth-dialog-panel{transform:translateY(0) scale(1)}
.auth-dialog-close{
  position:absolute;top:15px;right:16px;width:34px;height:34px;border-radius:50%;
  color:#8e9092;background:transparent;font-size:25px;line-height:1;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.auth-dialog-close:hover{background:rgba(255,255,255,.055);color:#f1efea}
.auth-dialog-brand{display:flex;align-items:baseline;gap:8px;margin-bottom:23px;color:#ece8df}
.auth-dialog-brand span{font-size:17px;font-weight:800;letter-spacing:-.04em}
.auth-dialog-brand small{font-size:8px;font-weight:700;letter-spacing:.15em;color:#8d8980}
.auth-mode-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0 0 22px;padding:4px;
  border:1px solid rgba(255,255,255,.065);border-radius:12px;background:rgba(255,255,255,.025);
}
.auth-mode-tab{
  min-height:38px;border-radius:8px;background:transparent;color:#777b7e;font-size:11.5px;font-weight:700;cursor:pointer;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.auth-mode-tab:hover{color:#c7c4bd}
.auth-mode-tab.is-active{background:rgba(224,188,127,.105);color:#e1c184;box-shadow:inset 0 0 0 1px rgba(224,188,127,.18)}
.auth-dialog-panel[data-auth-mode="signup"] .auth-submit-button{background:#e0ba74}
.auth-dialog h2{margin:0 0 23px;color:#f1efea;font-size:26px;font-weight:760;letter-spacing:-.04em}
.auth-google-button,.auth-submit-button{
  width:100%;min-height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;
  cursor:pointer;font-size:13px;font-weight:700;transition:transform .14s ease,background .14s ease,border-color .14s ease,opacity .14s ease;
}
.auth-google-button{border:1px solid rgba(255,255,255,.11);background:#f7f7f5;color:#242424}
.auth-google-button:hover{background:#fff;transform:translateY(-1px)}
.auth-google-mark{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid #d7d7d2;font-weight:800;color:#4285f4;background:#fff}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0 18px;color:#666a6c;font-size:10px}
.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:rgba(255,255,255,.07)}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-password-rule{margin:-3px 2px 0;color:#777a7c;font-size:9.8px;line-height:1.45}
.auth-password-rule[hidden]{display:none!important}
.auth-field{display:flex;flex-direction:column;gap:7px}
.auth-confirm-field[hidden]{display:none!important}
.auth-field>span{padding-left:2px;color:#9b9a96;font-size:10.5px;font-weight:650}
.auth-field input{
  width:100%;height:45px;padding:0 13px;border:1px solid rgba(255,255,255,.085);border-radius:10px;
  outline:none;background:rgba(255,255,255,.035);color:#eeeae3;font-size:13px;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.auth-field input::placeholder{color:#626466}
.auth-field input:focus{border-color:rgba(213,175,108,.52);background:rgba(255,255,255,.045);box-shadow:0 0 0 3px rgba(213,175,108,.07)}
.auth-auto-login{
  display:inline-flex;align-items:center;gap:8px;width:max-content;margin:-1px 0 0 2px;color:#aaa8a2;font-size:11.5px;font-weight:600;cursor:pointer;user-select:none;
}
.auth-auto-login[hidden]{display:none!important}
.auth-auto-login input{position:absolute;opacity:0;pointer-events:none}
.auth-auto-login-box{
  position:relative;width:16px;height:16px;box-sizing:border-box;border:1px solid rgba(255,255,255,.18);border-radius:5px;background:rgba(255,255,255,.04);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.auth-auto-login input:checked + .auth-auto-login-box{border-color:rgba(216,181,116,.65);background:#d6b376;box-shadow:0 0 0 2px rgba(214,179,118,.08)}
.auth-auto-login input:checked + .auth-auto-login-box::after{
  content:"";position:absolute;left:4px;top:1.5px;width:5px;height:8px;border:solid #211b12;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.auth-auto-login:focus-within .auth-auto-login-box{box-shadow:0 0 0 3px rgba(213,175,108,.10)}
.auth-inline-status-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:18px;margin:-1px 2px 0}
.auth-inline-status-row .auth-auto-login{margin:0}
.auth-submit-button{margin-top:5px;border:1px solid rgba(222,189,126,.28);background:#d6b376;color:#211b12}
.auth-submit-button:hover{background:#e1bf82;transform:translateY(-1px)}
.auth-google-button:disabled,.auth-submit-button:disabled,.auth-switch-button:disabled{cursor:default;opacity:.55;transform:none}
.auth-switch-button{display:block;margin:15px auto 0;padding:5px 8px;background:transparent;color:#a89c87;font-size:11.5px;cursor:pointer}
.auth-switch-button:hover{color:#d4b477}
.auth-status{min-width:0;margin-left:auto;padding:0;background:transparent;color:#aaa8a2;font-size:10.5px;font-weight:650;line-height:1.3;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth-status[data-kind="error"]{color:#dc8d84}
.auth-status[data-kind="success"]{color:#9fc19d}
.auth-status.is-shaking{animation:shortbook-auth-status-shake .28s ease-out}
@keyframes shortbook-auth-status-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(1px)}}
@media(prefers-reduced-motion:reduce){.auth-status.is-shaking{animation:none}}
.auth-provider-notice{display:flex;gap:7px;flex-direction:column;margin-top:16px;padding:11px 12px;border:1px solid rgba(224,188,127,.11);border-radius:10px;background:rgba(224,188,127,.035)}
.auth-provider-notice strong{font-size:10px;color:#bda477}
.auth-provider-notice span{font-size:9.5px;line-height:1.5;color:#747574}
.auth-privacy-copy{margin:15px 0 0;text-align:center;color:#626466;font-size:9.5px}
.account-menu-item.is-logout{color:#b7a39c}

html[data-theme="light"] .auth-dialog{background:rgba(69,60,49,.30)}
html[data-theme="light"] .auth-dialog-panel{border-color:rgba(65,54,41,.10);background:linear-gradient(180deg,#fffdfa,#f8f5ef);box-shadow:0 32px 90px rgba(72,55,34,.22),inset 0 1px rgba(255,255,255,.8)}
html[data-theme="light"] .auth-dialog-close{color:#918b82}
html[data-theme="light"] .auth-dialog-close:hover{background:rgba(72,61,47,.06);color:#332f29}
html[data-theme="light"] .auth-dialog-brand{color:#38322b}
html[data-theme="light"] .auth-dialog-brand small{color:#938b80}
html[data-theme="light"] .auth-mode-tabs{border-color:rgba(69,57,42,.09);background:rgba(69,57,42,.025)}
html[data-theme="light"] .auth-mode-tab{color:#8b847b}
html[data-theme="light"] .auth-mode-tab:hover{color:#514b43}
html[data-theme="light"] .auth-mode-tab.is-active{background:rgba(160,119,61,.09);color:#8b632b;box-shadow:inset 0 0 0 1px rgba(143,105,52,.15)}
html[data-theme="light"] .auth-dialog h2{color:#2d2923}
html[data-theme="light"] .auth-divider{color:#a09a91}
html[data-theme="light"] .auth-divider::before,html[data-theme="light"] .auth-divider::after{background:rgba(69,57,42,.10)}
html[data-theme="light"] .auth-field>span{color:#716a62}
html[data-theme="light"] .auth-password-rule{color:#8a837a}
html[data-theme="light"] .auth-field input{border-color:rgba(68,56,41,.12);background:#fff;color:#2d2923}
html[data-theme="light"] .auth-field input:focus{border-color:rgba(157,109,46,.36);box-shadow:0 0 0 3px rgba(157,109,46,.07)}
html[data-theme="light"] .auth-auto-login{color:#746d64}
html[data-theme="light"] .auth-auto-login-box{border-color:rgba(68,56,41,.18);background:rgba(68,56,41,.035)}
html[data-theme="light"] .auth-auto-login input:checked + .auth-auto-login-box{border-color:rgba(157,109,46,.5);background:#d6b376}
html[data-theme="light"] .auth-switch-button{color:#8c6f45}
html[data-theme="light"] .auth-status{background:transparent;color:#665f56}
html[data-theme="light"] .auth-provider-notice{border-color:rgba(143,105,52,.13);background:rgba(160,119,61,.04)}
html[data-theme="light"] .auth-provider-notice span,html[data-theme="light"] .auth-privacy-copy{color:#8b857d}

@media(max-width:560px){
  .auth-dialog{padding:12px}.auth-dialog-panel{width:min(466px,calc(100vw - 24px));height:auto;max-height:calc(100vh - 24px);padding:30px 22px 24px;border-radius:18px}.auth-dialog h2{font-size:23px}
}

/* =========================================================
   18171 - cover LIKE heart
   빈 하트는 표지 hover/focus에서만 보이고, 좋아요 상태는 채운 하트로 유지한다.
   보관함 표시는 오른쪽 하단으로 분리한다.
   ========================================================= */
.shortbook-cover-like-button{
  position:absolute;left:7px;bottom:7px;z-index:14;pointer-events:auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.15);border-radius:999px;
  background:rgba(12,14,16,.78);box-shadow:0 5px 16px rgba(0,0,0,.30);
  color:#f2eee7;cursor:pointer;opacity:0;transform:translateY(8px) scale(.92);
  transition:opacity .17s ease,transform .22s cubic-bezier(.2,.78,.22,1),background .17s ease,color .17s ease,border-color .17s ease;
  user-select:none;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)
}
.shortbook-cover-like-button svg{width:18px;height:18px;fill:transparent;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.shortbook-cover-like-button.is-liked{opacity:1;transform:translateY(0) scale(1);color:#e66f7a;border-color:rgba(230,111,122,.38);background:rgba(34,18,21,.84)}
.shortbook-cover-like-button.is-liked svg{fill:currentColor;stroke:currentColor}
.shortbook-cover-like-button:focus-visible{opacity:1;transform:translateY(0) scale(1);outline:2px solid rgba(236,190,112,.92);outline-offset:2px}
.hero-book-webgl > .shortbook-cover-like-button{left:23px;bottom:25px;width:35px;height:35px}
.rank-hero3d-preview > .shortbook-cover-like-button{left:12px;bottom:11px}
.route-cover-wrap > .shortbook-cover-like-button{left:8px;bottom:8px}
.route-cover-wrap:has(> .route-book-badge) > .shortbook-cover-like-button{bottom:40px}
html[data-theme="light"] .shortbook-cover-like-button{border-color:rgba(116,83,51,.16);background:rgba(255,252,246,.90);box-shadow:0 5px 14px rgba(85,63,29,.14);color:#6f6963}
html[data-theme="light"] .shortbook-cover-like-button.is-liked{color:#cc6673;border-color:rgba(204,102,115,.28);background:rgba(255,247,247,.94)}
@media (hover:hover) and (pointer:fine){
  .recommendation-section .book-card:hover > .book-cover-shell > .shortbook-cover-like-button,
  .ranking-section .rank-card:hover .rank-hero3d-preview > .shortbook-cover-like-button,
  .route-cover-button:hover .route-cover-wrap > .shortbook-cover-like-button,
  .route-cover-button:focus-visible .route-cover-wrap > .shortbook-cover-like-button,
  .hero-book-webgl:hover > .shortbook-cover-like-button{opacity:1;transform:translateY(0) scale(1)}
}
@media (hover:none){.shortbook-cover-like-button{opacity:.82;transform:translateY(0) scale(.96)}}
@media(prefers-reduced-motion:reduce){.shortbook-cover-like-button{transform:none;transition:opacity .12s linear}}

/* =========================================================
   18168 - archive indicator (internal wishlist Source of Truth is retained).
   사용자 용어는 보관함으로 통일하고 좋아요와 분리한다.
   좋아요와 겹치지 않도록 표지 오른쪽 하단에 비클릭 보관함 상태를 표시한다.
   ========================================================= */
.shortbook-wishlist-heart-indicator{
  position:absolute;
  right:7px;
  bottom:7px;
  z-index:10;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:31px;
  height:31px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(12,14,16,.74);
  box-shadow:0 5px 14px rgba(0,0,0,.28);
  color:#d8b56f;
  font-family:inherit;
  font-size:17px;
  font-weight:800;
  line-height:1;
  opacity:0;
  transform:translateY(11px) scale(.92);
  transition:opacity .2s ease,transform .3s cubic-bezier(.2,.78,.22,1),background .2s ease;
  pointer-events:none;
  user-select:none;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  will-change:transform,opacity;
}
.shortbook-wishlist-heart-indicator svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.hero-book-webgl > .shortbook-wishlist-heart-indicator{
  right:23px;
  bottom:25px;
  width:34px;
  height:34px;
  font-size:19px;
}
.rank-hero3d-preview > .shortbook-wishlist-heart-indicator{
  right:12px;
  bottom:11px;
}
.route-cover-wrap > .shortbook-wishlist-heart-indicator{
  right:8px;
  bottom:8px;
}
.route-cover-wrap:has(> .route-book-badge) > .shortbook-wishlist-heart-indicator{
  bottom:40px;
}
html[data-theme="light"] .shortbook-wishlist-heart-indicator{
  border-color:rgba(116,83,51,.16);
  background:rgba(255,252,246,.86);
  box-shadow:0 5px 14px rgba(85,63,29,.14);
  color:#a98043;
}
@media (hover:hover) and (pointer:fine){
  .recommendation-section .book-card:hover > .book-cover-shell > .shortbook-wishlist-heart-indicator,
  .ranking-section .rank-card:hover .rank-hero3d-preview > .shortbook-wishlist-heart-indicator,
  .route-cover-button:hover .route-cover-wrap > .shortbook-wishlist-heart-indicator,
  .route-cover-button:focus-visible .route-cover-wrap > .shortbook-wishlist-heart-indicator,
  .hero-book-webgl:hover > .shortbook-wishlist-heart-indicator{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
@media(prefers-reduced-motion:reduce){
  .shortbook-wishlist-heart-indicator{
    transform:none;
    transition:opacity .12s linear;
  }
}

/* =========================================================
   18082 - auth layout balance + nickname profile foundation
   ========================================================= */
.auth-dialog-panel{
  height:700px;
  overflow:hidden;
}
.auth-google-section[hidden],
.auth-dialog-panel[data-auth-mode="signup"] .auth-google-section{
  display:none!important;
}
.auth-password-error{
  margin:-4px 2px 0;
  color:#e07d78;
  font-size:9.8px;
  line-height:1.45;
  letter-spacing:-.01em;
}
.auth-password-error[hidden]{display:none!important}
.auth-field input[aria-invalid="true"]{
  border-color:rgba(216,104,96,.62);
  box-shadow:0 0 0 3px rgba(181,76,67,.075);
}
.account-menu-item[hidden]{display:none!important}

body.is-nickname-dialog-open{overflow:hidden}
.nickname-dialog[hidden]{display:none!important}
.nickname-dialog{
  position:fixed;inset:0;z-index:15020;display:grid;place-items:center;padding:24px;
  background:rgba(2,3,4,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;transition:opacity .16s ease;
}
.nickname-dialog.is-open{opacity:1}
.nickname-dialog-panel{
  position:relative;box-sizing:border-box;width:min(410px,calc(100vw - 32px));padding:31px 31px 27px;
  border:1px solid rgba(255,255,255,.09);border-radius:20px;
  background:linear-gradient(180deg,rgba(28,29,31,.99),rgba(18,19,21,.99));
  box-shadow:0 28px 80px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.025);
  transform:translateY(8px) scale(.988);transition:transform .18s cubic-bezier(.2,.75,.25,1);
}
.nickname-dialog.is-open .nickname-dialog-panel{transform:translateY(0) scale(1)}
.nickname-dialog-close{
  position:absolute;top:13px;right:14px;width:33px;height:33px;border:0;border-radius:50%;
  background:transparent;color:#898c8f;font-size:23px;line-height:1;cursor:pointer;
}
.nickname-dialog-close:hover{background:rgba(255,255,255,.055);color:#f1efea}
.nickname-dialog h2{margin:0 0 8px;color:#f1efea;font-size:23px;font-weight:760;letter-spacing:-.04em}
.nickname-dialog-copy{margin:0 0 22px;color:#888b8d;font-size:11.5px;line-height:1.55}
.nickname-field{display:flex;flex-direction:column;gap:7px}
.nickname-field>span{padding-left:2px;color:#9b9a96;font-size:10.5px;font-weight:650}
.nickname-field input{
  box-sizing:border-box;width:100%;height:46px;padding:0 13px;border:1px solid rgba(255,255,255,.09);border-radius:10px;
  outline:none;background:rgba(255,255,255,.035);color:#eeeae3;font-size:13px;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.nickname-field input:focus{border-color:rgba(213,175,108,.52);background:rgba(255,255,255,.045);box-shadow:0 0 0 3px rgba(213,175,108,.07)}
.nickname-fallback-copy{margin:8px 2px 0;color:#66696b;font-size:9.5px;line-height:1.45}
.nickname-dialog-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:9px;margin-top:21px}
.nickname-secondary-button,.nickname-primary-button{
  min-height:44px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;
}
.nickname-secondary-button{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:#a9aaab}
.nickname-primary-button{border:1px solid rgba(222,189,126,.28);background:#d6b376;color:#211b12}
.nickname-secondary-button:hover{background:rgba(255,255,255,.055);color:#ddd}
.nickname-primary-button:hover{background:#e1bf82}
.nickname-status{margin:11px 0 0;padding:9px 10px;border-radius:8px;background:rgba(181,76,67,.09);color:#d89a92;font-size:10.5px;line-height:1.45}
.nickname-status[hidden]{display:none!important}

html[data-theme="light"] .auth-password-error{color:#bd5e58}
html[data-theme="light"] .nickname-dialog{background:rgba(69,60,49,.30)}
html[data-theme="light"] .nickname-dialog-panel{border-color:rgba(65,54,41,.10);background:linear-gradient(180deg,#fffdfa,#f8f5ef);box-shadow:0 28px 80px rgba(72,55,34,.22),inset 0 1px rgba(255,255,255,.8)}
html[data-theme="light"] .nickname-dialog h2{color:#2d2923}
html[data-theme="light"] .nickname-dialog-copy{color:#817a71}
html[data-theme="light"] .nickname-field>span{color:#716a62}
html[data-theme="light"] .nickname-field input{border-color:rgba(68,56,41,.12);background:#fff;color:#2d2923}
html[data-theme="light"] .nickname-fallback-copy{color:#938c83}
html[data-theme="light"] .nickname-secondary-button{border-color:rgba(68,56,41,.10);background:rgba(68,56,41,.035);color:#766f66}

@media(max-width:560px){
  .auth-dialog-panel{height:auto;min-height:0;max-height:none;overflow:hidden}
  .nickname-dialog{padding:12px}
  .nickname-dialog-panel{width:min(410px,calc(100vw - 24px));padding:28px 21px 23px}
}

/* =========================================================
   18098 - Reading records
   Active Reading Time + existing card records projection only.
   ========================================================= */
.reading-record-summary{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 24px;
}
.reading-record-summary>div{
  min-width:0;padding:17px 18px 16px;border:1px solid rgba(255,255,255,.06);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012));
}
.reading-record-summary span{display:block;margin-bottom:7px;color:#73777b;font-size:10.5px;font-weight:700}
.reading-record-summary strong{display:block;overflow:hidden;color:#e4e2dc;font-size:20px;font-weight:780;letter-spacing:-.035em;text-overflow:ellipsis;white-space:nowrap}
.reading-calendar-panel{
  margin-bottom:34px;padding:22px 24px 24px;border:1px solid rgba(255,255,255,.055);border-radius:18px;background:rgba(255,255,255,.014);
}
.reading-calendar-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:19px}
.reading-calendar-head>div:first-child{display:flex;align-items:baseline;gap:11px;min-width:0}
.reading-calendar-head .route-kicker{margin:0 4px 0 0}
.reading-calendar-head strong{color:#dddcd7;font-size:17px;letter-spacing:-.025em}
.reading-calendar-head small{color:#73777b;font-size:10.5px}
.reading-calendar-nav{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.reading-calendar-nav button{
  min-width:31px;height:31px;padding:0 9px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(255,255,255,.025);color:#85898d;font-size:12px;cursor:pointer;
}
.reading-calendar-nav button:first-child,.reading-calendar-nav button:last-child{font-size:20px;line-height:1}
.reading-calendar-nav button:hover{border-color:rgba(219,183,112,.22);background:rgba(219,183,112,.07);color:#e1c17f}
.reading-calendar-weekdays,.reading-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.reading-calendar-weekdays{margin-bottom:6px}
.reading-calendar-weekdays span{padding:0 0 3px;text-align:center;color:#5f6468;font-size:9px;font-weight:750}
.reading-calendar-day{
  position:relative;min-height:62px;padding:8px 8px 7px;border:1px solid rgba(255,255,255,.04);border-radius:9px;background:rgba(255,255,255,.012);overflow:hidden;
}
.reading-calendar-day.is-empty{visibility:hidden}
.reading-calendar-day>span{position:relative;z-index:1;color:#84888b;font-size:10px;font-weight:700}
.reading-calendar-day>small{position:absolute;right:7px;bottom:7px;z-index:1;color:#9d9587;font-size:8.5px;font-weight:700;white-space:nowrap}
.reading-calendar-day[data-level="1"]{background:rgba(185,143,71,.07);border-color:rgba(192,149,75,.08)}
.reading-calendar-day[data-level="2"]{background:rgba(190,145,71,.12);border-color:rgba(198,154,79,.11)}
.reading-calendar-day[data-level="3"]{background:rgba(197,149,70,.18);border-color:rgba(205,159,82,.16)}
.reading-calendar-day[data-level="4"]{background:rgba(207,158,73,.27);border-color:rgba(218,174,92,.23)}
.reading-calendar-day[data-level]:not([data-level="0"])>span{color:#d3bc91}
.reading-calendar-day.is-today{box-shadow:inset 0 0 0 1px rgba(231,197,126,.55)}
.reading-record-list-section{min-width:0}
.reading-record-list{display:flex;flex-direction:column;gap:9px}
.reading-record-book{
  display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:15px;align-items:center;padding:12px 14px 12px 12px;
  border:1px solid rgba(255,255,255,.05);border-radius:14px;background:rgba(255,255,255,.012);
}
.reading-record-cover{
  position:relative;width:58px;aspect-ratio:2/3;overflow:hidden;padding:0;border:0;border-radius:4px;background:#141618;color:#777b7f;font-size:8px;cursor:pointer;box-shadow:0 7px 15px rgba(0,0,0,.24);
}
.reading-record-cover img{display:block;width:100%;height:100%;object-fit:cover}
.reading-record-cover span{display:grid;place-items:center;position:absolute;inset:0}
.reading-record-main{min-width:0}
.reading-record-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.reading-record-heading>div{display:flex;align-items:baseline;gap:9px;min-width:0}
.reading-record-heading strong{overflow:hidden;color:#dfded9;font-size:13.5px;text-overflow:ellipsis;white-space:nowrap}
.reading-record-heading span{overflow:hidden;color:#696e72;font-size:9.5px;text-overflow:ellipsis;white-space:nowrap}
.reading-record-heading b{flex:0 0 auto;color:#d3b778;font-size:13px;font-weight:780}
.reading-record-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.reading-record-meta span{padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.025);color:#777b7f;font-size:8.5px;font-weight:650}
.reading-record-meta .reading-record-progress{color:#ad9568;background:rgba(192,151,81,.07)}
.reading-record-meta .reading-record-complete{color:#9eb097;background:rgba(115,153,107,.07)}
.reading-record-meta .reading-record-rating{color:#cfb16f;background:rgba(207,169,94,.07)}
.reading-record-thought{display:-webkit-box;overflow:hidden;margin:7px 0 0;color:#7d8184;font-size:10.5px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.reading-record-read{
  min-width:72px;height:34px;padding:0 11px;border:1px solid rgba(219,182,111,.15);border-radius:9px;background:rgba(219,182,111,.055);color:#c7ab74;font-size:10px;font-weight:750;cursor:pointer;
}
.reading-record-read:hover{border-color:rgba(219,182,111,.26);background:rgba(219,182,111,.10);color:#e0c185}
html[data-theme="light"] .reading-record-summary>div,html[data-theme="light"] .reading-calendar-panel,html[data-theme="light"] .reading-record-book{border-color:rgba(64,53,40,.07);background:rgba(255,255,255,.30)}
html[data-theme="light"] .reading-record-summary span,html[data-theme="light"] .reading-calendar-head small{color:#8b847b}
html[data-theme="light"] .reading-record-summary strong,html[data-theme="light"] .reading-calendar-head strong,html[data-theme="light"] .reading-record-heading strong{color:#38332d}
html[data-theme="light"] .reading-calendar-nav button{border-color:rgba(65,53,40,.08);background:rgba(255,255,255,.44);color:#777067}
html[data-theme="light"] .reading-calendar-weekdays span{color:#9b948a}
html[data-theme="light"] .reading-calendar-day{border-color:rgba(64,53,40,.055);background:rgba(101,79,50,.025)}
html[data-theme="light"] .reading-calendar-day[data-level="1"]{background:rgba(176,127,54,.06)}
html[data-theme="light"] .reading-calendar-day[data-level="2"]{background:rgba(176,127,54,.10)}
html[data-theme="light"] .reading-calendar-day[data-level="3"]{background:rgba(176,127,54,.15)}
html[data-theme="light"] .reading-calendar-day[data-level="4"]{background:rgba(176,127,54,.22)}
html[data-theme="light"] .reading-calendar-day[data-level]:not([data-level="0"])>span{color:#805a25}
html[data-theme="light"] .reading-record-heading span,html[data-theme="light"] .reading-record-meta span,html[data-theme="light"] .reading-record-thought{color:#817a72}
html[data-theme="light"] .reading-record-cover{background:#ece7df;box-shadow:0 7px 15px rgba(72,56,37,.12)}
@media(max-width:1100px){.reading-record-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){
  .reading-record-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .reading-calendar-panel{padding:18px 14px}
  .reading-calendar-head{align-items:flex-start;flex-direction:column}
  .reading-calendar-head>div:first-child{flex-wrap:wrap}
  .reading-calendar-day{min-height:50px;padding:6px}
  .reading-calendar-day>small{display:none}
  .reading-record-book{grid-template-columns:50px minmax(0,1fr);gap:11px}
  .reading-record-cover{width:50px}
  .reading-record-heading{align-items:flex-start;flex-direction:column;gap:4px}
  .reading-record-heading>div{align-items:flex-start;flex-direction:column;gap:2px}
  .reading-record-read{grid-column:2;width:max-content;min-width:68px;height:31px}
}


/* =========================================================
   18099 - Cat XP local mock ledger UI
   18101에서 확정된 XP->Lv 정책과 진행률 표시를 이어서 적용.
   ========================================================= */
.cat-growth-panel{
  display:grid;gap:14px;margin:0 0 28px;padding:20px 22px;border:1px solid rgba(214,177,103,.10);border-radius:17px;
  background:linear-gradient(135deg,rgba(202,164,93,.055),rgba(255,255,255,.012) 58%,rgba(255,255,255,.006));
}
.cat-growth-main{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.cat-growth-main>div{display:flex;align-items:baseline;gap:10px;min-width:0}
.cat-growth-main .route-kicker{margin:0 3px 0 0}
.cat-growth-main strong{color:#e1dfda;font-size:17px;letter-spacing:-.025em}
.cat-growth-main small{color:#777b7f;font-size:10.5px}
.cat-growth-main>b{flex:0 0 auto;color:#d6b56f;font-size:22px;font-weight:820;letter-spacing:-.035em}
.cat-growth-breakdown{display:flex;gap:7px;flex-wrap:wrap}
.cat-growth-breakdown>span{padding:7px 10px;border:1px solid rgba(255,255,255,.05);border-radius:999px;background:rgba(255,255,255,.018);color:#85898c;font-size:10px;font-weight:650}
.cat-growth-breakdown b{margin-left:4px;color:#c9b17d;font-weight:760}
.cat-growth-note{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:12px;border-top:1px solid rgba(255,255,255,.045)}
.cat-growth-note>span{color:#85898c;font-size:10.5px;line-height:1.55}
.cat-growth-note>small{flex:0 0 auto;color:#6f7376;font-size:9.5px}
html[data-theme="light"] .cat-growth-panel{border-color:rgba(130,96,42,.10);background:linear-gradient(135deg,rgba(177,127,51,.07),rgba(255,255,255,.35) 62%)}
html[data-theme="light"] .cat-growth-main strong{color:#3a352f}
html[data-theme="light"] .cat-growth-main small,html[data-theme="light"] .cat-growth-note>span,html[data-theme="light"] .cat-growth-note>small{color:#827b72}
html[data-theme="light"] .cat-growth-breakdown>span{border-color:rgba(72,55,35,.06);background:rgba(255,255,255,.34);color:#80786f}
@media(max-width:720px){
  .cat-growth-panel{padding:17px 15px}
  .cat-growth-main{align-items:flex-start;flex-direction:column;gap:9px}
  .cat-growth-main>div{align-items:flex-start;flex-direction:column;gap:3px}
  .cat-growth-note{align-items:flex-start;flex-direction:column;gap:6px}
}


/* =========================================================
   18100 - profile overview
   Read-only projection of nickname / XP / reading records.
   ========================================================= */
.profile-overview{display:flex;flex-direction:column;gap:16px;max-width:1040px}
.profile-identity-card{display:grid;grid-template-columns:82px minmax(0,1fr) auto;align-items:center;gap:20px;padding:24px;border:1px solid rgba(255,255,255,.065);border-radius:20px;background:linear-gradient(135deg,rgba(218,176,101,.055),rgba(255,255,255,.018) 48%,rgba(255,255,255,.012));box-shadow:inset 0 1px rgba(255,255,255,.018)}
.profile-avatar{display:grid;place-items:center;width:82px;height:82px;border:1px solid rgba(221,185,116,.20);border-radius:26px;background:linear-gradient(145deg,#5e574b,#2b2d2b);box-shadow:0 16px 34px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.06);color:#e2c487;font-family:Georgia,"Noto Serif KR",serif;font-size:31px;font-weight:800}
.profile-identity-copy{min-width:0}.profile-identity-copy .route-kicker{margin-bottom:6px}
.profile-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.profile-name-row h2{margin:0;color:#ece9e2;font-size:28px;font-weight:780;letter-spacing:-.045em}
.profile-plan-chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1px solid rgba(214,178,109,.18);border-radius:999px;background:rgba(214,178,109,.07);color:#c9aa70;font-size:9.5px;font-weight:800;letter-spacing:.04em}
.profile-edit-button{align-self:center;min-width:104px;height:38px;padding:0 14px;border:1px solid rgba(220,183,112,.18);border-radius:10px;background:rgba(220,183,112,.07);color:#d5b678;font-size:10.5px;font-weight:750;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.profile-edit-button:hover{border-color:rgba(220,183,112,.30);background:rgba(220,183,112,.12);transform:translateY(-1px)}
.profile-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.profile-stat-grid>div{padding:17px 18px;border:1px solid rgba(255,255,255,.055);border-radius:14px;background:rgba(255,255,255,.018)}
.profile-stat-grid span{display:block;margin-bottom:6px;color:#74787b;font-size:9.5px;font-weight:700}.profile-stat-grid strong{display:block;overflow:hidden;color:#dfddd7;font-size:17px;font-weight:790;letter-spacing:-.03em;text-overflow:ellipsis;white-space:nowrap}
.profile-growth-card{padding:20px 22px;border:1px solid rgba(202,160,84,.10);border-radius:17px;background:linear-gradient(135deg,rgba(194,145,68,.055),rgba(255,255,255,.015) 64%)}
.profile-growth-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.profile-growth-head>div:first-child{display:flex;align-items:baseline;gap:9px}.profile-growth-head .route-kicker{margin:0}.profile-growth-head strong{color:#dfddd7;font-size:16px}
.profile-level-badge{display:flex;align-items:baseline;gap:10px}.profile-level-badge b{color:#d7b774;font-size:18px;font-weight:820}.profile-level-badge span{color:#898c8e;font-size:10px;font-weight:650}
.profile-growth-xp{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:13px 14px;border:1px solid rgba(255,255,255,.045);border-radius:11px;background:rgba(255,255,255,.016)}.profile-growth-xp span{color:#7a7e81;font-size:10px}.profile-growth-xp b{color:#d3b471;font-size:13px}
.profile-growth-card p{margin:11px 2px 0;color:#717579;font-size:10.5px;line-height:1.6}
.profile-recent-section{min-width:0}.profile-recent-list{display:flex;flex-direction:column;gap:8px}.profile-recent-book{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 12px;border:1px solid rgba(255,255,255,.05);border-radius:13px;background:rgba(255,255,255,.014)}
.profile-recent-cover{position:relative;width:46px;aspect-ratio:2/3;overflow:hidden;border-radius:5px;background:#282a2b;box-shadow:0 7px 14px rgba(0,0,0,.25);cursor:pointer}.profile-recent-cover img{display:block;width:100%;height:100%;object-fit:cover}.profile-recent-cover>span{display:grid;place-items:center;position:absolute;inset:0;color:#777;font-size:7px}
.profile-recent-book>div{min-width:0}.profile-recent-book strong,.profile-recent-book small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-recent-book strong{color:#dcdad5;font-size:12.5px}.profile-recent-book small{margin-top:2px;color:#696d70;font-size:9px}
.profile-recent-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}.profile-recent-meta b{color:#cbae73;font-size:10px}.profile-recent-meta span{padding:2px 5px;border-radius:999px;background:rgba(255,255,255,.025);color:#777b7f;font-size:8px}
.profile-recent-read{min-width:68px;height:32px;padding:0 10px;border:1px solid rgba(219,182,111,.15);border-radius:9px;background:rgba(219,182,111,.055);color:#bfa46e;font-size:9.5px;font-weight:750;cursor:pointer}.profile-recent-read:hover{border-color:rgba(219,182,111,.27);background:rgba(219,182,111,.10);color:#dfbf80}
html[data-theme="light"] .profile-identity-card,html[data-theme="light"] .profile-stat-grid>div,html[data-theme="light"] .profile-recent-book{border-color:rgba(68,55,39,.07);background:rgba(255,255,255,.32)}
html[data-theme="light"] .profile-identity-card{background:linear-gradient(135deg,rgba(171,121,49,.07),rgba(255,255,255,.40) 52%)}html[data-theme="light"] .profile-avatar{border-color:rgba(143,103,48,.18);background:linear-gradient(145deg,#ece4d6,#cfc7ba);box-shadow:0 14px 28px rgba(73,55,34,.14);color:#8d642b}
html[data-theme="light"] .profile-name-row h2,html[data-theme="light"] .profile-stat-grid strong,html[data-theme="light"] .profile-growth-head strong,html[data-theme="light"] .profile-recent-book strong{color:#38332d}html[data-theme="light"] .profile-stat-grid span,html[data-theme="light"] .profile-level-badge span,html[data-theme="light"] .profile-growth-card p,html[data-theme="light"] .profile-recent-book small{color:#817a72}
html[data-theme="light"] .profile-growth-card{border-color:rgba(130,96,42,.10);background:linear-gradient(135deg,rgba(177,127,51,.07),rgba(255,255,255,.35) 62%)}html[data-theme="light"] .profile-growth-xp{border-color:rgba(72,55,35,.06);background:rgba(255,255,255,.34)}
@media(max-width:920px){.profile-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-identity-card{grid-template-columns:68px minmax(0,1fr)}.profile-avatar{width:68px;height:68px;border-radius:21px;font-size:26px}.profile-edit-button{grid-column:2;justify-self:start;align-self:start}}
@media(max-width:560px){.profile-overview{gap:12px}.profile-identity-card{grid-template-columns:56px minmax(0,1fr);gap:14px;padding:18px}.profile-avatar{width:56px;height:56px;border-radius:18px;font-size:22px}.profile-name-row h2{font-size:23px}.profile-stat-grid{gap:7px}.profile-stat-grid>div{padding:14px}.profile-stat-grid strong{font-size:14px}.profile-growth-head{flex-direction:column;gap:8px}.profile-level-badge{flex-wrap:wrap}.profile-recent-book{grid-template-columns:42px minmax(0,1fr)}.profile-recent-cover{width:42px}.profile-recent-read{grid-column:2;width:max-content}}

/* =========================================================
   18101 - confirmed cat level policy + Help / Public Rules
   ========================================================= */
.cat-growth-total{display:flex!important;flex:0 0 auto;align-items:flex-end!important;flex-direction:column;gap:3px!important;text-align:right}
.cat-growth-total strong{color:#bda46f!important;font-size:10.5px!important;font-weight:760!important;letter-spacing:-.015em!important}
.cat-growth-total b{color:#d6b56f;font-size:22px;font-weight:820;letter-spacing:-.035em}
.profile-level-progress{height:5px;margin:10px 2px 0;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.045)}
.profile-level-progress>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(197,154,80,.58),rgba(226,193,126,.92));transition:width .28s ease}
html[data-theme="light"] .profile-level-progress{background:rgba(79,59,34,.08)}

.help-view-tabs{display:flex;gap:7px;margin:0 0 22px;padding:4px;width:max-content;max-width:100%;border:1px solid rgba(255,255,255,.055);border-radius:12px;background:rgba(255,255,255,.014)}
.help-view-tabs button{height:34px;padding:0 14px;border:0;border-radius:8px;background:transparent;color:#777b7f;font-size:10.5px;font-weight:740;cursor:pointer}
.help-view-tabs button.is-selected{background:rgba(210,173,104,.10);color:#d7b977;box-shadow:inset 0 0 0 1px rgba(217,181,111,.10)}
.help-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;max-width:980px}
.help-guide-grid article{position:relative;min-height:150px;padding:22px 22px 20px;border:1px solid rgba(255,255,255,.055);border-radius:17px;background:rgba(255,255,255,.014)}
.help-guide-grid article>span{display:block;margin-bottom:15px;color:#9a8358;font-family:Georgia,serif;font-size:11px;font-weight:800;letter-spacing:.08em}
.help-guide-grid strong{display:block;color:#dfddd8;font-size:16px;letter-spacing:-.025em}
.help-guide-grid p{margin:8px 0 0;color:#777b7e;font-size:10.5px;line-height:1.75}

.help-public-shell{display:flex;flex-direction:column;gap:14px;max-width:1080px}
.help-public-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px;border:1px solid rgba(210,171,95,.11);border-radius:19px;background:linear-gradient(135deg,rgba(202,157,80,.07),rgba(255,255,255,.012) 58%)}
.help-public-hero .route-kicker{margin:0 0 6px}.help-public-hero h2{margin:0;color:#e6e2da;font-size:25px;letter-spacing:-.04em}.help-public-hero p{margin:8px 0 0;max-width:650px;color:#7d8082;font-size:10.5px;line-height:1.7}
.help-public-cat{display:grid;place-items:center;flex:0 0 auto;width:66px;height:66px;border:1px solid rgba(222,187,118,.18);border-radius:22px;background:rgba(221,183,111,.055);color:#b99c64;font-family:Georgia,serif;font-size:12px;font-weight:820;letter-spacing:.08em}
.help-public-reward-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.help-public-reward-grid article{padding:18px;border:1px solid rgba(255,255,255,.05);border-radius:15px;background:rgba(255,255,255,.013)}
.help-public-reward-grid span{display:block;color:#787c7f;font-size:9.5px;font-weight:720}.help-public-reward-grid strong{display:block;margin-top:7px;color:#d7b777;font-size:16px}.help-public-reward-grid p{margin:8px 0 0;color:#707477;font-size:9.5px;line-height:1.65}
.help-public-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.help-public-card{overflow:hidden;border:1px solid rgba(255,255,255,.05);border-radius:16px;background:rgba(255,255,255,.012)}
.help-public-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:15px;padding:17px 18px;border-bottom:1px solid rgba(255,255,255,.045)}
.help-public-card-head strong{color:#d8d6d1;font-size:13px}.help-public-card-head span{color:#6d7174;font-size:9px}
.help-table-wrap{overflow:auto;max-height:390px}.help-table-wrap table{width:100%;border-collapse:collapse}.help-table-wrap th,.help-table-wrap td{padding:10px 18px;text-align:left;border-bottom:1px solid rgba(255,255,255,.035);font-size:9.5px}.help-table-wrap th{position:sticky;top:0;background:#151718;color:#6e7275;font-weight:720}.help-table-wrap td{color:#8a8e91}.help-table-wrap td:last-child{color:#c9ad73;font-weight:720}.help-table-wrap tr:last-child td{border-bottom:0}
.help-secret-note{margin:2px 2px 0;padding:13px 15px;border:1px dashed rgba(215,177,105,.12);border-radius:12px;color:#85817a;font-size:10px;line-height:1.6}
html[data-theme="light"] .help-view-tabs{border-color:rgba(72,55,35,.07);background:rgba(255,255,255,.30)}
html[data-theme="light"] .help-guide-grid article,html[data-theme="light"] .help-public-reward-grid article,html[data-theme="light"] .help-public-card{border-color:rgba(72,55,35,.07);background:rgba(255,255,255,.30)}
html[data-theme="light"] .help-guide-grid strong,html[data-theme="light"] .help-public-hero h2,html[data-theme="light"] .help-public-card-head strong{color:#3b3630}
html[data-theme="light"] .help-guide-grid p,html[data-theme="light"] .help-public-hero p,html[data-theme="light"] .help-public-reward-grid p,html[data-theme="light"] .help-public-card-head span,html[data-theme="light"] .help-secret-note{color:#817a72}
html[data-theme="light"] .help-public-hero{border-color:rgba(130,96,42,.10);background:linear-gradient(135deg,rgba(177,127,51,.07),rgba(255,255,255,.38) 62%)}
html[data-theme="light"] .help-table-wrap th{background:#eeeae3;color:#7c756d}html[data-theme="light"] .help-table-wrap th,html[data-theme="light"] .help-table-wrap td{border-color:rgba(72,55,35,.055)}html[data-theme="light"] .help-table-wrap td{color:#766f67}
@media(max-width:820px){.help-public-reward-grid{grid-template-columns:1fr}.help-public-columns{grid-template-columns:1fr}.help-public-cat{display:none}}
@media(max-width:620px){.help-guide-grid{grid-template-columns:1fr}.help-public-hero{padding:20px}.help-public-card-head{align-items:flex-start;flex-direction:column;gap:3px}.cat-growth-total{text-align:left}.cat-growth-main{align-items:flex-start!important}}

/* =========================================================
   18103 - Profile height cleanup + Reading records 2-column layout
   Profile keeps only account/growth summary. Reading records owns recent books.
   ========================================================= */
.route-view[data-route="profile"]{padding-top:24px;padding-bottom:52px}
.route-view[data-route="profile"] .route-page-head{margin-bottom:20px;padding-top:0;padding-bottom:15px}

.reading-record-dashboard{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:22px;align-items:start;max-width:1260px}
.reading-record-primary{min-width:0}
.reading-record-primary .route-subhead{margin:0 0 11px}
.reading-record-side{display:flex;min-width:0;flex-direction:column;gap:12px}
.reading-record-summary.is-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.reading-record-summary.is-compact>div{padding:13px 14px 12px;border-radius:12px}
.reading-record-summary.is-compact>div:last-child{grid-column:1/-1}
.reading-record-summary.is-compact span{margin-bottom:5px;font-size:9.5px}
.reading-record-summary.is-compact strong{font-size:16px}
.reading-calendar-panel.is-compact{margin:0;padding:15px 16px 17px;border-radius:14px}
.reading-calendar-panel.is-compact .reading-calendar-head{align-items:center;margin-bottom:12px}
.reading-calendar-panel.is-compact .reading-calendar-head strong{font-size:14px}
.reading-calendar-panel.is-compact .reading-calendar-nav{gap:4px}
.reading-calendar-panel.is-compact .reading-calendar-nav button{min-width:26px;height:26px;padding:0 6px;border-radius:7px;font-size:10px}
.reading-calendar-panel.is-compact .reading-calendar-nav button:first-child,
.reading-calendar-panel.is-compact .reading-calendar-nav button:last-child{font-size:17px}
.reading-calendar-panel.is-compact .reading-calendar-weekdays,
.reading-calendar-panel.is-compact .reading-calendar-grid{gap:4px}
.reading-calendar-panel.is-compact .reading-calendar-weekdays{margin-bottom:4px}
.reading-calendar-panel.is-compact .reading-calendar-weekdays span{font-size:8px}
.reading-calendar-panel.is-compact .reading-calendar-day{min-height:38px;padding:6px;border-radius:7px}
.reading-calendar-panel.is-compact .reading-calendar-day>span{font-size:9px}

.reading-record-primary .reading-record-list{gap:8px}
.reading-record-primary .reading-record-book{grid-template-columns:54px minmax(0,1fr) auto;gap:13px;padding:10px 12px 10px 10px;border-radius:13px}
.reading-record-primary .reading-record-cover{width:54px}
.reading-record-primary .reading-record-heading strong{font-size:13px}
.reading-record-primary .reading-record-heading b{font-size:12px}
.reading-record-primary .reading-record-meta{margin-top:5px}

@media(max-width:1050px){
  .reading-record-dashboard{grid-template-columns:1fr;max-width:900px}
  .reading-record-side{display:grid;grid-template-columns:minmax(0,.8fr) minmax(320px,1.2fr);align-items:start}
  .reading-record-summary.is-compact>div:last-child{grid-column:auto}
}
@media(max-width:720px){
  .route-view[data-route="profile"]{padding-top:18px}
  .reading-record-side{display:flex}
  .reading-record-primary .reading-record-book{grid-template-columns:48px minmax(0,1fr);gap:10px}
  .reading-record-primary .reading-record-cover{width:48px}
  .reading-record-primary .reading-record-read{grid-column:2}
  .reading-calendar-panel.is-compact .reading-calendar-head{flex-direction:row;align-items:center}
  .reading-calendar-panel.is-compact .reading-calendar-day{min-height:34px}
}

/* =========================================================
   18216 - Daily culture quiz paper focus
   오늘 문제는 어두운 앱 배경 위 중앙 아이보리 종이 한 장에 집중시킨다.
   ========================================================= */
.route-view[data-route="quiz"]{padding-top:26px}
.daily-quiz-paper-stage{
  width:min(980px,100%);margin:0 auto 44px;padding:34px 38px 40px;border:1px solid rgba(146,111,63,.28);border-radius:24px;
  background:
    radial-gradient(circle at 18% 8%,rgba(255,255,255,.55),transparent 28%),
    linear-gradient(180deg,#f3eddf 0%,#ece3d2 100%);
  box-shadow:0 28px 80px rgba(0,0,0,.38),0 2px 0 rgba(255,255,255,.52) inset,0 0 0 1px rgba(67,48,27,.06);
  color:#2d2923;position:relative;overflow:hidden;
}
.daily-quiz-paper-stage::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:linear-gradient(rgba(87,68,43,.032) 1px,transparent 1px);background-size:100% 4px;
  mix-blend-mode:multiply;
}
.daily-quiz-paper-head{position:relative;z-index:1;display:grid;grid-template-columns:minmax(120px,1fr) minmax(320px,1.8fr) minmax(120px,1fr);align-items:start;gap:20px;padding:2px 2px 28px;margin-bottom:28px;border-bottom:1px solid rgba(70,54,35,.15)}
.daily-quiz-paper-heading{text-align:center}
.daily-quiz-paper-kicker{display:block;margin-bottom:8px;color:#9a7a4f;font-size:10px;font-weight:850;letter-spacing:.24em}
.daily-quiz-paper-heading h1{margin:0;color:#2a2722;font-family:Georgia,"Noto Serif KR",serif;font-size:clamp(34px,3.2vw,46px);line-height:1.15;letter-spacing:-.05em}
.daily-quiz-paper-heading p{margin:10px 0 0;color:#746b5f;font-size:13px;line-height:1.65}
.daily-quiz-paper-head-side{display:flex;min-height:38px;align-items:flex-start}
.daily-quiz-paper-head-side.is-left{justify-content:flex-start}
.daily-quiz-paper-head-side.is-right{justify-content:flex-end}
.daily-quiz-paper-head-side.is-left>span{display:inline-flex;align-items:center;height:32px;padding:0 11px;border:1px solid rgba(131,96,50,.18);border-radius:999px;background:rgba(134,96,47,.055);color:#886b44;font-size:11px;font-weight:800}
.daily-quiz-shell{
  position:relative;z-index:1;width:min(820px,100%);margin:0 auto;padding:4px 2px 0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#2d2923;
}
.daily-quiz-topline{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.daily-quiz-topline>span{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:1px solid rgba(133,96,47,.20);border-radius:999px;background:rgba(154,113,56,.065);color:#85673f;font-size:11px;font-weight:800}
.daily-quiz-topline time{color:#8b8378;font-size:11px;font-weight:700;letter-spacing:.03em}
.daily-quiz-shell h2{margin:0;color:#2c2924;font-size:clamp(24px,2.1vw,30px);font-weight:780;line-height:1.48;letter-spacing:-.04em;text-align:left}
.daily-quiz-options{display:grid;gap:11px;margin-top:26px}
.daily-quiz-option{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:13px;width:100%;min-height:64px;padding:10px 16px 10px 11px;border:1px solid rgba(74,59,41,.13);border-radius:14px;background:rgba(255,255,255,.38);color:#39342d;text-align:left;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.35) inset;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.daily-quiz-option:not(:disabled):hover{transform:translateY(-1px);border-color:rgba(154,111,52,.35);background:rgba(255,250,239,.76);box-shadow:0 8px 18px rgba(92,66,34,.08)}
.daily-quiz-option:disabled{cursor:default}
.daily-quiz-option-letter{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(134,97,49,.18);border-radius:11px;background:rgba(157,115,58,.07);color:#8d6c3f;font-family:Georgia,serif;font-size:14px;font-weight:820}
.daily-quiz-option strong{color:#38332d;font-size:15px;font-weight:720;line-height:1.45;letter-spacing:-.018em}
.daily-quiz-option-result{justify-self:end;color:#7b7369;font-size:10px;font-weight:850}
.daily-quiz-option.is-correct{border-color:rgba(102,125,62,.34);background:rgba(164,187,118,.15)}
.daily-quiz-option.is-correct .daily-quiz-option-letter,.daily-quiz-option.is-correct .daily-quiz-option-result{color:#627d39}
.daily-quiz-option.is-wrong{border-color:rgba(155,91,82,.28);background:rgba(190,128,116,.12)}
.daily-quiz-option.is-wrong .daily-quiz-option-letter,.daily-quiz-option.is-wrong .daily-quiz-option-result{color:#9d5b53}
.daily-quiz-submit-note,.daily-quiz-complete{margin-top:20px;text-align:center;color:#837a6e;font-size:12px;font-weight:700}
.daily-quiz-result{margin-top:22px;padding:21px 22px;border:1px solid rgba(87,67,43,.14);border-radius:15px;background:rgba(255,255,255,.33)}
.daily-quiz-result-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.daily-quiz-result-head strong{color:#332f29;font-size:17px}
.daily-quiz-result-head span{color:#9a7138;font-size:16px;font-weight:850}
.daily-quiz-result>b{display:block;margin-top:10px;color:#7f6138;font-size:13px}
.daily-quiz-result p{margin:10px 0 0;color:#6e665c;font-size:13px;line-height:1.75}
.daily-quiz-result.is-correct{border-color:rgba(103,130,62,.20);background:rgba(166,190,119,.10)}
.daily-quiz-result.is-wrong{border-color:rgba(155,91,82,.18);background:rgba(189,128,116,.08)}
.daily-quiz-paper-stage .daily-quiz-history-toggle{height:34px;padding:0 13px;border:1px solid rgba(131,96,50,.20);border-radius:10px;background:rgba(134,96,47,.055);color:#82643d;font-size:12px;font-weight:800;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.daily-quiz-paper-stage .daily-quiz-history-toggle:hover{border-color:rgba(131,96,50,.34);background:rgba(134,96,47,.10);transform:translateY(-1px)}
.daily-quiz-paper-notice{position:relative;z-index:1;width:min(820px,100%);margin:0 auto}
.daily-quiz-paper-notice .route-empty{min-height:220px;border-color:rgba(75,59,40,.11);background:rgba(255,255,255,.22)}
.daily-quiz-paper-notice .route-empty strong{color:#39342d}
.daily-quiz-paper-notice .route-empty p{color:#766e63}
html[data-theme="light"] .daily-quiz-paper-stage{background:linear-gradient(180deg,#f7f0e2,#eee4d2);border-color:rgba(102,75,41,.17);box-shadow:0 22px 58px rgba(70,52,31,.14),0 2px 0 rgba(255,255,255,.55) inset}
@media(max-width:720px){
  .route-view[data-route="quiz"]{padding-top:14px}
  .daily-quiz-paper-stage{padding:24px 17px 26px;border-radius:18px;margin-bottom:28px}
  .daily-quiz-paper-head{grid-template-columns:1fr;gap:12px;padding-bottom:21px;margin-bottom:22px}
  .daily-quiz-paper-heading{order:1}
  .daily-quiz-paper-head-side.is-left{order:2;justify-content:center}
  .daily-quiz-paper-head-side.is-right{order:3;justify-content:center}
  .daily-quiz-paper-heading h1{font-size:32px}
  .daily-quiz-paper-heading p{font-size:12px}
  .daily-quiz-shell{padding:0}
  .daily-quiz-shell h2{font-size:21px;text-align:left}
  .daily-quiz-option{grid-template-columns:38px minmax(0,1fr) auto;min-height:58px;padding-right:12px}
  .daily-quiz-option-letter{width:32px;height:32px}
  .daily-quiz-option strong{font-size:14px}
}

/* 18109 - Previous 30 days quiz review */
.daily-quiz-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.daily-quiz-history-toggle{height:36px;padding:0 14px;border:1px solid rgba(216,178,104,.18);border-radius:10px;background:rgba(216,178,104,.06);color:#c8ac73;font-size:13px;font-weight:760;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.daily-quiz-history-toggle:hover{border-color:rgba(216,178,104,.32);background:rgba(216,178,104,.10);transform:translateY(-1px)}
.daily-quiz-history-shell{display:grid;gap:18px;max-width:980px}
.daily-quiz-history-title{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:2px 2px 0}
.daily-quiz-history-title h2{margin:4px 0 0;color:#e6e2db;font-size:23px;letter-spacing:-.03em}
.daily-quiz-history-title p{max-width:520px;margin:0;color:#85898c;font-size:13px;line-height:1.65;text-align:right}
.daily-quiz-history-list{display:grid;gap:10px}
.daily-quiz-history-item{padding:17px 19px 18px;border:1px solid rgba(255,255,255,.055);border-radius:14px;background:rgba(255,255,255,.016)}
.daily-quiz-history-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.daily-quiz-history-meta time{color:#8c9093;font-size:13px;font-weight:700}
.daily-quiz-history-meta>span:not(.daily-quiz-history-status){display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:999px;background:rgba(216,178,104,.055);color:#b99d67;font-size:12px;font-weight:760}
.daily-quiz-history-status{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.035);color:#85898c;font-size:12px;font-weight:760}
.daily-quiz-history-status.is-correct{background:rgba(147,177,104,.075);color:#adca80}
.daily-quiz-history-status.is-wrong{background:rgba(177,92,82,.065);color:#cb9189}
.daily-quiz-history-item h3{margin:0;color:#dcD9d3;font-size:15px;font-weight:700;line-height:1.58;letter-spacing:-.018em}
.daily-quiz-history-answer,.daily-quiz-history-my-answer{display:flex;align-items:baseline;gap:10px;margin-top:11px}
.daily-quiz-history-answer span,.daily-quiz-history-my-answer span{color:#7f8386;font-size:12px;font-weight:700}
.daily-quiz-history-answer strong{color:#cdb071;font-size:14px}
.daily-quiz-history-my-answer b{color:#a4a8aa;font-size:13px;font-weight:700}
.daily-quiz-history-item>p{margin:9px 0 0;color:#909497;font-size:13px;line-height:1.68}
html[data-theme="light"] .daily-quiz-history-toggle{border-color:rgba(128,95,43,.13);background:rgba(170,121,52,.06);color:#8d6730}
html[data-theme="light"] .daily-quiz-history-title h2,html[data-theme="light"] .daily-quiz-history-item h3{color:#3f3932}
html[data-theme="light"] .daily-quiz-history-title p,html[data-theme="light"] .daily-quiz-history-item>p,html[data-theme="light"] .daily-quiz-history-meta time{color:#7b746c}
html[data-theme="light"] .daily-quiz-history-item{border-color:rgba(71,55,36,.07);background:rgba(255,255,255,.30)}
@media(max-width:720px){.daily-quiz-history-title{align-items:flex-start;flex-direction:column;gap:8px}.daily-quiz-history-title p{text-align:left}.daily-quiz-head-actions{justify-content:flex-start}.daily-quiz-history-item{padding:15px 15px 16px}.daily-quiz-history-item h3{font-size:14px}}

/* 18111 — first-login tutorial */
body.is-tutorial-open{overflow:hidden}
.tutorial-dialog[hidden]{display:none!important}
.tutorial-dialog{
  position:fixed;inset:0;z-index:10080;display:grid;place-items:center;padding:24px;
  background:rgba(4,5,6,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;transition:opacity .18s ease
}
.tutorial-dialog.is-open{opacity:1}
.tutorial-dialog-panel{
  width:min(540px,calc(100vw - 32px));min-height:430px;padding:24px 28px 25px;
  border:1px solid rgba(255,255,255,.075);border-radius:22px;
  background:linear-gradient(180deg,#17191b 0%,#111315 100%);
  box-shadow:0 30px 100px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.035);
  transform:translateY(8px) scale(.99);transition:transform .18s ease;
  display:flex;flex-direction:column
}
.tutorial-dialog.is-open .tutorial-dialog-panel{transform:translateY(0) scale(1)}
.tutorial-dialog-topline{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px}
.tutorial-dialog-topline>span{color:#8d8067;font-size:9px;font-weight:850;letter-spacing:.18em}
.tutorial-dialog-close{width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:#777b7f;font-size:21px;line-height:1;cursor:pointer}
.tutorial-dialog-close:hover{background:rgba(255,255,255,.05);color:#e6e2da}
.tutorial-progress{height:3px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.055)}
.tutorial-progress>span{display:block;width:16.6667%;height:100%;border-radius:inherit;background:#c8a767;transition:width .2s ease}
.tutorial-step-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;color:#81765f;font-size:9.5px;font-weight:800;letter-spacing:.08em}
.tutorial-step-meta [data-tutorial-kicker]{color:#666b6f;letter-spacing:.14em}
.tutorial-dialog h2{margin:12px 0 10px;color:#ebe8e1;font-size:27px;line-height:1.22;letter-spacing:-.045em}
.tutorial-step-copy{min-height:48px;margin:0;color:#97999a;font-size:12.5px;line-height:1.72}
.tutorial-step-points{display:grid;gap:8px;margin:22px 0 26px}
.tutorial-step-point{display:flex;align-items:center;gap:11px;min-height:45px;padding:10px 13px;border:1px solid rgba(255,255,255,.055);border-radius:12px;background:rgba(255,255,255,.018);color:#c7c6c2;font-size:11px;line-height:1.45}
.tutorial-step-point>span{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(200,167,103,.09);color:#c8a767;font-family:Georgia,serif;font-size:10px;font-weight:800}
.tutorial-dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:5px}
.tutorial-skip-button,.tutorial-back-button,.tutorial-next-button{height:39px;border-radius:10px;font-size:10.5px;font-weight:780;cursor:pointer}
.tutorial-skip-button{padding:0 4px;border:0;background:transparent;color:#73777a}
.tutorial-skip-button:hover{color:#aaa9a5}
.tutorial-step-actions{display:flex;gap:8px}
.tutorial-back-button{min-width:72px;padding:0 15px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);color:#aaa9a5}
.tutorial-back-button:disabled{opacity:.32;cursor:default}
.tutorial-next-button{min-width:92px;padding:0 19px;border:1px solid rgba(208,174,106,.22);background:#c8a767;color:#17130d}
.help-tutorial-replay{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:980px;margin-top:12px;padding:17px 19px;border:1px solid rgba(255,255,255,.055);border-radius:14px;background:rgba(255,255,255,.014)}
.help-tutorial-replay div{min-width:0}
.help-tutorial-replay strong{display:block;color:#d7d5d0;font-size:12px}
.help-tutorial-replay p{margin:4px 0 0;color:#74787b;font-size:10px;line-height:1.55}
.help-tutorial-replay button{flex:0 0 auto;height:34px;padding:0 14px;border:1px solid rgba(205,170,104,.17);border-radius:9px;background:rgba(205,170,104,.075);color:#c9aa6e;font-size:10px;font-weight:760;cursor:pointer}
html[data-theme="light"] .tutorial-dialog{background:rgba(69,60,49,.30)}
html[data-theme="light"] .tutorial-dialog-panel{border-color:rgba(65,54,41,.10);background:linear-gradient(180deg,#fffdfa,#f7f3eb);box-shadow:0 30px 90px rgba(72,55,34,.22),inset 0 1px rgba(255,255,255,.8)}
html[data-theme="light"] .tutorial-dialog h2{color:#302b25}
html[data-theme="light"] .tutorial-step-copy{color:#766f66}
html[data-theme="light"] .tutorial-step-point{border-color:rgba(72,55,35,.07);background:rgba(255,255,255,.42);color:#514b44}
html[data-theme="light"] .tutorial-back-button{border-color:rgba(72,55,35,.09);background:rgba(255,255,255,.36);color:#686158}
html[data-theme="light"] .help-tutorial-replay{border-color:rgba(72,55,35,.07);background:rgba(255,255,255,.30)}
html[data-theme="light"] .help-tutorial-replay strong{color:#3b3630}
html[data-theme="light"] .help-tutorial-replay p{color:#817a72}
@media(max-width:620px){
  .tutorial-dialog{padding:12px}.tutorial-dialog-panel{width:min(100%,460px);min-height:420px;padding:21px 19px 20px;border-radius:18px}
  .tutorial-dialog h2{font-size:24px}.tutorial-step-copy{font-size:12px}.tutorial-step-point{font-size:10.5px}
  .tutorial-dialog-actions{align-items:flex-end}.tutorial-step-actions{flex:1;justify-content:flex-end}
  .help-tutorial-replay{align-items:flex-start;flex-direction:column;gap:12px}.help-tutorial-replay button{width:100%}
}

/* 18126 - My Library explicit personal-record reset */
.library-head-actions{display:flex;align-items:center;gap:12px}
.library-delete-mode-button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:rgba(255,255,255,.035);color:#a8aaad;font-size:11px;font-weight:700;cursor:pointer;transition:.16s ease}
.library-delete-mode-button:hover{border-color:rgba(207,114,104,.28);background:rgba(173,72,62,.08);color:#d8aaa4}
.library-delete-mode-button.is-active{border-color:rgba(207,114,104,.34);background:rgba(173,72,62,.10);color:#e0a29a}
.route-book-card{position:relative}
.route-book-reset{position:absolute;z-index:8;right:8px;top:8px;min-width:48px;height:28px;padding:0 9px;border:1px solid rgba(234,142,132,.34);border-radius:8px;background:rgba(29,18,18,.88);backdrop-filter:blur(8px);color:#e6aaa2;font-size:10.5px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.24)}
.route-book-reset:hover{background:rgba(128,47,40,.92);color:#fff}
.route-book-card.is-delete-mode .route-cover-button{outline:1px solid rgba(211,106,95,.16);outline-offset:3px}
html[data-theme="light"] .library-delete-mode-button{border-color:rgba(69,57,42,.11);background:rgba(69,57,42,.035);color:#756b61}
html[data-theme="light"] .route-book-reset{background:rgba(255,247,245,.96);border-color:rgba(167,72,61,.22);color:#a55047}

/* ================================================================
   18148 - completed library / recommendation empty state
   ================================================================ */
.recommendation-empty{
  grid-column:1 / -1;
  min-height:120px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:7px;
  padding:20px 4px;
  color:rgba(235,236,232,.64);
}
.recommendation-empty strong{font-size:14px;color:rgba(245,245,242,.88)}
.recommendation-empty span{font-size:12px;color:rgba(205,207,205,.46)}
html[data-theme="light"] .recommendation-empty{color:rgba(62,51,39,.62)}
html[data-theme="light"] .recommendation-empty strong{color:rgba(47,38,28,.88)}
html[data-theme="light"] .recommendation-empty span{color:rgba(75,64,51,.52)}
@media (max-width:520px){
  .library-view-tabs{overflow-x:auto;scrollbar-width:none}
  .library-view-tabs::-webkit-scrollbar{display:none}
  .library-view-tabs button{flex:0 0 auto}
}

/* =========================================================
   18150 - completion follow-up: one next-book recommendation
   Reader/completion UI stays legacy-owned; this parent overlay appears only
   after the Reader surface has fully closed.
   ========================================================= */
body.is-next-book-recommendation-open{overflow:hidden}
.next-book-dialog{position:fixed;inset:0;z-index:54000;display:flex;align-items:center;justify-content:center;padding:28px;opacity:0;pointer-events:none;transition:opacity .18s ease}
.next-book-dialog[hidden]{display:none}
.next-book-dialog.is-open{opacity:1;pointer-events:auto}
.next-book-dialog-backdrop{position:absolute;inset:0;background:rgba(4,5,5,.76)}
.next-book-dialog-card{position:relative;width:min(660px,calc(100vw - 48px));min-height:330px;padding:28px 30px 30px;border:1px solid rgba(218,194,139,.18);border-radius:18px;background:linear-gradient(155deg,rgba(26,27,26,.985),rgba(15,16,15,.995));box-shadow:0 30px 80px rgba(0,0,0,.52);transform:translateY(12px) scale(.985);transition:transform .2s ease;overflow:hidden}
.next-book-dialog.is-open .next-book-dialog-card{transform:translateY(0) scale(1)}
.next-book-dialog-close{position:absolute;right:16px;top:14px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:rgba(237,237,232,.58);font-size:24px;line-height:1;cursor:pointer}
.next-book-dialog-close:hover{background:rgba(255,255,255,.055);color:#f0efe9}
.next-book-dialog-kicker{font-size:10px;letter-spacing:.2em;font-weight:800;color:rgba(211,182,116,.72)}
.next-book-dialog-heading{margin-top:8px;padding-right:44px;font-size:16px;font-weight:750;color:rgba(244,244,239,.86)}
.next-book-dialog-content{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:center;margin-top:25px}
.next-book-cover-button{display:block;width:150px;padding:0;border:0;border-radius:7px;background:#242522;box-shadow:0 16px 30px rgba(0,0,0,.35);cursor:pointer;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.next-book-cover-button:hover{transform:translateY(-4px);box-shadow:0 22px 38px rgba(0,0,0,.46)}
.next-book-cover-button img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover}
.next-book-cover-fallback{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:2/3;color:rgba(236,226,202,.68);font-size:11px;letter-spacing:.12em}
.next-book-copy{min-width:0}
.next-book-reason{display:block;margin-bottom:9px;color:rgba(205,183,132,.76);font-size:11px;font-weight:700}
.next-book-copy h2{margin:0;color:#f1f0ea;font-size:26px;line-height:1.2;letter-spacing:-.025em}
.next-book-author{margin:7px 0 0;color:rgba(223,224,220,.52);font-size:12px}
.next-book-hook{margin:18px 0 0;color:rgba(230,231,226,.7);font-size:13px;line-height:1.7}
.next-book-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}
.next-book-primary-button,.next-book-secondary-button{min-height:40px;padding:0 17px;border-radius:9px;font-size:12px;font-weight:750;cursor:pointer}
.next-book-primary-button{border:1px solid rgba(211,182,116,.42);background:rgba(196,160,78,.16);color:#eadcb8}
.next-book-primary-button:hover{background:rgba(196,160,78,.23)}
.next-book-secondary-button{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:rgba(232,232,228,.64)}
.next-book-secondary-button:hover{background:rgba(255,255,255,.065);color:#efeee9}
.next-book-dialog-empty{grid-column:1/-1;display:flex;min-height:210px;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;color:rgba(230,231,226,.68)}
.next-book-dialog-empty strong{font-size:18px;color:rgba(244,244,239,.9)}
.next-book-dialog-empty span{font-size:12px;color:rgba(220,221,217,.5)}
.next-book-dialog-empty .next-book-secondary-button{margin-top:14px}
html[data-theme="light"] .next-book-dialog-backdrop{background:rgba(39,34,28,.5)}
html[data-theme="light"] .next-book-dialog-card{border-color:rgba(99,77,45,.16);background:linear-gradient(155deg,#f8f5ee,#efebe2);box-shadow:0 30px 80px rgba(55,44,31,.24)}
html[data-theme="light"] .next-book-dialog-heading,html[data-theme="light"] .next-book-copy h2,html[data-theme="light"] .next-book-dialog-empty strong{color:#3f352a}
html[data-theme="light"] .next-book-author,html[data-theme="light"] .next-book-hook,html[data-theme="light"] .next-book-dialog-empty{color:rgba(66,54,41,.66)}
html[data-theme="light"] .next-book-reason{color:#8a6e38}
html[data-theme="light"] .next-book-dialog-close{color:rgba(67,55,43,.55)}
html[data-theme="light"] .next-book-secondary-button{border-color:rgba(73,58,42,.14);background:rgba(73,58,42,.045);color:rgba(67,54,41,.68)}
@media (max-width:640px){
  .next-book-dialog{padding:18px}
  .next-book-dialog-card{width:min(100%,420px);padding:24px 22px 22px;border-radius:16px}
  .next-book-dialog-heading{font-size:15px}
  .next-book-dialog-content{grid-template-columns:92px minmax(0,1fr);gap:18px;margin-top:22px;align-items:start}
  .next-book-cover-button{width:92px}
  .next-book-copy h2{font-size:21px}
  .next-book-hook{margin-top:13px;font-size:12px;line-height:1.58}
  .next-book-actions{grid-column:1/-1;gap:8px;margin-top:18px}
  .next-book-primary-button,.next-book-secondary-button{flex:1;padding:0 12px}
}

/* =========================================================
   18153 - 프로필 배경 + 사이드바 하단 마이페이지
   UI 전용 변경: Reader/책갈피/완독/서버 로직은 변경하지 않는다.
   ========================================================= */
.sidebar-bottom{
  display:flex;
  min-height:0;
  flex-direction:column;
  gap:10px;
  margin-top:auto;
  padding:14px 8px 0;
}
.sidebar-legal-block{
  flex:0 0 auto;
  padding:0 4px 2px;
}
.sidebar-bottom .sidebar-legal-block .legal{
  margin:0;
}
.sidebar-bottom .sidebar-legal-block .legal.links{
  margin-top:6px;
}
.sidebar-bottom .continue-reading-card{
  flex:0 0 auto;
  margin:0;
}
.sidebar-mypage{
  flex:0 0 auto;
  width:100%;
  min-height:48px;
  margin:0;
  border:1px solid rgba(255,255,255,.045);
  background:rgba(255,255,255,.014);
}
.sidebar-mypage:hover{
  border-color:rgba(218,181,111,.16);
  background:rgba(218,181,111,.055);
}
.sidebar-mypage.is-active{
  border-color:rgba(218,181,111,.18);
  background:rgba(218,181,111,.085);
  color:#eee9df;
}
.sidebar-mypage.is-active:before{
  left:-26px;
}
html[data-theme="light"] .sidebar-mypage{
  border-color:rgba(73,58,40,.07);
  background:rgba(80,63,43,.025);
}
html[data-theme="light"] .sidebar-mypage:hover,
html[data-theme="light"] .sidebar-mypage.is-active{
  border-color:rgba(139,100,46,.18);
  background:rgba(139,100,46,.07);
}

.route-view[data-route="profile"]{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:calc(100vh - 88px);
  background:#0b0b0a;
}
.route-view[data-route="profile"]::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  background-image:url('assets/profile/profile-page-background.webp?v=18215-default-moonlit-library');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  pointer-events:none;
}
.route-view[data-route="profile"]::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(180deg,rgba(6,7,7,.20) 0%,rgba(6,7,7,.28) 62%,rgba(6,7,7,.46) 100%);
  pointer-events:none;
}
.route-view[data-route="profile"] .route-page-head,
.route-view[data-route="profile"] .profile-overview{
  position:relative;
  z-index:1;
}
.route-view[data-route="profile"] .profile-identity-card,
.route-view[data-route="profile"] .profile-stat-grid>div,
.route-view[data-route="profile"] .profile-growth-card{
  -webkit-backdrop-filter:blur(10px) saturate(.94);
  backdrop-filter:blur(10px) saturate(.94);
}

html[data-theme="light"] .route-view[data-route="profile"]{
  background:#e8e2d7;
}
html[data-theme="light"] .route-view[data-route="profile"]::before{
  opacity:.64;
  filter:saturate(.76) brightness(1.14);
}
html[data-theme="light"] .route-view[data-route="profile"]::after{
  background:linear-gradient(180deg,rgba(239,234,224,.72) 0%,rgba(239,234,224,.78) 64%,rgba(239,234,224,.88) 100%);
}

@media(max-height:820px) and (min-width:821px){
  .sidebar{padding-top:22px;padding-bottom:14px}
  .brand{padding-bottom:20px}
  .nav-item{min-height:42px}
  .sidebar-bottom{gap:7px;padding-top:8px}
  .sidebar-bottom .continue-reading-card{min-height:128px;grid-template-columns:58px minmax(0,1fr) 9px;padding:9px}
  .sidebar-bottom .continue-reading-cover{width:58px;height:87px}
  .sidebar-bottom .continue-reading-copy small{margin-bottom:4px;font-size:9px}
  .sidebar-bottom .continue-reading-copy strong{font-size:12px}
  .sidebar-bottom .continue-reading-author{font-size:9px}
  .sidebar-bottom .continue-reading-progress{margin:7px 0 5px}
  .sidebar-bottom .continue-reading-copy em{font-size:9px}
  .sidebar-legal-block{display:none}
}
@media(max-width:820px){
  .sidebar-bottom{width:100%;gap:8px;padding:8px 0 0}
  .sidebar-legal-block{display:none}
  .sidebar-bottom .continue-reading-card{display:none!important}
  .sidebar-mypage{justify-content:center;padding:0}
  .sidebar-mypage span:last-child{display:none}
  .sidebar-mypage.is-active:before{left:-10px}
  .route-view[data-route="profile"]::before{background-position:center center}
}


/* =========================================================
   18156 - compact viewport UI regression guard
   - 모바일 topbar가 검색창 + 테마 + 계정 버튼 너비를 넘지 않게 한다.
   - 데스크톱 소개창의 내용이 짧은/좁은 viewport에서 잘리지 않게 한다.
   Reader/pagination/bookmark 동작은 변경하지 않는다.
   ========================================================= */
.shortbook-book-intro-card{
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.shortbook-book-intro-card::-webkit-scrollbar{display:none}

@media (min-width:920px) and (max-width:1100px),
       (min-width:920px) and (max-height:760px){
  .shortbook-book-intro-card{padding:24px}
  .shortbook-book-intro-kicker{margin-bottom:12px}
  .shortbook-book-intro-card h2{font-size:clamp(26px,3vw,32px)}
  .shortbook-book-intro-author{margin-top:8px;font-size:13.5px}
  .shortbook-book-intro-meta{margin-top:17px;gap:10px}
  .shortbook-book-intro-genres{gap:6px}
  .shortbook-book-intro-genres span{padding:5px 9px;font-size:10.5px}
  .shortbook-book-intro-reading-time{font-size:11px}
  .shortbook-book-intro-hook{margin-top:16px;font-size:14px;line-height:1.52}
  .shortbook-book-intro-actions{padding-top:16px}
}

@media(max-width:820px){
  .topbar{
    gap:8px;
    padding-left:14px;
    padding-right:12px;
  }
  .search-shell{
    flex:1 1 auto;
    width:auto;
    min-width:0;
    max-width:none;
    gap:8px;
    padding-left:12px;
    padding-right:12px;
  }
  .topbar-actions{
    flex:0 0 auto;
    gap:4px;
  }
  .account-preview{
    padding-left:2px;
    padding-right:2px;
  }
}

@media(max-width:430px){
  .search-shell{height:42px}
  .global-search-input{font-size:12px}
}


/* =========================================================
   18158 - Supabase password recovery UI
   Auth-only modal. It does not touch Reader or personal reading state.
   ========================================================= */
.auth-forgot-password{
  margin-left:auto;padding:2px 0;border:0;background:transparent;color:#9e8764;font-size:10.5px;font-weight:650;cursor:pointer;white-space:nowrap;
}
.auth-forgot-password:hover{color:#d4b477}
.auth-forgot-password[hidden]{display:none!important}
.auth-forgot-password:disabled{cursor:default;opacity:.5}
body.is-password-recovery-open{overflow:hidden}
.password-recovery-dialog[hidden]{display:none!important}
.password-recovery-dialog{
  position:fixed;inset:0;z-index:15030;display:grid;place-items:center;padding:24px;
  background:rgba(2,3,4,.70);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
  opacity:0;transition:opacity .16s ease;
}
.password-recovery-dialog.is-open{opacity:1}
.password-recovery-panel{
  position:relative;box-sizing:border-box;width:min(430px,calc(100vw - 32px));padding:32px 32px 28px;
  border:1px solid rgba(255,255,255,.09);border-radius:20px;
  background:linear-gradient(180deg,rgba(28,29,31,.99),rgba(18,19,21,.99));
  box-shadow:0 30px 85px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.025);
  transform:translateY(8px) scale(.988);transition:transform .18s cubic-bezier(.2,.75,.25,1);
}
.password-recovery-dialog.is-open .password-recovery-panel{transform:translateY(0) scale(1)}
.password-recovery-close{position:absolute;top:13px;right:14px;width:33px;height:33px;border:0;border-radius:50%;background:transparent;color:#898c8f;font-size:23px;line-height:1;cursor:pointer}
.password-recovery-close:hover{background:rgba(255,255,255,.055);color:#f1efea}
.password-recovery-kicker{display:block;margin:0 0 9px;color:#c59f62;font-size:9px;font-weight:800;letter-spacing:.18em}
.password-recovery-panel h2{margin:0 0 8px;color:#f1efea;font-size:24px;font-weight:760;letter-spacing:-.04em}
.password-recovery-copy{margin:0 0 21px;color:#85898b;font-size:11.5px;line-height:1.6}
.password-recovery-panel .auth-field+.auth-field{margin-top:12px}
.password-recovery-rule{margin:8px 2px 0;color:#6f7375;font-size:9.7px;line-height:1.45}
.password-recovery-status{margin:12px 0 0;padding:9px 10px;border-radius:9px;background:rgba(255,255,255,.035);color:#aaa8a2;font-size:10.5px;line-height:1.5}
.password-recovery-status[data-kind="error"]{background:rgba(181,76,67,.09);color:#dc8d84}
.password-recovery-status[data-kind="success"]{background:rgba(86,132,83,.10);color:#a7c6a3}
.password-recovery-status[hidden]{display:none!important}
.password-recovery-actions{display:grid;grid-template-columns:1fr 1.45fr;gap:9px;margin-top:20px}
.password-recovery-secondary,.password-recovery-primary{min-height:44px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer}
.password-recovery-secondary{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:#a9aaab}
.password-recovery-primary{border:1px solid rgba(222,189,126,.28);background:#d6b376;color:#211b12}
.password-recovery-secondary:hover{background:rgba(255,255,255,.055);color:#ddd}
.password-recovery-primary:hover{background:#e1bf82}
.password-recovery-secondary:disabled,.password-recovery-primary:disabled,.password-recovery-close:disabled{cursor:default;opacity:.55}
html[data-theme="light"] .auth-forgot-password{color:#8c6f45}
html[data-theme="light"] .password-recovery-dialog{background:rgba(69,60,49,.30)}
html[data-theme="light"] .password-recovery-panel{border-color:rgba(65,54,41,.10);background:linear-gradient(180deg,#fffdfa,#f8f5ef);box-shadow:0 28px 80px rgba(72,55,34,.22),inset 0 1px rgba(255,255,255,.8)}
html[data-theme="light"] .password-recovery-panel h2{color:#2d2923}
html[data-theme="light"] .password-recovery-copy,html[data-theme="light"] .password-recovery-rule{color:#817a71}
html[data-theme="light"] .password-recovery-secondary{border-color:rgba(68,56,41,.10);background:rgba(68,56,41,.035);color:#766f66}
@media(max-width:560px){
  .password-recovery-dialog{padding:12px}
  .password-recovery-panel{width:min(430px,calc(100vw - 24px));padding:28px 21px 23px}
  .auth-inline-status-row{flex-wrap:wrap}
  .auth-inline-status-row .auth-status{width:100%;text-align:left}
}

/* =========================================================
   18159 - account deletion / privacy controls
   ========================================================= */
body.is-account-delete-open{overflow:hidden}
.account-delete-dialog[hidden]{display:none!important}
.account-delete-dialog{position:fixed;z-index:10080;inset:0;display:grid;place-items:center;padding:18px;background:rgba(4,5,5,.74);opacity:0;transition:opacity .16s ease}
.account-delete-dialog.is-open{opacity:1}
.account-delete-panel{position:relative;width:min(470px,calc(100vw - 32px));padding:31px 30px 27px;border:1px solid rgba(255,255,255,.075);border-radius:20px;background:linear-gradient(180deg,#171818,#121313);box-shadow:0 30px 90px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.025);transform:translateY(8px) scale(.985);transition:transform .16s ease}
.account-delete-dialog.is-open .account-delete-panel{transform:translateY(0) scale(1)}
.account-delete-close{position:absolute;top:12px;right:13px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#8b8f91;font-size:23px;line-height:1;cursor:pointer}.account-delete-close:hover{background:rgba(255,255,255,.055);color:#eee}
.account-delete-kicker{display:block;margin:0 0 9px;color:#b76e66;font-size:9px;font-weight:820;letter-spacing:.18em}.account-delete-panel h2{margin:0 0 9px;color:#f0ede8;font-size:25px;font-weight:780;letter-spacing:-.04em}.account-delete-warning{margin:0 0 22px;color:#8d8d89;font-size:11.3px;line-height:1.65}.account-delete-panel .auth-field+.auth-field{margin-top:12px}.account-delete-rule{margin:9px 2px 0;color:#737574;font-size:9.8px;line-height:1.5}.account-delete-rule strong{color:#b87870}
.account-delete-status{margin:12px 0 0;padding:9px 10px;border-radius:9px;background:rgba(255,255,255,.035);color:#aaa8a2;font-size:10.5px;line-height:1.5}.account-delete-status[data-kind="error"]{background:rgba(181,76,67,.09);color:#dc8d84}.account-delete-status[data-kind="success"]{background:rgba(86,132,83,.10);color:#a7c6a3}.account-delete-status[hidden]{display:none!important}
.account-delete-actions{display:grid;grid-template-columns:1fr 1.45fr;gap:9px;margin-top:20px}.account-delete-secondary,.account-delete-primary{min-height:44px;border-radius:10px;font-size:12px;font-weight:740;cursor:pointer}.account-delete-secondary{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:#a9aaab}.account-delete-primary{border:1px solid rgba(191,79,70,.31);background:#8e453f;color:#f3e9e6}.account-delete-secondary:hover{background:rgba(255,255,255,.055);color:#ddd}.account-delete-primary:hover{background:#a24f48}.account-delete-secondary:disabled,.account-delete-primary:disabled,.account-delete-close:disabled{cursor:default;opacity:.55}
html[data-theme="light"] .account-delete-dialog{background:rgba(69,60,49,.30)}html[data-theme="light"] .account-delete-panel{border-color:rgba(65,54,41,.10);background:linear-gradient(180deg,#fffdfa,#f8f5ef);box-shadow:0 28px 80px rgba(72,55,34,.22),inset 0 1px rgba(255,255,255,.8)}html[data-theme="light"] .account-delete-panel h2{color:#2d2923}html[data-theme="light"] .account-delete-warning,html[data-theme="light"] .account-delete-rule{color:#817a71}
@media(max-width:560px){.account-delete-dialog{padding:12px}.account-delete-panel{width:min(440px,calc(100vw - 24px));padding:28px 21px 23px}}

/* =========================================================
   18172 - compact OTT top navigation
   sidebar는 향후 이어읽기 홈 이식을 위해 기능/마크업은 보존하되 UI에서 숨긴다.
   ========================================================= */
.sidebar{display:none!important}
.main-view{margin-left:0!important;width:100vw!important;max-width:100vw!important}
.topbar.topbar-ott{
  --topbar-bg-alpha:.86;--topbar-border-alpha:.035;--topbar-shadow-alpha:.11;--topbar-blur:15px;
  height:72px;min-height:72px;padding:0 24px 0 28px;gap:18px;
  justify-content:flex-start;background:rgba(6,7,8,var(--topbar-bg-alpha));
}
.topbar-left{display:flex;align-items:center;min-width:0;gap:24px;height:100%}
.topbar-brand{display:inline-flex;align-items:center;flex:0 0 auto;height:100%;color:#f4f0e8;white-space:nowrap}
.topbar-brand-logo{display:block;width:auto;height:48px;max-width:164px;object-fit:contain;filter:drop-shadow(0 1px 8px rgba(229,190,110,.06));user-select:none;-webkit-user-drag:none}
.topbar-brand-ko{font-family:Georgia,"Noto Serif KR",serif;font-size:23px;font-weight:850;letter-spacing:-.07em;line-height:1}
.topbar-brand-en{font-family:Georgia,serif;font-size:7.5px;font-weight:700;letter-spacing:.22em;color:#8f8b83}
.topbar-nav{display:flex;align-items:center;gap:4px;height:100%}
.topbar-nav-link{position:relative;display:inline-flex;align-items:center;height:72px;padding:0 12px;color:#a6a7aa;font-size:14.5px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;transition:color .15s ease,background .15s ease}
.topbar-nav-link:hover{color:#f0f0ed}
.topbar-nav-link.is-active{color:#fff}
.topbar-nav-link.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:#caaa70;opacity:.82}
.topbar-nav-link.is-account-only{opacity:.72;color:#85878a}
html[data-test-login="on"] .topbar-nav-link.is-account-only{opacity:1;color:#a6a7aa}
html[data-test-login="on"] .topbar-nav-link.is-account-only.is-active{color:#fff}
.topbar-spacer{flex:1 1 auto;min-width:24px}
.topbar-actions{display:flex;align-items:center;gap:9px;flex:0 0 auto}

.topbar-search-cluster{display:flex;align-items:center;position:relative;height:42px;flex:0 0 auto}
.search-toggle-button,.notification-button{
  width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.075);border-radius:50%;background:rgba(255,255,255,.018);color:#d2d3d5;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.search-toggle-button:hover,.notification-button:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13);color:#fff}
.search-toggle-button:active,.notification-button:active{transform:scale(.96)}
.search-toggle-button svg,.notification-button svg{width:18px;height:18px}
.topbar-search-shell{
  position:absolute;left:46px;top:50%;z-index:4;width:0;height:38px;padding:0;border:1px solid transparent;border-radius:20px;
  opacity:0;overflow:hidden;pointer-events:none;transform:translateY(-50%) translateX(-8px);
  background:rgba(18,19,21,.97);box-shadow:0 12px 34px rgba(0,0,0,.32);
  transition:width .22s cubic-bezier(.2,.75,.22,1),opacity .14s ease,transform .22s ease,padding .22s ease,border-color .16s ease;
}
.topbar-search-cluster.is-expanded .topbar-search-shell{width:310px;padding:0 13px;opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0);border-color:rgba(255,255,255,.10)}
.topbar-search-cluster.is-expanded .search-toggle-button{background:rgba(255,255,255,.07);border-color:rgba(202,170,112,.28);color:#ead5ad}
.topbar-search-shell .search-icon{flex:0 0 auto;color:#8d9093}
.topbar-search-shell .global-search-input{min-width:0;width:100%;font-size:12.5px;color:#eee;background:transparent}
.topbar-search-shell .global-search-input::placeholder{color:#65686b}

.topbar-ott .account-preview{height:38px;min-width:76px;padding:0 14px;border:1px solid rgba(255,255,255,.075);border-radius:19px;background:rgba(255,255,255,.018);gap:7px}
.topbar-ott .account-preview:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13)}
.topbar-ott .account-preview .avatar{display:grid;width:26px;height:26px;flex:0 0 26px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.topbar-ott .account-preview .account-name{font-size:12.5px;font-weight:720;color:#e4e4e1}
.topbar-ott .account-preview .chevron{font-size:11px;color:#777b7f}
.topbar-ott .account-popover{right:0;top:48px}

/* hero background continues beneath the compact top bar, like OTT services. */
.hero-section{margin-top:-72px!important;padding-top:72px!important}
.route-view{min-height:calc(100vh - 72px)}

/* 18172 auth regression guard: these controls are never allowed to disappear. */
.auth-mode-tabs{display:grid!important}
.auth-mode-tab{display:block!important}
.auth-switch-button{display:block!important;visibility:visible!important;opacity:1}

/* Theme toggle and old always-open search are intentionally retired from the header. */
.theme-toggle{display:none!important}

@media(max-width:1100px){
  .topbar.topbar-ott{padding-left:18px;padding-right:18px;gap:12px}
  .topbar-left{gap:16px}
  .topbar-brand-logo{height:42px;max-width:144px}
  .topbar-brand-en{display:none}
  .topbar-nav-link{padding-left:9px;padding-right:9px;font-size:13.5px}
  .topbar-search-cluster.is-expanded .topbar-search-shell{width:270px}
}
@media(max-width:820px){
  .topbar.topbar-ott{height:62px;min-height:62px;padding:0 12px;gap:7px;overflow:visible}
  .topbar-left{gap:9px;min-width:0}
  .topbar-brand-logo{height:34px;max-width:112px}
  .topbar-brand-ko{font-size:20px}
  .topbar-nav{gap:0;overflow-x:auto;scrollbar-width:none}
  .topbar-nav::-webkit-scrollbar{display:none}
  .topbar-nav-link{height:62px;padding:0 8px;font-size:12px}
  .topbar-nav-link.is-active::after{left:8px;right:8px}
  .topbar-spacer{display:none}
  .notification-button{display:none}
  .topbar-ott .account-preview{min-width:58px;padding:0 10px}
  .topbar-ott .account-preview .chevron{display:none}
  .topbar-search-cluster.is-expanded .topbar-search-shell{position:fixed;left:10px;right:10px;top:72px;width:auto!important;transform:none}
  .hero-section{margin-top:-62px!important;padding-top:62px!important}
}


/* ================================================================
   18176 · 완독 후 좋아요 질문
   ================================================================ */
.completion-like-dialog{position:fixed;inset:0;z-index:54500;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .18s ease}
.completion-like-dialog[hidden]{display:none}
.completion-like-dialog.is-open{opacity:1;pointer-events:auto}
.completion-like-backdrop{position:absolute;inset:0;background:rgba(4,5,5,.76)}
.completion-like-card{position:relative;width:min(430px,calc(100vw - 38px));padding:30px 28px 26px;border:1px solid rgba(218,194,139,.17);border-radius:18px;background:linear-gradient(155deg,rgba(26,27,26,.99),rgba(15,16,15,.995));box-shadow:0 28px 76px rgba(0,0,0,.52);text-align:center;color:#f0ede6;transform:translateY(10px) scale(.985);transition:transform .2s ease}
.completion-like-dialog.is-open .completion-like-card{transform:translateY(0) scale(1)}
.completion-like-close{position:absolute;right:13px;top:11px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:rgba(240,239,233,.5);font-size:24px;cursor:pointer}
.completion-like-close:hover{background:rgba(255,255,255,.055);color:#f1efe9}
.completion-like-kicker{font:800 10px/1.2 inherit;letter-spacing:.22em;color:rgba(216,177,103,.72)}
.completion-like-heart{margin:19px auto 13px;font-size:36px;line-height:1;color:#d6ad67}
.completion-like-card h2{margin:0;font-size:19px;line-height:1.45;color:rgba(247,245,239,.94)}
.completion-like-card p{margin:9px 0 0;color:rgba(235,231,223,.55);font-size:12px;line-height:1.7}
.completion-like-actions{display:flex;justify-content:center;gap:10px;margin-top:24px}
.completion-like-actions button{min-width:126px;height:42px;border-radius:10px;font:750 12px/1 inherit;cursor:pointer}
.completion-like-skip{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);color:rgba(238,235,228,.67)}
.completion-like-submit{border:1px solid rgba(219,176,96,.42);background:linear-gradient(180deg,#d7ad64,#b8893f);color:#191714;box-shadow:0 8px 22px rgba(185,137,61,.16)}
.completion-like-submit:disabled{opacity:.55;cursor:default}
html[data-theme="light"] .completion-like-backdrop{background:rgba(39,34,28,.5)}
html[data-theme="light"] .completion-like-card{background:linear-gradient(155deg,#f8f5ee,#efebe2);border-color:rgba(99,77,45,.16);color:#41372d}
html[data-theme="light"] .completion-like-card h2{color:#41372d}
html[data-theme="light"] .completion-like-card p{color:rgba(66,54,41,.62)}
html[data-theme="light"] .completion-like-skip{background:rgba(255,255,255,.45);border-color:rgba(75,57,35,.12);color:#67594b}
@media(max-width:560px){.completion-like-card{padding:28px 20px 22px}.completion-like-actions{flex-direction:column}.completion-like-actions button{width:100%}}

/* ================================================================
   18176 · 설정 > 나의 댓글 모아보기 패널
   ================================================================ */
.shortbook-my-comments-layer{position:fixed;top:0;right:0;bottom:0;width:min(520px,94vw);z-index:55200;opacity:0;pointer-events:none;transition:opacity .16s ease}
.shortbook-my-comments-layer[hidden]{display:none}
.shortbook-my-comments-layer.is-visible{opacity:1;pointer-events:auto}
.shortbook-my-comments-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.34)}
.shortbook-my-comments-panel{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;border-left:1px solid rgba(255,255,255,.08);background:linear-gradient(160deg,#17191a,#101112 72%);box-shadow:-24px 0 70px rgba(0,0,0,.42);color:#eeeae2;transform:translateX(22px);transition:transform .18s ease}
.shortbook-my-comments-layer.is-visible .shortbook-my-comments-panel{transform:translateX(0)}
.shortbook-my-comments-head{display:flex;align-items:center;justify-content:space-between;padding:25px 24px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.shortbook-my-comments-head>div{display:flex;flex-direction:column;gap:5px}
.shortbook-my-comments-head span{font:800 9px/1 inherit;letter-spacing:.2em;color:rgba(214,177,107,.7)}
.shortbook-my-comments-head h2{margin:0;font-size:20px;color:#f0ede6}
.shortbook-my-comments-close{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:rgba(236,234,227,.5);font-size:25px;cursor:pointer}
.shortbook-my-comments-close:hover{background:rgba(255,255,255,.05);color:#fff}
.shortbook-my-comments-list{flex:1;overflow:auto;padding:18px 22px 28px}
.shortbook-my-comment{padding:16px 16px 15px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(255,255,255,.025);margin-bottom:11px}
.shortbook-my-comment.is-deleted{opacity:.58}
.shortbook-my-comment-meta{display:flex;align-items:center;gap:8px;min-width:0}
.shortbook-my-comment-meta strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:#eeeae2}
.shortbook-my-comment-meta time{margin-left:auto;flex:0 0 auto;font-size:10px;color:rgba(235,232,224,.36)}
.shortbook-my-comment-reply{padding:3px 6px;border-radius:999px;background:rgba(211,171,101,.1);color:#d5b57b!important;font-size:9px!important;letter-spacing:0!important}
.shortbook-my-comment p{margin:10px 0 12px;font-size:12.5px;line-height:1.75;color:rgba(237,234,227,.72);white-space:pre-wrap;word-break:break-word}
.shortbook-my-comment button{border:0;background:transparent;padding:0;color:#d4b273;font:700 10.5px/1 inherit;cursor:pointer}
.shortbook-my-comment button:hover{text-decoration:underline}
.shortbook-my-comments-empty{min-height:240px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;text-align:center;color:rgba(235,232,224,.45)}
.shortbook-my-comments-empty strong{font-size:14px;color:rgba(241,238,231,.78)}
.shortbook-my-comments-empty span{font-size:11px}
html[data-theme="light"] .shortbook-my-comments-backdrop{background:rgba(39,34,28,.28)}
html[data-theme="light"] .shortbook-my-comments-panel{background:linear-gradient(160deg,#f5f1e9,#ece7df 76%);border-color:rgba(75,57,35,.12);color:#3d3731}
html[data-theme="light"] .shortbook-my-comments-head{border-color:rgba(70,52,31,.08)}
html[data-theme="light"] .shortbook-my-comments-head h2,html[data-theme="light"] .shortbook-my-comment-meta strong{color:#3d3731}
html[data-theme="light"] .shortbook-my-comment{background:rgba(255,255,255,.38);border-color:rgba(70,52,31,.08)}
html[data-theme="light"] .shortbook-my-comment p{color:rgba(65,55,46,.7)}
@media(max-width:620px){.shortbook-my-comments-layer{width:96vw}.shortbook-my-comments-list{padding-left:15px;padding-right:15px}.shortbook-my-comments-head{padding-left:18px;padding-right:18px}}

/* =========================================================
   18179 - Hero 개인 상태는 책 위가 아니라 왼쪽 정보영역에 표시
   ========================================================= */
.hero-personal-status{display:flex;align-items:center;gap:8px;min-height:34px;margin-top:15px;color:#8f9294}
/* 18186: Hero 좋아요/보관함은 문구 대신 아이콘 채움 여부만으로 상태를 보여준다. */
.hero-personal-status-button{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:50%;background:rgba(12,14,16,.28);color:#8f9294;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
.hero-personal-status-button:hover{transform:translateY(-1px);border-color:rgba(220,185,119,.18);background:rgba(255,255,255,.04);color:#d7d2c9}
.hero-personal-status-button svg{width:18px;height:18px;fill:transparent;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:fill .14s ease,color .14s ease}
.hero-personal-status-button.hero-like-action.is-active{color:#ef7182;border-color:rgba(239,113,130,.22);background:rgba(84,28,36,.10)}
.hero-personal-status-button.hero-like-action.is-active svg{fill:currentColor;stroke:currentColor}
.hero-personal-status-button.hero-wishlist-action.is-active{color:#e0bb60;border-color:rgba(224,187,96,.22);background:rgba(102,76,29,.10)}
.hero-personal-status-button.hero-wishlist-action.is-active svg{fill:currentColor;stroke:currentColor}
.hero-personal-progress{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:1px solid rgba(255,224,150,.15);border-radius:999px;background:rgba(12,14,16,.28);color:#8f9294;font-size:11.5px;font-weight:700}
.hero-personal-progress[hidden]{display:none}
.hero-personal-progress strong{color:#efc675;font-size:12px;font-weight:850}
.hero-personal-progress.is-completed strong{color:#d7b56f}
.hero-book-webgl > .shortbook-cover-like-button,.hero-book-webgl > .shortbook-bookmark-progress-badge,.shortbook-wishlist-heart-indicator{display:none!important}
html[data-theme="light"] .hero-personal-status-button,html[data-theme="light"] .hero-personal-progress{border-color:rgba(72,57,39,.10);background:rgba(255,255,255,.34);color:#777169}
html[data-theme="light"] .hero-personal-status-button:hover{background:rgba(255,255,255,.65);color:#494139}
html[data-theme="light"] .hero-personal-progress strong{color:#986821}
@media(max-width:820px){.hero-personal-status{flex-wrap:wrap;gap:7px}.hero-personal-status-button{width:32px;height:32px;padding:0}.hero-personal-progress{height:32px;padding-inline:10px}}

/* 18193 · supplied SHORTBOOK logo / slightly taller navigation */
html[data-theme="light"] .topbar-brand-logo{filter:brightness(.42) saturate(.82) drop-shadow(0 1px 5px rgba(80,58,23,.08))}

/* =========================================================
   18195 - public mini profile + WEBP profile avatar
   ========================================================= */
.account-preview .avatar.has-profile-image,
.account-popover .popover-avatar.has-profile-image{
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.account-preview .avatar.has-profile-image svg,
.account-popover .popover-avatar.has-profile-image svg{opacity:0}

.shortbook-comment-avatar{padding:0;overflow:hidden;font-family:Georgia,serif;appearance:none;-webkit-appearance:none;cursor:default}
button.shortbook-comment-avatar{cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}
button.shortbook-comment-avatar:hover{border-color:rgba(224,188,117,.42);background:rgba(210,173,104,.11);transform:translateY(-1px)}
.shortbook-comment-avatar.has-image{background:rgba(255,255,255,.025)}
.shortbook-comment-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.shortbook-comment-profile-link{margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;cursor:pointer;text-align:left}
.shortbook-comment-profile-link:hover{color:#dfbd7a;text-decoration:underline;text-underline-offset:3px}
.shortbook-comment-meta .shortbook-comment-action.is-quick-delete{margin-left:auto;padding:3px 7px;border:1px solid rgba(214,93,88,.14);border-radius:7px;background:rgba(214,93,88,.045);color:#ba7774;font-size:9px;line-height:1.15}
.shortbook-comment-meta .shortbook-comment-action.is-quick-delete:hover{border-color:rgba(224,105,99,.28);background:rgba(214,93,88,.09);color:#e08a85}
.shortbook-comment-meta{align-items:center}

.shortbook-public-profile-dialog[hidden],.shortbook-avatar-preview-dialog[hidden]{display:none!important}
.shortbook-public-profile-dialog,.shortbook-avatar-preview-dialog{
  position:fixed;inset:0;z-index:15120;display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .16s ease;
}
.shortbook-public-profile-dialog.is-open,.shortbook-avatar-preview-dialog.is-open{opacity:1}
.shortbook-public-profile-backdrop,.shortbook-avatar-preview-backdrop{position:absolute;inset:0;background:rgba(3,4,5,.70);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.shortbook-public-profile-card,.shortbook-avatar-preview-card{
  position:relative;z-index:1;box-sizing:border-box;width:min(390px,calc(100vw - 28px));
  border:1px solid rgba(255,255,255,.085);border-radius:20px;
  background:linear-gradient(160deg,rgba(29,30,31,.99),rgba(17,18,19,.995) 72%);
  box-shadow:0 28px 90px rgba(0,0,0,.58);color:#ebe8e1;transform:translateY(7px) scale(.99);transition:transform .18s cubic-bezier(.2,.75,.25,1)
}
.shortbook-public-profile-dialog.is-open .shortbook-public-profile-card,.shortbook-avatar-preview-dialog.is-open .shortbook-avatar-preview-card{transform:translateY(0) scale(1)}
.shortbook-public-profile-card{padding:30px 28px 25px}
.shortbook-public-profile-close,.shortbook-avatar-preview-close{position:absolute;top:12px;right:13px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#85898c;font-size:23px;cursor:pointer}
.shortbook-public-profile-close:hover,.shortbook-avatar-preview-close:hover{background:rgba(255,255,255,.05);color:#eeeae3}
.shortbook-public-profile-loading{padding:36px 10px;text-align:center;color:#85888a;font-size:11px;line-height:1.65}
.shortbook-public-profile-hero{display:grid;grid-template-columns:82px minmax(0,1fr);align-items:center;gap:18px}
.shortbook-public-profile-avatar{display:grid;place-items:center;width:82px;height:82px;overflow:hidden;border:1px solid rgba(216,179,107,.22);border-radius:25px;background:linear-gradient(145deg,rgba(212,175,105,.13),rgba(255,255,255,.025));color:#d2b16d;font:800 28px/1 Georgia,serif;box-shadow:0 14px 34px rgba(0,0,0,.22)}
.shortbook-public-profile-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.shortbook-public-profile-hero h2{margin:0 0 8px;color:#f0ede7;font-size:22px;letter-spacing:-.04em}
.shortbook-public-profile-hero strong{display:inline-block;margin-right:8px;color:#d9ba79;font-size:13px}
.shortbook-public-profile-hero span{color:#8b8e90;font-size:10.5px}
.shortbook-public-profile-stat{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding:15px 16px;border:1px solid rgba(255,255,255,.055);border-radius:13px;background:rgba(255,255,255,.018)}
.shortbook-public-profile-stat span{color:#7f8386;font-size:10px;font-weight:700}.shortbook-public-profile-stat b{color:#dfddd6;font-size:17px}

.profile-avatar.has-image{overflow:hidden;padding:0;background:rgba(255,255,255,.025)}
.profile-avatar.has-image img{display:block;width:100%;height:100%;object-fit:cover}
.profile-avatar-guide{margin-top:7px;color:#6f7376;font-size:9px;line-height:1.5}
.profile-edit-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.profile-edit-button.is-muted{border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.025);color:#929598}
.profile-edit-button.is-muted:hover{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:#d2d0cb}

.shortbook-avatar-preview-card{padding:30px 29px 25px;width:min(470px,calc(100vw - 28px))}
.shortbook-avatar-preview-card .route-kicker{margin:0 0 7px;color:#9e875e}.shortbook-avatar-preview-card h2{margin:0;color:#f0ede7;font-size:22px;letter-spacing:-.04em}.shortbook-avatar-preview-card>p{margin:8px 0 18px;color:#7f8385;font-size:10px;line-height:1.65}
.shortbook-avatar-crop-stage{position:relative;width:min(280px,72vw);aspect-ratio:1;margin:0 auto;overflow:hidden;border:1px solid rgba(216,179,107,.20);border-radius:18px;background:#0c0d0e;box-shadow:0 16px 42px rgba(0,0,0,.34);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.shortbook-avatar-crop-stage.is-dragging{cursor:grabbing}
.shortbook-avatar-crop-stage canvas{display:block;width:100%;height:100%}
.shortbook-avatar-crop-ring{pointer-events:none;position:absolute;inset:7%;border:1px solid rgba(243,220,171,.72);border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.12),inset 0 0 0 1px rgba(0,0,0,.12)}
.shortbook-avatar-crop-controls{display:grid;grid-template-columns:auto minmax(0,1fr) 42px auto;align-items:center;gap:9px;margin-top:15px;color:#7e8285;font-size:9px}
.shortbook-avatar-crop-controls input[type="range"]{width:100%;accent-color:#d5b476;cursor:pointer}
.shortbook-avatar-crop-controls b{color:#c0a56e;font-size:9px;text-align:right}
.shortbook-avatar-crop-controls button{height:30px;padding:0 9px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(255,255,255,.025);color:#8c9092;font-size:8.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.shortbook-avatar-crop-controls button:hover{border-color:rgba(216,179,107,.16);color:#d3b77f;background:rgba(216,179,107,.04)}
.shortbook-avatar-preview-meta{margin-top:11px;text-align:center;color:#767a7d;font-size:9.5px}
.shortbook-avatar-preview-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:8px;margin-top:18px}.shortbook-avatar-preview-actions button{min-height:43px;border:1px solid rgba(255,255,255,.075);border-radius:10px;background:rgba(255,255,255,.025);color:#9da0a2;font-size:10.5px;font-weight:750;cursor:pointer}.shortbook-avatar-preview-actions button.is-primary{border-color:rgba(222,188,120,.22);background:#d5b476;color:#211b12}.shortbook-avatar-preview-actions button:hover{background:rgba(255,255,255,.05);color:#e2dfd9}.shortbook-avatar-preview-actions button.is-primary:hover{background:#dfbe80;color:#211b12}

html[data-theme="light"] .shortbook-public-profile-backdrop,html[data-theme="light"] .shortbook-avatar-preview-backdrop{background:rgba(69,60,49,.30)}
html[data-theme="light"] .shortbook-public-profile-card,html[data-theme="light"] .shortbook-avatar-preview-card{border-color:rgba(65,54,41,.10);background:linear-gradient(180deg,#fffdfa,#f8f5ef);box-shadow:0 28px 80px rgba(72,55,34,.22);color:#39342d}
html[data-theme="light"] .shortbook-public-profile-hero h2,html[data-theme="light"] .shortbook-avatar-preview-card h2{color:#312c26}
html[data-theme="light"] .shortbook-public-profile-stat{border-color:rgba(68,56,41,.08);background:rgba(68,56,41,.025)}html[data-theme="light"] .shortbook-public-profile-stat b{color:#39342d}

@media(max-width:920px){.profile-edit-actions{grid-column:2;justify-content:flex-start}}
@media(max-width:560px){.shortbook-public-profile-card,.shortbook-avatar-preview-card{padding:27px 20px 22px}.shortbook-public-profile-hero{grid-template-columns:68px minmax(0,1fr);gap:14px}.shortbook-public-profile-avatar{width:68px;height:68px;border-radius:21px;font-size:24px}.shortbook-avatar-crop-stage{width:min(240px,74vw)}.shortbook-avatar-crop-controls{grid-template-columns:auto minmax(0,1fr) 38px}.shortbook-avatar-crop-controls button{grid-column:1/-1;justify-self:center}.profile-avatar-guide{font-size:8.5px}.profile-edit-actions{grid-column:1/-1;justify-content:flex-start}.profile-edit-actions .profile-edit-button{font-size:9px}}
.shortbook-comment-profile-link{color:#f0eee8;font-size:14.5px;font-weight:800;line-height:1.25}
.shortbook-comment-meta .shortbook-comment-action.is-quick-delete{margin-left:0}

/* 18196 · in-app profile image crop + WEBP compression */

/* 18197 · compact profile settings menu */
.profile-settings-wrap{position:relative;align-self:start;justify-self:end}
.profile-settings-toggle{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.075);border-radius:12px;background:rgba(255,255,255,.025);color:#8f9294;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease}
.profile-settings-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.profile-settings-toggle:hover,.profile-settings-wrap.is-open .profile-settings-toggle{border-color:rgba(216,179,107,.22);background:rgba(216,179,107,.055);color:#d2b576}
.profile-settings-toggle:active{transform:scale(.97)}
.profile-settings-menu{position:absolute;z-index:20;top:46px;right:0;width:166px;padding:6px;border:1px solid rgba(255,255,255,.075);border-radius:12px;background:rgba(16,16,15,.96);box-shadow:0 18px 42px rgba(0,0,0,.38);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.profile-settings-menu[hidden]{display:none!important}
.profile-settings-menu button{display:flex;align-items:center;width:100%;min-height:36px;padding:0 11px;border:0;border-radius:8px;background:transparent;color:#a5a7a8;font-size:10.5px;font-weight:720;text-align:left;cursor:pointer;transition:background .14s ease,color .14s ease}
.profile-settings-menu button:hover{background:rgba(216,179,107,.07);color:#e2c98f}
html[data-theme="light"] .profile-settings-toggle{border-color:rgba(67,56,42,.09);background:rgba(255,255,255,.32);color:#77716a}
html[data-theme="light"] .profile-settings-toggle:hover,html[data-theme="light"] .profile-settings-wrap.is-open .profile-settings-toggle{border-color:rgba(145,104,47,.18);background:rgba(145,104,47,.07);color:#946c32}
html[data-theme="light"] .profile-settings-menu{border-color:rgba(68,56,41,.10);background:rgba(253,250,244,.97);box-shadow:0 18px 38px rgba(72,55,34,.18)}
html[data-theme="light"] .profile-settings-menu button{color:#6f6961}
html[data-theme="light"] .profile-settings-menu button:hover{background:rgba(145,104,47,.07);color:#845f2e}
@media(max-width:920px){.profile-settings-wrap{grid-column:3;grid-row:1;align-self:center}.profile-identity-card{grid-template-columns:68px minmax(0,1fr) auto}}
@media(max-width:560px){.profile-settings-wrap{grid-column:3;grid-row:1;align-self:start}.profile-identity-card{grid-template-columns:56px minmax(0,1fr) auto}.profile-settings-toggle{width:34px;height:34px;border-radius:10px}.profile-settings-menu{top:41px;width:158px}.profile-settings-menu button{min-height:34px;font-size:10px}}



/* =========================================================
   18198 - header profile avatar + account menu order
   ========================================================= */
.topbar-ott .account-preview{padding-left:6px}
.topbar-ott .account-preview .avatar svg{width:15px;height:15px}
.topbar-ott .account-preview .avatar.has-profile-image{border:1px solid rgba(224,188,117,.18);background-color:#202224}
.account-popover-divider-before-auth{margin-top:8px}
.account-menu-item.is-primary.is-logout{color:#b7b8ba}
.account-menu-item.is-primary.is-logout .account-menu-icon{color:#8f9396}
.account-menu-item.is-primary.is-logout:hover{color:#eee}
@media(max-width:820px){
  .topbar-ott .account-preview{min-width:42px;padding:0 6px}
  .topbar-ott .account-preview .avatar{width:28px;height:28px;flex-basis:28px}
}

/* =========================================================
   18199 - profile settings menu stacking fix
   Keep the settings popover above the reading stat cards.
   ========================================================= */
.route-view[data-route="profile"] .profile-identity-card{
  position:relative;
  z-index:4;
}
.route-view[data-route="profile"] .profile-settings-wrap{
  z-index:5;
}
.route-view[data-route="profile"] .profile-settings-wrap.is-open{
  z-index:40;
}
.route-view[data-route="profile"] .profile-settings-menu{
  z-index:50;
}


/* =========================================================
   18200 - centered comment delete confirmation
   ========================================================= */
.shortbook-comment-delete-dialog{
  position:fixed;inset:0;z-index:55600;display:grid;place-items:center;padding:20px;
  background:rgba(3,4,4,.68);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;transition:opacity 150ms ease;
}
.shortbook-comment-delete-dialog.is-visible{opacity:1}
.shortbook-comment-delete-card{
  box-sizing:border-box;width:min(390px,calc(100vw - 32px));padding:28px 26px 22px;
  border:1px solid rgba(255,255,255,.085);border-radius:18px;
  background:linear-gradient(155deg,rgba(27,28,28,.985),rgba(15,16,16,.985));
  box-shadow:0 28px 80px rgba(0,0,0,.54);text-align:center;color:#f1eee7;
  transform:translateY(8px) scale(.985);transition:transform 170ms cubic-bezier(.22,1,.36,1);
}
.shortbook-comment-delete-dialog.is-visible .shortbook-comment-delete-card{transform:translateY(0) scale(1)}
.shortbook-comment-delete-icon{
  display:grid;place-items:center;width:42px;height:42px;margin:0 auto 15px;border-radius:50%;
  border:1px solid rgba(218,107,96,.30);background:rgba(218,107,96,.10);color:#e9a29b;
  font:400 27px/1 system-ui,sans-serif;
}
.shortbook-comment-delete-card h3{margin:0;color:#f2eee7;font-size:19px;font-weight:850;letter-spacing:-.025em}
.shortbook-comment-delete-card p{margin:9px 0 22px;color:#939698;font-size:13px;font-weight:600;line-height:1.55}
.shortbook-comment-delete-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.shortbook-comment-delete-actions button{
  min-height:44px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.045);
  color:#d8d6d1;font:800 13.5px/1 inherit;cursor:pointer;transition:background 150ms ease,border-color 150ms ease,transform 150ms ease;
}
.shortbook-comment-delete-actions button:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.13)}
.shortbook-comment-delete-actions button:active{transform:scale(.985)}
.shortbook-comment-delete-actions button.is-danger{border-color:rgba(219,98,88,.30);background:rgba(180,59,52,.18);color:#f2b1aa}
.shortbook-comment-delete-actions button.is-danger:hover{border-color:rgba(226,111,101,.45);background:rgba(190,62,55,.27)}
html[data-theme="light"] .shortbook-comment-delete-dialog{background:rgba(34,29,24,.32)}
html[data-theme="light"] .shortbook-comment-delete-card{border-color:rgba(74,55,34,.13);background:linear-gradient(155deg,#fffaf1,#f2ece3);color:#3c3731;box-shadow:0 28px 70px rgba(65,48,29,.22)}
html[data-theme="light"] .shortbook-comment-delete-card h3{color:#3c3731}
html[data-theme="light"] .shortbook-comment-delete-card p{color:#797068}
html[data-theme="light"] .shortbook-comment-delete-actions button{border-color:rgba(74,55,34,.12);background:rgba(74,55,34,.04);color:#575049}
@media(max-width:520px){.shortbook-comment-delete-card{padding:25px 20px 19px;border-radius:16px}.shortbook-comment-delete-actions button{min-height:46px}}

/* =========================================================
   18202 - shared Shortbook alert / confirm dialog
   ========================================================= */
.shortbook-common-dialog[hidden]{display:none!important}
.shortbook-common-dialog{
  position:fixed;inset:0;z-index:55800;display:grid;place-items:center;padding:20px;
  background:rgba(3,4,4,.68);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transition:opacity 150ms ease;
}
.shortbook-common-dialog.is-visible{opacity:1}
.shortbook-common-dialog-card{
  box-sizing:border-box;width:min(410px,calc(100vw - 32px));padding:29px 27px 23px;
  border:1px solid rgba(255,255,255,.085);border-radius:19px;
  background:linear-gradient(155deg,rgba(27,28,28,.99),rgba(14,15,15,.99));
  box-shadow:0 30px 90px rgba(0,0,0,.56);text-align:center;color:#f1eee7;
  transform:translateY(8px) scale(.985);transition:transform 170ms cubic-bezier(.22,1,.36,1);
}
.shortbook-common-dialog.is-visible .shortbook-common-dialog-card{transform:translateY(0) scale(1)}
.shortbook-common-dialog-icon{
  display:grid;place-items:center;width:43px;height:43px;margin:0 auto 15px;border-radius:50%;
  border:1px solid rgba(214,179,105,.25);background:rgba(214,179,105,.09);color:#ddbd7b;
  font:800 18px/1 system-ui,sans-serif;
}
.shortbook-common-dialog[data-tone="danger"] .shortbook-common-dialog-icon{
  border-color:rgba(220,105,96,.30);background:rgba(220,105,96,.10);color:#eba39c;
}
.shortbook-common-dialog[data-tone="warning"] .shortbook-common-dialog-icon{
  border-color:rgba(218,178,96,.28);background:rgba(218,178,96,.10);color:#e3c177;
}
.shortbook-common-dialog-card h2{margin:0;color:#f2eee7;font-size:19px;font-weight:850;letter-spacing:-.025em}
.shortbook-common-dialog-card p{margin:10px 0 23px;color:#95989a;font-size:13px;font-weight:600;line-height:1.65;white-space:pre-line;word-break:keep-all}
.shortbook-common-dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.shortbook-common-dialog[data-mode="alert"] .shortbook-common-dialog-actions{grid-template-columns:1fr}
.shortbook-common-dialog-actions button{
  min-height:44px;border:1px solid rgba(255,255,255,.08);border-radius:11px;
  background:rgba(255,255,255,.045);color:#d8d6d1;font:800 13.5px/1 system-ui,sans-serif;
  cursor:pointer;transition:background 150ms ease,border-color 150ms ease,transform 150ms ease;
}
.shortbook-common-dialog-actions button:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.13)}
.shortbook-common-dialog-actions button:active{transform:scale(.985)}
.shortbook-common-dialog-actions .is-confirm{border-color:rgba(216,179,107,.23);background:rgba(216,179,107,.13);color:#ecd6a3}
.shortbook-common-dialog-actions .is-confirm:hover{border-color:rgba(216,179,107,.34);background:rgba(216,179,107,.19)}
.shortbook-common-dialog-actions .is-confirm.is-danger{border-color:rgba(219,98,88,.31);background:rgba(180,59,52,.19);color:#f2b1aa}
.shortbook-common-dialog-actions .is-confirm.is-danger:hover{border-color:rgba(226,111,101,.45);background:rgba(190,62,55,.28)}
html[data-theme="light"] .shortbook-common-dialog{background:rgba(34,29,24,.32)}
html[data-theme="light"] .shortbook-common-dialog-card{border-color:rgba(74,55,34,.13);background:linear-gradient(155deg,#fffaf1,#f2ece3);color:#3c3731;box-shadow:0 28px 70px rgba(65,48,29,.22)}
html[data-theme="light"] .shortbook-common-dialog-card h2{color:#3c3731}
html[data-theme="light"] .shortbook-common-dialog-card p{color:#797068}
html[data-theme="light"] .shortbook-common-dialog-actions button{border-color:rgba(74,55,34,.12);background:rgba(74,55,34,.04);color:#575049}
@media(max-width:520px){.shortbook-common-dialog-card{padding:25px 20px 20px;border-radius:16px}.shortbook-common-dialog-actions button{min-height:46px}}

/* =========================================================
   18203 - profile shop / collectible themes
   Four 300 XP themes + one 1000 XP premium theme.
   All backgrounds are CSS-rendered: no extra image request is required.
   ========================================================= */
.profile-identity-controls{display:flex;align-items:flex-start;justify-content:flex-end;gap:8px;align-self:start;position:relative;z-index:5}
.profile-shop-open{height:38px;padding:0 13px;border:1px solid rgba(216,179,107,.16);border-radius:12px;background:rgba(216,179,107,.045);color:#b99c64;font-size:9.5px;font-weight:850;letter-spacing:.04em;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease}
.profile-shop-open:hover{border-color:rgba(216,179,107,.28);background:rgba(216,179,107,.085);color:#e0c27f}.profile-shop-open:active{transform:scale(.97)}
.profile-representative-title{display:flex;align-items:center;gap:8px;margin-top:7px}.profile-representative-title span{color:#696d70;font-size:8px;font-weight:760;letter-spacing:.07em}.profile-representative-title strong{color:#bda269;font-size:10.5px;font-weight:800}

.shortbook-profile-shop-dialog[hidden]{display:none!important}
.shortbook-profile-shop-dialog{position:fixed;inset:0;z-index:15240;display:grid;place-items:center;padding:24px;opacity:0;transition:opacity .16s ease}
.shortbook-profile-shop-dialog.is-open{opacity:1}
.shortbook-profile-shop-backdrop{position:absolute;inset:0;background:rgba(2,3,4,.76);-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px)}
.shortbook-profile-shop-card{position:relative;z-index:1;box-sizing:border-box;width:min(820px,calc(100vw - 34px));max-height:min(760px,calc(100vh - 40px));overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:linear-gradient(155deg,rgba(24,25,25,.99),rgba(12,13,13,.995));box-shadow:0 32px 100px rgba(0,0,0,.62);color:#ece9e2;transform:translateY(9px) scale(.992);transition:transform .18s cubic-bezier(.2,.75,.25,1)}
.shortbook-profile-shop-dialog.is-open .shortbook-profile-shop-card{transform:translateY(0) scale(1)}
.shortbook-profile-shop-close{position:absolute;z-index:3;top:13px;right:14px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#808487;font-size:24px;cursor:pointer}.shortbook-profile-shop-close:hover{background:rgba(255,255,255,.05);color:#eee}
.shortbook-profile-shop-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:28px 30px 20px;border-bottom:1px solid rgba(255,255,255,.055)}
.shortbook-profile-shop-head h2{margin:4px 0 0;color:#f0ede6;font-size:24px;letter-spacing:-.045em}.shortbook-profile-shop-head p{max-width:520px;margin:8px 0 0;color:#74787b;font-size:10px;line-height:1.6}
.shortbook-profile-shop-wallet{min-width:138px;padding:12px 14px;border:1px solid rgba(216,179,107,.13);border-radius:12px;background:rgba(216,179,107,.035);text-align:right}.shortbook-profile-shop-wallet span{display:block;color:#777b7e;font-size:8.5px;font-weight:750}.shortbook-profile-shop-wallet strong{display:block;margin-top:4px;color:#d5b777;font-size:16px}
.shortbook-profile-shop-tabs{display:flex;gap:4px;padding:12px 30px 0}.shortbook-profile-shop-tabs button{height:34px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:#75797c;font-size:10px;font-weight:800;cursor:pointer}.shortbook-profile-shop-tabs button:hover{color:#c6c3bd;background:rgba(255,255,255,.025)}.shortbook-profile-shop-tabs button.is-active{background:rgba(216,179,107,.075);color:#d6b879}
.shortbook-profile-shop-content{max-height:570px;overflow:auto;padding:14px 30px 30px;scrollbar-width:thin;scrollbar-color:rgba(210,176,106,.18) transparent}.profile-shop-loading{padding:60px 0;text-align:center;color:#777b7d;font-size:11px}
.profile-shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.profile-shop-item{display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.06);border-radius:15px;background:rgba(255,255,255,.017);box-shadow:inset 0 1px rgba(255,255,255,.012)}.profile-shop-item.is-premium{border-color:rgba(218,181,103,.18);box-shadow:inset 0 1px rgba(255,228,168,.035),0 9px 26px rgba(0,0,0,.14)}
.profile-shop-theme-preview,.profile-shop-title-preview{position:relative;display:flex;align-items:flex-end;min-height:112px;padding:13px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.045);background:#111}.profile-shop-theme-preview>span{position:relative;z-index:2;padding:4px 6px;border:1px solid rgba(255,255,255,.10);border-radius:5px;background:rgba(3,4,4,.34);color:rgba(242,238,227,.75);font-size:7px;font-weight:900;letter-spacing:.13em;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.profile-shop-title-preview{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;background:radial-gradient(circle at 12% 12%,rgba(205,168,97,.10),transparent 38%),linear-gradient(145deg,#171817,#0e0f0f)}.profile-shop-title-preview span{color:#777b7d;font-size:7.5px;font-weight:750;letter-spacing:.08em}.profile-shop-title-preview strong{color:#ddd8ce;font-size:18px;letter-spacing:-.035em}.profile-shop-title-preview.is-premium strong{color:#dfc17e;text-shadow:0 0 24px rgba(220,179,96,.12)}
.profile-shop-item-copy{padding:12px 13px 9px;min-height:76px}.profile-shop-item-copy>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.profile-shop-item-copy strong{color:#dcd9d2;font-size:11.5px}.profile-shop-item-copy p{margin:6px 0 0;color:#696d70;font-size:8.5px;line-height:1.52}.profile-shop-premium-tag{flex:0 0 auto;padding:3px 5px;border:1px solid rgba(218,181,103,.16);border-radius:5px;background:rgba(218,181,103,.045);color:#bfa568;font-size:6.8px;font-weight:900;letter-spacing:.05em}
.profile-shop-action{height:36px;margin:0 10px 10px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(255,255,255,.025);color:#9a9d9f;font-size:9.5px;font-weight:820;cursor:pointer;transition:.15s ease}.profile-shop-action:hover:not(:disabled){border-color:rgba(218,181,103,.18);background:rgba(218,181,103,.06);color:#d2b473}.profile-shop-action.is-buy{border-color:rgba(218,181,103,.13);background:rgba(218,181,103,.04);color:#bda269}.profile-shop-action.is-buy.is-premium{border-color:rgba(234,196,116,.24);background:linear-gradient(135deg,rgba(218,181,103,.12),rgba(218,181,103,.045));color:#e2c37f}.profile-shop-action.is-selected{border-color:rgba(112,153,118,.14);background:rgba(91,139,100,.07);color:#8fad95}.profile-shop-action:disabled{cursor:default;opacity:.55}

/* Default profile background preview */
.profile-shop-theme-preview[data-profile-theme="theme_default"]{background-image:linear-gradient(180deg,rgba(6,7,7,.05),rgba(6,7,7,.32)),url('assets/profile/profile-page-background.webp?v=18215-default-moonlit-library');background-size:cover;background-position:center}

/* 300 XP · simple profile backgrounds */
.route-view[data-route="profile"][data-profile-theme="theme_quiet_shelf"]::before,
.profile-shop-theme-preview[data-profile-theme="theme_quiet_shelf"],
.shortbook-public-profile-card[data-profile-theme="theme_quiet_shelf"]{
  background-image:linear-gradient(180deg,rgba(6,8,10,.12),rgba(6,8,10,.46)),url('assets/profile/theme_quiet_shelf.webp?v=18217-theme1');
  background-size:cover;
  background-position:center;
}
.route-view[data-route="profile"][data-profile-theme="theme_rain_window"]::before,
.profile-shop-theme-preview[data-profile-theme="theme_rain_window"],
.shortbook-public-profile-card[data-profile-theme="theme_rain_window"]{
  background-image:linear-gradient(180deg,rgba(8,8,9,.12),rgba(8,8,9,.44)),url('assets/profile/theme_rain_window.webp?v=18217-theme2');
  background-size:cover;
  background-position:center;
}
.route-view[data-route="profile"][data-profile-theme="theme_parchment_night"]::before,
.profile-shop-theme-preview[data-profile-theme="theme_parchment_night"],
.shortbook-public-profile-card[data-profile-theme="theme_parchment_night"]{
  background-image:linear-gradient(180deg,rgba(9,8,14,.14),rgba(9,8,14,.46)),url('assets/profile/theme_parchment_night.webp?v=18217-theme3');
  background-size:cover;
  background-position:center;
}
.route-view[data-route="profile"][data-profile-theme="theme_dawn_ink"]::before,
.profile-shop-theme-preview[data-profile-theme="theme_dawn_ink"],
.shortbook-public-profile-card[data-profile-theme="theme_dawn_ink"]{
  background-image:linear-gradient(180deg,rgba(6,9,18,.10),rgba(6,9,18,.42)),url('assets/profile/theme_dawn_ink.webp?v=18217-theme4');
  background-size:cover;
  background-position:center;
}

/* 1000 XP · premium profile background */
.route-view[data-route="profile"][data-profile-theme="theme_golden_astrarium"]::before,
.profile-shop-theme-preview[data-profile-theme="theme_golden_astrarium"],
.shortbook-public-profile-card[data-profile-theme="theme_golden_astrarium"]{
  background-image:linear-gradient(180deg,rgba(6,10,14,.10),rgba(6,10,14,.36)),url('assets/profile/theme_golden_astrarium.webp?v=18217-theme5');
  background-size:cover;
  background-position:center;
}
.route-view[data-route="profile"][data-profile-theme="theme_golden_astrarium"]::after{background:linear-gradient(180deg,rgba(5,6,8,.02),rgba(5,6,8,.28) 70%,rgba(5,6,8,.46))}
.profile-shop-theme-preview[data-profile-theme="theme_golden_astrarium"]::after,.shortbook-public-profile-card[data-profile-theme="theme_golden_astrarium"]::after{content:none}
.shortbook-public-profile-card[data-profile-theme="theme_default"]{overflow:hidden;background-color:#111;background-image:url('assets/profile/profile-page-background.webp?v=18215-default-moonlit-library');background-size:cover;background-position:center}.shortbook-public-profile-card[data-profile-theme="theme_default"]>[data-public-profile-content]{position:relative;z-index:2}.shortbook-public-profile-card[data-profile-theme="theme_default"]>.shortbook-public-profile-close{z-index:3}.shortbook-public-profile-card[data-profile-theme="theme_default"]::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,6,.16),rgba(5,6,6,.56));pointer-events:none;z-index:0}
.shortbook-public-profile-card[data-profile-theme]:not([data-profile-theme="theme_default"]){overflow:hidden;background-color:#111;background-size:cover;background-position:center}.shortbook-public-profile-card[data-profile-theme]:not([data-profile-theme="theme_default"])>[data-public-profile-content]{position:relative;z-index:2}.shortbook-public-profile-card[data-profile-theme]:not([data-profile-theme="theme_default"])>.shortbook-public-profile-close{z-index:3}.shortbook-public-profile-card[data-profile-theme]:not([data-profile-theme="theme_default"])::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,6,.14),rgba(5,6,6,.50));pointer-events:none;z-index:0}

.shortbook-public-profile-hero span{font-size:12px}
.shortbook-public-profile-representative{display:flex;flex-direction:column;gap:4px;margin:19px 2px 0;padding:0 2px}.shortbook-public-profile-representative span{color:#727679;font-size:8.5px;font-weight:760;letter-spacing:.08em}.shortbook-public-profile-representative strong{color:#c9ac70;font-size:12.5px;font-weight:820;letter-spacing:-.018em}.shortbook-public-profile-stat{margin-top:14px}

html[data-theme="light"] .shortbook-profile-shop-backdrop{background:rgba(68,57,45,.32)}
html[data-theme="light"] .shortbook-profile-shop-card{border-color:rgba(66,54,40,.10);background:linear-gradient(155deg,#fffdf8,#f5f0e8);box-shadow:0 30px 80px rgba(72,55,34,.20);color:#39342e}html[data-theme="light"] .shortbook-profile-shop-head{border-color:rgba(65,54,41,.08)}html[data-theme="light"] .shortbook-profile-shop-head h2{color:#38322c}html[data-theme="light"] .profile-shop-item{border-color:rgba(68,56,41,.08);background:rgba(255,255,255,.34)}html[data-theme="light"] .profile-shop-item-copy strong{color:#4b443d}

@media(max-width:900px){.shortbook-profile-shop-card{width:min(680px,calc(100vw - 24px))}.profile-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-identity-controls{grid-column:3;grid-row:1}}
@media(max-width:620px){.shortbook-profile-shop-dialog{padding:12px}.shortbook-profile-shop-card{width:100%;max-height:calc(100vh - 24px);border-radius:18px}.shortbook-profile-shop-head{grid-template-columns:1fr;padding:24px 20px 17px}.shortbook-profile-shop-wallet{justify-self:start;min-width:0;text-align:left}.shortbook-profile-shop-tabs{padding:10px 20px 0}.shortbook-profile-shop-content{padding:12px 20px 22px}.profile-shop-grid{grid-template-columns:1fr}.profile-shop-theme-preview,.profile-shop-title-preview{min-height:104px}.profile-identity-controls{gap:5px}.profile-shop-open{height:34px;padding:0 9px;font-size:8.5px}.shortbook-public-profile-hero span{font-size:11.5px}}

/* =========================================================
   18206 - compact category/library/records route headers
   ========================================================= */
.route-view[data-route="category"],
.route-view[data-route="library"],
.route-view[data-route="records"]{
  padding-top:18px;
}
.route-view[data-route="category"] .route-page-head,
.route-view[data-route="library"] .route-page-head,
.route-view[data-route="records"] .route-page-head{
  margin-bottom:20px;
  padding-top:0;
}
.route-view[data-route="category"] .route-subhead strong{
  color:#e5e3dd;
  font-size:22px;
  font-weight:820;
  letter-spacing:-.035em;
}
html[data-theme="light"] .route-view[data-route="category"] .route-subhead strong{color:#342f29}
@media(max-width:720px){
  .route-view[data-route="category"],
  .route-view[data-route="library"],
  .route-view[data-route="records"]{padding-top:14px}
  .route-view[data-route="category"] .route-page-head,
  .route-view[data-route="library"] .route-page-head,
  .route-view[data-route="records"] .route-page-head{margin-bottom:17px}
  .route-view[data-route="category"] .route-subhead strong{font-size:20px}
}


/* =========================================================
   18207 - profile dashboard reconstruction
   ========================================================= */
.route-view[data-route="profile"] .profile-overview.profile-dashboard{
  width:100%;max-width:none;gap:16px;
}
.profile-dashboard-hero{
  position:relative;display:grid;grid-template-columns:210px minmax(0,1fr) minmax(290px,360px);
  align-items:center;min-height:250px;padding:34px 40px;overflow:visible;
  border:1px solid rgba(255,255,255,.09);border-radius:15px;
  background:linear-gradient(125deg,rgba(20,20,18,.76),rgba(10,11,11,.60) 55%,rgba(16,16,14,.72));
  box-shadow:inset 0 1px rgba(255,255,255,.018),0 20px 60px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(12px) saturate(.92);backdrop-filter:blur(12px) saturate(.92);
}
.profile-dashboard-actions{position:absolute;z-index:20;top:18px;right:20px;display:flex;align-items:center;gap:8px}
.profile-dashboard-shop,.profile-dashboard-settings{
  height:38px;border:1px solid rgba(218,181,103,.17);border-radius:11px;background:rgba(13,14,13,.48);color:#b99b64;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease;
}
.profile-dashboard-shop{display:inline-flex;align-items:center;gap:7px;padding:0 12px;font-size:9.5px;font-weight:850;letter-spacing:.02em}
.profile-dashboard-shop svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.profile-dashboard-shop:hover,.profile-dashboard-settings:hover,.profile-settings-wrap.is-open .profile-dashboard-settings{border-color:rgba(226,190,116,.32);background:rgba(218,181,103,.08);color:#e1bf7a;transform:translateY(-1px)}
.profile-dashboard-actions .profile-settings-wrap{position:relative;z-index:30;align-self:auto;justify-self:auto}
.profile-dashboard-actions .profile-settings-menu{top:45px;right:0;z-index:60}
.profile-dashboard-settings{display:grid;width:38px;padding:0;place-items:center}

.profile-dashboard-avatar{
  display:grid;place-items:center;width:154px;height:154px;overflow:hidden;border:1px solid rgba(230,194,124,.56);border-radius:50%;
  background:linear-gradient(145deg,#5b554b,#242625);color:#dfbf7c;font:800 46px/1 Georgia,"Noto Serif KR",serif;
  box-shadow:0 22px 52px rgba(0,0,0,.34),0 0 0 7px rgba(7,8,8,.34),inset 0 1px rgba(255,255,255,.07);
}
.profile-dashboard-avatar.has-image{background:#141515}.profile-dashboard-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.profile-dashboard-main{min-width:0;padding:12px 44px 4px 0}
.profile-dashboard-name h2{margin:0;color:#f0ede7;font-size:34px;font-weight:830;letter-spacing:-.045em;line-height:1.12}
.profile-dashboard-title-chip{display:inline-flex;align-items:center;gap:9px;height:38px;margin-top:14px;padding:0 18px;border:1px solid rgba(223,184,105,.45);border-radius:999px;background:rgba(204,159,76,.065);color:#d8b675}
.profile-dashboard-title-chip>span{font-size:16px;line-height:1}.profile-dashboard-title-chip>strong{font-size:12.5px;font-weight:790;letter-spacing:-.015em}
.profile-dashboard-level-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-top:23px}
.profile-dashboard-level-row>strong{color:#d7b775;font-size:27px;font-weight:850;letter-spacing:-.035em}
.profile-dashboard-level-row>span{color:#b3aa9c;font-size:11px;font-weight:680;font-variant-numeric:tabular-nums}.profile-dashboard-level-row>span::first-letter{color:#d7b775}
.profile-dashboard-progress{height:11px;margin-top:10px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.09);box-shadow:inset 0 1px 2px rgba(0,0,0,.24)}
.profile-dashboard-progress>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d0a95e,#edd09a);box-shadow:0 0 18px rgba(221,181,103,.16);transition:width .28s ease}

.profile-dashboard-grade{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:17px 4px 6px 35px;border-left:1px solid rgba(255,255,255,.12)}
.profile-dashboard-section-title{display:flex;align-items:center;gap:12px;margin:0 0 20px;color:#ece7dd}.profile-dashboard-section-title>strong{font-size:17px;font-weight:790}
.profile-dashboard-bars{display:flex;align-items:flex-end;gap:3px;width:22px;height:22px}.profile-dashboard-bars i{display:block;width:3px;border-radius:2px;background:#d4ad66}.profile-dashboard-bars i:nth-child(1){height:7px}.profile-dashboard-bars i:nth-child(2){height:13px}.profile-dashboard-bars i:nth-child(3){height:19px}.profile-dashboard-bars i:nth-child(4){height:11px}
.profile-dashboard-grade-card{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:15px;min-height:94px;padding:16px 20px;border:1px solid rgba(218,181,103,.18);border-radius:12px;background:linear-gradient(135deg,rgba(218,181,103,.04),rgba(255,255,255,.015));box-shadow:inset 0 1px rgba(255,255,255,.02)}
.profile-dashboard-cat-icon{display:grid;place-items:center;width:50px;height:50px;border:1px solid rgba(218,181,103,.38);border-radius:50%;color:#d4b06a}.profile-dashboard-cat-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.profile-dashboard-grade-card small{display:block;color:#858078;font-size:9.5px;font-weight:680}.profile-dashboard-grade-card strong{display:block;margin-top:5px;color:#e6e1d7;font-size:22px;font-weight:820;letter-spacing:-.035em;white-space:nowrap}

.profile-dashboard-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));min-height:128px;overflow:hidden;border:1px solid rgba(255,255,255,.085);border-radius:14px;background:rgba(10,11,11,.56);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.profile-dashboard-stat{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr);align-items:center;gap:16px;padding:22px 28px}.profile-dashboard-stat:not(:last-child)::after{content:"";position:absolute;top:27%;right:0;width:1px;height:46%;background:rgba(255,255,255,.10)}
.profile-dashboard-stat-icon{display:grid;place-items:center;width:54px;height:54px;border:1px solid rgba(211,171,96,.23);border-radius:50%;background:rgba(196,149,71,.035);color:#e1bf7c}.profile-dashboard-stat-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.profile-dashboard-stat small{display:block;color:#a6a097;font-size:10.5px;font-weight:650}.profile-dashboard-stat strong{display:block;margin-top:7px;overflow:hidden;color:#f0ede7;font-size:22px;font-weight:830;letter-spacing:-.035em;text-overflow:ellipsis;white-space:nowrap}

.profile-dashboard-bottom{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(320px,.9fr);gap:16px}
.profile-dashboard-titles,.profile-dashboard-theme-card{position:relative;min-height:144px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(9,10,10,.56);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px rgba(255,255,255,.014)}
.profile-dashboard-titles{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:27px 34px}
.profile-dashboard-card-heading{display:flex;align-items:center;gap:20px;min-width:0}.profile-dashboard-medal{display:grid;place-items:center;width:56px;height:56px;flex:0 0 56px;color:#d8b571}.profile-dashboard-medal svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.profile-dashboard-card-heading strong{display:block;color:#eeeae2;font-size:19px;font-weight:810}.profile-dashboard-card-heading p{margin:8px 0 0;color:#85827c;font-size:10.5px;line-height:1.5}
.profile-dashboard-link-button,.profile-dashboard-theme-change{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:190px;height:48px;padding:0 22px;border:1px solid rgba(219,180,104,.30);border-radius:999px;background:rgba(212,166,80,.035);color:#d4b473;font-size:11.5px;font-weight:820;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease}.profile-dashboard-link-button span,.profile-dashboard-theme-change span{font-size:22px;font-weight:400;line-height:1}.profile-dashboard-link-button:hover,.profile-dashboard-theme-change:hover{border-color:rgba(228,192,119,.48);background:rgba(218,181,103,.085);color:#e7c881;transform:translateY(-1px)}

.profile-dashboard-theme-card{display:flex;align-items:center;gap:16px;padding:20px 22px;overflow:hidden}.profile-dashboard-theme-preview{position:absolute!important;inset:0!important;width:auto!important;min-height:0!important;padding:0!important;border:0!important;border-radius:inherit!important;opacity:.28;filter:saturate(.82) brightness(.72);background-size:cover!important;background-position:center!important;pointer-events:none}.profile-dashboard-theme-preview::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,7,7,.88),rgba(6,7,7,.58) 62%,rgba(6,7,7,.44))}.profile-dashboard-theme-preview>span{display:none!important}.profile-dashboard-theme-copy,.profile-dashboard-theme-change{position:relative;z-index:2}.profile-dashboard-theme-copy{min-width:0;flex:1}.profile-dashboard-theme-copy small{display:block;color:#87837b;font-size:9.5px;font-weight:650}.profile-dashboard-theme-copy strong{display:block;margin-top:7px;overflow:hidden;color:#eee9de;font-size:18px;font-weight:810;letter-spacing:-.025em;text-overflow:ellipsis;white-space:nowrap}.profile-dashboard-theme-change{min-width:178px;height:46px;padding:0 17px;background:rgba(8,9,9,.46);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}

html[data-theme="light"] .profile-dashboard-hero,html[data-theme="light"] .profile-dashboard-stats,html[data-theme="light"] .profile-dashboard-titles,html[data-theme="light"] .profile-dashboard-theme-card{border-color:rgba(72,55,35,.10);background:rgba(255,255,255,.44);box-shadow:0 18px 46px rgba(80,61,38,.08)}
html[data-theme="light"] .profile-dashboard-name h2,html[data-theme="light"] .profile-dashboard-grade-card strong,html[data-theme="light"] .profile-dashboard-stat strong,html[data-theme="light"] .profile-dashboard-card-heading strong,html[data-theme="light"] .profile-dashboard-theme-copy strong{color:#38322c}
html[data-theme="light"] .profile-dashboard-grade{border-color:rgba(72,55,35,.12)}html[data-theme="light"] .profile-dashboard-grade-card{border-color:rgba(145,105,48,.16);background:rgba(255,255,255,.30)}html[data-theme="light"] .profile-dashboard-stat:not(:last-child)::after{background:rgba(72,55,35,.10)}

@media(max-width:1180px){
  .profile-dashboard-hero{grid-template-columns:170px minmax(0,1fr) 280px;padding:32px 30px}.profile-dashboard-avatar{width:132px;height:132px}.profile-dashboard-main{padding-right:26px}.profile-dashboard-grade{padding-left:26px}.profile-dashboard-stats{grid-template-columns:repeat(5,minmax(0,1fr))}.profile-dashboard-stat{grid-template-columns:45px minmax(0,1fr);gap:11px;padding:20px 14px}.profile-dashboard-stat-icon{width:43px;height:43px}.profile-dashboard-stat-icon svg{width:22px;height:22px}.profile-dashboard-stat strong{font-size:18px}.profile-dashboard-bottom{grid-template-columns:1.4fr 1fr}.profile-dashboard-titles{padding:24px}.profile-dashboard-link-button{min-width:160px}
}
@media(max-width:900px){
  .profile-dashboard-hero{grid-template-columns:120px minmax(0,1fr);gap:22px;padding:68px 24px 26px}.profile-dashboard-avatar{width:112px;height:112px}.profile-dashboard-main{padding:0}.profile-dashboard-grade{grid-column:1/-1;padding:22px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.09)}.profile-dashboard-section-title{margin-bottom:12px}.profile-dashboard-grade-card{max-width:360px}.profile-dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-dashboard-stat{min-height:100px}.profile-dashboard-stat:not(:last-child)::after{display:none}.profile-dashboard-stat:last-child{grid-column:1/-1}.profile-dashboard-bottom{grid-template-columns:1fr}.profile-dashboard-theme-card{min-height:132px}
}
@media(max-width:620px){
  .profile-dashboard-hero{display:flex;flex-direction:column;align-items:flex-start;padding:66px 20px 22px}.profile-dashboard-avatar{width:96px;height:96px}.profile-dashboard-main{width:100%}.profile-dashboard-name h2{font-size:28px}.profile-dashboard-title-chip{height:34px;padding:0 14px}.profile-dashboard-level-row>strong{font-size:23px}.profile-dashboard-grade{width:100%}.profile-dashboard-grade-card{width:100%;max-width:none;box-sizing:border-box}.profile-dashboard-stats{grid-template-columns:1fr}.profile-dashboard-stat,.profile-dashboard-stat:last-child{grid-column:auto;min-height:84px;padding:15px 20px}.profile-dashboard-stat-icon{width:46px;height:46px}.profile-dashboard-stat strong{font-size:18px}.profile-dashboard-titles{align-items:flex-start;flex-direction:column;padding:22px}.profile-dashboard-link-button{width:100%;min-width:0}.profile-dashboard-theme-card{align-items:flex-start;flex-direction:column;padding:22px}.profile-dashboard-theme-change{width:100%;min-width:0}.profile-dashboard-actions{top:15px;right:15px}.profile-dashboard-shop{height:36px}.profile-dashboard-settings{width:36px;height:36px}.profile-dashboard-card-heading{gap:13px}.profile-dashboard-medal{width:44px;height:44px;flex-basis:44px}.profile-dashboard-medal svg{width:34px;height:34px}
}

/* =========================================================
   18208 - full-width profile background showcase
   ========================================================= */
.route-view[data-route="profile"]{
  padding:0 30px 50px;
  overflow:hidden;
  background:#090a0a;
}
.route-view[data-route="profile"]::before,
.route-view[data-route="profile"]::after{display:none!important}
.route-view[data-route="profile"] .profile-overview.profile-showcase{
  width:100%;max-width:none;gap:0;
}
.profile-showcase-scene{
  position:relative;min-height:clamp(700px,82vh,780px);margin:0 -30px;padding:0 46px 26px;overflow:hidden;
  background-color:#101111;background-repeat:no-repeat;background-size:cover;background-position:center;
  border-bottom:0;
  box-shadow:0 30px 80px rgba(0,0,0,.18);
}
.profile-showcase-scene::before{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,6,6,.92) 0%,rgba(5,6,6,.64) 28%,rgba(5,6,6,.18) 64%,rgba(5,6,6,.14) 100%),
    linear-gradient(180deg,rgba(5,6,6,.12) 0%,rgba(5,6,6,.02) 45%,rgba(5,6,6,.82) 100%);
}
.profile-showcase-scene::after{
  content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;height:45%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(7,8,8,.22) 34%,rgba(7,8,8,.78) 100%);
}
.profile-showcase-scene[data-profile-theme="theme_default"]{
  background-image:url('assets/profile/profile-page-background.webp?v=18215-default-moonlit-library');
}
.profile-showcase-scene[data-profile-theme="theme_quiet_shelf"]{
  background-image:url('assets/profile/theme_quiet_shelf.webp?v=18217-theme1');
}
.profile-showcase-scene[data-profile-theme="theme_rain_window"]{
  background-image:url('assets/profile/theme_rain_window.webp?v=18217-theme2');
}
.profile-showcase-scene[data-profile-theme="theme_parchment_night"]{
  background-image:url('assets/profile/theme_parchment_night.webp?v=18217-theme3');
}
.profile-showcase-scene[data-profile-theme="theme_dawn_ink"]{
  background-image:url('assets/profile/theme_dawn_ink.webp?v=18217-theme4');
}
.profile-showcase-scene[data-profile-theme="theme_golden_astrarium"]{
  background-image:url('assets/profile/theme_golden_astrarium.webp?v=18217-theme5');
}
.profile-showcase-actions{
  position:absolute;z-index:8;top:28px;right:46px;display:flex;align-items:center;gap:8px;
}
.profile-showcase-action,.profile-showcase-settings{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:39px;padding:0 13px;
  border:1px solid rgba(238,222,189,.16);border-radius:999px;background:rgba(7,8,8,.44);color:#d9d2c6;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:10px;font-weight:790;cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease;
}
.profile-showcase-action svg,.profile-showcase-settings svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.profile-showcase-action:hover,.profile-showcase-settings:hover,.profile-settings-wrap.is-open .profile-showcase-settings{border-color:rgba(226,190,116,.34);background:rgba(218,181,103,.09);color:#ebcc8a;transform:translateY(-1px)}
.profile-showcase-settings{width:auto;padding:0 13px}.profile-showcase-settings>span{display:inline}
.profile-showcase-more{width:42px;height:42px;padding:0;border-radius:50%}.profile-showcase-more svg{width:20px;height:20px}.profile-showcase-more svg path{stroke-width:4;stroke-linecap:round}.profile-more-menu{width:212px;padding:8px}.profile-more-menu button{min-height:40px;padding:0 13px;font-size:11px}
.profile-showcase-actions .profile-settings-wrap{position:relative;z-index:20}.profile-showcase-actions .profile-settings-menu{top:50px;right:0;z-index:80}
.profile-showcase-identity{
  position:absolute;z-index:3;left:46px;right:46px;bottom:164px;
  display:grid;grid-template-columns:176px 270px minmax(260px,1fr);align-items:end;gap:26px;
}
.profile-showcase-avatar{
  display:grid;place-items:center;width:158px;height:158px;overflow:hidden;border:2px solid rgba(226,190,118,.74);border-radius:50%;
  background:#171818;color:#dfbd77;font:800 44px/1 Georgia,"Noto Serif KR",serif;
  box-shadow:0 22px 54px rgba(0,0,0,.44),0 0 0 5px rgba(5,6,6,.38),inset 0 1px rgba(255,255,255,.08);
}
.profile-showcase-avatar.has-image{background:#111}.profile-showcase-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.profile-showcase-copy{min-width:0;padding-bottom:4px}.profile-showcase-copy h2{margin:0;color:#f4f1eb;font-size:34px;font-weight:840;letter-spacing:-.045em;line-height:1.08;text-shadow:0 2px 18px rgba(0,0,0,.48)}
.profile-showcase-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}.profile-showcase-badges>span{display:inline-flex;align-items:center;height:31px;padding:0 13px;border-radius:999px;font-size:10.5px;font-weight:770;white-space:nowrap}
.profile-showcase-representative{border:1px solid rgba(225,188,111,.38);background:rgba(8,9,9,.42);color:#e0bd79;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.profile-showcase-growth{border:1px solid rgba(255,255,255,.10);background:rgba(8,9,9,.34);color:#aaa8a3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.profile-showcase-reading-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:13px}.profile-showcase-reading-meta>span{color:#aaa7a0;font-size:9.5px}.profile-showcase-reading-meta>span:not(:last-child)::after{content:"·";margin-left:8px;color:#5e6162}.profile-showcase-reading-meta strong{color:#ddd5c7;font-weight:760}
.profile-showcase-level{align-self:end;min-width:0;padding:0 0 10px 22px}.profile-showcase-level>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:20px}.profile-showcase-level strong{color:#d9b670;font-size:25px;font-weight:850;letter-spacing:-.035em}.profile-showcase-level span{color:#b7b0a5;font-size:10.5px;font-weight:670;font-variant-numeric:tabular-nums}
.profile-showcase-progress{height:10px;margin-top:10px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.10);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}.profile-showcase-progress>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#cfa85d,#efd49d);box-shadow:0 0 18px rgba(218,179,102,.18);transition:width .28s ease}
.profile-showcase-stats{
  position:absolute;z-index:3;left:46px;right:46px;bottom:26px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;
}
.profile-showcase-stat{display:grid;grid-template-columns:50px minmax(0,1fr);align-items:center;gap:12px;min-height:100px;padding:14px 15px;border:1px solid rgba(255,255,255,.11);border-radius:13px;background:rgba(7,8,8,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px rgba(255,255,255,.02)}
.profile-showcase-stat-icon{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(217,178,102,.24);border-radius:50%;background:rgba(207,161,79,.045);color:#dfbc77}.profile-showcase-stat-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.profile-showcase-stat small{display:block;color:#aaa59c;font-size:10px;font-weight:660}.profile-showcase-stat strong{display:block;margin-top:6px;color:#f1eee8;font-size:20px;font-weight:830;letter-spacing:-.035em;white-space:nowrap}.profile-showcase-stat strong em{margin-left:5px;color:#b9b3aa;font-size:11px;font-style:normal;font-weight:680}
.profile-showcase-titles{padding:28px 16px 6px;border-bottom:1px solid rgba(255,255,255,.06)}
.profile-showcase-titles-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.profile-showcase-titles-head>strong{color:#eeeae2;font-size:19px;font-weight:810;letter-spacing:-.025em}.profile-showcase-titles-head button{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:transparent;color:#888b8d;font-size:10.5px;font-weight:720;cursor:pointer}.profile-showcase-titles-head button:hover{color:#d7b673}.profile-showcase-titles-head button span{font-size:20px;line-height:1}
.profile-showcase-title-list{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:18px}.profile-showcase-title-chip,.profile-showcase-title-more{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.025);color:#bbb8b2;font-size:10.5px;font-weight:740}.profile-showcase-title-chip.is-representative{border-color:rgba(224,184,105,.50);background:rgba(213,166,78,.07);color:#e3c27f}.profile-showcase-title-chip i{color:#e0b963;font-style:normal;font-size:13px}.profile-showcase-title-more{color:#777b7e}.profile-showcase-title-empty{color:#777b7e;font-size:10.5px}

html[data-theme="light"] .route-view[data-route="profile"]{background:#e9e4dc}
html[data-theme="light"] .profile-showcase-titles{border-color:rgba(70,53,33,.10)}
html[data-theme="light"] .profile-showcase-titles-head>strong{color:#38322c}
html[data-theme="light"] .profile-showcase-title-chip,html[data-theme="light"] .profile-showcase-title-more{border-color:rgba(70,53,33,.10);background:rgba(255,255,255,.45);color:#6f675f}

@media(max-width:1180px){
  .profile-showcase-scene{min-height:clamp(680px,80vh,730px);padding-left:30px;padding-right:30px}.profile-showcase-actions{right:30px}.profile-showcase-identity{left:30px;right:30px;grid-template-columns:146px 235px minmax(230px,1fr)}.profile-showcase-avatar{width:134px;height:134px}.profile-showcase-copy h2{font-size:30px}.profile-showcase-level{padding-left:8px}.profile-showcase-stats{left:30px;right:30px;gap:10px}.profile-showcase-stat{grid-template-columns:45px minmax(0,1fr);gap:11px;padding:13px 14px}.profile-showcase-stat-icon{width:43px;height:43px}.profile-showcase-stat strong{font-size:18px}
}
@media(max-width:900px){
  .route-view[data-route="profile"]{padding-left:18px;padding-right:18px}.profile-showcase-scene{min-height:auto;margin:0 -18px;padding:88px 22px 24px}.profile-showcase-actions{top:18px;right:22px}.profile-showcase-identity{position:relative;left:auto;right:auto;bottom:auto;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:22px}.profile-showcase-avatar{width:112px;height:112px}.profile-showcase-level{grid-column:1/-1;padding:10px 0 0}.profile-showcase-stats{position:relative;left:auto;right:auto;bottom:auto;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:26px}.profile-showcase-stat{min-height:92px}.profile-showcase-reading-meta{margin-top:10px}
}
@media(max-width:620px){
  .route-view[data-route="profile"]{padding-left:12px;padding-right:12px;padding-bottom:34px}.profile-showcase-scene{margin:0 -12px;padding:76px 16px 18px;background-position:center}.profile-showcase-actions{top:14px;right:14px;gap:6px}.profile-showcase-action,.profile-showcase-settings{height:34px;padding:0 10px;font-size:8.5px}.profile-showcase-action span{display:none}.profile-showcase-settings>span{display:none}.profile-showcase-identity{display:flex;flex-direction:column;align-items:flex-start;gap:14px}.profile-showcase-avatar{width:96px;height:96px}.profile-showcase-copy h2{font-size:28px}.profile-showcase-level{width:100%;box-sizing:border-box}.profile-showcase-stats{grid-template-columns:1fr;gap:8px;margin-top:20px}.profile-showcase-stat{min-height:76px;grid-template-columns:44px minmax(0,1fr);padding:11px 14px}.profile-showcase-stat-icon{width:40px;height:40px}.profile-showcase-stat strong{font-size:17px}.profile-showcase-titles{padding:22px 4px 4px}.profile-showcase-title-list{gap:7px}.profile-showcase-title-chip,.profile-showcase-title-more{height:34px;padding:0 12px;font-size:9.5px}
}



/* =========================================================
   18249 - profile owned items 3-way layout
   ========================================================= */
.profile-showcase-collections{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.025);border-bottom:1px solid rgba(255,255,255,.06);
}
.profile-showcase-collection-panel{min-width:0;min-height:146px;padding:24px 24px 20px;box-sizing:border-box}
.profile-showcase-collection-panel+ .profile-showcase-collection-panel{border-left:1px solid rgba(255,255,255,.06)}
.profile-showcase-collection-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.profile-showcase-collection-head>strong{color:#eeeae2;font-size:17px;font-weight:810;letter-spacing:-.025em}
.profile-showcase-collection-head button{display:inline-flex;align-items:center;gap:7px;padding:0;border:0;background:transparent;color:#888b8d;font-size:10px;font-weight:720;cursor:pointer}
.profile-showcase-collection-head button:hover{color:#d7b673}.profile-showcase-collection-head button span{font-size:18px;line-height:1}
.profile-showcase-collections .profile-showcase-title-list{margin-top:16px;gap:7px}
.profile-showcase-collections .profile-showcase-title-chip,.profile-showcase-collections .profile-showcase-title-more{height:34px;padding:0 12px;font-size:9.5px}
.profile-showcase-theme-list{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:15px}
.profile-showcase-theme-chip{display:inline-grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:8px;min-width:0;height:38px;padding:3px 10px 3px 3px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.025);color:#bbb8b2;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease}
.profile-showcase-theme-chip:hover{transform:translateY(-1px);border-color:rgba(218,181,103,.24);color:#e1c384}
.profile-showcase-theme-chip.is-selected{border-color:rgba(224,184,105,.5);background:rgba(213,166,78,.07);color:#e3c27f}
.profile-showcase-theme-chip:disabled{opacity:.55;cursor:wait}
.profile-showcase-theme-thumb.profile-shop-theme-preview{display:block;width:42px;height:30px;min-height:0;padding:0;border:0;border-radius:999px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.profile-showcase-theme-chip strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9.5px;font-weight:750}
.profile-showcase-theme-more{display:inline-grid;place-items:center;height:34px;padding:0 11px;border:1px solid rgba(255,255,255,.08);border-radius:999px;color:#777b7e;font-size:9.5px}
.profile-showcase-shop-panel{display:grid;place-items:center;padding:18px 24px}
.profile-showcase-shop-button{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"eyebrow arrow" "title arrow" "desc arrow";align-items:center;width:100%;min-height:104px;padding:18px 20px;border:1px solid rgba(218,181,103,.18);border-radius:14px;background:linear-gradient(135deg,rgba(218,181,103,.085),rgba(255,255,255,.018));color:#d9d5cd;text-align:left;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.profile-showcase-shop-button:hover{transform:translateY(-2px);border-color:rgba(229,193,119,.36);background:linear-gradient(135deg,rgba(218,181,103,.13),rgba(255,255,255,.025))}
.profile-showcase-shop-button>span{grid-area:eyebrow;color:#8f7a54;font-size:8px;font-weight:900;letter-spacing:.13em}
.profile-showcase-shop-button>strong{grid-area:title;margin-top:5px;color:#ead09a;font-size:20px;font-weight:840;letter-spacing:-.035em}
.profile-showcase-shop-button>small{grid-area:desc;margin-top:5px;color:#7e8182;font-size:9.5px;font-weight:650}
.profile-showcase-shop-button>i{grid-area:arrow;color:#c9a867;font-size:30px;font-style:normal;font-weight:300}
html[data-theme="light"] .profile-showcase-collections{border-color:rgba(70,53,33,.10)}
html[data-theme="light"] .profile-showcase-collection-panel+ .profile-showcase-collection-panel{border-left-color:rgba(70,53,33,.10)}
html[data-theme="light"] .profile-showcase-collection-head>strong{color:#38322c}
html[data-theme="light"] .profile-showcase-theme-chip{border-color:rgba(70,53,33,.10);background:rgba(255,255,255,.45);color:#6f675f}
html[data-theme="light"] .profile-showcase-shop-button{border-color:rgba(145,104,47,.16);background:rgba(255,255,255,.38)}
@media(max-width:900px){.profile-showcase-collections{grid-template-columns:1fr}.profile-showcase-collection-panel+ .profile-showcase-collection-panel{border-left:0;border-top:1px solid rgba(255,255,255,.06)}.profile-showcase-collection-panel{min-height:0;padding:20px 18px}.profile-showcase-shop-panel{padding:16px 18px 22px}}

/* =========================================================
   18209 - favorite genres onboarding / preference editor
   ========================================================= */
.genre-preference-dialog[hidden]{display:none!important}
.genre-preference-dialog{position:fixed;inset:0;z-index:55350;display:grid;place-items:center;padding:20px;background:rgba(4,5,5,.70);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity 160ms ease,visibility 0s linear 160ms}
.genre-preference-dialog.is-open{opacity:1;visibility:visible;transition-delay:0s}
.genre-preference-panel{position:relative;box-sizing:border-box;width:min(520px,calc(100vw - 28px));padding:31px 30px 25px;border:1px solid rgba(255,255,255,.085);border-radius:21px;background:linear-gradient(155deg,rgba(27,28,28,.99),rgba(14,15,15,.99));box-shadow:0 30px 90px rgba(0,0,0,.58);color:#eeeae3;transform:translateY(8px) scale(.99);transition:transform 180ms cubic-bezier(.22,1,.36,1)}
.genre-preference-dialog.is-open .genre-preference-panel{transform:translateY(0) scale(1)}
.genre-preference-close{position:absolute;top:13px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#808487;font-size:23px;cursor:pointer}.genre-preference-close:hover{background:rgba(255,255,255,.05);color:#f0ede7}
.genre-preference-kicker{display:block;margin-bottom:8px;color:#b7975c;font-size:9.5px;font-weight:850;letter-spacing:.20em}.genre-preference-panel h2{margin:0;color:#f2efe8;font-size:24px;letter-spacing:-.035em}.genre-preference-copy{max-width:430px;margin:9px 0 0;color:#85898c;font-size:11px;line-height:1.65}
.genre-preference-count{display:flex;align-items:baseline;justify-content:flex-end;gap:4px;margin:18px 0 10px;color:#777b7e;font-size:10px}.genre-preference-count strong{color:#d9b66e;font-size:20px}.genre-preference-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.genre-preference-option{min-height:42px;padding:0 9px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.023);color:#989c9e;font:760 11px/1 inherit;cursor:pointer;transition:background 150ms ease,border-color 150ms ease,color 150ms ease,transform 150ms ease}.genre-preference-option:hover{transform:translateY(-1px);border-color:rgba(211,160,82,.22);color:#d7c295}.genre-preference-option.is-selected{border-color:rgba(224,185,105,.48);background:linear-gradient(135deg,rgba(211,160,82,.16),rgba(211,160,82,.07));color:#efd49e;box-shadow:inset 0 0 0 1px rgba(232,194,117,.06)}
.genre-preference-actions{display:grid;grid-template-columns:.9fr 1.35fr;gap:9px;margin-top:20px}.genre-preference-actions button{min-height:44px;border-radius:10px;font:800 11px/1 inherit;cursor:pointer}.genre-preference-secondary{border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);color:#8d9193}.genre-preference-primary{border:1px solid rgba(225,190,119,.30);background:#d7b36b;color:#211a10}.genre-preference-primary:disabled{opacity:.36;cursor:default}.genre-preference-primary:not(:disabled):hover{background:#e0bd76}.genre-preference-secondary:hover{background:rgba(255,255,255,.05);color:#d8d5ce}.genre-preference-status{margin:11px 0 0;text-align:center;color:#9ca0a2;font-size:10px}.genre-preference-status[data-kind="error"]{color:#dc8c84}
html[data-theme="light"] .genre-preference-dialog{background:rgba(56,47,37,.30)}html[data-theme="light"] .genre-preference-panel{border-color:rgba(68,56,41,.11);background:linear-gradient(160deg,#fffdfa,#f6f2eb);box-shadow:0 28px 80px rgba(72,55,34,.20);color:#38332c}html[data-theme="light"] .genre-preference-panel h2{color:#302b25}html[data-theme="light"] .genre-preference-option{border-color:rgba(68,56,41,.10);background:rgba(68,56,41,.025);color:#716b63}html[data-theme="light"] .genre-preference-option.is-selected{border-color:rgba(160,113,50,.28);background:rgba(174,126,57,.10);color:#8a632d}
@media(max-width:620px){.genre-preference-panel{padding:28px 20px 21px}.genre-preference-options{grid-template-columns:repeat(3,minmax(0,1fr))}.genre-preference-copy{font-size:10.5px}}
@media(max-width:410px){.genre-preference-options{grid-template-columns:repeat(2,minmax(0,1fr))}}





/* =========================================================
   18211 - detail TOC true cover-behind overlay + icon-only comment action
   ========================================================= */
@media(min-width:920px){
  /* 목차가 카드 바깥(표지 뒤)에서 출발할 수 있도록 전환 중에만 overflow를 연다. */
  .shortbook-book-intro-card.is-toc-animating{overflow:visible!important}
  .shortbook-book-intro-card.is-toc-open{overflow:hidden}
  .shortbook-book-intro-details-view{
    position:relative;z-index:1;opacity:1!important;filter:none!important;transform:none!important;
    pointer-events:auto;transition:none!important;
  }
  .shortbook-book-intro-card.is-toc-open .shortbook-book-intro-details-view{
    opacity:1!important;filter:none!important;transform:none!important;pointer-events:none;
  }
  .shortbook-book-intro-toc-view{
    position:absolute;inset:0;z-index:2;padding:inherit;box-sizing:border-box;
    background:linear-gradient(150deg,rgba(31,33,34,.995),rgba(15,17,18,.995));
    opacity:1!important;pointer-events:none;
    /* 카드의 최종 X 이동량만큼 왼쪽 = 정확히 책표지 뒤 */
    transform:translate3d(calc(-1 * var(--book-intro-shift-x)),0,0)!important;
    transition:transform 360ms cubic-bezier(.18,.84,.20,1)!important;
    will-change:transform;
    box-shadow:0 24px 64px rgba(0,0,0,.34);
  }
  .shortbook-book-intro-card.is-toc-open .shortbook-book-intro-toc-view{
    transform:translate3d(0,0,0)!important;pointer-events:auto;
  }
  /* 전환 동안 목차 레이어는 표지(z4)보다 낮은 카드(z3) 안에 있으므로 실제 표지 뒤에서 나타난다. */
  .shortbook-book-intro-card.is-toc-animating .shortbook-book-intro-toc-view{visibility:visible}
}

.shortbook-book-intro-actions{grid-template-columns:minmax(0,1fr) 60px!important}
.shortbook-book-intro-comments-button{
  width:60px;min-width:60px;min-height:56px;padding:0!important;gap:0!important;border-radius:13px;
}
.shortbook-book-intro-comments-button>strong{display:none!important}
.shortbook-book-intro-comments-icon{width:34px!important;height:34px!important;color:#f2d8a4}
.shortbook-book-intro-comments-icon svg{width:34px!important;height:34px!important;stroke-width:1.75}
@media(max-width:919px){
  .shortbook-book-intro-actions{grid-template-columns:minmax(0,1fr) 56px!important}
  .shortbook-book-intro-comments-button{width:56px;min-width:56px;min-height:54px}
  .shortbook-book-intro-comments-icon,.shortbook-book-intro-comments-icon svg{width:32px!important;height:32px!important}
}


/* =========================================================
   18212 - topbar daily quiz + title challenge catalog
   ========================================================= */
.topbar-quiz-button{height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;border:1px solid rgba(206,169,99,.20);border-radius:19px;background:rgba(206,169,99,.055);color:#dbc18e;font:760 11.5px/1 inherit;cursor:pointer;white-space:nowrap;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
.topbar-quiz-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.topbar-quiz-button:hover{background:rgba(206,169,99,.11);border-color:rgba(221,185,113,.34);color:#f0d6a4;transform:translateY(-1px)}
.topbar-quiz-button:active{transform:translateY(0) scale(.98)}
/* 18214: 오늘 이미 참여한 퀴즈는 기능을 막지 않고 강조색만 회색으로 낮춘다. */
.topbar-quiz-button.is-completed,.topbar-quiz-button.is-loading{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.025);color:#898d90;box-shadow:none}
.topbar-quiz-button.is-completed:hover,.topbar-quiz-button.is-loading:hover{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.055);color:#b8bbbd;transform:translateY(-1px)}
html[data-theme="light"] .topbar-quiz-button.is-completed,html[data-theme="light"] .topbar-quiz-button.is-loading{border-color:rgba(61,57,51,.12);background:rgba(61,57,51,.035);color:#85817b}
html[data-theme="light"] .topbar-quiz-button.is-completed:hover,html[data-theme="light"] .topbar-quiz-button.is-loading:hover{border-color:rgba(61,57,51,.20);background:rgba(61,57,51,.065);color:#625e58}
.shortbook-title-challenge-dialog[hidden]{display:none!important}.shortbook-title-challenge-dialog{position:fixed;inset:0;z-index:55300;display:grid;place-items:center;padding:22px;opacity:0;transition:opacity .16s ease}.shortbook-title-challenge-dialog.is-open{opacity:1}.shortbook-title-challenge-backdrop{position:absolute;inset:0;background:rgba(3,4,5,.72);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.shortbook-title-challenge-card{position:relative;z-index:1;width:min(760px,calc(100vw - 32px));height:min(780px,calc(100vh - 42px));display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.085);border-radius:20px;background:linear-gradient(155deg,rgba(27,28,29,.995),rgba(14,15,16,.995));box-shadow:0 30px 90px rgba(0,0,0,.56);color:#ece8e0;transform:translateY(8px) scale(.99);transition:transform .18s ease}.shortbook-title-challenge-dialog.is-open .shortbook-title-challenge-card{transform:none}
.shortbook-title-challenge-head{position:relative;z-index:5;flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:30px 30px 22px;border-bottom:1px solid rgba(255,255,255,.055);background:linear-gradient(180deg,rgba(27,28,29,1),rgba(23,24,25,.995));box-shadow:0 10px 24px rgba(0,0,0,.12)}.shortbook-title-challenge-head>div:first-child{min-width:0}.shortbook-title-challenge-head h2{margin:7px 0 0;color:#f0ece5;font-size:25px;letter-spacing:-.035em}.shortbook-title-challenge-head p{margin:9px 0 0;color:#85898c;font-size:11px;line-height:1.6}.shortbook-title-challenge-head-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.shortbook-title-clear{height:34px;padding:0 12px;border:1px solid rgba(255,255,255,.07);border-radius:999px;background:rgba(255,255,255,.025);color:#9da0a2;font:760 10px/1 inherit;cursor:pointer}.shortbook-title-clear:hover{border-color:rgba(211,160,82,.22);background:rgba(211,160,82,.07);color:#d8b66f}.shortbook-title-challenge-close{width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#8e9193;font-size:23px;cursor:pointer}.shortbook-title-challenge-close:hover{background:rgba(255,255,255,.05);color:#eee}
.shortbook-title-challenge-content{flex:1;min-height:0;overflow:auto;display:grid;gap:24px;padding:24px 30px 30px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}.title-challenge-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px}.title-challenge-section-head strong{color:#e9e5de;font-size:14px}.title-challenge-section-head span{color:#787c7f;font-size:9.5px}.title-challenge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.title-challenge-row{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:11px;min-height:58px;padding:10px 12px;border:1px solid rgba(255,255,255,.055);border-radius:11px;background:rgba(255,255,255,.018);transition:border-color .15s ease,background .15s ease,transform .15s ease}.title-challenge-status{display:grid;place-items:center;min-height:28px;border-radius:999px;background:rgba(255,255,255,.045);color:#85898b;font-size:9px;font-weight:800}.title-challenge-row small{display:block;margin-bottom:5px;color:#777b7e;font-size:9.5px}.title-challenge-row strong{display:block;color:#c8c6c0;font-size:12px;letter-spacing:-.02em}.title-challenge-row.is-earned,.title-challenge-row.is-shop{cursor:pointer}.title-challenge-row.is-earned:hover,.title-challenge-row.is-shop:hover{transform:translateY(-1px);border-color:rgba(211,160,82,.25);background:rgba(211,160,82,.055)}.title-challenge-row.is-earned{border-color:rgba(211,160,82,.16);background:rgba(211,160,82,.035)}.title-challenge-row.is-earned .title-challenge-status{background:rgba(211,160,82,.12);color:#d7b56f}.title-challenge-row.is-earned strong{color:#e6cf9f}.title-challenge-row.is-selected{border-color:rgba(231,196,121,.48);background:rgba(211,160,82,.11);box-shadow:inset 0 0 0 1px rgba(211,160,82,.08)}.title-challenge-row.is-selected .title-challenge-status{background:#d3a052;color:#1d160e}.title-challenge-row.is-secret .title-challenge-status{background:rgba(139,116,167,.10);color:#b5a2cc}.title-challenge-row.is-secret small{letter-spacing:.12em;color:#81728f}.title-challenge-row.is-secret strong{color:#c8bdcf}.title-challenge-row.is-secret.is-earned strong{color:#e6d7ee}.title-challenge-row.is-shop:not(.is-earned) .title-challenge-status{background:rgba(109,132,158,.11);color:#a8bacd}.title-challenge-loading{min-height:260px;display:grid;place-items:center;color:#85898b;font-size:12px}
@media(max-width:820px){.topbar-quiz-button{width:38px;padding:0;border-radius:50%}.topbar-quiz-button span{display:none}.title-challenge-grid{grid-template-columns:1fr}.shortbook-title-challenge-card{height:min(820px,calc(100vh - 24px))}.shortbook-title-challenge-head{padding:24px 20px 18px}.shortbook-title-challenge-head-actions{gap:4px}.shortbook-title-clear{display:none}.shortbook-title-challenge-content{padding:20px 20px 24px}}


/* =========================================================
   18218 - profile-only topbar fade into the showcase background
   검색 버튼/검색창을 지난 뒤부터 어두운 바탕을 점차 걷어내고,
   오늘의 퀴즈 액션 영역부터는 배경 이미지를 그대로 보여준다.
   다른 route의 topbar에는 적용하지 않는다.
   ========================================================= */
.topbar.topbar-ott.is-profile-route{
  --topbar-bg-alpha:0;--topbar-border-alpha:0;--topbar-shadow-alpha:0;--topbar-blur:0px;
  background:linear-gradient(90deg,
    rgba(6,7,8,.94) 0%,
    rgba(6,7,8,.94) 45%,
    rgba(6,7,8,.86) 53%,
    rgba(6,7,8,.62) 62%,
    rgba(6,7,8,.34) 70%,
    rgba(6,7,8,.12) 77%,
    rgba(6,7,8,0) 83%,
    rgba(6,7,8,0) 100%)!important;
  border-bottom-color:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
@media(max-width:820px){
  .topbar.topbar-ott.is-profile-route{
    background:linear-gradient(90deg,rgba(6,7,8,.94) 0%,rgba(6,7,8,.86) 58%,rgba(6,7,8,.30) 78%,rgba(6,7,8,0) 100%)!important;
  }
}


/* =========================================================
   18219 - scroll-reactive topbar on main browsing routes
   홈/카테고리/내서재/기록/마이페이지는 최상단에서 완전 투명하고,
   스크롤 170px 전후까지 자연스럽게 어두워진다. 헤더는 콘텐츠 위에 겹쳐
   프로필에서는 배경 이미지가 상단바 뒤까지 그대로 이어진다.
   ========================================================= */
.topbar.topbar-ott.is-depth-route{
  margin-bottom:-72px;
  background:rgba(6,7,8,var(--topbar-bg-alpha))!important;
  border-bottom-color:rgba(255,255,255,var(--topbar-border-alpha))!important;
  box-shadow:0 8px 26px rgba(0,0,0,var(--topbar-shadow-alpha))!important;
  -webkit-backdrop-filter:blur(var(--topbar-blur)) saturate(1.05)!important;
  backdrop-filter:blur(var(--topbar-blur)) saturate(1.05)!important;
}
.topbar.topbar-ott.is-depth-route + .hero-section{margin-top:0!important;padding-top:72px!important}
.route-view[data-route="category"],
.route-view[data-route="library"],
.route-view[data-route="records"]{padding-top:90px}
.route-view[data-route="profile"]{padding-top:0}
.route-view[data-route="profile"] .profile-showcase-scene{padding-top:72px}
.route-view[data-route="profile"] .profile-showcase-actions{top:92px}
html[data-theme="light"] .topbar.topbar-ott.is-depth-route{background:rgba(250,248,244,var(--topbar-bg-alpha))!important}
@media(max-width:820px){
  .topbar.topbar-ott.is-depth-route{margin-bottom:-62px}
  .topbar.topbar-ott.is-depth-route + .hero-section{padding-top:62px!important}
  .route-view[data-route="category"],.route-view[data-route="library"],.route-view[data-route="records"]{padding-top:78px}
  .route-view[data-route="profile"] .profile-showcase-scene{padding-top:62px}
  .route-view[data-route="profile"] .profile-showcase-actions{top:78px}
}


/* 18222 · owned-title right-click representative title menu */
.profile-showcase-title-chip[data-profile-owned-title-code]{cursor:context-menu;user-select:none}
.profile-title-context-menu[hidden]{display:none!important}
.profile-title-context-menu{position:fixed;z-index:55420;width:190px;padding:6px;border:1px solid rgba(255,255,255,.085);border-radius:11px;background:rgba(18,19,20,.985);box-shadow:0 18px 52px rgba(0,0,0,.48);opacity:0;transform:translateY(-3px) scale(.985);pointer-events:none;transition:opacity .12s ease,transform .12s ease;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.profile-title-context-menu.is-open{opacity:1;transform:none;pointer-events:auto}
.profile-title-context-menu button{display:flex;align-items:center;width:100%;height:36px;padding:0 11px;border:0;border-radius:7px;background:transparent;color:#d9d6d0;font:740 10.5px/1 inherit;text-align:left;cursor:pointer}
.profile-title-context-menu button:hover{background:rgba(215,176,100,.075);color:#e7c47d}
.profile-title-context-menu button.is-cancel{margin-top:4px;border-top:1px solid rgba(255,255,255,.055);border-radius:0 0 7px 7px;color:#85898b}
html[data-theme="light"] .profile-title-context-menu{border-color:rgba(70,53,33,.12);background:rgba(249,246,240,.985);box-shadow:0 18px 46px rgba(71,54,34,.2)}
html[data-theme="light"] .profile-title-context-menu button{color:#4d4841}
html[data-theme="light"] .profile-title-context-menu button:hover{background:rgba(176,126,56,.075);color:#8b652e}


/* =========================================================
   18223 - profile vertical balance + compact overflow menu
   ========================================================= */
@media(min-width:901px){
  .route-view[data-route="profile"] .profile-showcase-scene{min-height:clamp(700px,82vh,780px)}
  .route-view[data-route="profile"] .profile-showcase-identity{bottom:172px}
  .route-view[data-route="profile"] .profile-showcase-stats{bottom:30px}
  .route-view[data-route="profile"] .profile-showcase-titles{padding-top:34px;padding-bottom:14px}
}
.route-view[data-route="profile"] .profile-showcase-actions{gap:0}
.route-view[data-route="profile"] .profile-more-wrap{display:block}
.route-view[data-route="profile"] .profile-showcase-more{display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%}
.route-view[data-route="profile"] .profile-showcase-more svg{width:20px;height:20px}
.route-view[data-route="profile"] .profile-showcase-more svg path{stroke-width:4;stroke-linecap:round}
.route-view[data-route="profile"] .profile-more-menu{top:50px;right:0;width:212px;padding:8px}
.route-view[data-route="profile"] .profile-more-menu button{min-height:40px;padding:0 13px;font-size:11px}
@media(max-width:900px){
  .route-view[data-route="profile"] .profile-showcase-more{width:38px;height:38px}
  .route-view[data-route="profile"] .profile-more-menu{top:45px;width:204px}
}


/* 18225 - ranking like hit target + intro title word-preserving wrap */


/* =========================================================
   18227 - my comments modal lock/delete + profile seam cleanup
   ========================================================= */
html.is-my-comments-open,body.is-my-comments-open{overflow:hidden!important;overscroll-behavior:none}
.shortbook-my-comments-layer{overscroll-behavior:contain}
.shortbook-my-comments-list{overscroll-behavior:contain}
.shortbook-my-comment-meta{position:relative}
.shortbook-my-comment-meta time{margin-left:auto}
.shortbook-my-comment .shortbook-my-comment-delete{flex:0 0 auto;margin-left:2px;padding:5px 7px;border:1px solid rgba(218,116,105,.15);border-radius:7px;background:rgba(180,70,61,.045);color:#b97870;font:740 9.5px/1 inherit;text-decoration:none;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease}
.shortbook-my-comment .shortbook-my-comment-delete:hover{border-color:rgba(218,116,105,.28);background:rgba(180,70,61,.09);color:#df958b;text-decoration:none}
.shortbook-my-comment .shortbook-my-comment-delete:disabled{opacity:.42;cursor:default}
.shortbook-my-comment .shortbook-my-comment-book-link{color:#d4b273}
html[data-theme="light"] .shortbook-my-comment .shortbook-my-comment-delete{border-color:rgba(160,73,60,.15);background:rgba(160,73,60,.035);color:#9c6258}
.route-view[data-route="profile"] .profile-showcase-scene{border-bottom:0!important}

/* =========================================================
   18228 - Public profile refresh + records viewport layout
   ========================================================= */
.shortbook-public-profile-card{
  width:min(520px,calc(100vw - 30px));
  min-height:286px;
  padding:30px 30px 24px;
}
.shortbook-public-profile-card[data-profile-theme="theme_default"]{
  background-position:72% center;
}
.shortbook-public-profile-card[data-profile-theme]:not([data-profile-theme="theme_default"]){
  background-position:center;
}
.shortbook-public-profile-hero{grid-template-columns:92px minmax(0,1fr);gap:20px}
.shortbook-public-profile-avatar{width:92px;height:92px;border-radius:28px}
.shortbook-public-profile-hero h2{font-size:25px}
.shortbook-public-profile-hero strong{font-size:14px}
.shortbook-public-profile-hero span{font-size:11.5px}
.shortbook-public-profile-representative{margin:18px 2px 0}
.shortbook-public-profile-meta{display:flex;align-items:center;justify-content:flex-start;margin:11px 2px 0;color:#96999b;font-size:10.5px;font-weight:700}
.shortbook-public-profile-meta b{color:#ddd8cf;font-size:11px;font-weight:820}
.shortbook-public-profile-stat{display:none!important}

.route-view[data-route="records"] .reading-record-dashboard{
  width:min(1480px,100%);
  max-width:none;
  margin:0 auto;
  grid-template-columns:minmax(0,1.65fr) minmax(390px,.75fr);
  gap:18px;
}
.route-view[data-route="records"] .reading-record-primary{
  display:flex;
  min-width:0;
  min-height:0;
  flex-direction:column;
  padding:15px 14px 14px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008));
  overflow:hidden;
}
.route-view[data-route="records"] .reading-record-primary .route-subhead{
  flex:0 0 auto;
  margin:0 2px 12px;
  padding:0 2px 11px;
  border-bottom:1px solid rgba(255,255,255,.045);
}
.route-view[data-route="records"] .reading-record-list{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:5px;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
.route-view[data-route="records"] .reading-record-list::-webkit-scrollbar{width:8px}
.route-view[data-route="records"] .reading-record-list::-webkit-scrollbar-track{background:transparent}
.route-view[data-route="records"] .reading-record-list::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:rgba(255,255,255,.12);background-clip:padding-box}
.route-view[data-route="records"] .reading-record-list::-webkit-scrollbar-thumb:hover{background:rgba(218,181,103,.25);background-clip:padding-box}
.route-view[data-route="records"] .reading-record-side{gap:10px}
.route-view[data-route="records"] .reading-record-summary.is-compact>div{padding:12px 13px 11px}
.route-view[data-route="records"] .reading-calendar-panel.is-compact{padding:14px 15px 15px}
html[data-theme="light"] .route-view[data-route="records"] .reading-record-primary{border-color:rgba(64,53,40,.08);background:rgba(255,255,255,.25)}

@media(min-width:901px){
  .route-view[data-route="records"]{
    box-sizing:border-box;
    height:100vh;
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding-bottom:26px;
  }
  .route-view[data-route="records"] .route-page-head{flex:0 0 auto}
  .route-view[data-route="records"] .reading-record-dashboard{flex:1 1 auto;min-height:0}
  .route-view[data-route="records"] .reading-record-primary,
  .route-view[data-route="records"] .reading-record-side{min-height:0}
}
@media(max-width:1050px){
  .route-view[data-route="records"] .reading-record-dashboard{grid-template-columns:minmax(0,1.35fr) minmax(330px,.75fr)}
  .route-view[data-route="records"] .reading-record-side{display:flex;grid-template-columns:none}
}
@media(max-width:900px){
  .route-view[data-route="records"]{height:auto;min-height:calc(100vh - 72px);overflow:visible}
  .route-view[data-route="records"] .reading-record-dashboard{display:grid;grid-template-columns:1fr;max-width:900px}
  .route-view[data-route="records"] .reading-record-primary{overflow:visible}
  .route-view[data-route="records"] .reading-record-list{max-height:none;overflow:visible;padding-right:0}
}
@media(max-width:560px){
  .shortbook-public-profile-card{min-height:0;padding:27px 20px 22px}
  .shortbook-public-profile-hero{grid-template-columns:72px minmax(0,1fr);gap:14px}
  .shortbook-public-profile-avatar{width:72px;height:72px;border-radius:22px}
  .shortbook-public-profile-hero h2{font-size:21px}
}
@media(min-width:901px){
  .route-view[data-route="records"] .reading-record-dashboard{align-items:stretch}
  .route-view[data-route="records"] .reading-record-list{flex:1 1 auto}
}
.shortbook-public-profile-card[data-profile-theme="theme_default"]{
  background-size:135% auto;
  background-position:right center;
}


/* 18230 · server notification center */
.notification-button{position:relative}
.notification-button.has-unread{color:#e6c47d;border-color:rgba(222,188,117,.24);background:rgba(222,188,117,.055)}
.notification-unread-badge{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border:2px solid #0a0b0c;border-radius:999px;background:#d9b667;color:#111;font-size:8px;font-weight:900;line-height:1;box-sizing:border-box}
html.shortbook-notification-open{overflow:hidden}
.shortbook-notification-center[hidden]{display:none!important}.shortbook-notification-center{position:fixed;z-index:2147481100;inset:0;pointer-events:none}
.shortbook-notification-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.46);opacity:0;cursor:default;transition:opacity .18s ease}
.shortbook-notification-panel{position:absolute;top:0;right:0;width:min(430px,92vw);height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,#101112,#0b0c0d);border-left:1px solid rgba(255,255,255,.08);box-shadow:-24px 0 70px rgba(0,0,0,.38);transform:translateX(100%);transition:transform .22s cubic-bezier(.2,.75,.25,1);pointer-events:auto}
.shortbook-notification-center.is-open{pointer-events:auto}.shortbook-notification-center.is-open .shortbook-notification-backdrop{opacity:1}.shortbook-notification-center.is-open .shortbook-notification-panel{transform:none}
.shortbook-notification-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;min-height:88px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(15,16,17,.96);backdrop-filter:blur(16px)}
.shortbook-notification-head h2{margin:3px 0 0;color:#f0ede7;font:700 22px/1.2 Georgia,"Noto Serif KR",serif}.shortbook-notification-head-actions{display:flex;align-items:center;gap:8px}.shortbook-notification-head-actions>button{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#aeb1b3;border-radius:9px;height:34px;padding:0 10px;font-size:10px;font-weight:760;cursor:pointer}.shortbook-notification-head-actions>button:hover{color:#e5c47e;border-color:rgba(229,196,126,.22);background:rgba(229,196,126,.055)}.shortbook-notification-close{width:34px;padding:0!important;font-size:20px!important;font-weight:400!important}
.shortbook-notification-list{flex:1;min-height:0;overflow:auto;padding:12px 12px 24px}.shortbook-notification-item{position:relative;margin:0 0 9px;padding:15px 16px 16px;border:1px solid rgba(255,255,255,.075);border-radius:13px;background:rgba(255,255,255,.028);cursor:pointer;transition:.15s ease}.shortbook-notification-item:hover{border-color:rgba(229,196,126,.16);background:rgba(255,255,255,.04)}.shortbook-notification-item.is-read{opacity:.67}.shortbook-notification-item.is-important{border-color:rgba(220,178,92,.18);background:linear-gradient(135deg,rgba(220,178,92,.065),rgba(255,255,255,.018))}.shortbook-notification-item h3{margin:7px 0 7px;color:#eeece7;font-size:13px;line-height:1.4}.shortbook-notification-item p{margin:0;color:#a8abad;font-size:11px;line-height:1.7;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}.shortbook-notification-item>i{position:absolute;top:17px;right:14px;width:7px;height:7px;border-radius:50%;background:#ddb86c;box-shadow:0 0 12px rgba(221,184,108,.3)}
.shortbook-notification-meta{display:flex;align-items:center;gap:6px;color:#707477;font-size:8.5px}.shortbook-notification-meta span,.shortbook-notification-meta b{display:inline-flex;align-items:center;height:19px;padding:0 6px;border-radius:999px;border:1px solid rgba(255,255,255,.08);font-weight:850}.shortbook-notification-meta span.is-notice{color:#b9bec1}.shortbook-notification-meta span.is-maintenance{color:#e5b37b;border-color:rgba(229,179,123,.18)}.shortbook-notification-meta span.is-event{color:#b5cda8;border-color:rgba(181,205,168,.16)}.shortbook-notification-meta b{color:#e3bd70;border-color:rgba(227,189,112,.18)}.shortbook-notification-meta time{margin-left:auto;padding-right:10px}
.shortbook-notification-empty{display:grid;place-items:center;align-content:center;min-height:52vh;text-align:center;color:#777c7f}.shortbook-notification-empty strong{color:#b9bcbe;font-size:13px}.shortbook-notification-empty span{margin-top:7px;font-size:10px}
@media(max-width:640px){.shortbook-notification-panel{width:100vw}.shortbook-notification-head{min-height:78px;padding:15px}.shortbook-notification-list{padding:10px}.shortbook-notification-head h2{font-size:20px}}

/* 18231 - 댓글 작성 정지 상태 / 서버 시간 기준 남은 시간 */
.shortbook-comments-restriction{display:grid;gap:5px;min-height:70px;padding:13px 14px;border:1px solid rgba(190,104,87,.20);border-radius:11px;background:rgba(190,104,87,.065);align-content:center}.shortbook-comments-restriction strong{color:#eaded8;font-size:13px}.shortbook-comments-restriction span{color:#d0aa9f;font-size:11.5px;font-weight:750}.shortbook-comments-restriction small{color:#8c8581;font-size:10.5px;line-height:1.5}.shortbook-comments-restriction.is-checking{border-color:rgba(211,160,82,.14);background:rgba(211,160,82,.045)}.shortbook-comments-restriction.is-checking strong{color:#d6cdbb}.shortbook-comments-restriction.is-checking span{color:#8f8b83}html[data-theme="light"] .shortbook-comments-restriction{border-color:rgba(153,78,65,.18);background:rgba(153,78,65,.055)}html[data-theme="light"] .shortbook-comments-restriction strong{color:#5a4841}html[data-theme="light"] .shortbook-comments-restriction span{color:#8a6156}html[data-theme="light"] .shortbook-comments-restriction small{color:#80726c}

/* ========================================================================== */
/* 18232 - new achievement title badge + celebratory representative equip     */
/* ========================================================================== */
.topbar-nav-link[data-route="profile"],
.sidebar-mypage[data-route="profile"]{position:relative}
.topbar-nav-link.has-new-title-unlock::after{
  content:"";position:absolute;right:-7px;top:3px;width:7px;height:7px;border-radius:50%;
  background:#e84d4d;box-shadow:0 0 0 2px rgba(8,9,10,.94),0 0 10px rgba(232,77,77,.42);
  animation:shortbookNewTitleDot 1.9s ease-in-out infinite
}
.sidebar-mypage.has-new-title-unlock::after{
  content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;border-radius:50%;
  background:#e84d4d;box-shadow:0 0 0 2px rgba(8,9,10,.92),0 0 9px rgba(232,77,77,.38);
  transform:translateY(-50%);animation:shortbookNewTitleDotSide 1.9s ease-in-out infinite
}
@keyframes shortbookNewTitleDot{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.24);opacity:1}}
@keyframes shortbookNewTitleDotSide{0%,100%{transform:translateY(-50%) scale(1);opacity:.9}50%{transform:translateY(-50%) scale(1.24);opacity:1}}

.shortbook-title-unlock-dialog{position:fixed;z-index:2147480900;inset:0;display:grid;place-items:center;padding:24px;pointer-events:none}
.shortbook-title-unlock-dialog[hidden]{display:none}
.shortbook-title-unlock-backdrop{position:absolute;inset:0;background:rgba(2,3,4,.72);backdrop-filter:blur(8px);opacity:0;transition:opacity .2s ease}
.shortbook-title-unlock-card{
  position:relative;width:min(430px,calc(100vw - 32px));overflow:hidden;padding:38px 34px 28px;
  border:1px solid rgba(223,191,131,.32);border-radius:22px;
  background:linear-gradient(165deg,rgba(28,27,25,.98),rgba(12,13,14,.985) 72%);
  box-shadow:0 30px 90px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.055);
  text-align:center;opacity:0;transform:translateY(18px) scale(.965);transition:opacity .22s ease,transform .28s cubic-bezier(.18,.8,.2,1);
  pointer-events:auto
}
.shortbook-title-unlock-dialog.is-open .shortbook-title-unlock-backdrop{opacity:1}
.shortbook-title-unlock-dialog.is-open .shortbook-title-unlock-card{opacity:1;transform:translateY(0) scale(1)}
.shortbook-title-unlock-dialog.is-launching .shortbook-title-unlock-backdrop{opacity:0}
.shortbook-title-unlock-dialog.is-launching .shortbook-title-unlock-card{opacity:0;transform:scale(.98);pointer-events:none}
.shortbook-title-unlock-kicker{display:block;margin-bottom:9px;color:#d6b477;font-size:10px;font-weight:800;letter-spacing:.18em}
.shortbook-title-unlock-card h2{margin:0;color:#f7f2e9;font-family:Georgia,"Noto Serif KR",serif;font-size:25px;line-height:1.36;letter-spacing:-.045em}
.shortbook-title-unlock-copy{margin:13px auto 0;color:#9a9da1;font-size:12px;line-height:1.65}
.shortbook-title-unlock-prize{
  width:min(302px,100%);min-height:92px;margin:25px auto 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  border:1px solid rgba(226,194,132,.46);border-radius:16px;
  background:radial-gradient(circle at 50% 0,rgba(223,191,131,.16),transparent 64%),rgba(255,255,255,.025);
  box-shadow:0 12px 34px rgba(0,0,0,.28),inset 0 0 28px rgba(223,191,131,.035)
}
.shortbook-title-unlock-prize small{color:#8d8f91;font-size:10px;letter-spacing:.05em}
.shortbook-title-unlock-prize strong{color:#f1d49d;font-family:Georgia,"Noto Serif KR",serif;font-size:23px;line-height:1.2;letter-spacing:-.035em;text-shadow:0 0 18px rgba(223,191,131,.13)}
.shortbook-title-unlock-more{margin:12px 0 0;color:#7f8387;font-size:11px}
.shortbook-title-unlock-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:25px}
.shortbook-title-unlock-actions button{height:43px;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:rgba(255,255,255,.04);color:#d6d8da;font:700 12px/1 inherit;cursor:pointer;transition:transform .14s ease,border-color .14s ease,background .14s ease}
.shortbook-title-unlock-actions button:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.07)}
.shortbook-title-unlock-actions button.is-primary{border-color:rgba(224,191,128,.5);background:linear-gradient(180deg,#d6b574,#b78f4c);color:#17130d;box-shadow:0 8px 22px rgba(184,143,76,.16)}
.shortbook-title-unlock-actions button:disabled{opacity:.5;cursor:wait}
.shortbook-title-unlock-burst{position:absolute;left:50%;top:12px;width:170px;height:72px;transform:translateX(-50%);pointer-events:none;opacity:.68}
.shortbook-title-unlock-burst i{position:absolute;left:50%;top:28px;width:3px;height:13px;border-radius:3px;background:#cba761;transform-origin:50% 56px;opacity:.65}
.shortbook-title-unlock-burst i:nth-child(1){transform:translateX(-50%) rotate(-58deg)}
.shortbook-title-unlock-burst i:nth-child(2){transform:translateX(-50%) rotate(-34deg)}
.shortbook-title-unlock-burst i:nth-child(3){transform:translateX(-50%) rotate(-12deg)}
.shortbook-title-unlock-burst i:nth-child(4){transform:translateX(-50%) rotate(12deg)}
.shortbook-title-unlock-burst i:nth-child(5){transform:translateX(-50%) rotate(34deg)}
.shortbook-title-unlock-burst i:nth-child(6){transform:translateX(-50%) rotate(58deg)}

.shortbook-title-equip-fly{
  position:fixed;z-index:2147480950;display:flex;align-items:center;justify-content:center;padding:0 18px;box-sizing:border-box;
  border:1px solid rgba(230,198,137,.62);border-radius:16px;background:linear-gradient(160deg,rgba(44,39,31,.98),rgba(17,17,16,.98));
  color:#f1d49d;font-family:Georgia,"Noto Serif KR",serif;font-size:23px;font-weight:700;letter-spacing:-.035em;
  box-shadow:0 18px 52px rgba(0,0,0,.48),0 0 30px rgba(218,183,116,.16);pointer-events:none;transform-origin:center
}
.shortbook-title-equip-confetti{position:fixed;z-index:2147480960;width:1px;height:1px;pointer-events:none}
.shortbook-title-equip-confetti i{position:absolute;left:0;top:0;width:5px;height:9px;border-radius:2px;background:#d8b76f;opacity:0;animation:shortbookTitleConfetti .72s cubic-bezier(.12,.62,.2,1) var(--delay,0ms) forwards}
.shortbook-title-equip-confetti i:nth-child(3n+2){background:#eee6d9}
.shortbook-title-equip-confetti i:nth-child(3n){background:#b98b53}
@keyframes shortbookTitleConfetti{0%{opacity:0;transform:translate(0,0) scale(.55) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.95) rotate(var(--rot))}}
.profile-showcase-representative.is-title-equipped-celebration{animation:shortbookRepresentativeTitleEquip 1.02s cubic-bezier(.18,.78,.22,1)}
@keyframes shortbookRepresentativeTitleEquip{
  0%{transform:scale(1);box-shadow:0 0 0 rgba(218,183,116,0)}
  28%{transform:scale(1.13);box-shadow:0 0 0 5px rgba(218,183,116,.08),0 0 26px rgba(218,183,116,.22)}
  58%{transform:scale(.98)}
  100%{transform:scale(1);box-shadow:0 0 0 rgba(218,183,116,0)}
}

@media (max-width:680px){
  .shortbook-title-unlock-dialog{padding:16px}
  .shortbook-title-unlock-card{padding:34px 22px 22px;border-radius:18px}
  .shortbook-title-unlock-card h2{font-size:22px}
  .shortbook-title-unlock-prize strong{font-size:21px}
  .topbar-nav-link.has-new-title-unlock::after{right:-4px;top:1px}
}
@media (prefers-reduced-motion:reduce){
  .topbar-nav-link.has-new-title-unlock::after,.sidebar-mypage.has-new-title-unlock::after,.profile-showcase-representative.is-title-equipped-celebration,.shortbook-title-equip-confetti i{animation:none}
  .shortbook-title-unlock-card,.shortbook-title-unlock-backdrop{transition:none}
}

/* 18242 · notification scope tabs */
.shortbook-notification-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 12px 0;background:#0f1011}.shortbook-notification-tabs button{height:36px;border:1px solid rgba(255,255,255,.065);border-radius:9px;background:rgba(255,255,255,.018);color:#7f8487;font-size:10px;font-weight:800;cursor:pointer;transition:.15s ease}.shortbook-notification-tabs button:hover{color:#c8c9c6;border-color:rgba(255,255,255,.11)}.shortbook-notification-tabs button.is-active{color:#e3c078;border-color:rgba(227,192,120,.2);background:rgba(227,192,120,.055)}.shortbook-notification-tabs button span{display:inline-grid;place-items:center;min-width:17px;height:17px;margin-left:4px;padding:0 4px;border-radius:999px;background:rgba(227,192,120,.12);color:#e3c078;font-size:8px}.shortbook-notification-tabs button span:empty{display:none}.shortbook-notification-meta b.is-personal{color:#a9c4db;border-color:rgba(169,196,219,.17)}

/* =========================================================
   18251 - comment mini-profile favorite genres
   ========================================================= */
.shortbook-public-profile-genres{display:flex;flex-direction:column;gap:8px;margin:16px 2px 0;padding:0 2px}
.shortbook-public-profile-genres-label{color:#727679;font-size:8.5px;font-weight:760;letter-spacing:.08em}
.shortbook-public-profile-genres-list{display:flex;flex-wrap:wrap;gap:7px}
.shortbook-public-profile-genre-chip{display:inline-flex;align-items:center;min-height:27px;padding:0 10px;border:1px solid rgba(216,179,107,.17);border-radius:999px;background:rgba(216,179,107,.055);color:#d6bb83;font-size:9.5px;font-weight:760;line-height:1}
.shortbook-public-profile-genres-empty{display:inline-flex;align-items:center;min-height:27px;color:#777b7e;font-size:9.5px;font-weight:680}
html[data-theme="light"] .shortbook-public-profile-genres-label{color:#8a8176}
html[data-theme="light"] .shortbook-public-profile-genre-chip{border-color:rgba(145,104,47,.14);background:rgba(145,104,47,.055);color:#8b642e}
html[data-theme="light"] .shortbook-public-profile-genres-empty{color:#8c857c}

/* =========================================================
   18253 - zero-book staging catalog baseline
   ========================================================= */
.catalog-empty-state{min-height:calc(100vh - 76px);display:grid;place-items:center;padding:72px 28px;box-sizing:border-box}
.catalog-empty-state[hidden]{display:none!important}
.catalog-empty-state-inner{width:min(680px,100%);padding:54px 48px;border:1px solid rgba(255,255,255,.065);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:0 26px 80px rgba(0,0,0,.22);text-align:center}
.catalog-empty-state .section-kicker{margin-bottom:14px;color:#9c8151;font-size:9px;font-weight:900;letter-spacing:.16em}
.catalog-empty-state h1{margin:0;color:#eeeae2;font-family:Georgia,"Noto Serif KR",serif;font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-.045em}
.catalog-empty-state p{margin:16px auto 0;max-width:520px;color:#85898d;font-size:13px;line-height:1.8;word-break:keep-all}
.catalog-empty-state-meta{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px;color:#777b7e;font-size:10px}
.catalog-empty-state-meta strong{display:inline-grid;place-items:center;min-width:52px;height:30px;border:1px solid rgba(218,181,103,.2);border-radius:999px;background:rgba(218,181,103,.065);color:#d5b979;font-size:11px}
html[data-theme="light"] .catalog-empty-state-inner{border-color:rgba(70,53,33,.10);background:rgba(255,255,255,.48);box-shadow:0 26px 70px rgba(83,65,40,.10)}
html[data-theme="light"] .catalog-empty-state h1{color:#38322c}
@media(max-width:720px){.catalog-empty-state{padding:42px 18px}.catalog-empty-state-inner{padding:40px 22px}.catalog-empty-state-meta{flex-direction:column;gap:8px}}