*,:after,:before{box-sizing:border-box;margin:0;padding:0}body{font-family:Hiragino Sans,Noto Sans JP,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}.site-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #ccc}.header__left,.header__right{flex:1 1}.header__left{display:flex;justify-content:flex-start}.header__center{flex:2 1;text-align:center;font-size:.9rem;color:#666}.header__expiry-label{margin-right:.25em}.header__right{display:flex;justify-content:flex-end}.site-footer{border-top:1px solid #ccc;padding:24px 16px;text-align:center;color:#666}.footer-links{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.9rem}.footer-links-row{display:flex;justify-content:center;gap:1.5rem}.footer-links a{text-decoration:underline}.footer-links a:hover{text-decoration:none}.container{max-width:1200px;margin:0 auto;padding:0 16px}.container--narrow{max-width:800px;margin:0 auto;padding:0 16px}.page-section{padding:32px 16px}.page-section--large{padding:48px 16px}.dropdown{position:relative}.dropdown__menu{position:absolute;right:0;top:calc(100% + 8px);background:white;border:1px solid #ccc;border-radius:4px;padding:8px;min-width:200px;z-index:100;box-shadow:0 4px 6px rgba(0,0,0,.1)}.dropdown__menu--left{right:auto;left:0}.dropdown__user-info{padding:4px 8px;margin-bottom:8px}.dropdown__user-name{font-weight:500}.dropdown__expiry{font-size:.8rem;color:#666;margin-top:4px}.dropdown__item{display:flex;align-items:center;width:100%;text-align:left;padding:8px;background:none;border:none;cursor:pointer;border-radius:4px}.dropdown__item:hover{background:#f5f5f5}.dropdown__item--tag{justify-content:space-between}.dropdown__tag-list{max-height:300px;overflow-y:auto}.tag-count{font-size:.8rem;color:#666;background-color:#f0f0f0;padding:2px 6px;border-radius:4px}.article-list{display:flex;flex-direction:column;gap:24px;margin-top:24px;max-width:800px;margin-left:auto;margin-right:auto}.article-card{display:block;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;transition:box-shadow .2s;background:#fff}.article-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}.article-card__image-wrapper{position:relative;width:150px;flex-shrink:0}.article-card__content{padding:16px;flex-grow:1}.article-card__content h2{font-size:1.1rem;margin-bottom:8px}.article-card__content p{font-size:.9rem;color:#666}.article-card__tags{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#666;margin-top:12px}.article-card__footer{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background-color:#f8f9fa;border-top:1px solid #e0e0e0}.article-card__badge{font-size:.8rem;font-weight:500;padding:4px 8px;border-radius:4px}.article-card__badge--paid{background-color:#e6f7ff;color:#005f99}.article-card__badge--free{background-color:#f0f0f0;color:#555}.article-card__date{font-size:.8rem;color:#666}.article__header{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #eee}.article__header h1{font-size:1.8rem;line-height:1.3;margin-bottom:16px}.article__meta{display:flex;flex-wrap:wrap;gap:16px;font-size:.9rem;color:#666}.article__tags{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}.article__tag-link{text-decoration:underline;text-decoration-color:#ccc;transition:all .2s}.article__tag-link:hover{color:#000;text-decoration-color:#000}.article__content{margin-top:24px;line-height:1.8;font-size:.95rem}.article__content h2{font-size:1.6rem;margin:48px 0 24px;padding-bottom:8px;border-bottom:1px solid #e2e8f0}.article__content h3{font-size:1.3rem;margin:32px 0 16px}.article__content hr{border:none;border-top:1px solid #e2e8f0;margin:48px 0}.article__content a{color:#2563eb;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}.article__content a:hover{color:#1d4ed8;text-decoration:none}.article__content pre{background-color:#f4f4f4;padding:16px;border-radius:6px;font-size:.9em;overflow-x:auto;margin:1.5em 0}.article__content :not(pre)>code{background-color:#f4f4f4;padding:2px 4px;border-radius:4px;font-size:.9em}.separator{margin:32px 0;border:none;border-top:1px solid #ccc}.comment-list{margin-top:16px}.comment{border:1px solid #ccc;padding:12px;margin-bottom:8px}.comment__header{display:flex;justify-content:space-between;margin-bottom:8px;color:#666}.comment p{overflow-wrap:break-word}.comment-form{margin-top:24px}.comment-form__textarea{width:100%;padding:8px;min-height:80px}.comment-form__submit{margin-top:8px;padding:8px 16px}.paywall{text-align:center;padding:48px;border:1px solid #ccc;max-width:100%;margin:0 auto}.paywall__article-title{font-size:.95rem;font-weight:500;color:#6c757d;margin-bottom:1rem;line-height:1.4;padding:0 1rem}.paywall__icon{font-size:48px}.paywall__price{font-size:32px;font-weight:700}.paywall__pricing{margin:24px 0}.paywall__error{color:red}.payment-result{text-align:center;padding:48px;max-width:400px;margin:0 auto}.payment-result__card{border:1px solid #ccc;padding:24px}.payment-result__icon--success{color:green}.payment-result__icon--cancel{color:#666}.payment-result__actions{margin-top:24px}.payment-result__benefits{text-align:left;margin-top:16px}.admin-page{max-width:800px;margin:0 auto;padding:48px 16px}.admin-page__header{margin-bottom:24px;border-bottom:1px solid #eee;padding-bottom:24px}.admin-notice{display:flex;gap:12px;padding:12px;border:1px solid #ccc;margin-top:16px;background-color:#f8f9fa;border-radius:4px}.admin-notice__title{font-weight:700}.form-card{border:1px solid #ccc;padding:16px}.form-card__header,.form-group{margin-bottom:16px}.form-label{display:block;margin-bottom:4px}.form-textarea{width:100%;padding:8px}.notification{display:flex;justify-content:space-between;padding:12px;margin-bottom:16px;border:1px solid}.notification--success{border-color:green;background:#f0fff0}.notification--error{border-color:red;background:#fff0f0}.generated-result{border:1px solid #ccc;padding:16px;margin-top:24px}.generated-result__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.generated-result__image{margin-bottom:24px}.generated-result__image-title{display:flex;align-items:center;gap:8px;margin-bottom:16px}.generated-result__image-container{position:relative;aspect-ratio:16/9}.markdown-preview{padding:16px;border:1px solid #eee}.btn{padding:8px 12px;border:1px solid #ccc;background:white;white-space:nowrap;color:#333;display:inline-flex}.btn,.btn-icon{cursor:pointer;height:38px;box-sizing:border-box;align-items:center}.btn-icon{background:none;border:none;padding:5px;display:flex;justify-content:center}.btn--primary{padding:12px 24px}.btn--primary,.btn--secondary{width:100%;justify-content:center}.btn--secondary{padding:8px 16px}.btn--with-icon{display:inline-flex;align-items:center;gap:8px}.btn--link{display:inline-block;padding:12px 24px}.loading{text-align:center;padding:48px}.loading-inline{display:flex;align-items:center;justify-content:center;gap:8px}.loading-spin{animation:spin 1s linear infinite}.pagination{margin-top:32px;display:flex;justify-content:center}.pagination__list{display:flex;list-style:none;padding:0;border:1px solid #ccc;border-radius:4px;overflow:hidden}.pagination__item+.pagination__item{border-left:1px solid #ccc}.pagination__link{display:block;padding:8px 12px;color:#333;text-decoration:none;transition:background-color .2s}.pagination__link:hover{background-color:#f5f5f5}.pagination__link.active{background-color:#333;color:white;font-weight:700;cursor:default}.pagination__link.disabled{color:#ccc;cursor:not-allowed}.text-muted{opacity:.5;padding:7px 12px;font-size:.875rem;white-space:nowrap}.loading-spinner{animation:spin 1s linear infinite;color:#666}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.error-text{color:red}.receipt-link{display:flex;align-items:center;justify-content:center;gap:8px}.benefit-list{text-align:left;margin-top:16px}.payment-result__receipt{margin-top:24px}.payment-result__message{margin:24px 0}.form-group__label{display:block;margin-bottom:4px}.form-group__textarea{width:100%;padding:8px}.generated-result__image{position:relative;aspect-ratio:16/9}.generated-result__image-section{margin-bottom:24px}.generated-result__preview{padding:16px;border:1px solid #eee}.btn--full{width:100%}.btn--primary+.btn--secondary{margin-top:8px}@media (max-width:480px){.container--narrow{padding:0 16px}.page-section--large{padding-top:24px;padding-bottom:24px}.article__header h1{font-size:1.4rem}.article__content h2{font-size:1.4rem;margin:32px 0 16px}.article__content h3{font-size:1.2rem;margin:24px 0 16px}}.login-modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000;padding:16px}.login-modal{background:#fff;border-radius:8px;padding:24px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px rgba(0,0,0,.15)}.login-modal__title{font-size:1.25rem;font-weight:700;text-align:center;margin-bottom:16px}.login-modal__terms-box{height:200px;overflow-y:auto;border:1px solid #ccc;padding:1rem;margin-bottom:16px;text-align:left;font-size:.8rem;line-height:1.5;background-color:#f9f9f9}.login-modal__notice{font-size:.85rem;text-align:center;margin-bottom:16px;color:#666}.login-modal__close-btn{display:block;width:100%;margin-top:8px;padding:8px;background:none;border:none;color:#666;cursor:pointer;font-size:.9rem}.login-modal__close-btn:hover{color:#333;text-decoration:underline}@media (max-width:480px){.paywall{padding:24px 12px;margin:0 8px}.login-modal{padding:16px}.login-modal__terms-box{height:150px;padding:.75rem;font-size:.75rem}}