/* Compact catalogue layout for the adult Korean-comics site. */
:root{
  --paper:#ffffff;--paper-deep:#f5f5f6;--ink:#202026;--green:#b64627;
  --green-hover:#94351c;--sage:#f2f2f4;--muted:#666672;--line:#e0e0e5;
  --white:#ffffff;--gold:#b66b20;--danger:#b23434;--radius:7px;--serif:var(--sans);
}
body{background:#ededf0;font-family:var(--sans);font-size:15px}
body[data-page=reader]{background:#ededf0}
.app-shell{max-width:980px;border-radius:0;box-shadow:none;--page-shell-width:980px}
.reader-shell{max-width:960px}
.bottom-nav{max-width:980px}
.brand-header{padding:18px 24px;align-items:center;border-bottom:1px solid var(--line);margin-bottom:18px}
.brand{font-size:28px;letter-spacing:0;font-weight:800;display:inline-flex;align-items:center;gap:9px}
.brand-identity{display:flex;align-items:center;min-width:0;gap:10px}
.brand-identity .brand{flex-shrink:0}
.brand-subtitle{min-width:0;margin:0;padding-left:10px;border-left:1px solid var(--line);font-family:var(--sans);font-size:12px;font-weight:400;line-height:1.4;letter-spacing:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-actions{padding-top:0;align-self:center;gap:6px}
.page-header{border-bottom:1px solid var(--line);margin-bottom:20px;min-height:68px;padding-top:10px;padding-bottom:10px}
.page-header :is(h1,.page-title){font-size:20px;letter-spacing:0;font-weight:650}
.reader-shell .page-header{margin-bottom:0;border-bottom:0}
.button{border-radius:6px;font-size:15px;letter-spacing:0;min-height:44px}
.theme-toggle{border-radius:7px}
.search-field,.home-search,.filter-panel,.tag-cloud,.home-ranking,.rank-card,.input-wrap,.menu-row,.chapter-list,.category-page-links a,.category-page-links .page-disabled{border-radius:7px}
.category-pager-compact{flex-wrap:nowrap;gap:10px;padding:18px 0}
.category-pager-compact a,.category-pager-compact .page-disabled{flex-shrink:0;min-height:44px;padding:7px 10px}
.category-pager-compact .page-position{white-space:nowrap;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.category-pager-compact .page-position strong{color:var(--ink);font-weight:600}
.home-search{margin-bottom:14px}
.home-focus{position:relative;height:clamp(200px,32vw,300px);margin-bottom:16px;border-radius:7px;overflow:hidden;background:#26262d;color:#fff}
.focus-slides,.focus-slide{width:100%;height:100%}
.focus-slide{position:relative;display:block;overflow:hidden;touch-action:pan-y}
.focus-slide .focus-art{display:block;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.focus-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#111116f2 0%,#111116a6 25%,#11111600 76%);pointer-events:none}
.focus-copy{position:absolute;z-index:1;left:22px;right:22px;bottom:54px;pointer-events:none}
.focus-copy h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;max-height:2.6em;overflow:hidden;overflow-wrap:anywhere;line-height:1.3;font-size:27px;letter-spacing:0;margin:0 0 5px;color:#fff;text-shadow:0 1px 4px #0006}
.focus-copy p{font-size:12px;line-height:1.5;color:#e9e9ee;margin:0}
.focus-controls{position:absolute;z-index:2;bottom:9px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.focus-count{font-family:var(--sans);font-size:11px;min-width:32px;color:#e9e9ee;font-variant-numeric:tabular-nums}
.focus-navigation,.focus-dots{display:flex;align-items:center;justify-content:center}
.focus-controls button{display:flex;align-items:center;justify-content:center;color:#fff;width:32px;height:32px;padding:0;border-radius:4px}
.focus-controls button:hover{background:#ffffff26}
.focus-controls .icon{width:16px;height:16px}
.focus-dots button{width:24px}
.focus-dots span{width:6px;height:6px;border-radius:8px;background:#ffffff66;transition:width .2s,background .2s}
.focus-dots [aria-pressed=true] span{width:16px;background:#fff}
.focus-slide:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.focus-controls button:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.catalog-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:23px}
.catalog-nav a{display:flex;min-width:0;min-height:76px;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 2px;border:1px solid var(--line);border-radius:7px;background:var(--sage);font-size:13px;font-weight:500;line-height:1.4;text-align:center;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.catalog-nav-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--green)}
.catalog-nav-icon .icon{width:24px;height:24px;stroke-width:1.8}
.catalog-nav a:hover,.catalog-nav a:focus-visible{color:var(--green);border-color:var(--green);background:var(--paper)}
.catalog-nav a:active{background:var(--paper-deep)}
@media(prefers-reduced-motion:reduce){.focus-dots span,.catalog-nav a{transition:none}}
.section-heading h2{font-size:20px;letter-spacing:0}
.home-section{margin-bottom:28px}
.book-grid{gap:14px}
.book-card .art{aspect-ratio:3/4;border-radius:5px}
.book-card h3{font-size:16px;letter-spacing:0;margin-top:8px}
.book-card p{font-size:12px;letter-spacing:0}
.home-ranking{padding:18px;background:var(--sage)}
.home-ranking .home-rank-number{font-family:var(--sans);font-style:normal;font-size:23px;font-weight:750;color:var(--muted)}
.home-ranking li:first-child .home-rank-number{color:var(--green)}
.home-ranking h3{font-size:17px}
.home-ranking li p{font-size:12px}
.home-ranking .home-rank-cover{width:48px;height:64px;border-radius:4px}
.home-ranking li>a{padding:10px 0}
.home-tags{border-top:1px solid var(--line);padding-top:16px}
.home-tags .section-heading{margin-bottom:10px}
.home-tags h2 a:hover{color:var(--green)}
.home-tag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:5px}
.home-tag-grid a{display:block;min-width:0;min-height:28px;line-height:20px;padding:3px 5px;border:1px solid var(--line);border-radius:3px;background:var(--paper);font-size:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-tag-grid a:hover{border-color:var(--green);color:var(--green);background:var(--sage)}
.intro-heading{padding-top:0}
.intro-heading h1{font-size:26px;letter-spacing:0}
.intro-heading p{font-size:14px}
.comic-info h1{font-size:30px;letter-spacing:0}
.comic-summary{font-size:15px;line-height:1.8}
.action-pair .button{font-size:16px;letter-spacing:0;min-height:46px}
.auth-content{padding-top:16px}
.auth-heading h1{font-size:30px;letter-spacing:0}
.auth-heading p{font-size:14px}
.auth-submit{font-size:17px;letter-spacing:0}
.form-field>label{font-size:15px;letter-spacing:0}
.profile{margin-top:0;padding:10px 20px 26px}
.profile h1{font-size:25px}
.profile>p{font-size:14px}
.account-avatar{width:68px;height:68px;border:1px solid var(--line);border-radius:50%;margin:0 auto 15px;display:flex;align-items:center;justify-content:center;background:var(--sage)}
.account-avatar .icon{width:32px;height:32px;color:var(--muted)}
.menu-row strong{font-size:17px}.menu-row small{font-size:12px}.menu-icon{border-radius:6px}
.rank-info h2,.result-title h2{font-size:23px}
.rank-number{font-family:var(--sans)}
.site-footer{letter-spacing:0;font-size:11px;color:var(--muted)}
.scroll-top,.scroll-top.comic-scroll-top{right:max(16px,calc((100vw - 948px)/2))}
:root:not([data-site-theme=dark]) :is(.bottom-nav,.scroll-top:not(.comic-scroll-top)){background:#fffffff5}
:root:not([data-site-theme=dark]) :is(.filter-panel,.tag-cloud,.library-banner,.tags .status,.home-ranking){background:var(--sage)}
:root:not([data-site-theme=dark]) :is(.comic-summary,.author,.result-description,.rank-info>p,.rank-info>small,.brand small,.auth-heading p,.demo-note,.form-notice,.prose>p,.reader-subtitle){color:var(--muted)}
:root:not([data-site-theme=dark]) :is(.search-field>.icon,.input-wrap .icon-button,.bottom-nav a){color:var(--muted)}
:root:not([data-site-theme=dark]) .bottom-nav a[aria-current=page]{color:var(--green)}
:root:not([data-site-theme=dark]) .bottom-nav a[aria-current=page] .icon{fill:#b6462717}
:root:not([data-site-theme=dark]) :is(.input-wrap,.library-card,.invite-card){border-color:var(--line);background:var(--paper)}
:root:not([data-site-theme=dark]) :is(.tags>a:hover,.button.secondary:hover,.icon-button:hover){background:#e6e6eb}
:root:not([data-site-theme=dark]) :is(.filter-row,.chapter-row){border-color:var(--line)}
:root:not([data-site-theme=dark]) .chapter-row:hover{color:var(--green)}
:root:not([data-site-theme=dark]) .switch-row input:checked{background:var(--green)}
/* Keep full titles in the document; limit only their visual presentation. */
.book-card h3,.home-ranking h3,.rank-info h2,.result-title h2,.library-info h2,.continue-card strong,.site-map li>a,.modal-head h2{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  min-width:0;max-width:100%;max-height:2.9em;line-height:1.45;
  overflow:hidden;overflow-wrap:anywhere;word-break:normal;white-space:normal;text-overflow:ellipsis;
}
.book-card h3{height:2.9em}
.result-title h2{flex:1}
.rank-info,.result-info,.comic-info{min-width:0}
.rank-info>a,.library-info>a{display:block;min-width:0}
.comic-intro>.breadcrumb{grid-column:1/-1;min-width:0;padding:0}
.comic-info h1{overflow-wrap:anywhere;word-break:normal;white-space:normal;line-height:1.4;margin:0 0 8px}
.comic-intro{row-gap:14px}
.comic-info .author{overflow-wrap:anywhere}
.home-ranking li p,.continue-card small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.hot-search .tags>a,#search-history>a{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-map li{align-items:flex-start;flex-wrap:wrap}
.site-map li>a{flex:1 1 200px}
.site-map li>span{max-width:100%;overflow-wrap:anywhere}
.breadcrumb ol{flex-wrap:nowrap;min-width:0}
.breadcrumb li{flex-shrink:0}
.breadcrumb li:last-child{display:flex;align-items:center;min-width:0;flex-shrink:1}
.breadcrumb li:last-child:before{flex-shrink:0}
.breadcrumb li:last-child :is(a,span){display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.reader-subtitle{padding-left:24px;padding-right:24px}
.reader-chapter-title{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chapter-row>span:first-child{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chapter-row>:last-child{flex-shrink:0}
.modal[open]{display:flex;flex-direction:column}
.modal-head{flex-shrink:0;gap:12px}
.modal-head h2{flex:1}
.modal-content{min-height:0;max-height:none}
@media(min-width:900px){.home-main .catalog-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.brand-header{padding-left:30px;padding-right:30px}}
@media(max-width:540px){
  body{font-size:14px}.brand-header{padding:13px 17px;margin-bottom:14px}.brand{font-size:25px;gap:7px}.header-actions{gap:2px}
  .brand-identity{gap:8px}.brand-subtitle{padding-left:8px}
  .home-focus{margin-bottom:12px}.focus-copy{left:15px;right:15px;bottom:52px}.focus-copy h2{font-size:22px}.focus-copy p{font-size:11px}.focus-controls{left:11px;right:11px}
  .catalog-nav{gap:5px;margin-bottom:20px}.catalog-nav a{font-size:11px;min-height:65px;padding:8px 1px;gap:4px;border-radius:5px}.catalog-nav-icon{width:24px;height:24px}.catalog-nav-icon .icon{width:21px;height:21px}
  .section-heading h2{font-size:18px}.section-heading{margin-bottom:12px}.home-section{margin-bottom:23px}.book-grid{gap:10px}.book-card h3{font-size:14px}.book-card p{font-size:10px}
  .four-grid .book-card h3{font-size:12px}.four-grid .book-card p{font-size:9px}.four-grid .art{aspect-ratio:3/4}
  .home-ranking{padding:14px}.home-ranking h3{font-size:15px}.home-ranking li p{font-size:10px}.home-ranking .home-rank-number{font-size:21px}
  .page-header{min-height:62px;margin-bottom:18px}.page-header :is(h1,.page-title){font-size:19px}.intro-heading h1{font-size:24px}.intro-heading p{font-size:12px}.comic-info h1{font-size:24px}.comic-summary{font-size:12px}
  .rank-info h2,.result-title h2{font-size:19px}.auth-heading h1{font-size:28px}.auth-content{padding-top:10px}.menu-row strong{font-size:16px}
}
@media(max-width:360px){.brand-subtitle{font-size:11px}.brand-identity{gap:6px}.brand-subtitle{padding-left:6px}}