*,:before,:after{box-sizing:border-box}html{font-size:16px}body{color:#333;background:#f5f5f5;margin:0;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Hiragino Kaku Gothic ProN,Hiragino Sans,Yu Gothic,Meiryo,sans-serif}button,input{font:inherit}.app{min-height:100vh}.header{background:#fff;border-bottom:1px solid #ddd;padding:32px 20px}.header__inner{max-width:1200px;margin:0 auto}.header__title{margin:0;font-size:28px;font-weight:700}.header__description{color:#777;margin:8px 0 0;font-size:14px}.main{max-width:1200px;margin:0 auto;padding:40px 20px 80px}.section-heading{margin-bottom:20px}.section-heading__title{margin:0;font-size:22px;font-weight:700}.section-heading__text{color:#777;margin:8px 0 0;font-size:14px}.upload-section{margin-bottom:60px}.uploader{background:#fff;border:1px solid #ddd;border-radius:8px;padding:24px}.uploader__top{gap:12px;margin-bottom:20px;display:flex}.upload-button,.clear-button{cursor:pointer;border-radius:6px;justify-content:center;align-items:center;min-height:44px;padding:0 20px;transition:background-color .2s,opacity .2s;display:inline-flex}.upload-button{color:#fff;background:#333}.upload-button:hover{background:#555}.upload-button input{display:none}.clear-button{color:#333;background:#fff;border:1px solid #ccc}.clear-button:hover{background:#f5f5f5}.page-list{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.page-list__item{border:1px solid #e5e5e5;border-radius:6px;align-items:center;gap:14px;min-width:0;padding:12px;display:flex}.page-list__number{color:#fff;background:#333;border-radius:50%;flex:0 0 36px;place-items:center;width:36px;height:36px;font-size:14px;font-weight:700;display:grid}.page-list__info{flex:1;min-width:0}.page-list__title{margin:0;font-size:14px;font-weight:700}.page-list__filename,.page-list__empty{color:#777;text-overflow:ellipsis;white-space:nowrap;margin:4px 0 0;font-size:12px;overflow:hidden}.page-list__button{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:5px;flex:none;justify-content:center;align-items:center;min-width:60px;min-height:34px;padding:0 12px;font-size:12px;display:inline-flex}.page-list__button:hover{background:#f5f5f5}.page-list__button input{display:none}.preview-section{overflow-x:auto}.preview{background:#fff;border:1px solid #aaa;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(4,1fr);width:364mm;height:257mm;margin:0 auto;display:grid;box-shadow:0 10px 30px #0000001f}.page{border:.2mm solid #ddd;min-width:0;min-height:0;position:relative;overflow:hidden}.page__content{transform-origin:50%;flex-direction:column;width:100%;height:100%;padding:10mm;display:flex}.page--rotated .page__content{transform:rotate(180deg)}.page__image-area{justify-content:center;align-items:center;width:100%;height:calc(100% - 40mm);display:flex;overflow:hidden}.page__img{-o-object-fit:contain;object-fit:contain;width:100%;height:100%;display:block}.page__caption{color:#aaa;justify-content:center;align-items:center;width:100%;height:40mm;font-size:10px;display:flex}.page__placeholder{color:#aaa;border:1px dashed #bbb;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.page__placeholder span{font-size:30px;font-weight:700}.page__placeholder small{margin-top:5px;font-size:12px}.page--cover,.page--cover .page__content{padding:0}.page--cover .page__img{-o-object-fit:contain;object-fit:contain;width:100%;height:100%}.action-section{justify-content:center;margin-top:40px;display:flex}.pdf-button{color:#fff;cursor:pointer;background:#333;border:0;border-radius:6px;min-width:240px;min-height:52px;padding:0 30px;font-size:16px;font-weight:700;transition:background-color .2s,opacity .2s}.pdf-button:hover:not(:disabled){background:#555}.pdf-button:disabled{opacity:.5;cursor:wait}@media (width<=767px){.header{padding:24px 16px}.header__title{font-size:22px}.main{padding:30px 16px 60px}.uploader{padding:16px}.uploader__top{flex-direction:column}.page-list{grid-template-columns:1fr}.preview{margin-left:0}}