@import"https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+KR:wght@400;500;700&display=swap";:root{--color-primary: #b84828;--color-secondary: #fce8e0;--color-accent: #d94040;--color-bg: #fff8f5;--color-surface: #ffffff;--color-text: #4a4a4a;--color-text-light: #6b6b6b;--color-border: #e8d0c8;--font-family-base: "Quicksand", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--input-height: 2.75rem}.card{background:var(--color-surface);border-radius:var(--radius-md);padding:var(--spacing-md);border:1px solid var(--color-border);cursor:pointer;transition:border-color .15s,background .15s;text-align:center}.card--selected{border-color:var(--color-primary);background:var(--color-secondary)}.input{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:0 var(--spacing-md);font-size:var(--font-size-base);font-family:var(--font-family-base);color:var(--color-text);width:100%;height:var(--input-height);box-sizing:border-box}.input:focus{outline:2px solid var(--color-primary);outline-offset:-1px}.select{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:0 var(--spacing-md);font-size:var(--font-size-base);font-family:var(--font-family-base);color:var(--color-text);background:var(--color-surface);width:100%;height:var(--input-height);box-sizing:border-box}.select:focus{outline:2px solid var(--color-primary);outline-offset:-1px}.label{font-size:var(--font-size-sm);color:var(--color-text-light);margin-bottom:var(--spacing-xs);display:block}.result-card{cursor:default;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-lg) var(--spacing-md)}.result-card__icon{font-size:1.75rem}.result-card__label{font-size:var(--font-size-sm);color:var(--color-text-light)}.result-card__value{font-size:1.375rem;font-weight:700;color:var(--color-primary)}.result-card__subtitle{font-size:var(--font-size-sm);color:var(--color-text-light)}.result-section{margin-top:var(--spacing-xl)}.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);margin-top:var(--spacing-md)}@media (max-width: 639px){.result-grid{grid-template-columns:1fr}}.result-summary{margin-top:var(--spacing-md);padding:var(--spacing-md);background:var(--color-secondary);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text-light);line-height:1.6}.details-toggle{background:none;border:none;color:var(--color-primary);font-size:var(--font-size-sm);cursor:pointer;padding:var(--spacing-md) 0;margin-top:var(--spacing-sm);text-decoration:underline;min-height:2.75rem}.details-section{margin-top:var(--spacing-sm);padding:var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border)}.details-row{display:flex;justify-content:space-between;padding:var(--spacing-xs) 0;font-size:var(--font-size-sm);color:var(--color-text-light)}.form-section--optional{margin-top:var(--spacing-lg);padding-top:var(--spacing-md)}.optional-divider{text-align:center;font-size:var(--font-size-sm);color:var(--color-text-light);margin-bottom:var(--spacing-md);position:relative}.optional-divider:before,.optional-divider:after{content:"";position:absolute;top:50%;width:30%;height:1px;background:var(--color-border)}.optional-divider:before{left:0}.optional-divider:after{right:0}.optional-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}@media (max-width: 639px){.optional-row{grid-template-columns:1fr}}.price-input-wrapper{display:flex;align-items:center;gap:var(--spacing-xs)}.price-prefix,.price-suffix{font-size:var(--font-size-sm);color:var(--color-text-light);white-space:nowrap}.price-input-wrapper .input{width:auto;flex:1;min-width:0}.package-input-wrapper{display:flex;align-items:center;gap:var(--spacing-xs)}.package-suffix{font-size:var(--font-size-sm);color:var(--color-text-light);white-space:nowrap}.package-input-wrapper .input{width:auto;flex:1;min-width:0}.package-back-btn{background:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:0 var(--spacing-sm);font-size:var(--font-size-sm);color:var(--color-text-light);cursor:pointer;line-height:1;height:var(--input-height)}.package-back-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.weight-input-row{display:flex;align-items:center;gap:var(--spacing-sm)}.weight-input-row .input-group{flex:1;margin-bottom:0}.weight-hint{font-size:var(--font-size-sm);color:var(--color-text-light);white-space:nowrap;align-self:center}.comparison-table-section{margin-top:var(--spacing-xl);overflow-x:auto;-webkit-overflow-scrolling:touch}.comparison-table-section h3{font-size:var(--font-size-lg);margin-bottom:var(--spacing-xs)}.comparison-note{font-size:var(--font-size-sm);color:var(--color-text-light);margin-bottom:var(--spacing-md)}.comparison-table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm)}.comparison-table th,.comparison-table td{padding:var(--spacing-sm) var(--spacing-md);text-align:left;border-bottom:1px solid var(--color-border)}.comparison-table th{font-weight:600;color:var(--color-text-light);font-size:var(--font-size-sm)}.comparison-row--current{background:var(--color-secondary);font-weight:600}.comparison-badge{display:inline-block;margin-left:var(--spacing-xs);padding:1px 6px;background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:500}.comparison-tag{display:inline-block;margin-left:var(--spacing-xs);padding:1px 6px;border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:500}.comparison-tag--low{background:#e8f5e9;color:#2e7d32}.comparison-tag--high{background:#fff3e0;color:#e65100}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family-base);font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-bg);line-height:1.6;min-height:100vh}.main-container{max-width:800px;margin:0 auto;padding:var(--spacing-md)}@media (min-width: 640px){.main-container{max-width:640px;padding:var(--spacing-lg)}}@media (min-width: 1024px){.main-container{max-width:800px;padding:var(--spacing-xl)}}.header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) 0;margin-bottom:var(--spacing-lg)}.header__brand{display:flex;align-items:center;gap:var(--spacing-sm);min-width:0}.header__logo{font-size:var(--font-size-xl)}.header__title{font-size:var(--font-size-lg);font-weight:700;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lang-select{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-base);font-family:var(--font-family-base);color:var(--color-text-light);background:var(--color-surface);cursor:pointer;height:var(--input-height)}.lang-select:hover{border-color:var(--color-primary);color:var(--color-primary)}.calculator-app{margin-bottom:var(--spacing-xl)}.form-section,.input-group{margin-bottom:var(--spacing-md)}.litter-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm)}@media (max-width: 639px){.litter-type-grid{grid-template-columns:repeat(2,1fr)}}.litter-type-icon{font-size:var(--font-size-xl);margin-bottom:var(--spacing-xs)}.litter-type-label{font-size:var(--font-size-sm);color:var(--color-text)}.knowledge-guide{margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--color-border)}.knowledge-guide h2{font-size:var(--font-size-xl);color:var(--color-text);margin-bottom:var(--spacing-lg)}.guide-section{margin-bottom:var(--spacing-xl)}.guide-section h3{font-size:var(--font-size-lg);color:var(--color-text);margin-bottom:var(--spacing-md)}.comparison-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}@media (max-width: 639px){.comparison-grid{grid-template-columns:1fr}}.comparison-card{cursor:default}.comparison-card h4{font-size:var(--font-size-base);margin-bottom:var(--spacing-sm)}.comparison-card ul{list-style:none;padding:0;margin-bottom:var(--spacing-sm)}.comparison-card li{font-size:var(--font-size-sm);color:var(--color-text-light);margin-bottom:var(--spacing-xs)}.comparison-card .pros,.comparison-card .cons,.comparison-card .best-for{font-size:var(--font-size-sm);margin-bottom:var(--spacing-xs)}.tips-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}@media (max-width: 639px){.tips-list{grid-template-columns:1fr}}.tip-card{cursor:default}.tip-card h4{font-size:var(--font-size-base);margin-bottom:var(--spacing-xs)}.tip-card p{font-size:var(--font-size-sm);color:var(--color-text-light);line-height:1.6}.footer{margin-top:var(--spacing-xl);padding:var(--spacing-lg) 0;border-top:1px solid var(--color-border);text-align:center;font-size:var(--font-size-sm);color:var(--color-text-light)}.faq-section{margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--color-border)}.faq-section h2{font-size:var(--font-size-xl);color:var(--color-text);margin-bottom:var(--spacing-lg)}.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);background:var(--color-surface);overflow:hidden}.faq-item[open]{border-color:var(--color-primary)}.faq-question{padding:var(--spacing-md);font-weight:600;font-size:var(--font-size-base);color:var(--color-text);cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--spacing-sm);min-height:2.75rem}.faq-question::-webkit-details-marker{display:none}.faq-question:before{content:"+";font-size:var(--font-size-lg);font-weight:700;color:var(--color-primary);flex-shrink:0;width:1.5rem;text-align:center}.faq-item[open] .faq-question:before{content:"−"}.faq-answer{padding:0 var(--spacing-md) var(--spacing-md) calc(1.5rem + var(--spacing-md) + var(--spacing-sm));font-size:var(--font-size-sm);color:var(--color-text-light);line-height:1.7}
