@font-face{font-family:Pretendard;src:url('assets/pretendard-regular.woff2');font-weight:400;font-display:swap}@font-face{font-family:Pretendard;src:url('assets/pretendard-bold.woff2');font-weight:700;font-display:swap}*{box-sizing:border-box}body{margin:0;color:#22231f;background:#f8f8f4;font-family:Pretendard,system-ui,sans-serif;font-synthesis:none}a{color:inherit;text-underline-offset:4px}button,input{font:inherit}button{cursor:pointer}header{padding:22px 4%;display:flex;gap:25px;align-items:center;border-bottom:1px solid #deded8;font-size:12px}header .brand{font-size:16px;font-weight:700;letter-spacing:.8px;text-decoration:none}header>a:last-child{margin-left:auto}header>span{color:#74776d}main{max-width:1800px;margin:auto;padding:40px 4%}.heading h1{font-size:40px;line-height:1.25;margin:0 0 14px;letter-spacing:-1.2px}.heading h1 span{color:#73864a}.heading>p{font-size:14px;color:#62675b;line-height:1.7}#stats{display:flex;gap:8px;margin:20px 0 32px}#stats span{padding:8px 12px;border-radius:20px;background:#e9eddf;color:#455231;font-size:12px}.controls{margin-bottom:20px}.search{display:block;font-size:12px;color:#5d6453}.search input{display:block;width:100%;background:#fff;border:1px solid #deded5;border-radius:5px;padding:15px;margin-top:8px;color:#20251c;outline-color:#526737}.categories{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}.categories button{background:transparent;color:#525c45;border:1px solid #d3d9c8;border-radius:20px;padding:9px 14px;font-size:12px}.categories button.active{background:#293722;border-color:#293722;color:#fff}.result{display:flex;justify-content:space-between;margin-top:24px;color:#7c8372;font-size:12px}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 22px}.ref{min-width:0}.pair{display:grid;grid-template-columns:1fr 1fr;gap:4px;position:relative;background:#e9e9e2;border:0;padding:0;width:100%;border-radius:4px;overflow:hidden}.pair img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;background:#eeeee8}.pair .count{position:absolute;bottom:10px;right:10px;background:#fff;padding:7px 9px;border-radius:4px;box-shadow:0 2px 8px #0001;font-size:11px}.ref-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 0 7px}.ref-head h2{font-size:15px;margin:0;word-break:break-word}.ref-head>span{font-size:11px;color:#6b765e;white-space:nowrap}.ref-title{font-size:12px;color:#656d5b;line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}.ref-links{display:flex;gap:15px;margin-top:9px;font-size:11px}.ref-note{font-size:11px;color:#7b836f;line-height:1.5;margin-top:9px}footer{margin-top:60px;padding-top:24px;border-top:1px solid #d9dece;font-size:12px;color:#747d68;line-height:1.8;max-width:1000px}dialog{max-width:1400px;width:96vw;height:94vh;max-height:94vh;background:#f8f8f4;border:0;border-radius:12px;padding:0;color:#24281f;box-shadow:0 15px 80px #1b261d33}dialog::backdrop{background:#ffffffd6}.detail-top{position:sticky;top:0;background:#f8f8f4f2;backdrop-filter:blur(12px);padding:20px 28px;display:flex;justify-content:space-between;gap:15px;z-index:2;border-bottom:1px solid #e3e5dc}.detail-top h2{font-size:22px;margin:0 0 8px}#detail-meta{font-size:12px;color:#778567}.detail-top button{align-self:start;border:0;background:#e8ecdF;padding:10px 16px;border-radius:5px}.detail-about{padding:8px 28px 20px;font-size:13px;color:#5b6550;line-height:1.7}#detail-links{display:flex;gap:20px}#detail-note{margin:10px 0 0;font-size:12px}.pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px;padding:0 28px 35px;align-items:start}.pages figure{margin:0;min-width:0}.pages img{display:block;width:100%;height:auto;border-radius:2px;cursor:zoom-in}.pages figcaption{font-size:11px;color:#778568;margin-top:8px}.pages.expanded{grid-template-columns:1fr;max-width:850px;margin:auto}.pages.expanded img{cursor:zoom-out}button:focus-visible,a:focus-visible{outline:3px solid #879a60;outline-offset:3px}@media(max-width:1000px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.pages{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){header{padding:18px 5%;gap:10px}header>span{display:none}header .brand{font-size:13px}main{padding:28px 5%}.heading h1{font-size:29px}.heading>p{font-size:12px}#stats{flex-wrap:wrap;gap:5px}.gallery{grid-template-columns:1fr;gap:30px}.ref-head h2{font-size:16px}.pair img{aspect-ratio:4/5}.result{font-size:11px}.pages{grid-template-columns:1fr;padding:0 16px 30px}.detail-top{padding:16px}.detail-top h2{font-size:18px}.detail-about{padding:5px 16px 20px}dialog{height:96vh;max-height:96vh;width:96vw}.categories{gap:6px}.categories button{padding:8px 10px}}
.detail-top>div{min-width:0}.detail-top h2{overflow-wrap:anywhere}.detail-top button{flex-shrink:0}

.pick{display:flex;align-items:center;gap:9px;min-height:44px;font-size:13px;cursor:pointer;margin:0 0 7px}.pick input,.selection-tools input{width:20px;height:20px;accent-color:#405632;flex-shrink:0}.selection-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:20px 0}.selection-tools label{display:flex;align-items:center;gap:9px;min-height:44px;font-size:13px}.selection-tools button{border:0;background:#e9eddf;border-radius:5px;padding:12px 16px;font-size:12px}.selection-bar{position:fixed;z-index:5;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:20px;background:#fffffff5;backdrop-filter:blur(16px);box-shadow:0 -4px 25px #26311912;padding:18px 4%}.selection-bar strong{font-size:17px}.selection-bar p{font-size:12px;line-height:1.45;margin:6px 0 0;color:#5b6550}.selection-bar p.error{color:#9c3030}.selection-bar button{flex-shrink:0;border:0;border-radius:6px;background:#293722;color:white;padding:15px 25px;min-height:48px;font-weight:700}button:disabled{cursor:default;opacity:.5}main{padding-bottom:155px}.detail-pick{margin-top:12px}@media(max-width:600px){.selection-bar{gap:12px;padding:14px 5%;padding-bottom:max(14px,env(safe-area-inset-bottom))}.selection-bar p{max-width:230px;font-size:11px}.selection-bar button{padding:13px 16px;font-size:13px}.selection-bar strong{font-size:15px}.selection-tools{gap:8px}}

header{flex-wrap:wrap}.ref-head h2 small{display:block;margin-top:5px;font-size:11px;font-weight:400;color:#747d68}.comic-references .ref-note,.comic-references #detail-note{white-space:pre-line;line-height:1.75}.comic-references .ref-note{color:#5c6552;font-size:12px}