:root{--color-primary: #FFB6C1;--color-secondary: #FFF0F5;--color-accent: #E91E63;--color-text: #2C2C2C;--color-text-light: #666666;--color-background: #FFFAF0;--color-white: #FFFFFF;--color-error: #D32F2F;--color-success: #388E3C;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--shadow-md: 0 4px 16px rgba(0, 0, 0, .12);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .16);--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", sans-serif;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-background);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.skip-link{position:absolute;top:-40px;left:0;background:var(--color-accent);color:var(--color-white);padding:var(--spacing-sm);text-decoration:none;z-index:100;border-radius:0 0 var(--radius-sm) 0;font-weight:600}.skip-link:focus{top:0;outline:3px solid var(--color-text);outline-offset:2px}#app{min-height:100vh;display:flex;flex-direction:column}header{background-color:var(--color-white);padding:var(--spacing-lg);text-align:center;box-shadow:var(--shadow-sm)}header h1{font-size:var(--font-size-2xl);color:var(--color-accent);font-weight:700;margin-bottom:var(--spacing-xs)}header .subtitle{font-size:var(--font-size-base);color:var(--color-text-light);font-weight:400}main{flex:1;max-width:800px;width:100%;margin:0 auto;padding:var(--spacing-lg)}footer{background-color:var(--color-white);padding:var(--spacing-md);text-align:center;box-shadow:var(--shadow-sm)}.disclaimer{font-size:var(--font-size-sm);color:var(--color-text-light)}.character-container{text-align:center;margin:var(--spacing-lg) 0;padding:var(--spacing-md)}.ginseng-character{max-width:150px;height:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}.ginseng-character:hover{animation:bounce .5s ease-in-out}@media (max-width: 768px){:root{--font-size-2xl: 1.5rem;--font-size-xl: 1.25rem}header{padding:var(--spacing-md)}main{padding:var(--spacing-md)}.ginseng-character{max-width:120px}.card{padding:var(--spacing-md)}}@media (max-width: 480px){:root{--font-size-2xl: 1.25rem;--font-size-xl: 1.125rem;--font-size-lg: 1.125rem;--spacing-lg: 1.5rem}header{padding:var(--spacing-sm)}main{padding:var(--spacing-sm)}.ginseng-character{max-width:100px}.card{padding:var(--spacing-sm)}.button-group{flex-direction:column}.btn{width:100%}}.btn{display:inline-block;padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-base);font-weight:600;text-align:center;text-decoration:none;border:none;border-radius:var(--radius-full);cursor:pointer;transition:all .3s ease;min-height:44px;min-width:44px}.btn-primary{background-color:var(--color-accent);color:var(--color-white)}.btn-primary:hover{background-color:#c2185b;transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-primary:focus{outline:3px solid var(--color-text);outline-offset:2px}.btn-primary:focus:not(:focus-visible){outline:none}.btn-primary:focus-visible{outline:3px solid var(--color-text);outline-offset:2px}.btn-secondary{background-color:var(--color-secondary);color:var(--color-text)}.btn-secondary:hover{background-color:var(--color-primary)}.btn-secondary:focus{outline:3px solid var(--color-text);outline-offset:2px}.btn-secondary:focus:not(:focus-visible){outline:none}.btn-secondary:focus-visible{outline:3px solid var(--color-text);outline-offset:2px}.btn:active{transform:translateY(0)}.input-group{margin-bottom:var(--spacing-md)}.input-label{display:block;margin-bottom:var(--spacing-xs);font-weight:600;color:var(--color-text)}.input-field{width:100%;padding:var(--spacing-sm);font-size:var(--font-size-base);border:2px solid var(--color-primary);border-radius:var(--radius-md);background-color:var(--color-white);transition:all .3s ease;min-height:44px}.input-field:focus{outline:3px solid var(--color-accent);outline-offset:2px;border-color:var(--color-accent);box-shadow:0 0 0 3px #e91e6333}.input-field:focus:not(:focus-visible){outline:none}.input-field:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;border-color:var(--color-accent)}select.input-field:focus{outline:3px solid var(--color-accent);outline-offset:2px}.input-field.error{border-color:var(--color-error)}.error-message{display:none;margin-top:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--color-error)}.error-message.visible{display:block}.help-text{display:block;margin-top:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--color-text-light)}.card{background-color:var(--color-white);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-md)}.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:1000;align-items:center;justify-content:center}.modal-overlay.active{display:flex}.modal-content{background-color:var(--color-white);border-radius:var(--radius-lg);padding:var(--spacing-lg);max-width:90%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}.modal-close{float:right;font-size:var(--font-size-xl);font-weight:700;color:var(--color-text-light);cursor:pointer;background:none;border:none;min-height:44px;min-width:44px}.modal-close:hover{color:var(--color-text)}.modal-close:focus{outline:3px solid var(--color-accent);outline-offset:2px}.modal-close:focus:not(:focus-visible){outline:none}.modal-close:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}.step{display:none}.step.active{display:block}.step-description{color:var(--color-text-light);margin-bottom:var(--spacing-lg);text-align:center}.button-group{display:flex;gap:var(--spacing-sm);justify-content:center;margin-top:var(--spacing-lg);flex-wrap:wrap}.input-method-selection{text-align:center;margin:var(--spacing-lg) 0}.input-method-selection .question{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--spacing-md);color:var(--color-text)}.input-section{margin-top:var(--spacing-lg)}.info-display{margin-top:var(--spacing-sm);padding:var(--spacing-sm);background-color:var(--color-secondary);border-radius:var(--radius-sm)}.info-label{font-weight:600;color:var(--color-text)}.info-value{color:var(--color-accent);font-weight:700;margin-left:var(--spacing-xs)}.info-box{background-color:var(--color-secondary);border-left:4px solid var(--color-accent);padding:var(--spacing-md);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md)}.info-box p{margin:0;color:var(--color-text)}.result-summary{margin:var(--spacing-lg) 0}.result-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);margin-bottom:var(--spacing-sm);background-color:var(--color-secondary);border-radius:var(--radius-md)}.result-item.highlight{background:linear-gradient(135deg,#e91e63,#c2185b);color:var(--color-white);font-size:var(--font-size-lg);padding:var(--spacing-lg)}.result-item.highlight .result-label,.result-item.highlight .result-value{color:var(--color-white);text-shadow:0 1px 2px rgba(0,0,0,.2)}.result-label{font-weight:600;color:var(--color-text)}.result-value{font-size:var(--font-size-xl);font-weight:700;color:#c2185b}.disclaimer-box{margin-top:var(--spacing-lg);padding:var(--spacing-md);background-color:#fff9e6;border-radius:var(--radius-md);border:1px solid #FFE066}.disclaimer-box .disclaimer{margin:0;font-size:var(--font-size-sm);color:var(--color-text)}.video-container{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;margin:var(--spacing-md) 0;border-radius:var(--radius-md)}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--radius-md)}#tutorial-modal .modal-content{max-width:1200px;width:90%}.details-table{width:100%;border-collapse:collapse;margin:var(--spacing-md) 0;font-size:var(--font-size-sm)}.details-table th,.details-table td{padding:var(--spacing-sm);text-align:right;border-bottom:1px solid var(--color-primary)}.details-table th{background-color:var(--color-secondary);font-weight:600;color:var(--color-text);position:sticky;top:0}.details-table td{color:var(--color-text)}.details-table tr:hover{background-color:var(--color-secondary)}a{color:var(--color-accent);text-decoration:underline}a:hover{color:#c2185b}a:focus{outline:3px solid var(--color-accent);outline-offset:2px;border-radius:2px}a:focus:not(:focus-visible){outline:none}a:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;border-radius:2px}.input-row{display:flex;gap:var(--spacing-sm);align-items:center}.input-with-unit{display:flex;align-items:center;gap:var(--spacing-xs);flex:1}.input-inline{flex:1;min-width:80px}.input-unit{font-weight:600;color:var(--color-text);white-space:nowrap}.warning-message{display:none;margin-top:var(--spacing-sm);padding:var(--spacing-sm);background-color:#fff9e6;border-left:4px solid #FFB300;border-radius:var(--radius-sm);font-size:var(--font-size-sm);color:var(--color-text)}.warning-message.visible{display:block}.result-section{margin:var(--spacing-md) 0}.result-section-title{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-xs);border-bottom:2px solid var(--color-primary)}.result-item.highlight-secondary{background:linear-gradient(135deg,#4caf50,#388e3c);color:var(--color-white);font-size:var(--font-size-lg);padding:var(--spacing-lg);margin-top:var(--spacing-sm)}.result-item.highlight-secondary .result-label,.result-item.highlight-secondary .result-value{color:var(--color-white);text-shadow:0 1px 2px rgba(0,0,0,.2)}.adjustment-badge{display:inline-block;padding:.25rem .5rem;margin-left:.5rem;font-size:var(--font-size-sm);font-weight:600;border-radius:var(--radius-sm);white-space:nowrap}.adjustment-badge.badge-early{background-color:#ffb300;color:#000}.adjustment-badge.badge-deferred{background-color:#4caf50;color:var(--color-white)}@media (max-width: 768px){.result-item{flex-direction:column;align-items:flex-start;gap:var(--spacing-xs)}.result-value{font-size:var(--font-size-lg)}.details-table{font-size:.75rem}.details-table th,.details-table td{padding:var(--spacing-xs)}}@media (max-width: 480px){.modal-content{max-width:95%;padding:var(--spacing-md)}.result-item.highlight{font-size:var(--font-size-base)}.input-row{flex-direction:column;align-items:stretch}.input-with-unit{width:100%}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease-out}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}.fade-out{animation:fadeOut .3s ease-out}@keyframes slideIn{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.slide-in{animation:slideIn .3s ease-out}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.bounce{animation:bounce .5s ease-in-out}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.pulse{animation:pulse 2s ease-in-out infinite}.smooth-transition{transition:all .3s ease}.step{display:none;opacity:0}.step.active{display:block;animation:fadeIn .3s ease-out forwards}.step.exiting{animation:fadeOut .3s ease-out forwards}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.ginseng-character{animation:none!important}}