@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#ffffff;
  --paper:#ffffff;
  --paper-2:#fffdf1;
  --line:#ebe7d8;
  --text:#1f1a16;
  --sub:#6d655d;
  --muted:#9b9287;
  --millie:#ffe500;
  --millie-badge:#fff200;
  --millie-deep:#a28700;
  --millie-soft:#fff9b0;
  --ink:#24222a;
  --ink-soft:#343240;
  --violet:#8f7ee7;
  --violet-soft:#ece8ff;
  --green:#22a06b;
  --green-soft:#e3f7ee;
  --sky:#4f83ff;
  --sky-soft:#e7efff;
  --gold:#d68c1b;
  --gold-soft:#fff1d6;
  --shadow:0 14px 36px rgba(36,28,21,.08);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --shell-width:1320px;
  --catalog-shell-width:1608px;
  --mypage-shell-width:1596px;
}
html{scroll-behavior:smooth;overflow-y:scroll;}
body{
  font-family:"Pretendard Variable","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2{text-wrap:balance;}
button,input{font:inherit;}
button{background:none;border:none;cursor:pointer;}
button:focus-visible,a:focus-visible{outline:2px solid var(--millie-deep);outline-offset:2px;border-radius:4px;}
a{text-decoration:none;color:inherit;}
.wrap{width:min(var(--shell-width),calc(100vw - 32px));margin:0 auto;}
.pg{display:none;padding-top:172px;min-height:100vh;}
.pg.on{display:block;}
#pg-books.pg{padding-top:160px;}

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:60;
  padding-top:12px;
  background:#fff;
  box-shadow:0 1px 0 rgba(31,26,22,.08);
  transition:transform .3s ease;
}
.topbar.scrolled-down{
  transform:translateY(-100%);
}
.topbar-inner{
  width:min(var(--shell-width),calc(100vw - 32px));
  margin:0 auto;
  padding:12px 0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  min-width:0;
}
.brand-logo-link{
  display:inline-flex;
  align-items:center;
  padding:0;
  background:transparent;
  border:none;
}
.brand-airline-image{
  display:block;
  width:150px;
  height:auto;
  max-height:42px;
  object-fit:contain;
}
.search-shell{
  position:relative;
  flex:1;
  width:100%;
  max-width:700px;
  height:58px;
  display:flex;
  align-items:center;
  gap:0;
  border-radius:999px;
  background:#fff;
  border:2px solid rgba(196,151,18,.78);
  overflow:visible;
}
.search-category{
  flex-shrink:0;
  padding:0 18px;
  height:100%;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font-size:15px;
  font-weight:800;
  border-right:1px solid rgba(31,26,22,.08);
}
.search-input{
  flex:1;
  height:100%;
  padding:0 18px;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-size:16px;
  font-weight:700;
}
.search-input::placeholder{color:#b9b1a6;}
.search-icon{
  flex-shrink:0;
  width:62px;
  height:100%;
  display:grid;
  place-items:center;
  color:var(--millie-deep);
}
.search-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
}
.book-search-panel{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:0;
  z-index:80;
  padding:16px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(31,26,22,.08);
  box-shadow:0 24px 60px rgba(31,26,22,.16);
}
.book-search-panel[hidden]{display:none;}
.search-panel-inner{
  display:grid;
  gap:16px;
}
.search-panel-title{
  margin:0 0 8px;
  color:var(--text);
  font-size:14px;
  font-weight:900;
}
.search-panel-copy{
  margin:0 0 12px;
  color:var(--sub);
  font-size:12px;
  font-weight:650;
}
.search-category-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.search-category-card{
  min-height:58px;
  padding:11px 12px;
  border-radius:14px;
  background:#fffdf5;
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  text-align:left;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.search-category-card strong{
  color:var(--text);
  font-size:13px;
  line-height:1.2;
  font-weight:900;
}
.search-category-card span{
  color:var(--sub);
  font-size:11px;
  line-height:1.25;
  font-weight:650;
}
.search-category-card:hover,
.search-suggestion-item:hover{
  background:var(--millie-soft);
  border-color:rgba(167,125,9,.2);
  transform:translateY(-1px);
}
.search-quick-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.search-quick-chip{
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:#f7f3ea;
  color:var(--text);
  font-size:12px;
  font-weight:800;
}
.search-suggestion-list{
  display:grid;
  gap:7px;
}
.search-suggestion-item{
  min-height:52px;
  padding:9px 11px;
  border-radius:14px;
  border:1px solid transparent;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  text-align:left;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.search-suggestion-main{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:2px;
}
.search-suggestion-main strong{
  color:var(--text);
  font-size:13px;
  line-height:1.25;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.search-suggestion-main span{
  color:var(--sub);
  font-size:11px;
  font-weight:650;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.search-suggestion-badge{
  padding:4px 8px;
  border-radius:999px;
  background:#f7f3ea;
  color:var(--millie-deep);
  font-size:10px;
  font-weight:900;
}
.mobile-global-search-wrap{
  display:none;
}
.mobile-search-overlay[hidden]{display:none;}
.mobile-search-overlay{
  position:fixed;
  inset:0;
  z-index:260;
  display:flex;
  flex-direction:column;
  background:#fff;
}
.mobile-search-head{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 42px;
  gap:6px;
  align-items:center;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
}
.mobile-search-back,
.mobile-search-clear{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:var(--text);
}
.mobile-search-back svg,
.mobile-search-clear svg,
.mobile-global-search svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.mobile-search-input{
  width:100%;
  height:44px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:0 14px;
  outline:0;
  background:#fffdf5;
  color:var(--text);
  font-size:15px;
  font-weight:800;
}
.mobile-search-body{
  flex:1;
  overflow:auto;
  padding:18px 16px 120px;
}
@media(max-width:768px){
  .mobile-search-body .search-category-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .mobile-search-body .search-category-card{
    min-height:64px;
  }
}
.top-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:nowrap;
}
.status-pill{display:none;}
.tool-icon{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#111;
  background:#fff9df;
  border:1px solid rgba(196,151,18,.22);
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.tool-icon:hover{
  transform:translateY(-1px);
  background:#fff3ba;
  border-color:rgba(196,151,18,.38);
}
.tool-icon svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  stroke-width:1.9;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.tabstrip{
  position:fixed;
  top:96px;
  left:0;
  right:0;
  z-index:55;
  transition:top .3s ease;
}
.tabstrip.scrolled-down{
  top:12px;
}
.tabstrip-inner{
  width:min(var(--shell-width),calc(100vw - 32px));
  margin:0 auto;
  padding:10px 8px;
  border-radius:20px;
  background:rgba(255,252,240,.96);
  border:1px solid rgba(31,26,22,.08);
  box-shadow:0 10px 24px rgba(35,28,22,.08);
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
}
.tabstrip-inner::-webkit-scrollbar{display:none;}
.tab-menu-btn{
  flex-shrink:0;
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  background:#fff;
  color:#2a2a2a;
  font-size:18px;
  font-weight:900;
}
.tab-link{
  flex-shrink:0;
  padding:11px 14px;
  border-radius:14px;
  color:#222;
  font-size:14px;
  font-weight:800;
  transition:background .18s ease,color .18s ease;
}
.tab-link.on,.tab-link:hover{
  background:#fff1bf;
  color:var(--millie-deep);
}

.page-shell{padding:26px 0 44px;}
.section{margin-top:22px;}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.section-title{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.04em;
}
.section-copy{
  color:var(--sub);
  font-size:14px;
}
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--sub);
  font-size:12px;
  font-weight:700;
}
.chip.active{
  background:var(--millie-soft);
  color:#5b4304;
  border-color:rgba(167,125,9,.08);
}
.chip.violet{background:var(--violet-soft);border-color:transparent;color:#5e52b4;}
.chip.green{background:var(--green-soft);border-color:transparent;color:#13734b;}
.chip.gold{background:var(--gold-soft);border-color:transparent;color:#9c680f;}
.link-btn{font-size:14px;font-weight:800;color:var(--millie-deep);min-height:44px;padding:0 4px;display:inline-flex;align-items:center;}

.home-main{
  display:grid;
  gap:22px;
  min-width:0;
}
.hero-stack{
  display:grid;
  gap:16px;
  min-width:0;
}

/* LMS hero grid */
.hero-lms-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);
  gap:16px;
  align-items:start;
  min-width:0;
}
.hero-card{
  border-radius:var(--radius-xl);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  aspect-ratio:1 / 1;
  min-height:0;
  min-width:0;
}
.hero-card[role="button"]{
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.hero-card[role="button"]:not(.card-apply):hover{
  transform:translateY(-2px);
}
.hero-card.card-apply[role="button"],
.hero-card.card-apply[role="button"]:hover,
.hero-card.card-apply[role="button"]:focus,
.hero-card.card-apply[role="button"]:active{
  transform:none;
  transition:none;
}
.hero-card[role="button"]:active{
  transform:translateY(0);
}
.card-apply{
  position:relative;
  align-items:center;
  justify-content:center;
  padding:18px 20px 20px;
  background:#fff2b3;
  color:var(--ink);
  isolation:isolate;
  border:1px solid rgba(214,140,27,.16);
  box-shadow:0 20px 46px rgba(167,125,9,.14);
}
.card-apply::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.16),transparent 31%),
    radial-gradient(circle at 16% 86%,rgba(255,202,58,.2),transparent 36%);
  pointer-events:none;
  z-index:-1;
}
.card-apply::after{
  content:"";
  position:absolute;
  right:18px;
  top:18px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--millie);
  box-shadow:16px 8px 0 rgba(255,122,89,.55),-12px 18px 0 rgba(126,202,178,.5);
  opacity:.9;
}
.card-apply-visual{
  position:relative;
  width:min(100%,224px);
  height:126px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 8px;
  overflow:hidden;
}
.card-apply-art{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.card-apply-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(36,34,42,.08);
  color:rgba(36,34,42,.8);
  font-size:12px;
  line-height:1;
  font-weight:900;
}
.card-apply-title{
  margin:9px 0 0;
  color:var(--ink);
  font-size:25px;
  line-height:1.1;
  font-weight:900;
  text-align:center;
  letter-spacing:0;
}
.card-apply-copy{
  max-width:210px;
  margin:6px auto 0;
  color:#665f55;
  font-size:12px;
  line-height:1.25;
  font-weight:700;
  text-align:center;
  white-space:nowrap;
}
.btn-apply-primary,
.btn-apply-outline{
  min-height:43px;
  border-radius:999px;
  font-size:14px;
  font-weight:850;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease;
}
.btn-apply-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:208px;
  min-height:44px;
  margin-top:11px;
  background:linear-gradient(180deg,#24222a 0%,#151419 100%);
  color:#fff;
  box-shadow:0 16px 30px rgba(36,34,42,.2),0 0 0 4px rgba(255,229,0,.22);
}
.btn-apply-primary::after,
.btn-apply-outline::after,
.slide-cta::after,
.card-mypage-link::after{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-left:8px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
}
.btn-apply-outline{
  color:rgba(255,255,255,.82);
  border:1.5px solid rgba(255,255,255,.24);
}
.btn-apply-primary:hover,
.slide-cta:hover{
  opacity:.9;
  transform:translateY(-1px);
}
.card-apply .btn-apply-primary:hover{
  opacity:1;
  transform:none;
}
.btn-apply-outline:hover{
  color:#fff;
  border-color:rgba(255,255,255,.52);
  transform:translateY(-1px);
}
.btn-apply-primary:active,
.btn-apply-outline:active,
.slide-cta:active,
.toggle-btn:active{
  transform:translateY(1px);
}
.card-mypage{
  padding:24px 20px 20px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.card-mypage-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:18px;
}
.card-mypage-title{
  margin:0;
  color:var(--text);
  font-size:16px;
  line-height:1.2;
  font-weight:850;
}
.mypage-toggle{
  display:flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border-radius:999px;
  background:#f2ede6;
}
.toggle-btn{
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  color:var(--sub);
  font-size:12px;
  font-weight:800;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.toggle-btn.active{
  background:var(--millie);
  color:var(--ink);
}
.mypage-view{
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:center;
  min-height:0;
  max-height:none;
}
.mypage-view.hidden{display:none;}
.mypage-stats{
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:12px;
  flex:1;
  padding:8px 0;
}
.stat-point,
.stat-completion{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.stat-point-row{
  display:flex;
  align-items:flex-end;
  gap:3px;
}
.stat-number{
  color:var(--ink);
  font-size:clamp(28px,2.7vw,36px);
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
.stat-unit{
  margin-bottom:3px;
  color:var(--millie-deep);
  font-size:16px;
  line-height:1;
  font-weight:850;
}
.stat-label{
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}
.progress-ring{
  width:clamp(60px,5.4vw,72px);
  height:clamp(60px,5.4vw,72px);
  transform:rotate(-90deg);
}
.ring-bg{
  fill:none;
  stroke:var(--line);
  stroke-width:6;
}
.ring-fill{
  fill:none;
  stroke:var(--violet);
  stroke-width:6;
  stroke-linecap:round;
  transition:stroke-dashoffset .6s ease;
}
.ring-text{
  fill:var(--ink);
  font-size:13px;
  font-weight:850;
  text-anchor:middle;
  dominant-baseline:middle;
  transform:rotate(90deg);
  transform-origin:32px 32px;
}
.rec-list{
  list-style:none;
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  min-height:0;
}
.rec-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.rec-thumb{
  width:40px;
  height:52px;
  border-radius:6px;
  object-fit:cover;
  background:var(--line);
  flex:0 0 auto;
}
.rec-info{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1;
}
.rec-genre{
  width:fit-content;
  padding:2px 8px;
  font-size:10px;
}
.rec-title{
  margin:0;
  color:var(--text);
  font-size:13px;
  line-height:1.35;
  font-weight:750;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.learning-course-item{
  cursor:pointer;
  min-height:52px;
  padding:4px 6px 4px 4px;
  border-radius:12px;
  transition:background .18s ease,transform .18s ease;
}
.learning-course-item:hover{
  background:#fffdf1;
  transform:translateX(2px);
}
.learning-course-item:active{
  transform:translateX(0);
}
.learning-deadline{
  width:48px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  flex:0 0 auto;
}
.deadline-label{
  color:var(--millie-deep);
  font-size:12px;
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
.deadline-bar{
  width:42px;
  height:6px;
  border-radius:999px;
  overflow:hidden;
  background:#f1eadc;
}
.deadline-bar i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--green);
}
.learning-deadline.urgent .deadline-label{
  color:#d04d28;
}
.learning-deadline.urgent .deadline-bar i{
  background:#d04d28;
}
.card-mypage-link{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  margin-top:16px;
  color:var(--millie-deep);
  font-size:13px;
  font-weight:850;
  transition:opacity .18s ease;
}
.card-mypage-link:hover{opacity:.72;}
.hero-slider{
  position:relative;
  overflow:hidden;
  min-height:0;
  height:auto;
  aspect-ratio:2 / 1;
  border-radius:var(--radius-xl);
  background:var(--ink);
  isolation:isolate;
}
.slider-track{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
}
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateX(12px);
  pointer-events:none;
  transition:opacity .42s ease,transform .42s ease;
}
.slide.active{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
.slide-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.slide-placeholder{
  background:
    radial-gradient(circle at 82% 14%,rgba(255,229,0,.2),transparent 34%),
    linear-gradient(135deg,var(--slide-start),var(--slide-end));
}
.slide-ebook{
  --slide-start:#2d2a4a;
  --slide-end:#181724;
}
.slide-community{
  --slide-start:#1f5038;
  --slide-end:#14261d;
}
.slide-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(20,16,12,.68) 0%,rgba(20,16,12,.22) 62%,rgba(20,16,12,0) 100%);
}
.slide-content{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  gap:8px;
  padding:32px 36px;
}
.slide-eyebrow{
  color:rgba(255,255,255,.74);
  font-size:12px;
  font-weight:800;
}
.slide-title{
  margin:0;
  color:#fff;
  font-size:28px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:0;
}
.slide-cta{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  min-height:38px;
  margin-top:4px;
  padding:0 18px;
  border-radius:999px;
  background:var(--millie);
  color:var(--ink);
  font-size:13px;
  font-weight:850;
  transition:opacity .18s ease,transform .18s ease;
}
.slider-arrow{
  position:absolute;
  top:50%;
  z-index:10;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  color:#fff;
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%);
  transition:background .18s ease;
}
.slider-arrow:hover{background:rgba(255,255,255,.38);}
.slider-arrow:active{transform:translateY(calc(-50% + 1px));}
.slider-arrow svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.slider-prev{left:14px;}
.slider-next{right:14px;}
.slider-dots{
  position:absolute;
  left:50%;
  bottom:16px;
  z-index:10;
  display:flex;
  align-items:center;
  gap:6px;
  transform:translateX(-50%);
}
.slider-dot{
  width:8px;
  height:8px;
  padding:0;
  border-radius:999px;
  background:rgba(255,255,255,.42);
  transition:width .22s ease,background .22s ease;
}
.slider-dot.active{
  width:22px;
  background:var(--millie);
}
body.book-apply-modal-open{overflow:hidden;}
.book-apply-modal-ov[hidden]{display:none;}
.book-apply-modal-ov{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(31,26,22,.42);
  backdrop-filter:blur(8px);
}
.book-apply-modal{
  position:relative;
  width:min(420px,100%);
  padding:30px 24px 24px;
  border-radius:26px;
  background:
    radial-gradient(circle at 18% 0%,rgba(255,229,0,.45),transparent 34%),
    #fffef8;
  border:1px solid rgba(214,140,27,.16);
  box-shadow:0 28px 80px rgba(36,28,21,.22);
  text-align:center;
}
.book-apply-close{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--sub);
  transition:background .18s ease,color .18s ease;
}
.book-apply-close:hover{
  background:rgba(36,34,42,.06);
  color:var(--ink);
}
.book-apply-close svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
}
.book-apply-modal-mark{
  width:64px;
  height:64px;
  margin:0 auto 14px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--millie);
  color:var(--ink);
  box-shadow:0 14px 26px rgba(167,125,9,.14);
}
.book-apply-modal-mark svg{
  width:34px;
  height:34px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.book-apply-modal h2{
  margin:0 0 20px;
  color:var(--text);
  font-size:22px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:0;
}
.book-apply-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.book-apply-option{
  min-height:112px;
  padding:18px 12px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.book-apply-option strong{
  color:var(--ink);
  font-size:18px;
  line-height:1.2;
  font-weight:900;
}
.book-apply-option span{
  color:var(--sub);
  font-size:12px;
  font-weight:750;
  line-height:1.35;
}
.book-apply-option.primary{
  background:var(--millie);
  border-color:var(--millie);
  box-shadow:0 16px 30px rgba(167,125,9,.16);
}
.book-apply-option.primary strong,
.book-apply-option.primary span{
  color:var(--ink);
}
.book-apply-option:hover{
  transform:translateY(-2px);
  border-color:rgba(167,125,9,.28);
  box-shadow:0 18px 34px rgba(36,28,21,.1);
}
.book-apply-option:active{transform:translateY(0);}
@media(max-width:1023px){
  .hero-lms-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .hero-slider{
    grid-column:1 / -1;
    order:-1;
    min-height:260px;
  }
}
@media(max-width:767px){
  .home-main{
    gap:12px;
  }
  #pg-home.pg{
    padding-top:108px;
  }
  .hero-lms-grid{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    touch-action:pan-x pan-y;
  }
  .hero-lms-grid::-webkit-scrollbar{display:none;}
  .hero-card,
  .hero-slider{
    flex:0 0 100%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .hero-card{
    aspect-ratio:6 / 5;
    min-height:0;
  }
  .hero-slider{
    order:0;
    aspect-ratio:6 / 5;
    min-height:0;
    height:auto;
  }
  .card-apply{
    padding:15px 18px 16px;
  }
  .card-apply-visual{
    width:min(100%,200px);
    height:112px;
    margin-bottom:6px;
  }
  .card-apply-kicker{
    min-height:24px;
    padding:0 10px;
    font-size:11px;
  }
  .card-apply-title{
    margin-top:7px;
    font-size:23px;
  }
  .card-apply-copy{
    display:none;
  }
  .btn-apply-primary{
    min-height:42px;
    margin-top:12px;
  }
  .card-mypage{
    padding:18px 18px 16px;
  }
  .card-mypage-header{
    margin-bottom:12px;
  }
  .mypage-view{
    min-height:0;
  }
  .mypage-stats{
    padding:4px 0;
  }
  .stat-number{
    font-size:32px;
  }
  .progress-ring{
    width:64px;
    height:64px;
  }
  .rec-list{
    gap:6px;
  }
  .learning-course-item{
    min-height:48px;
  }
  .card-mypage-link{
    margin-top:12px;
  }
  .slide-content{
    padding:28px 26px;
  }
  .slide-title{
    font-size:22px;
  }
  .slider-arrow{
    width:36px;
    height:36px;
  }
  .book-apply-modal-ov{
    padding:18px;
    place-items:center;
  }
  .book-apply-modal{
    width:min(360px,100%);
    padding:28px 18px 18px;
    border-radius:24px;
  }
  .book-apply-options{
    gap:8px;
  }
  .book-apply-option{
    min-height:104px;
    padding:15px 10px;
  }
}

.visual-hero{
  position:relative;
  overflow:hidden;
  padding:0;
  border-radius:28px;
  background:transparent;
  border:0;
  box-shadow:none;
}
.hero-banner-card{
  min-height:360px;
  display:grid;
  align-items:center;
  padding:0;
  isolation:isolate;
}
.hero-banner-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  border-radius:28px;
  z-index:0;
}
.hero-banner-card::before{
  display:none;
}
.hero-banner-copy{
  display:none;
}
.hero-banner-copy h1{
  font-size:56px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.04em;
  color:#1f1a16;
  text-shadow:0 2px 18px rgba(255,255,255,.55);
}
.visual-hero::after{
  display:none;
}
.hero-banner-card::after{display:none;}
.visual-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:28px;
  align-items:stretch;
}
.visual-copy{
  display:grid;
  align-content:start;
  gap:18px;
  padding:0;
}
.hero-copy-card{
  min-height:280px;
  padding:42px 42px 38px;
  border-radius:32px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 34px rgba(92,68,9,.08);
  display:grid;
  align-content:space-between;
  gap:24px;
}
.visual-copy h1{
  margin-top:0;
  font-size:46px;
  line-height:1.06;
  letter-spacing:-.05em;
  font-weight:900;
}
.visual-copy h1 em{font-style:normal;color:inherit;}
.visual-copy p{
  margin-top:16px;
  max-width:560px;
  color:#625c55;
  font-size:15px;
  line-height:1.7;
}
.hero-copy-image-wrap{
  width:min(100%,440px);
  aspect-ratio:16/6.4;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(167,125,9,.14);
  box-shadow:0 14px 26px rgba(64,50,18,.10);
}
.hero-copy-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:18% 68%;
}
.visual-media{
  display:grid;
  align-content:start;
}
.hero-media-frame{
  position:relative;
  overflow:hidden;
  min-height:360px;
  border-radius:30px;
  background:rgba(255,246,218,.76);
  border:1px dashed rgba(167,125,9,.24);
  display:grid;
  place-items:center;
  padding:24px;
}
.hero-library-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  transform:none;
}
.hero-media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,248,225,.16),rgba(255,255,255,.04) 42%,rgba(32,28,22,.08));
  pointer-events:none;
}
.shortcut-band{
  width:max-content;
  min-width:0;
  max-width:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  overflow-x:visible;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,253,248,.76);
  border:1px solid rgba(167,125,9,.10);
  box-shadow:0 12px 28px rgba(95,73,15,.06);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.shortcut-band::-webkit-scrollbar{
  display:none;
}
.shortcut-band::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(162,135,0,.28);
}
.shortcut-item{
  width:94px;
  padding:8px 8px 9px;
  border-radius:999px;
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  min-height:76px;
  scroll-snap-align:start;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.shortcut-item:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.72);
  border-color:rgba(167,125,9,.12);
  box-shadow:0 8px 18px rgba(95,73,15,.07);
}
.shortcut-icon{
  width:48px;
  height:48px;
  padding:0;
  border-radius:0;
  background:transparent;
  display:grid;
  place-items:center;
  color:#2f2a24;
  box-shadow:none;
  filter:none;
}
.shortcut-icon svg{
  width:34px;
  height:34px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.shortcut-item strong{
  font-family:"Pretendard Variable","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
  font-size:11.5px;
  font-weight:650;
  letter-spacing:0;
  line-height:1.2;
  color:#2f2a24;
}
.shortcut-item > span:not(.shortcut-icon){
  display:none;
  color:var(--sub);
  font-size:10px;
  line-height:1.4;
}
.today-recommend{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
  gap:28px;
  align-items:stretch;
  padding:34px;
  border-radius:28px;
  background:#24211d;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.today-recommend::before{
  content:"";
  position:absolute;
  inset:auto -8% -36% 38%;
  height:280px;
  background:radial-gradient(circle at center,rgba(255,233,90,.28),rgba(255,233,90,0) 70%);
  pointer-events:none;
  z-index:-1;
}
.today-copy{
  display:grid;
  align-content:center;
  gap:18px;
  min-width:0;
}
.eyebrow{
  width:max-content;
  max-width:100%;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,233,90,.14);
  color:#ffe500;
  border:1px solid rgba(255,233,90,.22);
  font-size:12px;
  font-weight:900;
}
.today-copy h2{
  max-width:640px;
  font-size:38px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-.05em;
}
.today-copy p{
  max-width:620px;
  color:rgba(255,255,255,.74);
  font-size:15px;
  line-height:1.75;
}
.today-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.today-meta-row span{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.82);
  font-size:12px;
  font-weight:800;
}
.today-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.today-book{
  position:relative;
  min-height:338px;
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:22px;
  align-items:end;
  padding:26px;
  border-radius:24px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .22s ease, background .22s ease;
}
.today-book:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.11);
}
.today-rank{
  position:absolute;
  top:20px;
  right:22px;
  color:rgba(255,255,255,.42);
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
}
.today-cover{
  width:170px;
  max-width:100%;
  box-shadow:0 24px 44px rgba(0,0,0,.32);
}
.today-book-info{
  display:grid;
  gap:5px;
  min-width:0;
}
.today-book-info strong{
  font-size:22px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-.04em;
}
.today-book-info span{
  color:rgba(255,255,255,.66);
  font-size:13px;
  font-weight:700;
}
.home-curation-preview,
.home-best-section{
  display:grid;
  gap:16px;
  padding:30px 0 8px;
}
.home-curation-grid{
  display:grid;
  grid-template-columns:1.1fr .95fr .95fr;
  gap:14px;
}
.home-curation-card{
  min-height:210px;
  display:grid;
  align-content:space-between;
  gap:16px;
  padding:22px;
  border-radius:22px;
  border:1px solid rgba(31,26,22,.08);
  cursor:pointer;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.home-curation-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 32px rgba(31,26,22,.08);
}
.home-curation-card span{
  color:#665a42;
  font-size:12px;
  font-weight:900;
}
.home-curation-card h3{
  max-width:320px;
  font-size:22px;
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.04em;
}
.home-curation-card p{
  max-width:340px;
  color:#746950;
  font-size:14px;
  line-height:1.55;
}
.home-curation-card.tone-sand{background:#fff5da;}
.home-curation-card.tone-mint{background:#e9f7ec;}
.home-curation-card.tone-rose{background:#fff0ed;}
.mini-book-line{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.mini-book-line .mini-cover{
  width:54px;
  flex:0 0 auto;
  box-shadow:0 10px 18px rgba(31,26,22,.12);
}
.mini-book-line strong{
  min-width:0;
  color:#2a2520;
  font-size:14px;
  line-height:1.25;
  font-weight:900;
}
.best-toggle::-webkit-scrollbar{display:none;}
.best-toggle-btn{
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.best-toggle-btn:hover{
  transform:none;
}
.best-toggle-btn.on{
  border-color:#1f1a16;
  color:#1f1a16;
  font-weight:900;
}
.best-insight{
  padding:0 4px 12px;
  color:#766d62;
  font-size:14px;
  font-weight:700;
}
.home-best-row{
  width:100%;
  min-width:0;
  max-width:100%;
  display:grid;
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:154px;
  gap:22px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  padding:2px 4px 18px;
  scrollbar-width:none;
}
.home-best-row::-webkit-scrollbar{display:none;}
.home-best-card{
  position:relative;
  min-width:0;
  cursor:pointer;
  scroll-snap-align:start;
}
.home-best-card .rank-badge{
  position:absolute;
  top:8px;
  left:8px;
  z-index:1;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#1f1a16;
  color:#fff;
  font-size:12px;
  font-weight:900;
  box-shadow:0 8px 16px rgba(31,26,22,.18);
}
.home-best-cover{
  width:100%;
  aspect-ratio:2/3;
  border-radius:8px;
  overflow:hidden;
  background:#f4efe6;
  box-shadow:0 14px 24px rgba(31,26,22,.14);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.home-best-card:hover .home-best-cover{
  transform:translateY(-2px);
  box-shadow:0 20px 32px rgba(31,26,22,.18);
}
.home-best-cover img{
  width:100%;
  max-height:100%;
  height:auto;
  display:block;
  object-fit:contain;
  object-position:center bottom;
}
.home-best-card h3{
  margin-top:12px;
  font-size:15px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.home-best-card p{
  margin-top:5px;
  color:var(--sub);
  font-size:12px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.home-best-tag{
  display:inline-flex;
  margin-top:8px;
  padding:5px 8px;
  border-radius:999px;
  background:#fff7d6;
  color:#7a5a04;
  font-size:11px;
  font-weight:900;
}
.book-shelf{
  padding:30px 0 26px;
  min-width:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.shelf-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
  padding:0 4px;
}
.shelf-filter-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 22px;
  padding:0 4px;
  overflow-x:auto;
  scrollbar-width:none;
}
.shelf-filter-row::-webkit-scrollbar{display:none;}
.shelf-chip{
  flex:0 0 auto;
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:#746950;
  font-size:14px;
  font-weight:700;
}
.shelf-chip.on{
  border-color:#1f1a16;
  color:#1f1a16;
  font-weight:900;
}
.shelf-grid{
  width:100%;
  min-width:0;
  max-width:100%;
  display:grid;
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:154px;
  gap:22px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  padding:2px 4px 18px;
  scrollbar-width:none;
}
.shelf-grid::-webkit-scrollbar{display:none;}
.shelf-card{
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  scroll-snap-align:start;
  min-width:0;
  cursor:pointer;
}
.shelf-card[hidden]{display:none;}
.shelf-cover{
  width:100%;
  aspect-ratio:2/3;
  margin:0;
  border-radius:8px;
  padding:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  color:transparent;
  font-size:0;
  font-weight:900;
  line-height:1.04;
  letter-spacing:-.05em;
  overflow:hidden;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  box-shadow:0 14px 24px rgba(31,26,22,.16);
}
.shelf-cover img,
.book-cover img{
  width:100%;
  max-height:100%;
  height:auto;
  display:block;
  object-fit:contain;
  object-position:center bottom;
}
.shelf-cover:not(.has-cover-image):not([class*="cover-"]),
.book-cover:not(.has-cover-image):not([class*="cover-"]){
  aspect-ratio:261/319;
}
.has-cover-image{
  background-image:none !important;
  background-color:transparent;
}
.shelf-card h3{
  margin-top:12px;
  font-size:15px;
  font-weight:900;
  line-height:1.25;
  letter-spacing:-.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.shelf-card p{
  margin-top:5px;
  color:var(--sub);
  font-size:12px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.shelf-foot{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.shelf-foot strong{
  font-size:12px;
  font-weight:800;
  letter-spacing:0;
  color:#6d655d;
}
.shelf-foot span{
  display:block;
  margin-top:2px;
  color:var(--sub);
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.book-shelf .small-line-btn{
  width:34px;
  height:34px;
  padding:0;
  font-size:11px;
  background:#fff;
}
.small-line-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-size:12px;
  font-weight:900;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) 360px;
  gap:18px;
}
.hero-panel,.hero-side,.surface,.menu-card,.book-card,.forum-card,.notice-card,.mypage-shell,.detail-shell{
  background:rgba(255,253,249,.92);
  border:1px solid rgba(255,255,255,.78);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
}
.surface.book-shelf{
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:30px 0 26px;
}
.hero-panel{
  padding:28px;
  overflow:hidden;
  position:relative;
}
.hero-panel::before{
  content:"";
  position:absolute;
  right:-80px;
  top:-90px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(244,67,12,.16) 0%, rgba(244,67,12,0) 70%);
}
.hero-panel::after{
  content:"";
  position:absolute;
  left:-90px;
  bottom:-110px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(143,126,231,.18) 0%, rgba(143,126,231,0) 70%);
}
.eyebrow{display:none;}
.hero-title{
  margin-top:16px;
  font-size:42px;
  line-height:1.06;
  font-weight:900;
  letter-spacing:-.06em;
}
.hero-title em{font-style:normal;color:var(--millie);}
.hero-copy{
  margin-top:14px;
  max-width:700px;
  color:var(--sub);
  font-size:15px;
}
.hero-metrics{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.metric{
  padding:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
}
.metric-label{font-size:12px;color:var(--muted);}
.metric-value{
  display:block;
  margin-top:8px;
  font-size:28px;
  font-weight:900;
  letter-spacing:-.04em;
}
.metric-sub{display:block;margin-top:4px;color:var(--sub);font-size:12px;}
.action-row{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.btn-primary,.btn-secondary,.btn-line,.btn-soft{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  transition:transform .18s ease, background .18s ease;
}
.btn-primary{background:var(--millie);color:#4b3806;}
.btn-primary:hover{transform:translateY(-1px);background:#e2bb46;}
.btn-secondary{background:var(--ink);color:#fff;}
.btn-secondary:hover{transform:translateY(-1px);}
.btn-line{background:#fff;border:1px solid var(--line);color:var(--text);}
.btn-line:hover{transform:translateY(-1px);}
.btn-soft{background:#f5e1a1;border:1px solid rgba(167,125,9,.18);color:#544008;}
.btn-soft:hover{transform:translateY(-1px);}

.hero-side{
  padding:18px;
  background:linear-gradient(180deg,#23212c 0%, #2f2d39 100%);
  color:#fff;
}
.side-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.side-window{
  margin-top:14px;
  border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  padding:16px;
}
.window-card{
  padding:18px;
  border-radius:18px;
  background:linear-gradient(135deg,#f4430c 0%, #ff7a4c 65%, #ffb290 100%);
}
.window-card h3{
  font-size:20px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-.04em;
}
.window-card p{
  margin-top:10px;
  font-size:12px;
  color:rgba(255,255,255,.82);
}
.mini-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.mini-card{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
}
.mini-card strong{
  display:block;
  font-size:20px;
  font-weight:900;
}
.mini-card span{
  display:block;
  margin-top:4px;
  font-size:11px;
  color:rgba(255,255,255,.70);
}
.signal-stack{
  margin-top:12px;
  display:grid;
  gap:10px;
}
.signal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
}
.signal strong{font-size:13px;}
.signal span{display:block;margin-top:2px;font-size:11px;color:rgba(255,255,255,.66);}
.signal b{
  flex-shrink:0;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  font-size:11px;
}

.surface{
  padding:22px;
  border-radius:32px;
  background:rgba(255,252,244,.92);
  border:1px solid rgba(167,125,9,.10);
  box-shadow:0 16px 32px rgba(95,73,15,.06);
}
.menu-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.menu-card{
  padding:0;
  overflow:hidden;
}
.menu-card-head{
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--line);
}
.menu-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  font-size:18px;
}
.menu-card:nth-child(1) .menu-icon{background:linear-gradient(135deg,#4f83ff,#275ddf);}
.menu-card:nth-child(2) .menu-icon{background:linear-gradient(135deg,#22a06b,#168554);}
.menu-card:nth-child(3) .menu-icon{background:linear-gradient(135deg,#8f7ee7,#6757c7);}
.menu-card:nth-child(4) .menu-icon{background:linear-gradient(135deg,#f4430c,#dd3300);}
.menu-card:nth-child(5) .menu-icon{background:linear-gradient(135deg,#5f6b7f,#3c4658);}
.menu-card:nth-child(6) .menu-icon{background:linear-gradient(135deg,#d68c1b,#b36f00);}
.menu-card:nth-child(7) .menu-icon{background:linear-gradient(135deg,#4da0b9,#297d96);}
.menu-card:nth-child(8) .menu-icon{background:linear-gradient(135deg,#d14f74,#af3458);}
.menu-title{
  font-size:15px;
  font-weight:900;
  letter-spacing:-.03em;
}
.menu-sub{
  margin-top:3px;
  color:var(--sub);
  font-size:12px;
}
.menu-body{
  padding:16px 18px 18px;
}
.menu-body ul{
  display:grid;
  gap:8px;
}
.menu-body li{
  list-style:none;
  padding:10px 12px;
  border-radius:12px;
  background:var(--paper-2);
  border:1px solid var(--line);
  font-size:13px;
  color:var(--text);
}

.quick-layout{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:16px;
}
.widget-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:14px;
}
.widget{
  padding:16px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
}
.widget label{display:block;font-size:12px;color:var(--muted);}
.widget strong{
  display:block;
  margin-top:8px;
  font-size:28px;
  font-weight:900;
  letter-spacing:-.04em;
}
.widget span{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--sub);
}
.route-list{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.route-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
}
.route-no{
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--millie-soft);
  color:var(--millie-deep);
  font-weight:900;
  font-size:12px;
}
.route-item strong{font-size:14px;}
.route-item span{display:block;margin-top:3px;font-size:12px;color:var(--sub);}
.route-tag{
  padding:7px 10px;
  border-radius:999px;
  background:var(--violet-soft);
  color:#5d50b7;
  font-size:11px;
  font-weight:800;
}

.book-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
#pane-paper > .surface{
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
#pane-paper .catalog-summary{
  margin-bottom:20px;
  padding-bottom:0;
  border-bottom:0;
}
#pane-paper .book-grid{
  grid-template-columns:repeat(4,minmax(156px,1fr));
  gap:48px 34px;
  align-items:start;
}
#pane-paper .book-card{
  width:min(100%,196px);
  justify-self:center;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  position:relative;
}
#pane-paper .book-cover-shell{
  position:relative;
  width:100%;
}
#pane-paper .book-cover{
  width:100%;
  min-width:0;
  aspect-ratio:2/3;
  border-radius:6px;
  overflow:hidden;
  background:transparent;
  box-shadow:none;
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
#pane-paper .book-card:hover .book-cover{
  transform:translateY(-2px);
  box-shadow:none;
}
#pane-paper .book-cover img{
  width:100%;
  max-height:100%;
  height:auto;
  display:block;
  object-fit:contain;
  object-position:center bottom;
  border-radius:6px;
}
#pane-paper .book-format-icons{
  position:absolute;
  top:58px;
  right:9px;
  z-index:4;
  display:flex;
  flex-direction:column;
  gap:7px;
}
#pane-paper .book-format-icons.no-badge{
  top:8px;
}
#pane-paper .book-list-info .book-format-icons,
.my-library-info .book-format-icons{
  position:static;
  flex-direction:row;
  margin-top:8px;
}
.book-format-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.92);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,26,22,.22);
}
.book-format-paper{background:#2f6f58;}
.book-format-audio{background:#7757c8;}
.book-format-icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.book-read-millie-btn{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  padding:6px 14px 6px 10px;
  border:0;
  border-radius:10px;
  background:var(--millie);
  color:#4b3806;
  font-size:12px;
  font-weight:900;
  letter-spacing:-.01em;
  cursor:pointer;
  box-shadow:0 3px 12px rgba(0,0,0,.28);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.book-read-millie-btn::before{
  content:"";
  display:inline-block;
  width:18px;
  height:18px;
  background:url("../assets/millie-logo-mark.svg") center/contain no-repeat;
  flex-shrink:0;
}
.book-read-millie-btn:hover{
  background:#ffd900;
  box-shadow:0 5px 16px rgba(0,0,0,.32);
  transform:translateX(-50%) translateY(-1px);
}
.book-read-millie-btn:active{
  transform:translateX(-50%) translateY(1px);
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
#pane-paper .book-title{
  margin-top:15px;
  font-size:20px;
  line-height:1.18;
  letter-spacing:-.045em;
}
#pane-paper .book-meta{
  margin-top:7px;
  font-size:13px;
  line-height:1.45;
  min-height:calc(13px * 1.45 * 2);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
#pane-paper .book-price{
  margin-top:15px;
  align-items:center;
}
#pane-paper .book-price strong{
  font-size:23px;
  letter-spacing:-.045em;
}
#pane-paper .book-card .btn-line{
  width:62px;
  height:48px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:16px;
  font-size:13px;
}
#pane-paper .book-grid-list{
  grid-template-columns:1fr;
  gap:12px;
}
#pane-paper .book-grid-list .book-card{
  width:100%;
  justify-self:stretch;
}
#pane-paper .book-list-card{
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:12px 0;
  border:none;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
}
#pane-paper .book-list-card:last-child{
  border-bottom:none;
}
#pane-paper .book-list-card .book-cover-shell{
  width:86px;
}
#pane-paper .book-list-card .book-cover{
  position:relative;
}
#pane-paper .book-cover-shell-list .book-format-icons{
  display:none;
}
#pane-paper .book-list-card .book-title{
  margin-top:0;
}
#pane-paper .book-list-card .book-meta{
  min-height:0;
}
#pane-paper .book-list-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
}
#pane-paper .book-list-badges{
  display:flex;
  align-items:center;
  gap:6px;
}
.millie-badge-list{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--millie-badge);
  box-shadow:0 2px 6px rgba(0,0,0,.14);
  flex-shrink:0;
  overflow:hidden;
}
.millie-badge-list img{
  width:100%;
  height:100%;
  object-fit:cover;
}
#pane-paper .book-list-info .book-format-icons{
  position:static;
  flex-direction:row;
  margin-top:0;
  gap:6px;
}
#pane-paper .book-list-info .book-format-icon{
  width:30px;
  height:30px;
}
#pane-paper .book-list-info .book-format-icon svg{
  width:16px;
  height:16px;
}
.book-read-millie-btn-list{
  position:static !important;
  transform:none !important;
  left:auto !important;
  bottom:auto !important;
  padding:5px 12px 5px 9px;
  font-size:11px;
  border-radius:8px;
  flex-shrink:0;
}
.book-read-millie-btn-list::before{
  width:14px;
  height:14px;
}
.book-read-millie-btn-list:hover{
  transform:none !important;
}
.paper-view-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
}
.paper-view-btn{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:999px;
  color:var(--sub);
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.paper-view-btn svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.paper-view-btn.on{
  background:var(--ink);
  color:#fff;
}
.paper-view-btn:active{
  transform:scale(.96);
}
.book-card{padding:18px;}
.book-cover{
  position:relative;
  display:block;
  width:min(74%,220px);
  aspect-ratio:2/3;
  margin:0 auto;
  border-radius:8px;
  padding:0;
  border:0;
  overflow:hidden;
  background-color:#f4efe6;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  box-shadow:0 12px 22px rgba(44,34,14,.12);
  cursor:pointer;
}
.book-cover.has-cover-image{
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.millie-book-badge{
  position:absolute;
  top:9px;
  right:9px;
  z-index:2;
  width:42px;
  height:42px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--millie-badge);
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 8px 18px rgba(31,26,22,.22);
  overflow:hidden;
}
.millie-book-badge img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.cover-1{background:linear-gradient(145deg,#f4430c,#ff996f);}
.cover-2{background:linear-gradient(145deg,#8f7ee7,#6353c2);}
.cover-3{background:linear-gradient(145deg,#22a06b,#187753);}
.cover-4{background:linear-gradient(145deg,#273042,#576179);}
.cover-5{background:linear-gradient(145deg,#c5851e,#845414);}
.cover-6{background:linear-gradient(145deg,#d14971,#8d2f48);}
.shelf-cover[class*="cover-"],
.forum-thumb[class*="cover-"],
.mini-cover[class*="cover-"]{
  background-image:url("../assets/book-cover-sheet.png");
  background-size:400% 300%;
  background-repeat:no-repeat;
  box-shadow:0 12px 22px rgba(44,34,14,.12);
  text-shadow:0 2px 8px rgba(0,0,0,.34);
}
.shelf-cover.cover-1,.forum-thumb.cover-1,.mini-cover.cover-1{background-position:0% 0%;}
.shelf-cover.cover-2,.forum-thumb.cover-2,.mini-cover.cover-2{background-position:33.333% 0%;}
.shelf-cover.cover-3,.forum-thumb.cover-3,.mini-cover.cover-3{background-position:66.666% 0%;}
.shelf-cover.cover-4,.forum-thumb.cover-4,.mini-cover.cover-4{background-position:100% 0%;}
.shelf-cover.cover-5,.forum-thumb.cover-5,.mini-cover.cover-5{background-position:0% 50%;}
.shelf-cover.cover-6,.forum-thumb.cover-6,.mini-cover.cover-6{background-position:33.333% 50%;}
.book-cover.cover-1{background-image:url("../assets/book-cover-sheet.png");background-size:400% 300%;background-position:0% 0%;}
.book-cover.cover-2{background-image:url("../assets/book-cover-sheet.png");background-size:400% 300%;background-position:33.333% 0%;}
.book-cover.cover-3{background-image:url("../assets/book-cover-sheet.png");background-size:400% 300%;background-position:66.666% 0%;}
.book-cover.cover-4{background-image:url("../assets/book-cover-sheet.png");background-size:400% 300%;background-position:100% 0%;}
.book-cover.cover-5{background-image:url("../assets/book-cover-sheet.png");background-size:400% 300%;background-position:0% 50%;}
.book-cover.cover-6{background-image:url("../assets/book-cover-sheet.png");background-size:400% 300%;background-position:33.333% 50%;}
.book-cover.cover-7{background-image:url("../assets/book-cover-sheet.png");background-size:400% 300%;background-position:66.666% 50%;}
.book-cover.cover-8{background-image:url("../assets/book-cover-sheet.png");background-size:400% 300%;background-position:100% 50%;}
.book-cover.cover-9{background-image:url("../assets/book-cover-sheet.png");background-size:400% 300%;background-position:0% 100%;}
.book-cover.cover-10{background-image:url("../assets/book-cover-sheet.png");background-size:400% 300%;background-position:33.333% 100%;}
.book-cover.cover-11{background-image:url("../assets/book-cover-sheet.png");background-size:400% 300%;background-position:66.666% 100%;}
.book-cover.cover-12{background-image:url("../assets/book-cover-sheet.png");background-size:400% 300%;background-position:100% 100%;}
.book-title{
  margin-top:14px;
  font-size:21px;
  font-weight:900;
  letter-spacing:-.04em;
}
.book-title-button{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.book-meta{margin-top:6px;font-size:13px;color:var(--sub);}
.book-price{
  margin-top:14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.book-price strong{font-size:24px;font-weight:900;letter-spacing:-.04em;}
.book-price span{display:block;margin-top:3px;color:var(--sub);font-size:12px;}

.catalog-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:20px;
}
.catalog-layout.curation-mode{
  grid-template-columns:minmax(0,1fr);
}
.catalog-sidebar[hidden]{
  display:none !important;
}
.sidebar{
  position:sticky;
  top:140px;
  align-self:start;
}
.catalog-sidebar .sidebar-block{
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}
.sidebar-block{
  min-width:0;
  padding:18px;
  border-radius:22px;
  background:rgba(255,253,249,.92);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:var(--shadow);
}
.sidebar-block + .sidebar-block{margin-top:12px;}
.sidebar-title{
  font-size:14px;
  font-weight:900;
  letter-spacing:-.03em;
}
.catalog-sidebar .sidebar-title{
  padding-bottom:12px;
  border-bottom:1px solid rgba(31,26,22,.08);
}
.cat-list,.lnb-list{
  margin-top:12px;
  display:grid;
  gap:8px;
}
.lnb-card-grid{display:contents;}
.tree-menu{
  margin-top:12px;
  display:grid;
  gap:12px;
}
.tree-node{
  display:grid;
  gap:8px;
}
.tree-node.child-node{
  gap:6px;
}
.cat-btn,.lnb-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--sub);
  font-size:13px;
  font-weight:700;
}
.catalog-sidebar .cat-btn{
  justify-content:flex-start;
  padding:8px 0;
  border:none;
  border-radius:0;
  background:transparent;
}
.cat-btn.on,.lnb-btn.on,.cat-btn:hover,.lnb-btn:hover{
  color:var(--text);
  background:var(--paper-2);
}
.catalog-sidebar .cat-btn.on,
.catalog-sidebar .cat-btn:hover{
  background:transparent;
}
.tree-parent{
  justify-content:space-between;
}
.catalog-sidebar .tree-parent{
  font-size:15px;
  font-weight:800;
  color:#2c2923;
}
.tree-parent::after{
  content:">";
  font-size:12px;
  color:#8f7c48;
  transform:rotate(90deg);
  transition:transform .16s ease,color .16s ease;
}
.tree-parent.on::after{
  color:var(--text);
}
.tree-parent.collapsed::after{
  transform:rotate(0deg);
}
.tree-children{
  display:none;
  gap:8px;
  margin-left:10px;
  padding:10px 12px;
  border-radius:16px;
  background:#fffdf6;
  border:1px solid rgba(162,135,0,.12);
}
.tree-children.on{
  display:grid;
}
.tree-grandchildren{
  display:none;
  gap:6px;
  margin-left:10px;
  padding:8px 10px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(31,26,22,.06);
}
.tree-grandchildren.on{
  display:grid;
}
.cat-btn.child{
  padding:10px 12px;
  font-size:12px;
  color:#746950;
}
.catalog-sidebar .cat-btn.child{
  padding:8px 10px;
  color:#6d655d;
  font-size:13px;
  border-radius:12px;
}
.catalog-sidebar .cat-btn.child.on{
  color:#1f1a16;
  background:#fff7c7;
}
.catalog-sidebar .cat-btn.grandchild{
  padding:7px 10px;
  color:#8a816f;
  font-size:12px;
  border-radius:10px;
}
.catalog-sidebar .cat-btn.grandchild.on{
  color:var(--millie-deep);
  font-weight:800;
  background:#fff7c7;
}
.tree-label{
  position:relative;
  padding-left:0;
}
.catalog-main,.mypage-main{
  display:grid;
  gap:16px;
  min-width:0;
  width:100%;
}
#pane-curation > .surface{
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}
.curation-stack{
  width:100%;
}
.curation-block{
  width:100%;
}
.top-card{
  padding:24px;
  border-radius:26px;
  background:rgba(255,253,249,.92);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:var(--shadow);
}
.top-card h1{
  margin-top:14px;
  font-size:34px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.05em;
}
.top-card p{margin-top:12px;font-size:14px;color:var(--sub);}
.subtabs{
  margin-top:20px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.subtab{
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--sub);
  font-size:13px;
  font-weight:800;
}
.subtab.on{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.book-pane{display:none;}
.book-pane.on{display:block;}
.list-section + .list-section{
  margin-top:20px;
}
.list-heading{
  margin-bottom:12px;
}
.list-heading h3{
  font-size:18px;
  font-weight:900;
  letter-spacing:-.04em;
}
.list-heading p{
  margin-top:4px;
  color:var(--sub);
  font-size:12px;
}
.catalog-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.catalog-summary strong{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.04em;
}
.catalog-summary span{
  color:var(--sub);
  font-size:13px;
}
.catalog-summary-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  min-width:0;
  flex-wrap:wrap;
}
.millie-badge-legend{
  min-height:34px;
  padding:6px 12px 6px 7px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  background:#fffdf1;
  border:1px solid rgba(162,135,0,.18);
  color:#4f4100;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.millie-badge-legend-row{
  width:100%;
  padding-bottom:14px;
}
.millie-badge-legend--sticky{
  position:sticky;
  top:0;
  z-index:56;
  background:#ffffff;
  margin-bottom:18px;
  box-shadow:0 1px 0 0 rgba(31,26,22,.06);
}
.topbar:not(.scrolled-down) ~ .pg .millie-badge-legend--sticky{
  top:164px;
}
.topbar.scrolled-down ~ .pg .millie-badge-legend--sticky{
  top:80px;
}
.millie-badge-legend img{
  width:28px;
  height:28px;
  padding:0;
  flex-shrink:0;
  object-fit:cover;
  border-radius:50%;
  background:var(--millie-badge);
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 5px 12px rgba(31,26,22,.18);
}
.catalog-summary .millie-badge-legend span{
  color:#4f4100;
  font-size:12px;
  font-weight:900;
}
.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 14px;
}
.filter-chip{
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:#6b645a;
  font-size:12px;
  font-weight:800;
}
.filter-chip.on{
  background:var(--millie-soft);
  border-color:rgba(162,135,0,.08);
  color:#4f4100;
}
.book-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.book-filter-wrap{
  display:grid;
  gap:10px;
}
.book-count{
  color:var(--sub);
  font-size:13px;
  font-weight:700;
}
.pagination{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
  justify-content:center;
}
.page-btn{
  min-width:38px;
  height:38px;
  padding:0 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:#6a6258;
  font-size:12px;
  font-weight:800;
}
.page-btn.on{
  background:var(--millie-soft);
  color:#4f4100;
  border-color:rgba(162,135,0,.08);
}
.page-btn:disabled{
  opacity:.45;
  cursor:default;
}

.digital-card{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:16px;
}
.digital-single{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:16px;
}
.digital-service-card{
  padding:22px;
  border-radius:26px;
  background:linear-gradient(135deg,#2d2a34 0%, #403a48 100%);
  color:#fff;
}
.digital-service-card h2{
  margin-top:8px;
  font-size:30px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.05em;
}
.digital-service-card p{
  margin-top:12px;
  font-size:14px;
  color:rgba(255,255,255,.8);
}
.digital-service-card ul{
  display:grid;
  gap:10px;
  margin-top:18px;
}
.digital-service-card li{
  list-style:none;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  font-size:13px;
}
.promo-card{
  padding:24px;
  border-radius:26px;
  background:linear-gradient(135deg,#23212c 0%, #343146 100%);
  color:#fff;
}
.promo-card h3{
  margin-top:12px;
  font-size:32px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.05em;
}
.promo-card p{margin-top:12px;color:rgba(255,255,255,.76);font-size:14px;}
.feature-list{display:grid;gap:10px;margin-top:18px;}
.feature-list li{
  list-style:none;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  font-size:13px;
}
.apply-card{
  padding:22px;
  border-radius:26px;
  background:#fff;
  border:1px solid var(--line);
}
.apply-box{
  margin-top:18px;
  display:grid;
  gap:10px;
}
.apply-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:var(--paper-2);
  border:1px solid var(--line);
  font-size:13px;
}
.apply-row strong{font-size:14px;}

.curation-stack{
  display:grid;
  gap:28px;
  min-width:0;
}
.curation-block,
#pane-curation,
#pane-curation > .surface{
  min-width:0;
}
.curation-grid{
  display:grid;
  gap:14px;
  min-width:0;
  max-width:100%;
}
.curation-grid-featured{
  width:100%;
  min-width:0;
  max-width:100%;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.curation-card{
  padding:18px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--line);
}
.quote-curation-card{
  position:relative;
  min-height:560px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:28px 24px 26px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.76);
  box-shadow:var(--shadow);
}
.quote-curation-card::after{
  content:"";
  position:absolute;
  inset:auto -10% -18% auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background:rgba(255,255,255,.42);
  filter:blur(18px);
}
.quote-curation-card.sand{
  background:
    radial-gradient(circle at 18% 82%, rgba(90,205,228,.62) 0, rgba(90,205,228,0) 28%),
    radial-gradient(circle at 88% 86%, rgba(255,178,145,.55) 0, rgba(255,178,145,0) 24%),
    linear-gradient(180deg,#fff4d0 0%,#fff0cf 58%,#fde8dc 100%);
}
.quote-curation-card.mint{
  background:
    radial-gradient(circle at 50% 18%, rgba(236,255,168,.92) 0, rgba(236,255,168,0) 26%),
    radial-gradient(circle at 50% 82%, rgba(154,230,132,.78) 0, rgba(154,230,132,0) 30%),
    linear-gradient(180deg,#efffd4 0%,#dcffca 54%,#cef4bc 100%);
}
.quote-curation-card.lemon{
  background:
    radial-gradient(circle at 24% 16%, rgba(255,255,255,.58) 0, rgba(255,255,255,0) 22%),
    radial-gradient(circle at 72% 88%, rgba(198,148,236,.44) 0, rgba(198,148,236,0) 30%),
    linear-gradient(180deg,#fff4b9 0%,#fff5bf 58%,#ffe9cf 100%);
}
.quote-curation-card.rose{
  background:
    radial-gradient(circle at 78% 16%, rgba(255,255,255,.58) 0, rgba(255,255,255,0) 22%),
    radial-gradient(circle at 52% 82%, rgba(223,153,217,.5) 0, rgba(223,153,217,0) 32%),
    linear-gradient(180deg,#f8eee3 0%,#f4e8ef 48%,#efcae9 100%);
}
.curation-quote{
  position:relative;
  z-index:1;
  font-size:52px;
  line-height:1;
  font-weight:900;
  color:#27201d;
}
.curation-card-title{
  position:relative;
  z-index:1;
  margin-top:8px;
  font-size:18px;
  line-height:1.45;
  font-weight:900;
  letter-spacing:-.05em;
  color:#2a241f;
}
.curation-card-owner{
  position:relative;
  z-index:1;
  margin-top:12px;
  font-size:14px;
  color:#554d45;
}
.curation-book-visual{
  position:relative;
  z-index:1;
  margin-top:auto;
  width:min(78%,210px);
  aspect-ratio:3/4.2;
  padding:16px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  text-align:left;
  box-shadow:0 18px 32px rgba(36,28,21,.18);
  border:1px solid rgba(255,255,255,.68);
}
.curation-book-visual strong{
  font-size:24px;
  line-height:1.12;
  letter-spacing:-.05em;
}
.curation-book-tag{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#3f372f;
  font-size:11px;
  font-weight:800;
}
.visual-aria{
  color:#fffaef;
  background:linear-gradient(180deg,#91ac6d 0%,#526c3f 46%,#f0c26f 100%);
}
.visual-river{
  color:#1f4d29;
  background:linear-gradient(180deg,#9ad77c 0%,#76b86f 46%,#ffd9e1 100%);
}
.visual-lucia{
  color:#6c2c7e;
  background:linear-gradient(180deg,#fff186 0%,#fff0a2 44%,#8be6ff 100%);
}
.visual-robin{
  color:#52452e;
  background:linear-gradient(180deg,#ffffff 0%,#f6f0e9 58%,#deb27e 100%);
}
.best-book-row{
  width:100%;
  min-width:0;
  max-width:100%;
  display:grid;
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:160px;
  gap:16px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  padding-bottom:10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(162,135,0,.28) transparent;
}
.best-book-row::-webkit-scrollbar{
  height:8px;
}
.best-book-row::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(162,135,0,.28);
}
.best-book-card{
  min-width:0;
  scroll-snap-align:start;
}
.best-book-cover{
  aspect-ratio:2/3;
  padding:0;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  box-shadow:0 14px 28px rgba(36,28,21,.14);
  border:1px solid rgba(31,26,22,.08);
}
.best-book-cover strong{
  display:none;
  font-size:0;
  line-height:1.08;
  letter-spacing:-.05em;
}
.best-book-title{
  margin-top:12px;
  font-size:15px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-.04em;
}
.best-book-author{
  margin-top:6px;
  font-size:13px;
  color:var(--sub);
}
.cover-burgundy{
  color:#ffe7c3;
  background:linear-gradient(180deg,#7b0818 0%,#9d1f16 100%);
}
.cover-ivory{
  color:#b03a42;
  background:linear-gradient(180deg,#fffdf7 0%,#f2eadb 100%);
}
.cover-sunset{
  color:#fff4e4;
  background:linear-gradient(180deg,#4d5e8e 0%,#f68a53 100%);
}
.cover-navy{
  color:#fff0b5;
  background:linear-gradient(180deg,#133a74 0%,#1e5eb1 100%);
}
.cover-skyline{
  color:#e55934;
  background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%);
}
.cover-white{
  color:#232323;
  background:linear-gradient(180deg,#ffffff 0%,#f4f4f4 100%);
}
.cover-cream{
  color:#4d4d4d;
  background:linear-gradient(180deg,#faf7f0 0%,#ece7dc 100%);
}
.cover-emerald{
  color:#ecffe7;
  background:linear-gradient(180deg,#0f6b52 0%,#1e8a60 100%);
}
.best-book-cover{
  background-image:url("../assets/book-cover-sheet.png");
  background-size:400% 300%;
  background-repeat:no-repeat;
  text-shadow:0 2px 8px rgba(0,0,0,.34);
}
.best-book-cover.cover-burgundy{background-position:66.666% 50%;}
.best-book-cover.cover-ivory{background-position:100% 50%;color:#fff7dd;}
.best-book-cover.cover-sunset{background-position:0% 100%;}
.best-book-cover.cover-navy{background-position:33.333% 100%;}
.best-book-cover.cover-skyline{background-position:66.666% 100%;color:#fff7dd;}
.best-book-cover.cover-white{background-position:100% 100%;color:#203226;}
.best-book-cover.cover-cream{background-position:33.333% 0%;color:#23333a;}
.best-book-cover.cover-emerald{background-position:0% 0%;}

.book-cover.cover-1,
.shelf-cover.cover-1,
.forum-thumb.cover-1,
.mini-cover.cover-1,
.best-book-cover.cover-emerald{background-image:url("../assets/book-covers/book-cover-01.png");}
.book-cover.cover-2,
.shelf-cover.cover-2,
.forum-thumb.cover-2,
.mini-cover.cover-2,
.best-book-cover.cover-cream{background-image:url("../assets/book-covers/book-cover-02.png");}
.book-cover.cover-3,
.shelf-cover.cover-3,
.forum-thumb.cover-3,
.mini-cover.cover-3,
.best-book-cover.cover-burgundy{background-image:url("../assets/book-covers/book-cover-03.png");}
.book-cover.cover-4,
.shelf-cover.cover-4,
.forum-thumb.cover-4,
.mini-cover.cover-4,
.best-book-cover.cover-ivory{background-image:url("../assets/book-covers/book-cover-04.png");}
.book-cover.cover-5,
.shelf-cover.cover-5,
.forum-thumb.cover-5,
.mini-cover.cover-5,
.best-book-cover.cover-sunset{background-image:url("../assets/book-covers/book-cover-05.png");}
.book-cover.cover-6,
.shelf-cover.cover-6,
.forum-thumb.cover-6,
.mini-cover.cover-6,
.best-book-cover.cover-navy{background-image:url("../assets/book-covers/book-cover-06.png");}
.book-cover.cover-7,
.shelf-cover.cover-7,
.forum-thumb.cover-7,
.mini-cover.cover-7,
.best-book-cover.cover-skyline{background-image:url("../assets/book-covers/book-cover-07.png");}
.book-cover.cover-8,
.shelf-cover.cover-8,
.forum-thumb.cover-8,
.mini-cover.cover-8,
.best-book-cover.cover-white{background-image:url("../assets/book-covers/book-cover-08.png");}
.book-cover.cover-9,
.shelf-cover.cover-9,
.forum-thumb.cover-9,
.mini-cover.cover-9{background-image:url("../assets/book-covers/book-cover-09.png");}
.book-cover.cover-10,
.shelf-cover.cover-10,
.forum-thumb.cover-10,
.mini-cover.cover-10{background-image:url("../assets/book-covers/book-cover-10.png");}
.book-cover.cover-11,
.shelf-cover.cover-11,
.forum-thumb.cover-11,
.mini-cover.cover-11{background-image:url("../assets/book-covers/book-cover-11.png");}
.book-cover.cover-12,
.shelf-cover.cover-12,
.forum-thumb.cover-12,
.mini-cover.cover-12{background-image:url("../assets/book-covers/book-cover-12.png");}
.book-cover[class*="cover-"],
.shelf-cover[class*="cover-"],
.forum-thumb[class*="cover-"],
.mini-cover[class*="cover-"],
.best-book-cover[class*="cover-"]{
  background-size:contain;
  background-position:center bottom;
  background-repeat:no-repeat;
}

.detail-shell{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:16px;
  padding:24px;
}
.detail-cover{
  border-radius:24px;
  padding:24px;
  aspect-ratio:4/5;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#fff;
  background:linear-gradient(145deg,#f4430c,#ff986c);
}
.detail-cover strong{
  font-size:40px;
  line-height:1;
  letter-spacing:-.05em;
}
.detail-content h1{
  font-size:42px;
  line-height:1.04;
  font-weight:900;
  letter-spacing:-.05em;
}
.detail-meta{margin-top:12px;color:var(--sub);font-size:15px;}
.detail-stats{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.stat-box{
  padding:16px;
  border-radius:18px;
  background:var(--paper-2);
  border:1px solid var(--line);
}
.stat-box label{display:block;font-size:12px;color:var(--muted);}
.stat-box strong{display:block;margin-top:8px;font-size:25px;font-weight:900;}
.detail-desc{
  margin-top:18px;
  padding:18px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  font-size:14px;
  color:var(--sub);
}
.detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}

.mypage-shell{
  padding:0;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:20px;
  background:transparent;
  border:none;
  box-shadow:none;
}
.mypage-shell > aside{
  min-width:0;
}
.profile-card{
  padding:18px;
  border-radius:20px;
  background:linear-gradient(135deg,#24222a 0%, #3a3850 100%);
  color:#fff;
}
.profile-avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.16);
  font-size:20px;
  font-weight:900;
}
.profile-card strong{
  display:block;
  margin-top:14px;
  font-size:18px;
}
.profile-card span{
  display:block;
  margin-top:5px;
  color:rgba(255,255,255,.74);
  font-size:12px;
}
.mypage-main .surface{padding:20px;}
.mypage-panel-title{font-size:17px;font-weight:800;color:var(--text);margin-bottom:14px;}
.mypage-main .surface + .surface{
  margin-top:16px;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.stats-grid .widget strong{font-size:26px;}
.mypage-home-widgets{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.mypage-home-widgets:empty{
  display:none;
}
.mypage-status-widget{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
}
.home-widget-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.home-widget-head h3{
  font-size:15px;
  font-weight:900;
}
.home-widget-head span{
  display:block;
  margin-top:4px;
  color:var(--sub);
  font-size:12px;
  font-weight:800;
}
.paper-status-list{
  display:grid;
  gap:10px;
}
.paper-status-card{
  display:grid;
  grid-template-columns:auto 58px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:14px;
  background:var(--paper-2);
  border:1px solid rgba(31,26,22,.06);
  color:inherit;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.paper-status-card:hover{
  transform:translateY(-1px);
  border-color:rgba(162,135,0,.22);
  background:#fff9dc;
}
.paper-status-cover{
  width:58px;
  aspect-ratio:2 / 3;
  overflow:hidden;
  border-radius:7px;
  background:#f8f4e9;
  box-shadow:0 8px 14px rgba(31,26,22,.12);
}
.paper-status-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.paper-status-card strong{
  display:block;
  min-width:0;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.paper-status-card span:not(.status-tag){
  display:block;
  margin-top:4px;
  color:var(--sub);
  font-size:11px;
  font-weight:700;
}
.status-tag,
.type-chip,
.d-day-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:3px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.status-tag.submitted{
  background:var(--green-soft);
  color:#13734b;
}
.status-tag.incomplete{
  background:#fff0e8;
  color:#e05a00;
}
.type-chip.millie{
  background:var(--millie-soft);
  color:var(--millie-deep);
}
.d-day-badge{
  background:#f2f2f2;
  color:#666;
}
.d-day-badge.urgent{
  background:#fff0e8;
  color:#e05a00;
}
.subscription-title-badges{
  flex-shrink:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.subscription-status-card{
  display:grid;
  gap:12px;
  padding:12px;
  border-radius:14px;
  background:linear-gradient(135deg,#fff9dc 0%, #fff 100%);
  border:1px solid rgba(162,135,0,.14);
}
.subscription-widget-title{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:10px;
}
.subscription-widget-title strong{
  display:block;
  font-size:13px;
  font-weight:900;
}
.subscription-widget-title span:not(.status-tag){
  display:block;
  margin-top:4px;
  color:var(--sub);
  font-size:12px;
  font-weight:700;
}
.subscription-progress-summary{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
}
.subscription-progress-summary span{
  color:var(--sub);
  font-size:12px;
  font-weight:900;
}
.subscription-progress-summary strong{
  color:var(--millie-deep);
  font-size:20px;
}
.subscription-progress-summary .bar{
  grid-column:1 / -1;
  margin-top:0;
}
.subscription-progress-summary .bar i{
  background:linear-gradient(90deg,var(--millie) 0%, #ff8a4c 100%);
}
.subscription-requirements{
  display:grid;
  gap:8px;
}
.subscription-requirement-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(31,26,22,.06);
}
.subscription-requirement-item span{
  color:var(--sub);
  font-size:12px;
  font-weight:800;
}
.subscription-requirement-item strong{
  color:var(--text);
  font-size:12px;
}
.subscription-activity{
  display:grid;
  gap:8px;
}
.subscription-activity-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.subscription-activity-head strong{
  font-size:13px;
  font-weight:900;
}
.subscription-activity-head span{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.subscription-activity-empty{
  padding:12px;
  border-radius:12px;
  background:#fffdf6;
  border:1px solid rgba(31,26,22,.06);
  color:var(--sub);
  font-size:12px;
  font-weight:800;
  text-align:center;
}
.widget-more-link{
  align-self:flex-end;
  color:var(--millie-deep);
  font-size:12px;
  font-weight:900;
}
.point-remaining{
  font-size:28px;
  font-weight:900;
  color:var(--ink);
  letter-spacing:-0.5px;
}
.point-summary{
  font-size:12px;
  color:var(--sub);
  font-weight:700;
}
.round-name{
  font-size:14px;
  font-weight:800;
  color:var(--ink);
}
.delivery-summary{
  font-size:14px;
  font-weight:700;
  color:var(--ink);
}
.reading-bar-chart{
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:80px;
}
.bar-col{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  height:100%;
  justify-content:flex-end;
}
.bar-value{
  font-size:10px;
  font-weight:700;
  color:var(--sub);
}
.bar-fill{
  width:100%;
  min-height:4px;
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--violet) 0%,#c5b8ff 100%);
}
.bar-label{
  font-size:10px;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
}
/* 포인트 위젯: 전폭 차지 */
.mypage-status-widget.widget-point{
  grid-column:1 / -1;
}
/* 배송 위젯: 전폭 차지 */
.mypage-status-widget.widget-delivery{
  grid-column:1 / -1;
}
.activity-stat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  flex:1;
}
.activity-stat-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px 8px;
  border-radius:12px;
  background:var(--paper-2);
  border:1px solid var(--line);
  text-align:center;
}
.activity-stat-label{
  font-size:11px;
  font-weight:800;
  color:var(--sub);
  white-space:nowrap;
}
.activity-stat-value{
  font-size:24px;
  font-weight:900;
  color:var(--ink);
  letter-spacing:0;
}
/* 수료 현황 통합 섹션 */
.completion-section{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:20px;
  border-radius:18px;
  background:var(--paper-2);
  border:1px solid var(--line);
}
.completion-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.completion-section-title h3{
  font-size:15px;
  font-weight:900;
}
.completion-section-title span{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--sub);
  font-weight:700;
}
.completion-section-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
/* 지금 할 일 */
.todo-area{
  padding:14px 16px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--line);
}
.todo-area-head{
  margin-bottom:10px;
}
.todo-label{
  font-size:12px;
  font-weight:900;
  color:var(--sub);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.todo-list{
  display:grid;
  gap:8px;
  list-style:none;
}
.todo-item{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.todo-book-title{
  font-size:13px;
  font-weight:800;
  flex:1;
  min-width:0;
}
.todo-action{
  font-size:12px;
  padding:4px 12px;
  border-radius:999px;
  background:var(--millie);
  color:var(--millie-deep);
  font-weight:900;
  flex-shrink:0;
}
.todo-empty{
  font-size:13px;
  color:var(--sub);
  font-weight:700;
  text-align:center;
  padding:8px 0;
}
/* 종이책·구독권 2열 */
.completion-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.completion-grid-single{
  grid-template-columns:1fr;
}
.completion-col{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.completion-col-head{
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
.completion-col-label{
  font-size:12px;
  font-weight:900;
  color:var(--sub);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.completion-paper-card{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line);
}
.completion-paper-info strong{
  display:block;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.completion-paper-info span{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:var(--sub);
  font-weight:700;
}
.completion-millie-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line);
}
.completion-millie-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.completion-millie-title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.completion-millie-cover{
  width:38px;
  aspect-ratio:2 / 3;
  overflow:hidden;
  flex-shrink:0;
  border-radius:6px;
  background:#ffe500;
  box-shadow:0 6px 12px rgba(31,26,22,.10);
}
.completion-millie-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.completion-millie-head strong{
  font-size:13px;
  font-weight:800;
  min-width:0;
}
.btn-millie-reader{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 18px;
  border-radius:999px;
  border:none;
  background:var(--millie-deep);
  color:#fff;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:opacity .15s;
  align-self:flex-start;
}
.btn-millie-reader::before{
  content:"";
  display:inline-block;
  width:14px;
  height:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
}
.btn-millie-reader:hover{opacity:.85;}

/* 내 서재 탭 */
.my-library-tabs{
  display:flex;
  gap:4px;
  margin-top:16px;
  border-bottom:2px solid var(--line);
  padding-bottom:0;
  overflow-x:auto;
}
.my-library-tab{
  flex-shrink:0;
  padding:8px 14px;
  font-size:13px;
  font-weight:800;
  color:var(--sub);
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  transition:color .14s, border-color .14s;
  white-space:nowrap;
}
.my-library-tab.on{
  color:var(--text);
  border-bottom-color:var(--ink);
}
.my-library-list{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.my-library-list[hidden]{display:none;}
.my-library-card{
  position:relative;
  padding:12px;
  border-radius:14px;
  background:var(--paper-2);
  border:1px solid var(--line);
}
.my-library-card-inner{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding-right:32px;
}
.my-library-card-clickable{
  cursor:pointer;
  border-radius:10px;
  transition:background .16s ease,transform .16s ease;
}
.my-library-card-clickable:hover{
  background:#fff;
  transform:translateY(-1px);
}
.my-library-card-clickable:active{
  transform:scale(.99);
}
.badge-type-ebook,
.badge-type-paper,
.badge-lib-wish,
.badge-lib-essay {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
  vertical-align: middle;
}
.badge-type-ebook {
  background: rgba(143,126,231,.14);
  color: var(--violet);
}
.badge-type-paper {
  background: rgba(255,175,52,.14);
  color: #b87200;
}
.badge-lib-wish {
  background: rgba(229,62,62,.10);
  color: #c0392b;
  margin-left: 4px;
}
.badge-lib-essay {
  background: rgba(39,174,96,.12);
  color: #27ae60;
  margin-left: 4px;
}
.book-status-badge{
  font-size:10px;
  font-weight:800;
  padding:3px 8px;
  border-radius:99px;
  white-space:nowrap;
}
.book-status-applied{
  background:#f0ece4;
  color:#7b6f5b;
}
.book-status-reading{
  background:rgba(143,126,231,.14);
  color:var(--violet);
}
.book-status-completed{
  background:rgba(56,142,60,.12);
  color:#388e3c;
}
.book-status-menu-wrap{
  position:absolute;
  top:6px;
  right:6px;
}
.book-status-menu-trigger{
  width:28px;
  height:28px;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:16px;
  font-weight:900;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.book-status-menu-trigger:hover{
  background:rgba(0,0,0,.05);
  color:var(--text);
}
.book-status-menu{
  position:absolute;
  top:32px;
  right:0;
  min-width:140px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 8px 22px rgba(31,26,22,.16);
  padding:4px;
  display:none;
  z-index:50;
}
.book-status-menu.on{
  display:block;
}
.book-status-menu button{
  display:block;
  width:100%;
  text-align:left;
  font-size:12px;
  font-weight:700;
  color:var(--text);
  padding:8px 10px;
  border-radius:6px;
}
.book-status-menu button:hover{
  background:var(--paper-2);
}
.cert-badge{
  display:inline-block;
  margin-top:4px;
  font-size:10px;
  font-weight:800;
  padding:2px 7px;
  border-radius:99px;
}
.cert-done{
  background:rgba(56,142,60,.14);
  color:#388e3c;
}
.cert-pending{
  background:rgba(255,140,66,.14);
  color:#d35a00;
}
.cert-none{
  background:#eee;
  color:var(--muted);
}
.toast-host{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:9999;
  pointer-events:none;
}
.toast-item{
  background:rgba(31,26,22,.92);
  color:#fff;
  font-size:13px;
  font-weight:700;
  padding:10px 16px;
  border-radius:10px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s, transform .25s;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.toast-item.on{
  opacity:1;
  transform:translateY(0);
}
.my-library-info strong{
  display:block;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.my-library-info span{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:var(--sub);
  font-weight:700;
}
.my-library-info .badge-type-ebook,
.my-library-info .badge-type-paper,
.my-library-info .badge-lib-wish,
.my-library-info .badge-lib-essay,
.my-library-info .cert-badge {
  display: inline-block;
  margin-top: 5px;
}
.my-library-empty{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
  text-align:center;
  padding:24px 0;
}
.millie-cover-thumb{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:900;
  color:var(--millie-deep);
  background:var(--millie-soft);
  border-radius:7px;
}
.learning-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.learning-card{
  padding:18px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
}
.learning-card strong{font-size:15px;}
.learning-card span{display:block;margin-top:6px;font-size:12px;color:var(--sub);}
.bar{
  height:10px;
  margin-top:14px;
  border-radius:999px;
  background:#ede2d5;
  overflow:hidden;
}
.bar i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#8f7ee7 0%, #f4430c 100%);
}
.order-list{
  margin-top:14px;
  display:grid;
  gap:10px;
}
.delivery-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.delivery-summary-card{
  padding:16px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
}
.delivery-summary-card span{
  display:block;
  color:var(--sub);
  font-size:12px;
  font-weight:800;
}
.delivery-summary-card strong{
  display:block;
  margin-top:7px;
  color:var(--millie-deep);
  font-size:26px;
  line-height:1;
  font-weight:900;
}
.delivery-list{
  margin-top:12px;
}
.order-item{
  display:grid;
  grid-template-columns:72px 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
}
.delivery-item{
  align-items:start;
}
.delivery-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  margin-top:12px;
}
.delivery-steps i{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 8px;
  border-radius:999px;
  background:#f0ebe3;
  color:#81786c;
  font-size:11px;
  font-style:normal;
  font-weight:900;
  text-align:center;
}
.delivery-steps i.done{
  background:var(--green-soft);
  color:#13734b;
}
.delivery-steps i.active{
  background:var(--millie-soft);
  color:var(--millie-deep);
}
.mini-cover{
  width:72px;
  aspect-ratio:2/3;
  border-radius:6px;
  display:flex;
  align-items:flex-end;
  padding:0;
  color:transparent;
  font-size:0;
  font-weight:900;
  line-height:1.05;
  overflow:hidden;
  background-size:cover;
  background-position:center;
}
.mini-cover img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.badge-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}
.badge-pill.orange{background:var(--millie-soft);color:var(--millie-deep);}
.badge-pill.green{background:var(--green-soft);color:#13734b;}
.badge-pill.violet{background:var(--violet-soft);color:#5e52b4;}

.forum-layout,.notice-layout{
  display:grid;
  gap:16px;
}
.forum-hero,.notice-hero{
  padding:24px;
  border-radius:26px;
  background:rgba(255,253,249,.92);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:var(--shadow);
}
.forum-hero h1,.notice-hero h1{
  margin-top:14px;
  font-size:36px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.05em;
}
.forum-hero p,.notice-hero p{
  margin-top:12px;
  font-size:14px;
  color:var(--sub);
}
.forum-list,.notice-list{
  display:grid;
  gap:12px;
}
.forum-card,.notice-card{
  padding:20px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
}
.forum-card h3,.notice-card h3{
  font-size:22px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.04em;
}
.forum-card p,.notice-card p{
  margin-top:8px;
  font-size:13px;
  color:var(--sub);
}
.meta-row{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color:var(--muted);
  font-size:12px;
}
.forum-thumb{
  width:88px;
  aspect-ratio:2/3;
  border-radius:7px;
  padding:0;
  display:flex;
  align-items:flex-end;
  color:transparent;
  font-size:0;
  font-weight:900;
  line-height:1.05;
  overflow:hidden;
  background-size:cover;
  background-position:center;
}

.modal-ov{
  display:none;
  position:fixed;
  inset:0;
  z-index:70;
  padding:20px;
  background:rgba(24,22,28,.52);
  backdrop-filter:blur(8px);
  align-items:center;
  justify-content:center;
}
.modal-ov.on{display:flex;}
.modal{
  width:min(520px,100%);
  padding:30px;
  border-radius:26px;
  background:#fff;
  box-shadow:0 24px 60px rgba(24,22,28,.24);
}
.modal-mark{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#ff7d4d,#f4430c);
  color:#fff;
  font-size:24px;
  font-weight:900;
}
.modal h3{
  margin-top:16px;
  font-size:28px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.05em;
}
.modal p{
  margin-top:12px;
  color:var(--sub);
  font-size:14px;
}
.modal ul{display:grid;gap:10px;margin-top:18px;}
.modal li{
  list-style:none;
  padding:12px 14px;
  border-radius:14px;
  background:var(--paper-2);
  border:1px solid var(--line);
  font-size:13px;
}
.modal-actions{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.modal-ov.millie-reader-modal .modal{
  max-width:min(860px,calc(100vw - 32px));
}
.modal-ov.millie-reader-modal .modal li.millie-viewer-frame{
  display:block;
  padding:0;
  overflow:hidden;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--line);
}
.millie-viewer-frame iframe{
  display:block;
  width:100%;
  height:min(56vh,520px);
  border:0;
  background:#fff;
}
.essay-modal-lite{
  width:min(560px,100%);
}
.essay-textarea{
  width:100%;
  margin-top:16px;
  min-height:180px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  resize:vertical;
  font:inherit;
  line-height:1.6;
  color:var(--ink);
  background:#fffdf9;
}
.essay-textarea:focus{
  outline:2px solid rgba(244,67,12,.18);
  border-color:var(--millie);
}
.essay-char-count{
  margin-top:8px;
  text-align:right;
  color:var(--sub);
  font-size:12px;
  font-weight:800;
}
.essay-char-count.valid{
  color:#13734b;
}

@media (max-width:1120px){
  .hero-grid,.quick-layout,.catalog-layout,.detail-shell,.mypage-shell,.digital-card{grid-template-columns:1fr;}
  .mypage-shell{gap:8px;}
  .catalog-layout.curation-mode .catalog-main{padding-left:0;}
  .menu-grid{grid-template-columns:repeat(2,1fr);}
  .book-grid{grid-template-columns:repeat(3,1fr);}
  #pane-paper .book-grid{grid-template-columns:repeat(4,minmax(148px,1fr));gap:42px 26px;}
  #pane-paper .book-card{width:min(100%,180px);}
  .curation-grid-featured{grid-template-columns:repeat(2,1fr);}
  .hero-metrics,.widget-grid,.stats-grid,.detail-stats{grid-template-columns:repeat(2,1fr);}
  .sidebar{position:static;}
  .visual-grid{grid-template-columns:1fr;}
  .hero-banner-card{min-height:252px;}
  .shortcut-band{width:max-content;max-width:100%;gap:7px;padding:8px 10px;overflow-x:visible;}
  .shortcut-item{width:82px;min-height:68px;padding:7px 6px;border-radius:999px;}
  .shortcut-icon{width:42px;height:42px;padding:0;}
  .shortcut-icon svg{width:30px;height:30px;}
  .shortcut-item strong{font-size:11px;font-weight:650;letter-spacing:0;}
  .today-recommend{grid-template-columns:1fr;gap:22px;}
  .today-book{grid-template-columns:150px minmax(0,1fr);min-height:280px;}
  .today-cover{width:150px;}
  .home-curation-grid{grid-template-columns:1fr 1fr;}
  .home-curation-card:first-child{grid-column:1 / -1;}
  .home-best-row{grid-auto-columns:148px;}
  .shelf-grid{grid-auto-columns:148px;}
  .visual-hero{padding:0;}
  .hero-copy-card{min-height:auto;padding:32px 32px 34px;}
  .visual-copy h1{font-size:40px;}
  .hero-media-frame{min-height:300px;}
  .digital-single{grid-template-columns:1fr;}
  .best-book-row{grid-auto-columns:160px;}

  /* 마이페이지 LNB: 모바일 밀리+토스 스타일 */
  .profile-card{
    background:transparent;
    border-radius:0;
    padding:16px 0 14px;
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--text);
  }
  .profile-avatar{
    width:38px;
    height:38px;
    font-size:15px;
    font-weight:900;
    background:linear-gradient(135deg,#24222a,#3a3850);
    flex-shrink:0;
    color:#fff;
  }
  .profile-card strong{
    margin-top:0;
    font-size:15px;
    font-weight:800;
    color:var(--text);
  }
  .profile-card span{display:none;}
  .profile-card span:first-of-type{
    display:block;
    margin-top:2px;
    font-size:12px;
    color:var(--sub);
  }
  .sidebar-block:has(.lnb-list){margin-top:0 !important;padding:0;background:transparent;border:none;box-shadow:none;border-radius:0;}
  .sidebar-block:has(.lnb-list) .sidebar-title{display:none;}
  .lnb-list{
    display:flex;
    flex-direction:column;
    gap:0;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    margin-top:12px;
  }
  .lnb-card-grid{
    display:flex;
    align-items:center;
    gap:6px;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    margin:0;
    padding:0 0 4px;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .lnb-card-grid::-webkit-scrollbar{
    display:none;
  }
  .lnb-card-grid .lnb-btn{
    position:relative;
    overflow:hidden;
    flex:0 0 auto;
    width:auto;
    max-width:46vw;
    min-width:0;
    min-height:36px;
    border:1px solid rgba(31,26,22,.08);
    border-radius:999px;
    padding:8px 13px;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    text-align:center;
    scroll-snap-align:start;
    font-size:12px;
    font-weight:850;
    color:var(--sub);
    background:#fff;
    box-shadow:none;
    transition:transform .12s ease,background .12s ease,border-color .12s ease,color .12s ease;
    line-height:1;
    letter-spacing:0;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .lnb-card-grid .lnb-btn::before{content:none;}
  .lnb-card-grid .lnb-btn.on{
    border-color:var(--ink);
    background:var(--ink);
    color:#fff;
    box-shadow:none;
  }
  .lnb-card-grid .lnb-btn.on::before{
    background:rgba(36,34,42,.07);
  }
  .lnb-card-grid .lnb-btn:active{
    transform:scale(.96);
    box-shadow:none;
  }
  /* panel-home: 모바일에서 surface 래퍼 투명 처리 → 위젯만 카드로 나열 */
  #panel-home .surface{
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
    border-radius:0;
  }
}
@media (max-width:780px){
  .topbar-inner{
    grid-template-columns:auto minmax(140px,1fr) auto;
    gap:12px;
    padding:12px;
  }
  .brand{min-width:0;}
  .brand-airline-image{width:138px;max-height:38px;}
  .search-shell{
    grid-column:2;
    grid-row:1;
    width:100%;
    max-width:none;
    height:46px;
    min-width:0;
  }
  .search-category{display:none;}
  .search-input{
    min-width:0;
    padding:0 10px 0 16px;
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .search-icon{
    width:42px;
    font-size:18px;
  }
  .top-actions{
    grid-row:1;
    grid-column:3;
    gap:8px;
    justify-self:end;
    align-self:center;
  }
  .tool-icon{
    width:40px;
    height:40px;
    border-radius:14px;
  }
  .tabstrip{top:150px;}
  .pg{padding-top:226px;}
  #pg-books.pg{padding-top:208px;}
  .hero-title,.top-card h1,.forum-hero h1,.notice-hero h1,.detail-content h1{font-size:32px;}
  .menu-grid,.hero-metrics,.widget-grid,.stats-grid,.detail-stats,.learning-grid{grid-template-columns:1fr;}
  .forum-card,.notice-card,.order-item,.route-item{grid-template-columns:1fr;}
  .delivery-summary-grid,
  .delivery-steps{
    grid-template-columns:1fr;
  }
  .shortcut-band{
    width:100%;
    justify-content:flex-start;
    gap:7px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    padding:8px 10px;
    scrollbar-width:none;
  }
  .shortcut-band::-webkit-scrollbar{display:none;}
  .shortcut-item{
    flex:0 0 78px;
    width:78px;
    min-height:64px;
    padding:7px 5px;
    border-radius:999px;
  }
  .visual-hero{padding:0;}
  .hero-banner-card{min-height:210px;padding:0;}
  .hero-banner-image{
    inset:0;
    width:100%;
    height:100%;
    border-radius:24px;
  }
  .hero-banner-copy{width:min(62%,420px);padding-left:18px;}
  .hero-banner-copy h1{font-size:42px;}
  .hero-copy-card{padding:28px 24px 30px;}
  .visual-copy h1{font-size:34px;}
  .hero-media-frame{min-height:260px;padding:18px;}
  .book-grid{grid-template-columns:repeat(3,1fr);gap:12px;}
  .book-card{padding:12px;}
  .book-cover{padding:0;border-radius:14px;font-size:18px;}
  #pane-paper > .surface{padding-top:0;}
  #pane-paper .catalog-summary{
    margin-bottom:24px;
    padding-bottom:16px;
  }
  #pane-paper .book-grid{
    grid-template-columns:repeat(3,minmax(136px,1fr));
    gap:34px 18px;
  }
  #pane-paper .book-grid-list{
    grid-template-columns:1fr !important;
    gap:10px;
  }
  #pane-paper .book-card{
    width:min(100%,156px);
    min-width:136px;
  }
  #pane-paper .book-grid-list .book-card{
    width:100% !important;
    min-width:0 !important;
  }
  #pane-paper .book-list-card{
    grid-template-columns:68px minmax(0,1fr);
    gap:12px;
    padding:10px 0;
  }
  #pane-paper .book-list-card .book-cover-shell{
    width:68px;
  }
  #pane-paper .book-cover{
    border-radius:5px;
    box-shadow:none;
  }
  #pane-paper .book-cover img{
    border-radius:5px;
  }
  .millie-book-badge{
    top:7px;
    right:7px;
    width:34px;
    height:34px;
    padding:0;
  }
  #pane-paper .book-format-icons{
    top:48px;
    right:7px;
    gap:5px;
  }
  #pane-paper .book-format-icons.no-badge{
    top:7px;
  }
  .book-format-icon{
    width:34px;
    height:34px;
  }
  .book-format-icon svg{
    width:18px;
    height:18px;
  }
  #pane-paper .book-cover-shell{
    display:flex;
    flex-direction:column;
  }
  #pane-paper .book-cover-shell .book-read-millie-btn{
    position:static;
    transform:none;
    left:auto;
    bottom:auto;
    width:100%;
    justify-content:center;
    margin-top:6px;
    padding:7px 10px;
    font-size:11px;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
  }
  #pane-paper .book-cover-shell .book-read-millie-btn:hover{
    transform:none;
  }
  .book-read-millie-btn::before{
    width:15px;
    height:15px;
  }
  .book-title{margin-top:10px;font-size:15px;line-height:1.2;}
  .book-meta{font-size:11px;}
  .book-price{margin-top:10px;flex-direction:column;align-items:flex-start;gap:8px;}
  .book-price strong{font-size:17px;}
  .book-price span{font-size:11px;}
  .book-card .btn-line{width:100%;padding:9px 0;font-size:12px;}
  #pane-paper .book-title{margin-top:11px;font-size:16px;line-height:1.2;}
  #pane-paper .book-meta{
    margin-top:5px;
    font-size:12px;
    line-height:1.4;
    min-height:calc(12px * 1.4 * 2);
  }
  #pane-paper .book-price{
    margin-top:10px;
    flex-direction:row;
    align-items:center;
    gap:8px;
  }
  #pane-paper .book-price strong{font-size:18px;}
  #pane-paper .book-card .btn-line{
    width:48px;
    height:40px;
    padding:0;
    border-radius:13px;
    font-size:12px;
  }
  .catalog-layout{gap:18px;}
  .catalog-sidebar .sidebar-block{padding:14px;border:1px solid var(--line);border-radius:18px;background:#fff;}
  .catalog-sidebar .tree-children{padding:10px;border-radius:14px;}
  .catalog-summary{align-items:flex-start;flex-direction:column;}
  .catalog-summary-right{
    width:100%;
    align-items:center;
    justify-content:space-between;
    flex-direction:column;
    gap:8px;
  }
  .millie-badge-legend{
    width:100%;
    justify-content:flex-start;
    white-space:normal;
  }
  #pane-paper .catalog-summary{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    column-gap:12px;
    row-gap:8px;
  }
  #pane-paper .catalog-summary > div:first-child{
    min-width:0;
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:4px 8px;
  }
  #pane-paper .catalog-summary-right{
    grid-column:2;
    grid-row:1;
    width:auto;
    min-width:max-content;
    align-items:center;
    justify-content:flex-end;
    flex-direction:row;
    gap:0;
  }
  #pane-paper .book-count{
    display:none;
  }
  #pane-paper .paper-view-toggle{
    flex-shrink:0;
  }
  .book-toolbar{align-items:flex-start;flex-direction:column;}
  .shelf-grid{
    grid-auto-columns:minmax(136px,26vw);
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .shelf-grid::-webkit-scrollbar{display:none;}
  .curation-grid-featured{
    display:flex;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    padding-bottom:10px;
    scrollbar-width:none;
  }
  .curation-grid-featured::-webkit-scrollbar{display:none;}
  .quote-curation-card{
    flex:0 0 min(66vw,320px);
    min-height:500px;
    padding:24px 20px;
    scroll-snap-align:start;
  }
  .curation-book-visual{width:min(72%,190px);}
  .best-book-row{
    display:flex;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    scrollbar-width:none;
  }
  .best-book-row::-webkit-scrollbar{display:none;}
  .best-book-card{
    flex:0 0 min(36vw,160px);
  }
}
@media (max-width:560px){
  .wrap{width:min(100vw - 20px,var(--shell-width));}
  .topbar-inner{width:min(100vw - 20px,var(--shell-width));}
  .tabstrip-inner{width:min(100vw - 20px,var(--shell-width));}
  .topbar{
    padding-top:10px;
    background:linear-gradient(180deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.96) 76%,rgba(255,255,255,0) 100%);
  }
  .topbar-inner{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:8px;
    padding:8px 10px;
    border-radius:22px;
  }
  .brand-airline-image{width:116px;max-height:34px;}
  .top-actions{gap:5px;}
  .tool-icon{
    width:35px;
    height:35px;
    border-radius:12px;
  }
  .tool-icon svg{
    width:17px;
    height:17px;
  }
  .hero-panel,.hero-side,.surface,.top-card,.forum-hero,.notice-hero{padding:18px;}
  .action-row,.detail-actions,.modal-actions{flex-direction:column;}
  .btn-primary,.btn-secondary,.btn-line,.btn-soft{width:100%;}
  .search-shell{
    height:44px;
    border-width:2px;
    box-shadow:0 8px 18px rgba(196,151,18,.08);
  }
  .search-input{
    padding:0 8px 0 16px;
    font-size:13px;
  }
  .search-icon{
    width:38px;
    font-size:17px;
  }
  .tabstrip{top:134px;}
  .tabstrip-inner{
    padding:8px 6px;
    gap:6px;
    border-radius:18px;
  }
  .tab-menu-btn{
    width:42px;
    height:42px;
  }
  .tab-link{
    padding:10px 12px;
    font-size:13px;
  }
  .pg{padding-top:210px;}
  #pg-books.pg{padding-top:194px;}
  .hero-banner-card{min-height:182px;padding:0;border-radius:22px;}
  .hero-banner-image{
    inset:0;
    width:100%;
    height:100%;
    border-radius:22px;
    object-position:58% top;
  }
  .hero-banner-copy{width:70%;padding-left:12px;}
  .hero-banner-copy h1{font-size:31px;}
  .shortcut-band{gap:6px;padding:7px 8px;}
  .shortcut-item{flex-basis:72px;width:72px;min-height:60px;padding:6px 4px;border-radius:999px;}
  .shortcut-icon{width:36px;height:36px;padding:0;}
  .shortcut-icon svg{width:27px;height:27px;}
  .shortcut-item strong{font-size:10.5px;font-weight:650;letter-spacing:0;}
  .today-recommend{
    padding:24px;
    border-radius:24px;
  }
  .today-copy h2{font-size:30px;}
  .today-book{
    grid-template-columns:130px minmax(0,1fr);
    min-height:230px;
    padding:20px;
    border-radius:20px;
  }
  .today-cover{width:130px;}
  .home-curation-grid{
    display:flex;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    padding-bottom:8px;
    scrollbar-width:none;
  }
  .home-curation-grid::-webkit-scrollbar{display:none;}
  .home-curation-card{
    flex:0 0 min(78vw,320px);
    scroll-snap-align:start;
  }
  .best-toggle{width:auto;}
  .home-best-row{
    grid-auto-columns:minmax(128px,38vw);
    scroll-snap-type:x mandatory;
  }
  .hero-copy-card{padding:24px 20px 24px;}
  .visual-copy h1{font-size:29px;}
  .hero-media-frame{min-height:220px;padding:16px;}
  .hero-copy-image-wrap{aspect-ratio:16/7.8;border-radius:20px;}
  .shelf-grid{grid-auto-columns:minmax(128px,38vw);}
  .shelf-card{padding:0;border-radius:0;}
  .quote-curation-card{flex-basis:min(78vw,300px);}
  .quote-curation-card{min-height:460px;}
  .best-book-card{flex-basis:min(42vw,150px);}
  .book-grid{grid-template-columns:repeat(3,1fr);gap:10px;}
  .book-card{padding:10px;}
  .book-cover{padding:0;border-radius:12px;font-size:15px;}
  #pane-paper .book-cover-shell{
    display:flex;
    flex-direction:column;
  }
  #pane-paper .book-cover-shell .book-read-millie-btn{
    position:static;
    transform:none;
    left:auto;
    bottom:auto;
    width:100%;
    justify-content:center;
    margin-top:5px;
    padding:6px 8px;
    font-size:10px;
    border-radius:7px;
    box-shadow:0 2px 6px rgba(0,0,0,.16);
  }
  #pane-paper .book-cover-shell .book-read-millie-btn:hover{
    transform:none;
  }
  #pane-paper .catalog-summary{margin-bottom:20px;}
  #pane-paper .book-grid{
    grid-template-columns:repeat(3,minmax(108px,1fr));
    gap:30px 14px;
  }
  #pane-paper .book-grid-list{
    grid-template-columns:1fr !important;
    gap:8px;
  }
  #pane-paper .book-card{
    width:min(100%,132px);
    min-width:108px;
  }
  #pane-paper .book-grid-list .book-card{
    width:100% !important;
    min-width:0 !important;
  }
  #pane-paper .book-list-card{
    grid-template-columns:60px minmax(0,1fr);
    gap:10px;
    padding:9px 0;
  }
  #pane-paper .book-list-card .book-cover-shell{
    width:60px;
  }
  #pane-paper .millie-book-badge{
    top:6px;
    right:6px;
    width:32px;
    height:32px;
    padding:0;
  }
  #pane-paper .book-format-icons{
    top:44px;
    right:6px;
    gap:5px;
  }
  #pane-paper .book-format-icons.no-badge{
    top:6px;
  }
  #pane-paper .book-format-icon{
    width:32px;
    height:32px;
  }
  #pane-paper .book-format-icon svg{
    width:17px;
    height:17px;
  }
  .book-title{font-size:13px;}
  .book-meta{font-size:10px;}
  .book-price strong{font-size:15px;}
  .book-price span{font-size:10px;}
  #pane-paper .book-title{font-size:14px;}
  #pane-paper .book-meta{
    font-size:11px;
    min-height:calc(11px * 1.4 * 2);
  }
  #pane-paper .book-price strong{font-size:16px;}
  #pane-paper .book-card .btn-line{
    width:42px;
    height:36px;
    border-radius:12px;
    font-size:11px;
  }
  .filter-row{gap:6px;}
  .filter-chip,.page-btn{font-size:11px;}
}

/* ── hidden 속성 강제 적용 (CSS display 오버라이드 방지) ── */
.mobile-paper-header[hidden]{display:none!important;}

/* ── 카테고리 바텀시트 ── */
.cat-sheet-ov{
  display:block;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  z-index:300;
  opacity:0;
  transition:opacity .25s ease;
}
.cat-sheet-ov[hidden]{display:none!important;}
.cat-sheet-ov.open{opacity:1;}
.cat-sheet{
  display:flex;
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:301;
  background:#fff;
  border-radius:24px 24px 0 0;
  flex-direction:column;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  max-height:75vh;
  overflow:hidden;
}
.cat-sheet[hidden]{display:none!important;}
.cat-sheet.open{transform:translateY(0);}
.cat-sheet-handle{
  width:40px;height:4px;
  border-radius:2px;
  background:#e0dbd6;
  margin:12px auto 0;
  flex-shrink:0;
}
.cat-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px 12px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.cat-sheet-title{
  font-size:16px;
  font-weight:900;
  color:var(--text);
}
.cat-sheet-close{
  display:grid;
  place-items:center;
  width:32px;height:32px;
  border-radius:50%;
  background:var(--line);
  color:var(--sub);
}
.cat-sheet-close svg{
  width:16px;height:16px;
  fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;
}
.cat-sheet-body{
  overflow-y:auto;
  padding:10px 0 28px;
  flex:1;
}
.cat-sheet-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:14px 20px;
  font-size:15px;
  font-weight:700;
  color:var(--sub);
  background:transparent;
  border:none;
  text-align:left;
}
.cat-sheet-item.on{
  color:var(--text);
  background:var(--paper-2);
}
.cat-sheet-arrow{
  width:18px;height:18px;
  fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  flex-shrink:0;
  transition:transform .2s ease;
}
.cat-sheet-parent.expanded .cat-sheet-arrow{
  transform:rotate(90deg);
}
.cat-sheet-subs[hidden]{display:none!important;}
.cat-sheet-sub{
  display:block;
  width:100%;
  padding:11px 20px 11px 40px;
  font-size:14px;
  font-weight:700;
  color:var(--sub);
  background:transparent;
  border:none;
  text-align:left;
}
.cat-sheet-sub.on{
  color:var(--millie-deep);
  font-weight:800;
}

/* ── 하단 플로팅 GNB (모바일 전용) ── */
.bottom-gnb{
  display:none;
}
@media(max-width:768px){
  .search-shell{
    display:none;
  }
  .mobile-global-search-wrap[hidden]{
    display:none!important;
  }
  .mobile-global-search-wrap{
    position:fixed;
    top:62px;
    left:0;
    right:0;
    z-index:56;
    display:block;
    padding:0 16px;
    pointer-events:auto;
    transition:transform .3s ease;
  }
  .mobile-global-search{
    width:100%;
    max-width:460px;
    height:42px;
    margin:0 auto;
    padding:0 15px;
    border-radius:15px;
    background:#fff;
    border:1.5px solid rgba(196,151,18,.54);
    box-shadow:0 8px 18px rgba(36,28,21,.07);
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--sub);
    font-size:14px;
    font-weight:800;
    text-align:left;
  }
  .mobile-global-search span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .pg{
    padding-top:108px;
  }
  #pg-books.pg{
    padding-top:132px;
  }
  .bottom-gnb{
    display:flex;
    position:fixed;
    bottom:max(12px, env(safe-area-inset-bottom));
    left:50%;
    transform:translateX(-50%);
    z-index:200;
    width:calc(100% - 24px);
    max-width:460px;
    min-height:74px;
    background:
      linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,253,244,.84)),
      rgba(255,255,255,.88);
    border:1px solid rgba(255,255,255,.72);
    border-radius:999px;
    box-shadow:
      0 -1px 0 rgba(255,255,255,.88) inset,
      0 1px 0 rgba(255,255,255,.88) inset,
      0 18px 46px rgba(31,26,22,.18),
      0 5px 18px rgba(31,26,22,.08);
    padding:8px;
    align-items:center;
    justify-content:center;
    gap:4px;
    overflow:hidden;
    isolation:isolate;
    backdrop-filter:blur(22px) saturate(1.45);
    -webkit-backdrop-filter:blur(22px) saturate(1.45);
  }
  .bottom-gnb::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    border-radius:inherit;
    background:
      radial-gradient(circle at 18% 0%,rgba(255,255,255,.9),transparent 32%),
      radial-gradient(circle at 86% 100%,rgba(255,229,0,.18),transparent 38%);
    pointer-events:none;
  }
  .bottom-gnb-item{
    position:relative;
    z-index:1;
    flex:1;
    min-width:0;
    height:58px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:5px 2px 6px;
    border-radius:999px;
    color:rgba(31,26,22,.76);
    text-decoration:none;
    font-size:10px;
    font-weight:760;
    letter-spacing:0;
    transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .bottom-gnb-item.on,
  .bottom-gnb-item:active{
    background:
      linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,247,176,.72));
    color:#5f4f00;
    box-shadow:
      0 1px 0 rgba(255,255,255,.88) inset,
      0 8px 20px rgba(162,135,0,.14),
      0 1px 2px rgba(31,26,22,.06);
  }
  .bottom-gnb-item:active{
    transform:scale(.98);
  }
  .bottom-gnb-icon{
    display:grid;
    place-items:center;
    width:27px;
    height:27px;
  }
  .bottom-gnb-icon svg{
    width:22px;
    height:22px;
    stroke:currentColor;
    stroke-width:1.72;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:stroke .2s ease,fill .2s ease,filter .2s ease;
  }
  .bottom-gnb-item.on .bottom-gnb-icon svg{
    stroke:#7b6600;
    fill:none;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.8));
  }
  .bottom-gnb-label{
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
    font-weight:700;
    line-height:1.1;
    text-align:center;
  }
  @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .bottom-gnb{
      background:#fffef8;
    }
  }

  /* 모바일에서 기존 tabstrip 숨기기 */
  .tabstrip{
    display:none;
  }
  /* 모바일 배지: fixed로 전환, 원래 자리에서는 보이고 스크롤 시 상단 고정 */
  .millie-badge-legend-row{
    height:auto;
    padding-bottom:14px;
  }
  .millie-badge-legend--sticky{
    position:static;
    margin-bottom:0;
    box-shadow:none;
    padding:6px 16px 8px;
  }
  .millie-badge-legend--sticky.is-fixed{
    position:fixed;
    left:0;
    right:0;
    top:0;
    z-index:190;
    background:#ffffff;
    box-shadow:0 1px 0 0 rgba(31,26,22,.08);
    padding:8px 16px 10px;
    margin-bottom:0;
  }
  #pane-paper > .surface{padding-top:0;}

  /* 하단 GNB 높이만큼 페이지 패딩 보정 */
  .pg{
    padding-top:108px;
    padding-bottom:calc(104px + env(safe-area-inset-bottom));
  }
  #pg-books.pg{
    padding-top:132px;
  }
  .mypage-home-widgets{
    grid-template-columns:1fr;
  }
  .reading-bar-chart{
    height:60px;
  }
  .completion-grid{
    grid-template-columns:1fr;
  }
  .mypage-status-widget.widget-point{
    grid-column:1 / -1;
  }
}

@media (max-width:768px){
  #pane-paper .book-grid-card .book-format-icons{
    display:none;
  }
}

/* ── 모바일 북러닝 고정 헤더 (≤768px) ── */
.mobile-paper-header{
  display:none;
}
@media (max-width:768px){
  /* PC 사이드바 숨김 */
  #pg-books .catalog-sidebar{display:none;}
  /* PC 밀리배지/catalog-summary 숨김 */
  #pane-paper .millie-badge-legend-row,
  #pane-paper .catalog-summary{display:none;}

  /* 모바일 헤더 컨테이너 */
  .mobile-paper-header{
    display:block;
    position:fixed;
    left:0;right:0;
    z-index:57;
    background:#fff;
    box-shadow:0 1px 0 0 rgba(31,26,22,.07);
    /* top은 JS에서 topbar bottom에 맞춰 동적 설정 */
    top:0;
  }

  /* 밀리 배지 — 항상 표시 */
  .mobile-millie-badge{
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 16px;
    border-bottom:1px solid #f5f0e0;
    font-size:12px;
    font-weight:800;
    color:#4f4100;
    background:#fff;
  }
  .mobile-millie-badge img{
    width:24px;height:24px;
    border-radius:50%;
    background:#ffe500;
    object-fit:cover;
    flex-shrink:0;
  }

  /* 칩바 래퍼 — 슬라이드 업/다운 */
  .mobile-chip-bar{
    overflow:hidden;
    transition:max-height .25s ease, opacity .2s ease;
    max-height:120px;
    opacity:1;
  }
  .mobile-chip-bar.chip-bar-hidden{
    max-height:0;
    opacity:0;
  }

  /* 메인 칩 행 */
  .mobile-chip-row{
    display:flex;
    gap:7px;
    overflow-x:auto;
    padding:9px 16px 10px;
    scrollbar-width:none;
    background:#fff;
  }
  .mobile-chip-row::-webkit-scrollbar{display:none;}

  .mobile-chip{
    flex-shrink:0;
    padding:6px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    background:#fff;
    border:1.5px solid #ddd9cc;
    color:#4a4540;
    cursor:pointer;
    white-space:nowrap;
    transition:background .15s,color .15s,border-color .15s;
  }
  .mobile-chip.on{
    background:#1f1a16;
    color:#ffe500;
    border-color:#1f1a16;
  }

  /* 소설 서브칩 행 */
  .mobile-sub-chip-row{
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding:0 16px 9px;
    background:#fffdf5;
    border-top:1px solid #f5f0e0;
    scrollbar-width:none;
  }
  .mobile-sub-chip-row::-webkit-scrollbar{display:none;}
  .mobile-sub-chip-row[hidden]{display:none;}

  .mobile-sub-chip{
    flex-shrink:0;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    background:#fff;
    border:1.5px solid #e8d800;
    color:#5a4500;
    cursor:pointer;
    white-space:nowrap;
    transition:background .15s,color .15s;
  }
  .mobile-sub-chip.on{
    background:#ffe500;
    color:#1f1a16;
    border-color:#ffe500;
  }

  /* pg-books 상단 패딩 — 모바일 헤더 높이 보정 (JS에서 동적 설정) */
  #pg-books.pg{
    padding-top:76px;
  }

  /* ── 모바일 칩바 액션 영역 (카테고리 버튼 + 뷰 토글) ── */
  .mobile-chip-bar-inner{
    display:flex;
    align-items:center;
  }
  .mobile-chip-row{
    flex:1;
    min-width:0;
    padding-right:8px;
  }
  .mobile-chip-actions{
    display:flex;
    align-items:center;
    gap:5px;
    padding:0 12px 0 8px;
    flex-shrink:0;
    border-left:1px solid rgba(31,26,22,.08);
  }
  .mobile-cat-btn{
    display:grid;
    place-items:center;
    width:34px;height:34px;
    border-radius:10px;
    border:1.5px solid var(--line);
    background:#fff;
    color:var(--sub);
    flex-shrink:0;
  }
  .mobile-cat-btn svg{
    width:18px;height:18px;
    fill:none;stroke:currentColor;
    stroke-width:2;stroke-linecap:round;
  }
  .mobile-view-toggle{
    display:inline-flex;
    align-items:center;
    gap:2px;
    padding:2px;
    border:1.5px solid var(--line);
    border-radius:999px;
    background:#fff;
  }
  .mobile-view-toggle .paper-view-btn{
    width:28px;height:28px;
  }
  .mobile-view-toggle .paper-view-btn svg{
    width:15px;height:15px;
  }
}

/* ── 카테고리 시트 → 데스크탑 모달 ──────────────────────── */
@media(min-width:769px){
  .cat-sheet{
    bottom:auto;
    left:50%;
    right:auto;
    top:50%;
    width:460px;
    max-height:80vh;
    border-radius:16px;
    transform:translate(-50%,-46%) scale(.96);
    transition:opacity .22s ease, transform .22s ease;
    opacity:0;
  }
  .cat-sheet.open{
    transform:translate(-50%,-50%) scale(1);
    opacity:1;
  }
  .cat-sheet-handle{ display:none; }
}


/* ── 마이페이지 대시보드 Card1/2/3 ───────────────────── */
.dashboard-card{
  overflow:hidden;
}
.dashboard-card-wide{
  grid-column:1 / -1;
}
.dashboard-card-head{
  margin:-2px -2px 0;
}
.period-selector{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.period-tab-row,
.period-subtab-row{
  display:flex;
  align-items:center;
  gap:6px;
}
.period-tab-row{
  flex:0 0 auto;
  flex-wrap:nowrap;
}
.period-subtab-row{
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
}
.period-subtab-row::-webkit-scrollbar{
  display:none;
}
.period-tab,
.period-subtab{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--sub);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.period-tab{
  padding:6px 14px;
}
.period-subtab{
  gap:6px;
  padding:5px 11px;
  background:var(--paper-2);
}
.period-tab:hover,
.period-subtab:hover{
  transform:translateY(-1px);
  border-color:rgba(162,135,0,.28);
}
.period-tab.active,
.period-subtab.active{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff;
}
.period-subtab .d-day-badge{
  min-height:20px;
  padding:2px 7px;
  font-size:10px;
}
.period-filter-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
  margin-left:auto;
  min-height:38px;
}
.period-filter-row:empty{
  display:none;
}
.period-filter-trigger{
  display:inline-grid;
  grid-template-columns:auto auto auto 16px;
  align-items:center;
  gap:8px;
  max-width:100%;
  min-height:36px;
  padding:7px 10px 7px 12px;
  border:1px solid rgba(31,26,22,.1);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 4px 12px rgba(31,26,22,.04);
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.period-filter-trigger:hover{
  transform:translateY(-1px);
  border-color:rgba(143,126,231,.3);
  background:rgba(143,126,231,.05);
}
.period-filter-label{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.period-filter-trigger strong{
  display:block;
  min-width:0;
  overflow:hidden;
  color:var(--ink);
  font-size:12px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.period-filter-short{
  display:none;
}
.period-filter-meta{
  color:var(--violet);
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
}
.period-filter-icon{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:var(--muted);
}
/* ── Unified stat section ── */
.stat-unified{
}
.stat-section-label-row{
  padding:10px 16px 0;
}
.stat-section-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:99px;
  border:1px solid var(--violet);
  color:var(--violet);
  font-size:11px;
  font-weight:800;
  background:rgba(143,126,231,.07);
}
.stat-section-badge::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--violet);
}
.stat-hero{
  display:none;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:20px 0 16px;
  border-bottom:1px solid var(--line);
}
.stat-hero-label{
  font-size:12px;
  font-weight:700;
  color:var(--sub);
  margin:0 0 6px;
}
.stat-hero-num{
  font-size:40px;
  font-weight:900;
  color:var(--violet);
  line-height:1;
  letter-spacing:-1px;
}
.stat-hero-unit{
  font-size:18px;
  font-weight:700;
  color:var(--sub);
  letter-spacing:0;
}
.stat-hero-sub{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  margin:6px 0 0;
}
.stat-row-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.stat-row-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:18px 8px;
  border-right:1px solid var(--line);
  text-align:center;
}
.stat-row-item:last-child{
  border-right:none;
}
.stat-row-value{
  display:flex;
  align-items:flex-end;
  gap:2px;
  font-size:28px;
  font-weight:800;
  color:var(--ink);
  line-height:1;
}
.stat-row-unit{
  font-size:13px;
  font-weight:700;
  color:var(--sub);
  margin-bottom:2px;
}
.stat-row-label{
  font-size:11px;
  font-weight:700;
  color:var(--sub);
}
.stat-row-sub{
  font-size:10px;
  font-weight:600;
  color:var(--muted);
  margin-top:2px;
  line-height:1.3;
  word-break:keep-all;
}
.stat-row-item-clickable{
  cursor:pointer;
  background:transparent;
  transition:background .14s;
}
.stat-row-item-clickable:hover{
  background:rgba(143,126,231,.06);
}
.stat-hero-clickable{
  cursor:pointer;
  border-radius:10px;
  transition:background .14s;
}
.stat-hero-clickable:hover{
  background:rgba(143,126,231,.05);
}
.stat-list-books{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.stat-list-book{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:8px;
  border-radius:10px;
  background:var(--paper-2);
  border:1px solid var(--line);
}
.stat-list-cover{
  display:block;
  width:40px;
  aspect-ratio:2 / 3;
  overflow:hidden;
  border-radius:5px;
  background:#f8f4e9;
  box-shadow:0 2px 6px rgba(31,26,22,.1);
}
.stat-list-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.stat-list-info strong{
  display:block;
  font-size:13px;
  font-weight:800;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stat-list-info span{
  display:block;
  margin-top:2px;
  font-size:11px;
  color:var(--sub);
  font-weight:700;
}
.stat-list-action{
  display:flex;
  justify-content:center;
  padding:12px 0 4px;
}
.forum-activity-summary{
  margin-bottom:8px;
  color:var(--sub);
  font-size:12px;
  font-weight:850;
}
.forum-activity-list{
  display:grid;
  gap:8px;
}
.forum-activity-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:10px;
  width:100%;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper-2);
  text-align:left;
  transition:background .14s ease,border-color .14s ease,transform .14s ease;
}
.forum-activity-item:hover{
  border-color:rgba(143,126,231,.26);
  background:#fff;
  transform:translateY(-1px);
}
.forum-activity-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.forum-activity-copy strong{
  overflow:hidden;
  color:var(--ink);
  font-size:12px;
  font-weight:900;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.forum-activity-copy em{
  overflow:hidden;
  color:var(--sub);
  font-size:11px;
  font-style:normal;
  font-weight:750;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.forum-activity-copy small{
  color:var(--muted);
  font-size:10px;
  font-weight:750;
}
.stat-info-btn{
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  flex:0 0 26px;
  border-radius:50%;
  color:var(--muted);
  background:transparent;
  font-size:16px;
  font-weight:900;
  line-height:1;
  transition:color .14s ease,background .14s ease,transform .14s ease;
}
.stat-info-btn:hover{
  color:var(--violet);
  background:rgba(143,126,231,.08);
  transform:translateY(-1px);
}
.stat-info-list{
  list-style:none;
  display:grid;
  gap:0;
  padding:0;
  margin:8px 0 0;
}
.stat-info-list li{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.stat-info-list li:last-child{
  border-bottom:none;
}
.stat-info-list li strong{
  color:var(--ink);
  font-size:13px;
  font-weight:900;
}
.stat-info-list li span{
  color:var(--sub);
  font-size:12px;
  font-weight:700;
  line-height:1.5;
}
/* ── Ebook section (전자책 전용 지표) ── */
.ebook-section{
  padding:12px 0 4px;
  border-bottom:1px solid var(--line);
}
.ebook-section-head{
  margin-bottom:10px;
}
.ebook-section-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:99px;
  border:1px solid var(--violet);
  color:var(--violet);
  font-size:11px;
  font-weight:800;
  background:rgba(143,126,231,.07);
}
.ebook-section-badge::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--violet);
}
.ebook-section-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.ebook-flat-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:18px 8px;
  border-right:1px solid var(--line);
  text-align:center;
}
.ebook-flat-item:last-child{
  border-right:none;
}
.ebook-flat-avg .ebook-flat-label::after{
  content:" ⓘ";
  font-size:9px;
  color:var(--muted);
}
.ebook-flat-val{
  font-size:22px;
  font-weight:800;
  color:var(--ink);
  line-height:1;
}
.ebook-flat-label{
  font-size:10px;
  font-weight:700;
  color:var(--sub);
}
.ebook-flat-unit{
  font-size:12px;
  font-weight:750;
  color:var(--sub);
}
.ebook-forum-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:42px;
  padding:9px 12px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:transparent;
  text-align:left;
  transition:background .14s ease;
}
.ebook-forum-row:hover{
  background:rgba(31,26,22,.035);
}
.ebook-forum-title{
  flex:0 0 auto;
  color:var(--ink);
  font-size:11px;
  font-weight:900;
}
.ebook-forum-meta{
  flex:1;
  min-width:0;
  overflow:hidden;
  color:var(--sub);
  font-size:11px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ebook-forum-cta{
  flex:0 0 auto;
  color:var(--violet);
  font-size:10px;
  font-weight:900;
}
.ebook-book-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 8px;
  border-left:1px solid var(--line);
  border-right:none;
  background:transparent;
  cursor:pointer;
  text-align:center;
  transition:background .14s;
}
.ebook-book-cta:hover{
  background:rgba(143,126,231,.07);
}
.ebook-book-cta-cover{
  width:32px;
  height:44px;
  display:block;
  border-radius:3px;
  overflow:hidden;
  flex-shrink:0;
}
.ebook-book-cta-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ebook-book-cta-info{
  display:flex;
  flex-direction:column;
  gap:2px;
  max-width:72px;
}
.ebook-book-cta-title{
  font-size:9.5px;
  font-weight:700;
  color:var(--ink);
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
}
.ebook-book-cta-link{
  font-size:9px;
  font-weight:800;
  color:var(--violet);
  display:block;
}
.ebook-latest-book-row{
  display:none;
}
.card1-chart-wrap{
  min-width:0;
  padding:14px 12px 0;
  border-radius:0 0 14px 14px;
  background:#fff;
}
/* ── Line chart ── */
.line-chart-wrap{
  min-width:0;
  padding-bottom:12px;
}
.line-chart-info{
  min-height:16px;
  margin-bottom:4px;
  font-size:11px;
  font-weight:700;
  color:var(--violet);
  text-align:center;
}
.chart-dot{
  transition:r .1s;
}
.chart-axis-label{
  fill:var(--muted);
  font-size:9px;
  font-weight:800;
}
.activity-month-group{
  cursor:pointer;
  outline:none;
}
.activity-month-group:focus-visible .activity-bar{
  opacity:.72;
}
/* ── Dashboard period filter ── */
.dashboard-filter-ov{
  position:fixed;
  inset:0;
  z-index:320;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.42);
}
.dashboard-filter-panel{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:420px;
  max-height:72vh;
  overflow:hidden;
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 46px rgba(0,0,0,.22);
}
.dashboard-filter-handle{
  display:none;
}
.dashboard-filter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 12px;
  border-bottom:1px solid var(--line);
}
.dashboard-filter-head strong{
  color:var(--ink);
  font-size:15px;
  font-weight:900;
}
.dashboard-filter-close{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:50%;
  background:var(--paper-2);
  color:var(--sub);
  transition:background .14s ease,color .14s ease;
}
.dashboard-filter-close:hover{
  background:rgba(143,126,231,.1);
  color:var(--violet);
}
.dashboard-filter-close svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
}
.dashboard-filter-list{
  flex:1;
  overflow-y:auto;
  padding:8px 0 12px;
}
.dashboard-filter-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  padding:13px 18px;
  text-align:left;
  background:transparent;
  transition:background .14s ease;
}
.dashboard-filter-option:hover{
  background:rgba(143,126,231,.06);
}
.dashboard-filter-option.on{
  background:var(--paper-2);
}
.dashboard-filter-option span{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.dashboard-filter-option strong{
  overflow:hidden;
  color:var(--ink);
  font-size:14px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-filter-option em{
  color:var(--muted);
  font-size:11px;
  font-style:normal;
  font-weight:750;
}
.dashboard-filter-option i{
  flex:0 0 10px;
  width:10px;
  height:10px;
  border-radius:50%;
  border:2px solid rgba(31,26,22,.16);
}
.dashboard-filter-option.on i{
  border-color:var(--violet);
  background:var(--violet);
  box-shadow:inset 0 0 0 2px #fff;
}
.dashboard-filter-empty{
  padding:18px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-align:center;
}
@keyframes dashboardFilterSheetUp{
  from{ transform:translateY(100%); }
  to{ transform:translateY(0); }
}
/* ── Chart period panel ── */
.chart-period-modal-ov{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.chart-period-modal-inner{
  background:#fff;
  border-radius:16px;
  width:100%;
  max-width:420px;
  max-height:70vh;
  overflow-y:auto;
  padding:20px;
  box-shadow:0 12px 40px rgba(0,0,0,.22);
}
.chart-period-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.chart-period-head strong{
  font-size:13px;
  font-weight:800;
  color:var(--ink);
}
.chart-period-close-btn{
  font-size:13px;
  color:var(--muted);
  line-height:1;
  padding:2px 4px;
}
.chart-period-books{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
}
.chart-period-book{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  width:70px;
}
.chart-period-cover{
  display:block;
  width:56px;
  aspect-ratio:2 / 3;
  overflow:hidden;
  border-radius:6px;
  background:#f8f4e9;
  box-shadow:0 3px 8px rgba(31,26,22,.12);
}
.chart-period-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.chart-period-title{
  font-size:10px;
  font-weight:700;
  color:var(--ink);
  text-align:center;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  word-break:keep-all;
}
.chart-period-empty{
  font-size:12px;
  color:var(--muted);
  padding:8px 0;
}
.chart-badge{
  font-size:10px;
  font-weight:700;
  padding:2px 6px;
  border-radius:99px;
}
.badge-blue{ background:#e8f0ff; color:#3366cc; }
.badge-gray{ background:#f0f0f0; color:#666; }
/* ── Stacked bar chart ── */
.stacked-bar-chart{
  min-width:0;
}
.stacked-bar-cols{
  display:flex;
  align-items:flex-end;
  gap:8px;
  min-height:112px;
}
.stacked-bar-col{
  flex:1;
  min-width:0;
  display:grid;
  grid-template-rows:auto 82px auto;
  align-items:end;
  justify-items:center;
  gap:5px;
}
.stacked-bar-value{
  min-height:14px;
  color:var(--sub);
  font-size:10px;
  font-weight:800;
}
.stacked-bar-track{
  display:flex;
  flex-direction:column-reverse;
  width:100%;
  max-width:34px;
  height:82px;
  border-radius:4px;
  background:var(--paper-2);
  overflow:hidden;
}
.bar-paper{
  display:block;
  width:100%;
  min-height:0;
  background:#FF8C42;
}
.bar-ebook{
  display:block;
  width:100%;
  min-height:0;
  background:var(--violet);
}
.stacked-bar-col.active .bar-ebook{
  background:var(--millie-deep, #5b47c4);
}
.stacked-bar-col.active .bar-paper{
  background:#d96f28;
}
.stacked-bar-label{
  overflow:hidden;
  max-width:100%;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.stacked-bar-legend{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:8px;
  font-size:10px;
  font-weight:700;
  color:var(--sub);
}
.legend-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:2px;
  margin-right:3px;
  vertical-align:middle;
}
.cal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.cal-nav-btn{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--sub);
  font-size:13px;
  font-weight:950;
  transition:background .18s ease,transform .18s ease,opacity .18s ease;
}
.cal-nav-btn:not(:disabled):hover{
  transform:translateY(-1px);
  background:var(--paper-2);
}
.cal-nav-btn:disabled{
  cursor:default;
  opacity:.35;
}
.cal-month-label{
  color:var(--ink);
  font-size:14px;
  font-weight:950;
}
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:3px;
  text-align:center;
}
.cal-day-label,
.cal-cell{
  display:grid;
  place-items:center;
}
.cal-day-label{
  min-height:24px;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
}
.cal-cell{
  position:relative;
  min-height:32px;
  border-radius:10px;
  color:var(--ink);
  font-size:12px;
  font-weight:850;
}
.cal-cell-empty{
  visibility:hidden;
}
.cal-cell-today{
  background:var(--ink);
  color:#fff;
}
.cal-dot{
  position:absolute;
  left:50%;
  bottom:5px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--violet);
  transform:translateX(-50%);
}
.cal-cell-today .cal-dot{
  background:var(--millie);
}
.cal-streak{
  padding:10px 12px;
  border-radius:12px;
  background:var(--millie-soft);
  color:#6a5900;
  font-size:12px;
  font-weight:900;
}
.card2-books-head{
  padding-top:12px;
  border-top:1px solid var(--line);
}
.card2-books-head h4{
  color:var(--ink);
  font-size:13px;
  font-weight:950;
}
.card2-books-section{
  overflow:hidden;
}
.card2-books-scroll{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  margin-left:-16px;
  margin-right:-16px;
  padding:0 16px 2px;
  scrollbar-width:none;
}
.card2-books-scroll::-webkit-scrollbar{
  display:none;
}
.card2-book-card{
  flex:0 0 92px;
  display:grid;
  gap:7px;
  align-content:start;
  scroll-snap-align:start;
  text-align:left;
  transition:transform .18s ease;
}
.card2-book-card:hover{
  transform:translateY(-2px);
}
.card2-book-cover{
  display:block;
  width:92px;
  aspect-ratio:2 / 3;
  overflow:hidden;
  border-radius:8px;
  background:var(--paper-2);
  box-shadow:0 7px 16px rgba(31,26,22,.12);
}
.card2-book-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.card2-book-title{
  min-height:30px;
  overflow:hidden;
  color:var(--ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  font-size:11px;
  font-weight:900;
  line-height:1.35;
}
.card2-book-badge{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:950;
  white-space:nowrap;
}
.badge-blue{background:#e8f0fe;color:#1a56db;}
.badge-green{background:#def7ec;color:#057a55;}
.badge-orange{background:#fff0e8;color:#e05a00;}
.badge-yellow{background:#fff9b0;color:#7b6600;}
.card2-books-empty{
  display:grid;
  place-items:center;
  gap:10px;
  padding:20px 0 8px;
  color:var(--sub);
  font-size:13px;
  font-weight:850;
  text-align:center;
}
.radar-chart-wrap{
  position:relative;
  min-width:0;
}
.radar-svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}
.radar-label{
  fill:var(--sub);
  font-size:10px;
  font-weight:850;
}
.radar-empty-notice{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.72);
  color:var(--muted);
  font-size:13px;
  font-weight:850;
}
.top-categories-wrap{
  display:grid;
  gap:9px;
}
.top-categories-title{
  color:var(--ink);
  font-size:13px;
  font-weight:950;
}
.top-categories-list{
  display:grid;
  gap:7px;
}
.top-category-item{
  display:grid;
  grid-template-columns:22px minmax(72px,1fr) minmax(72px,1.4fr) 38px;
  align-items:center;
  gap:8px;
}
.top-category-rank{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--paper-2);
  color:var(--millie-deep);
  font-size:11px;
  font-weight:950;
}
.top-category-name{
  overflow:hidden;
  color:var(--ink);
  font-size:12px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.top-category-bar{
  display:block;
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:var(--line);
}
.top-category-bar i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--violet),#c7bcff);
}
.top-category-item strong{
  color:var(--sub);
  font-size:12px;
  font-weight:950;
  text-align:right;
}

@media (max-width:768px){
  .dashboard-card-wide{
    grid-column:1 / -1;
  }
  .period-selector{
    gap:8px;
  }
  .period-tab-row{
    min-width:0;
  }
  .period-tab{
    min-height:30px;
    padding:6px 11px;
    font-size:11px;
  }
  .period-filter-row{
    flex:1;
    min-height:auto;
  }
  .period-filter-trigger{
    width:auto;
    max-width:112px;
    grid-template-columns:minmax(0,1fr) 14px;
    gap:4px;
    min-height:30px;
    padding:6px 9px 6px 10px;
    border-radius:999px;
    box-shadow:none;
  }
  .period-filter-label,
  .period-filter-full,
  .period-filter-meta{
    display:none;
  }
  .period-filter-short{
    display:inline;
  }
  .period-filter-trigger strong{
    font-size:11px;
    text-align:right;
  }
  .dashboard-filter-ov{
    align-items:flex-end;
    padding:0;
  }
  .dashboard-filter-panel{
    max-width:none;
    max-height:76vh;
    border-radius:24px 24px 0 0;
    animation:dashboardFilterSheetUp .24s cubic-bezier(.4,0,.2,1);
  }
  .dashboard-filter-handle{
    display:block;
    width:40px;
    height:4px;
    flex:0 0 4px;
    margin:12px auto 0;
    border-radius:2px;
    background:#e0dbd6;
  }
  .dashboard-filter-head{
    padding:14px 20px 12px;
  }
  .dashboard-filter-option{
    padding:14px 20px;
  }
  .stat-hero{
    display:flex;
  }
  .stat-item-books{
    display:none;
  }
  .stat-row-grid{
    grid-template-columns:repeat(3,1fr);
  }
  .stat-row-grid .stat-row-item{
    border-right:1px solid var(--line);
    border-bottom:none;
  }
  .stat-row-grid .stat-row-item:last-child{
    border-right:none;
  }
  .stat-row-value{
    font-size:22px;
  }
  .stat-row-item{
    padding:12px 4px;
  }
  .stat-row-sub{
    font-size:9px;
  }
  .ebook-flat-val{
    font-size:17px;
  }
  .ebook-section-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
  }
  .ebook-flat-item{
    padding:12px 4px;
    border-right:1px solid var(--line);
  }
  .ebook-flat-avg{
    border-right:none;
  }
  .ebook-book-cta{
    display:none;
  }
  .ebook-latest-book-row{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    padding:10px 12px;
    border-top:1px solid var(--line);
    background:transparent;
    text-align:left;
    transition:background .14s;
  }
  .ebook-latest-book-row:hover{
    background:rgba(31,26,22,.035);
  }
  .ebook-latest-cover{
    flex:0 0 36px;
    width:36px;
    height:50px;
    border-radius:3px;
    overflow:hidden;
  }
  .ebook-latest-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .ebook-latest-info{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
  }
  .ebook-latest-label{
    font-size:10px;
    color:var(--sub);
    font-weight:700;
  }
  .ebook-latest-title{
    font-size:13px;
    font-weight:800;
    color:var(--ink);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .ebook-latest-link{
    flex:0 0 auto;
    font-size:11px;
    font-weight:800;
    color:var(--violet);
  }
  .ebook-forum-row{
    min-height:40px;
    padding:9px 10px;
  }
  .ebook-forum-title,
  .ebook-forum-meta{
    font-size:10.5px;
  }
  .stacked-bar-cols{
    min-height:92px;
  }
  .stacked-bar-col{
    grid-template-rows:auto 66px auto;
  }
  .stacked-bar-track{
    height:66px;
  }
  .card2-book-card{
    flex-basis:84px;
  }
  .card2-book-cover{
    width:84px;
  }
  .radar-label{
    font-size:9px;
  }
  .top-category-item{
    grid-template-columns:20px minmax(62px,1fr) minmax(58px,1fr) 34px;
    gap:6px;
  }
}


/* ── Dashboard refinement: Apple/Toss activity + FM spider ── */
.stat-row-value{
  font-size:21px;
  font-weight:800;
  letter-spacing:0;
}
.stat-row-unit{
  font-size:11px;
}
.stat-row-label,
.ebook-flat-label{
  font-size:10.5px;
}
.stat-hero-num{
  font-size:32px;
  letter-spacing:0;
}
.ebook-flat-val{
  font-size:18px;
  font-weight:800;
  letter-spacing:0;
}
@media (min-width:769px){
  .stat-unified{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    align-items:stretch;
  }
  .stat-hero{
    grid-column:1;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:18px 14px 16px;
    border-right:1px solid var(--line);
    border-bottom:none;
    border-radius:0;
  }
  .stat-hero-label,
  .stat-hero-sub{
    width:100%;
  }
  .stat-hero-num{
    font-size:34px;
  }
  .stat-item-books{
    display:none;
  }
  .stat-row-grid{
    grid-column:2 / -1;
    grid-template-columns:repeat(3,1fr);
    min-height:100%;
  }
  .ebook-section{
    display:block;
    padding:0;
  }
  .ebook-section-head{
    display:flex;
    align-items:center;
    margin:0;
    padding:12px 18px 0;
    border-right:none;
  }
  .ebook-section-stats{
    grid-template-columns:repeat(4,1fr);
    min-height:72px;
  }
  .ebook-flat-avg{
    border-right:1px solid var(--line);
  }
  .ebook-latest-book-row{
    display:none;
  }
}
.card1-chart-wrap{
  padding:12px;
  border-radius:18px;
  background:linear-gradient(180deg,#f8f9fc 0%,#ffffff 100%);
  border:1px solid rgba(31,26,22,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.line-chart-wrap{
  position:relative;
  min-width:0;
  padding:10px 10px 8px;
  border-radius:16px;
  background:
    radial-gradient(circle at 18% 8%,rgba(79,124,255,.12),transparent 32%),
    linear-gradient(180deg,#ffffff 0%,#f8f9fc 100%);
  border:1px solid rgba(31,26,22,.07);
  box-shadow:0 12px 26px rgba(31,26,22,.06);
}
.line-chart-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:20px;
  margin-bottom:4px;
}
.line-chart-topline span{
  color:var(--ink);
  font-size:12px;
  font-weight:850;
}
.line-chart-info{
  min-height:auto;
  margin:0;
  color:#536175;
  font-size:11px;
  font-weight:750;
  line-height:1.25;
  text-align:right;
}
.line-chart-svg{
  display:block;
  width:100%;
  height:auto;
}
.line-chart-grid{
  stroke:rgba(31,26,22,.07);
  stroke-width:1;
  stroke-dasharray:0;
}
.chart-axis-label{
  fill:#9aa3ad;
  font-size:8.5px;
  font-weight:750;
}
.chart-hit{
  fill:transparent;
  cursor:pointer;
}
.chart-dot{
  fill:#fff;
  stroke:#5c72ff;
  stroke-width:2.2;
  filter:drop-shadow(0 2px 5px rgba(79,124,255,.22));
  transition:r .14s ease, stroke-width .14s ease;
}
.chart-point:hover .chart-dot,
.chart-point-active .chart-dot{
  r:4.4;
  stroke-width:2.6;
}
.line-chart-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:4px;
  color:#7b8594;
  font-size:10.5px;
  font-weight:750;
}
.line-chart-summary span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.line-chart-summary span i{
  display:block;
  width:18px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,#4f7cff,#7c5cff);
}
.line-chart-summary em{
  color:#9aa3ad;
  font-style:normal;
}
.radar-chart-wrap{
  padding:8px;
  border-radius:18px;
  background:linear-gradient(180deg,#172134 0%,#101827 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 24px rgba(16,24,39,.14);
}
.fm-radar-svg{
  display:block;
  width:100%;
  height:auto;
}
.radar-panel-bg{
  fill:#121b2b;
}
.radar-grid{
  fill:none;
  stroke:rgba(142,161,190,.28);
  stroke-width:1;
}
.radar-axis{
  stroke:rgba(142,161,190,.2);
  stroke-width:1;
}
.radar-avg{
  fill:none;
  stroke:rgba(190,202,220,.52);
  stroke-width:1.3;
  stroke-dasharray:4 4;
}
.radar-user{
  fill:rgba(37,211,163,.28);
  stroke:#37e2b1;
  stroke-width:2.2;
  filter:drop-shadow(0 0 8px rgba(55,226,177,.18));
}
.radar-node{
  fill:#ecfff8;
  stroke:#37e2b1;
  stroke-width:1.4;
}
.radar-label{
  fill:#d8e2f0;
  font-size:8.8px;
  font-weight:760;
  letter-spacing:0;
}
.top-categories-title{
  font-size:12px;
  font-weight:850;
}
.top-category-name,
.top-category-item strong{
  font-size:11px;
}
.top-category-rank{
  font-size:10px;
}
@media (max-width:768px){
  .stat-row-value{
    font-size:19px;
  }
  .stat-hero-num{
    font-size:28px;
  }
  .line-chart-topline{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }
  .line-chart-info{
    text-align:left;
  }
  .radar-label{
    font-size:8.2px;
  }
}


/* ── Card1 grouped bars + total curve ── */
.activity-combo-chart{
  background:linear-gradient(180deg,#ffffff 0%,#f8f9fc 100%);
}
.activity-bars-svg{
  overflow:visible;
}
.activity-bar{
  transform-origin:center bottom;
}
.activity-bar-ebook{
  fill:url(#activityEbookBarGradient);
  filter:drop-shadow(0 3px 7px rgba(63,124,255,.16));
}
.activity-bar-paper{
  fill:url(#activityPaperBarGradient);
  filter:drop-shadow(0 3px 7px rgba(17,167,124,.14));
}
.activity-month-group.active .activity-bar{
  opacity:1;
}
.activity-month-group:not(.active) .activity-bar{
  opacity:1;
}
.activity-bar-label{
  fill:#fff;
  font-size:7.2px;
  font-weight:850;
  letter-spacing:0;
  pointer-events:none;
  paint-order:stroke;
  stroke:rgba(31,38,50,.18);
  stroke-width:.45px;
}
.activity-total-line{
  fill:none;
  stroke:url(#activityLineGradient);
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 3px 8px rgba(32,38,50,.12));
}
.activity-total-dot{
  fill:#ffffff;
  stroke:#232936;
  stroke-width:1.8;
  filter:drop-shadow(0 2px 5px rgba(32,38,50,.16));
}
.activity-total-dot.active{
  fill:#4f5fff;
  stroke:#ffffff;
  stroke-width:1.6;
}
.activity-total-label{
  fill:#242b36;
  font-size:8.4px;
  font-weight:850;
  letter-spacing:0;
  pointer-events:none;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:3px;
  stroke-linejoin:round;
}
.activity-total-label.active{
  fill:#4f5fff;
}
.activity-chart-legend{
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-top:2px;
}
.activity-chart-legend span{
  flex:0 0 auto;
  color:#667386;
}
.activity-chart-legend span i{
  flex:0 0 auto;
}
.activity-chart-legend .legend-bar{
  width:7px;
  height:10px;
  border-radius:2px;
}
.activity-chart-legend .legend-ebook{
  background:linear-gradient(180deg,#74a5ff,#3f7cff);
}
.activity-chart-legend .legend-paper{
  background:linear-gradient(180deg,#34d3a3,#11a77c);
}
.activity-chart-legend .legend-line{
  width:18px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#202632,#4f5fff);
}
@media (min-width:769px){
  #dashboard-card1 .card1-chart-wrap{
    display:flex;
    justify-content:center;
    padding:6px 0 10px;
  }
  #dashboard-card1 .line-chart-wrap{
    width:100%;
    padding:8px 12px 8px;
    border-radius:14px;
    box-shadow:0 8px 18px rgba(31,26,22,.045);
  }
  #dashboard-card1 .line-chart-topline{
    min-height:18px;
    margin-bottom:2px;
  }
  #dashboard-card1 .line-chart-topline span{
    font-size:11px;
  }
  #dashboard-card1 .line-chart-info{
    font-size:10px;
    line-height:1.2;
  }
  #dashboard-card1 .line-chart-svg{
    width:100%;
    height:auto;
    min-height:236px;
  }
  #dashboard-card1 .chart-axis-label{
    font-size:7.8px;
  }
  #dashboard-card1 .line-chart-summary{
    font-size:10px;
  }
}
@media (max-width:768px){
  .activity-chart-legend{
    gap:8px 10px;
  }
}

/* ===== 내 서재 독후감 탭 필터 ===== */
.essay-filter-row {
  display: flex;
  gap: 6px;
  margin: 12px 0 4px;
}
.essay-filter-chip {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid var(--border, #ebebeb);
  background: #fff;
  color: var(--sub, #888);
  cursor: pointer;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.essay-filter-chip.active {
  background: var(--millie-deep, #4f2dde);
  color: #fff;
  border-color: var(--millie-deep, #4f2dde);
}

/* ===== 내 서재 독후감 탭 ===== */
.essay-list-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border, #ebebeb);
}
.essay-list-item:last-child {
  border-bottom: none;
}
.essay-list-cover {
  flex-shrink: 0;
  width: 48px;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: #f8f4e9;
  box-shadow: 0 4px 10px rgba(31,26,22,.12);
}
.essay-list-cover > * {
  width: 100%;
  height: 100%;
}
.essay-list-body {
  flex: 1;
  min-width: 0;
}
.essay-list-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.essay-list-round {
  font-size: 12px;
  color: var(--sub, #888);
}
.essay-list-date {
  font-size: 12px;
  color: var(--sub, #888);
  margin-left: auto;
}
.essay-list-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #1a1a1a);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.essay-list-preview {
  font-size: 12px;
  color: var(--sub, #888);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}