:root{--color-primary: #0284C7;--color-primary-dark: #0369A1;--color-primary-light: #38BDF8;--color-secondary: #06B6D4;--color-accent: #0891B2;--color-bg: #F0F9FF;--color-bg-alt: #E0F2FE;--color-card: #FFFFFF;--color-border: #E0F0F8;--color-muted: #EFF7FB;--color-muted-fg: #64748B;--color-fg: #0F172A;--color-fg-light: #334155;--color-success: #059669;--color-warning: #D97706;--color-danger: #DC2626;--font-heading: 'Figtree',system-ui,sans-serif;--font-body: 'Noto Sans',system-ui,sans-serif;--space-xs: 0.25rem;--space-sm: 0.5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 28px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(2,132,199,0.08);--shadow-md: 0 4px 20px rgba(2,132,199,0.12);--shadow-lg: 0 8px 40px rgba(2,132,199,0.16);--shadow-card: 0 2px 16px rgba(15,23,42,0.06);--transition-fast: 150ms ease;--transition-normal: 250ms ease;--transition-slow: 400ms ease;}@media (prefers-color-scheme: dark){:root{--color-bg: #0C1A2A;--color-bg-alt: #0F2133;--color-card: #142233;--color-border: #1E3A52;--color-muted: #172D42;--color-muted-fg: #94A3B8;--color-fg: #F0F9FF;--color-fg-light: #CBD5E1;}}*,*::before,*::after{box-sizing: border-box;margin: 0;padding: 0;}html{font-size: 16px;scroll-behavior: smooth;-webkit-text-size-adjust: 100%;}body{font-family: var(--font-body);font-size: 1rem;line-height: 1.7;color: var(--color-fg);background-color: var(--color-bg);min-height: 100vh;-webkit-font-smoothing: antialiased;}img{max-width: 100%;display: block;}a{color: var(--color-primary);text-decoration: none;}a:hover{text-decoration: underline;}ul{list-style: none;}h1,h2,h3,h4,h5,h6{font-family: var(--font-heading);font-weight: 700;line-height: 1.25;color: var(--color-fg);}h1{font-size: clamp(1.75rem,4vw,2.75rem);}h2{font-size: clamp(1.4rem,3vw,2rem);}h3{font-size: clamp(1.1rem,2.5vw,1.4rem);}h4{font-size: 1.1rem;}p{margin-bottom: var(--space-md);color: var(--color-fg-light);}p:last-child{margin-bottom: 0;}.container{width: 100%;max-width: 820px;margin-inline: auto;padding-inline: var(--space-lg);}.container--wide{max-width: 1100px;}.site-header{background: var(--color-card);border-bottom: 1px solid var(--color-border);padding: var(--space-md) 0;position: sticky;top: 0;z-index: 100;box-shadow: var(--shadow-sm);}.site-header__inner{display: flex;align-items: center;gap: var(--space-sm);justify-content: space-between;}.site-header__logo{display: flex;align-items: center;gap: var(--space-sm);font-family: var(--font-heading);font-weight: 700;font-size: 1.1rem;color: var(--color-primary);text-decoration: none;}.site-header__logo svg{flex-shrink: 0;}.hero{background: linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);padding: var(--space-3xl) 0 var(--space-2xl);text-align: center;color: #fff;}.hero__eyebrow{display: inline-block;background: rgba(255,255,255,0.18);color: #fff;font-family: var(--font-heading);font-size: 0.8rem;font-weight: 600;letter-spacing: 0.1em;text-transform: uppercase;padding: var(--space-xs) var(--space-md);border-radius: var(--radius-full);margin-bottom: var(--space-lg);}.hero h1{color: #fff;margin-bottom: var(--space-md);}.hero__subtitle{font-size: 1.1rem;color: rgba(255,255,255,0.88);max-width: 560px;margin-inline: auto;margin-bottom: 0;}.calculator-section{padding: var(--space-2xl) 0;}.calculator-card{background: var(--color-card);border-radius: var(--radius-xl);box-shadow: var(--shadow-lg);border: 1px solid var(--color-border);overflow: hidden;margin-top: calc(-1 * var(--space-2xl));}.calculator-card__header{background: linear-gradient(to right,var(--color-bg-alt),var(--color-muted));padding: var(--space-lg) var(--space-xl);border-bottom: 1px solid var(--color-border);}.calculator-card__header h2{font-size: 1.1rem;color: var(--color-primary-dark);}.calculator-card__body{padding: var(--space-xl);}.form-grid{display: grid;grid-template-columns: 1fr 1fr;gap: var(--space-lg);}@media (max-width: 600px){.form-grid{grid-template-columns: 1fr;}.calculator-card__body{padding: var(--space-lg);}}.field{display: flex;flex-direction: column;gap: var(--space-xs);}.field--full{grid-column: 1 / -1;}.field__label{font-family: var(--font-heading);font-size: 0.85rem;font-weight: 600;color: var(--color-fg);letter-spacing: 0.01em;}.field__hint{font-size: 0.78rem;color: var(--color-muted-fg);margin-top: 2px;}.input{width: 100%;padding: 0.65rem 0.9rem;border: 1.5px solid var(--color-border);border-radius: var(--radius-md);font-family: var(--font-body);font-size: 1rem;color: var(--color-fg);background: var(--color-card);transition: border-color var(--transition-fast),box-shadow var(--transition-fast);appearance: none;}.input:focus{outline: none;border-color: var(--color-primary);box-shadow: 0 0 0 3px rgba(2,132,199,0.15);}.input-group{display: flex;border: 1.5px solid var(--color-border);border-radius: var(--radius-md);overflow: hidden;transition: border-color var(--transition-fast),box-shadow var(--transition-fast);}.input-group:focus-within{border-color: var(--color-primary);box-shadow: 0 0 0 3px rgba(2,132,199,0.15);}.input-group .input{border: none;border-radius: 0;box-shadow: none;flex: 1;}.input-group .input:focus{border: none;box-shadow: none;}.unit-toggle{display: flex;border-left: 1.5px solid var(--color-border);background: var(--color-muted);flex-shrink: 0;}.unit-toggle__btn{all: unset;cursor: pointer;padding: 0 0.75rem;font-family: var(--font-heading);font-size: 0.78rem;font-weight: 600;color: var(--color-muted-fg);transition: background var(--transition-fast),color var(--transition-fast);white-space: nowrap;}.unit-toggle__btn.active{background: var(--color-primary);color: #fff;}.unit-toggle__btn:hover:not(.active){background: var(--color-bg-alt);color: var(--color-primary);}.select{width: 100%;padding: 0.65rem 2rem 0.65rem 0.9rem;border: 1.5px solid var(--color-border);border-radius: var(--radius-md);font-family: var(--font-body);font-size: 1rem;color: var(--color-fg);background: var(--color-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;cursor: pointer;appearance: none;transition: border-color var(--transition-fast),box-shadow var(--transition-fast);}.select:focus{outline: none;border-color: var(--color-primary);box-shadow: 0 0 0 3px rgba(2,132,199,0.15);}.toggle-field{display: flex;align-items: center;justify-content: space-between;gap: var(--space-md);background: var(--color-muted);border: 1.5px solid var(--color-border);border-radius: var(--radius-md);padding: 0.75rem var(--space-md);}.toggle-field__text{flex: 1;}.toggle-field__text .field__label{margin-bottom: 2px;}.switch{position: relative;display: inline-block;width: 44px;height: 24px;flex-shrink: 0;}.switch input{opacity: 0;width: 0;height: 0;}.switch__track{position: absolute;inset: 0;background: var(--color-border);border-radius: var(--radius-full);cursor: pointer;transition: background var(--transition-normal);}.switch__track::after{content: '';position: absolute;width: 18px;height: 18px;left: 3px;top: 3px;background: #fff;border-radius: 50%;transition: transform var(--transition-normal);box-shadow: 0 1px 4px rgba(0,0,0,0.15);}.switch input:checked + .switch__track{background: var(--color-primary);}.switch input:checked + .switch__track::after{transform: translateX(20px);}.switch input:focus-visible + .switch__track{box-shadow: 0 0 0 3px rgba(2,132,199,0.3);}.btn-calculate{all: unset;cursor: pointer;display: flex;align-items: center;justify-content: center;gap: var(--space-sm);width: 100%;padding: 0.9rem;background: linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);color: #fff;font-family: var(--font-heading);font-size: 1.05rem;font-weight: 700;border-radius: var(--radius-lg);letter-spacing: 0.01em;transition: opacity var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow: 0 4px 16px rgba(2,132,199,0.35);margin-top: var(--space-lg);}.btn-calculate:hover{opacity: 0.92;transform: translateY(-1px);box-shadow: 0 6px 24px rgba(2,132,199,0.45);}.btn-calculate:active{transform: translateY(0);opacity: 1;}.results-panel{display: none;animation: fadeUp var(--transition-slow) ease both;}.results-panel.visible{display: block;}@keyframes fadeUp{from{opacity: 0;transform: translateY(16px);}to{opacity: 1;transform: translateY(0);}}.results-divider{border: none;border-top: 1.5px dashed var(--color-border);margin: var(--space-xl) 0;}.result-primary{text-align: center;background: linear-gradient(135deg,var(--color-bg-alt) 0%,var(--color-muted) 100%);border-radius: var(--radius-lg);padding: var(--space-xl);margin-bottom: var(--space-lg);border: 1px solid var(--color-border);}.result-primary__label{font-family: var(--font-heading);font-size: 0.85rem;font-weight: 600;color: var(--color-primary);text-transform: uppercase;letter-spacing: 0.08em;margin-bottom: var(--space-sm);}.result-primary__value{font-family: var(--font-heading);font-size: clamp(2.5rem,8vw,4rem);font-weight: 800;color: var(--color-primary);line-height: 1;margin-bottom: var(--space-xs);}.result-primary__unit{font-size: 1.1rem;font-weight: 500;color: var(--color-muted-fg);}.hydration-progress{background: var(--color-border);border-radius: var(--radius-full);height: 12px;margin: var(--space-md) 0;overflow: hidden;}.hydration-progress__fill{height: 100%;background: linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-light) 100%);border-radius: var(--radius-full);width: 0%;transition: width 0.8s cubic-bezier(0.4,0,0.2,1);}.result-grid{display: grid;grid-template-columns: repeat(2,1fr);gap: var(--space-md);margin-bottom: var(--space-lg);}@media (min-width: 500px){.result-grid{grid-template-columns: repeat(4,1fr);}}.result-item{background: var(--color-card);border: 1.5px solid var(--color-border);border-radius: var(--radius-lg);padding: var(--space-md);text-align: center;transition: border-color var(--transition-fast),box-shadow var(--transition-fast);}.result-item:hover{border-color: var(--color-primary-light);box-shadow: var(--shadow-sm);}.result-item__icon{font-size: 1.5rem;margin-bottom: var(--space-xs);display: block;}.result-item__value{font-family: var(--font-heading);font-size: 1.35rem;font-weight: 700;color: var(--color-primary);display: block;line-height: 1.2;}.result-item__label{font-size: 0.78rem;color: var(--color-muted-fg);margin-top: 2px;display: block;}.schedule-title{font-family: var(--font-heading);font-size: 1rem;font-weight: 600;color: var(--color-fg);margin-bottom: var(--space-md);}.schedule-list{display: flex;flex-direction: column;gap: var(--space-sm);}.schedule-item{display: flex;align-items: center;gap: var(--space-md);background: var(--color-card);border: 1px solid var(--color-border);border-radius: var(--radius-md);padding: var(--space-sm) var(--space-md);transition: background var(--transition-fast);}.schedule-item:hover{background: var(--color-muted);}.schedule-item__time{font-family: var(--font-heading);font-size: 0.85rem;font-weight: 600;color: var(--color-primary);min-width: 60px;flex-shrink: 0;}.schedule-item__bar{flex: 1;height: 6px;background: var(--color-border);border-radius: var(--radius-full);overflow: hidden;}.schedule-item__bar-fill{height: 100%;background: linear-gradient(90deg,var(--color-primary),var(--color-secondary));border-radius: var(--radius-full);}.schedule-item__amount{font-size: 0.85rem;color: var(--color-fg-light);flex-shrink: 0;min-width: 60px;text-align: right;}.tips-box{background: linear-gradient(135deg,#EFF7FB,#E0F2FE);border: 1px solid var(--color-border);border-left: 4px solid var(--color-primary);border-radius: var(--radius-md);padding: var(--space-lg);margin-top: var(--space-lg);}.tips-box__title{font-family: var(--font-heading);font-size: 0.9rem;font-weight: 700;color: var(--color-primary-dark);margin-bottom: var(--space-sm);}.tips-box__list{display: flex;flex-direction: column;gap: var(--space-xs);}.tips-box__list li{font-size: 0.88rem;color: var(--color-fg-light);display: flex;align-items: flex-start;gap: var(--space-sm);}.tips-box__list li::before{content: '💧';flex-shrink: 0;line-height: 1.7;}.btn-share{all: unset;cursor: pointer;display: inline-flex;align-items: center;gap: var(--space-sm);padding: 0.6rem 1.2rem;background: var(--color-card);border: 1.5px solid var(--color-primary);color: var(--color-primary);border-radius: var(--radius-full);font-family: var(--font-heading);font-size: 0.88rem;font-weight: 600;transition: background var(--transition-fast),color var(--transition-fast);margin-top: var(--space-lg);}.btn-share:hover{background: var(--color-primary);color: #fff;}.disclaimer{background: #FFFBEB;border: 1px solid #FDE68A;border-radius: var(--radius-md);padding: var(--space-md) var(--space-lg);margin: var(--space-xl) 0 0;display: flex;gap: var(--space-sm);align-items: flex-start;}.disclaimer__icon{flex-shrink: 0;font-size: 1rem;}.disclaimer__text{font-size: 0.82rem;color: #92400E;line-height: 1.6;margin: 0;}@media (prefers-color-scheme: dark){.disclaimer{background: #2D1D00;border-color: #92400E;}.disclaimer__text{color: #FDE68A;}}.content-section{padding: var(--space-3xl) 0;background: var(--color-card);border-top: 1px solid var(--color-border);}.content-section + .content-section{background: var(--color-bg);border-top: 1px solid var(--color-border);}.content-section__header{text-align: center;margin-bottom: var(--space-2xl);}.content-section__header p{max-width: 560px;margin-inline: auto;}.steps-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(220px,1fr));gap: var(--space-lg);}.step-card{background: var(--color-bg);border: 1px solid var(--color-border);border-radius: var(--radius-xl);padding: var(--space-xl) var(--space-lg);text-align: center;transition: box-shadow var(--transition-normal),transform var(--transition-normal);}.step-card:hover{box-shadow: var(--shadow-md);transform: translateY(-3px);}.step-card__icon{font-size: 2.5rem;margin-bottom: var(--space-md);display: block;}.step-card h3{font-size: 1rem;margin-bottom: var(--space-sm);}.step-card p{font-size: 0.9rem;margin: 0;}.factors-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(260px,1fr));gap: var(--space-lg);}.factor-card{display: flex;gap: var(--space-md);background: var(--color-bg);border: 1px solid var(--color-border);border-radius: var(--radius-lg);padding: var(--space-lg);}.factor-card__icon{font-size: 1.75rem;flex-shrink: 0;line-height: 1;}.factor-card__content h3{font-size: 0.95rem;margin-bottom: var(--space-xs);}.factor-card__content p{font-size: 0.88rem;margin: 0;}.faq-section{padding: var(--space-3xl) 0;background: var(--color-bg);border-top: 1px solid var(--color-border);}.faq-header{text-align: center;margin-bottom: var(--space-2xl);}.faq-list{display: flex;flex-direction: column;gap: var(--space-sm);max-width: 720px;margin-inline: auto;}.faq-item{border: 1.5px solid var(--color-border);border-radius: var(--radius-lg);background: var(--color-card);overflow: hidden;transition: border-color var(--transition-fast);}.faq-item:focus-within{border-color: var(--color-primary-light);}.faq-item__question{all: unset;display: flex;align-items: center;justify-content: space-between;width: 100%;padding: var(--space-lg);cursor: pointer;font-family: var(--font-heading);font-size: 0.95rem;font-weight: 600;color: var(--color-fg);gap: var(--space-md);}.faq-item__icon{font-size: 1.2rem;flex-shrink: 0;transition: transform var(--transition-normal);color: var(--color-primary);}.faq-item.open .faq-item__icon{transform: rotate(45deg);}.faq-item__answer{max-height: 0;overflow: hidden;transition: max-height 0.35s ease,padding 0.35s ease;}.faq-item.open .faq-item__answer{max-height: 400px;}.faq-item__answer-inner{padding: 0 var(--space-lg) var(--space-lg);font-size: 0.92rem;color: var(--color-fg-light);line-height: 1.7;border-top: 1px solid var(--color-border);padding-top: var(--space-md);}.site-footer{background: var(--color-fg);color: rgba(255,255,255,0.7);padding: var(--space-2xl) 0;text-align: center;}.site-footer a{color: rgba(255,255,255,0.7);}.site-footer a:hover{color: #fff;}.site-footer__brand{font-family: var(--font-heading);font-size: 1rem;font-weight: 700;color: #fff;margin-bottom: var(--space-sm);display: block;}.site-footer__disclaimer{font-size: 0.78rem;max-width: 560px;margin-inline: auto;margin-top: var(--space-md);color: rgba(255,255,255,0.5);line-height: 1.6;}.text-center{text-align: center;}.mt-lg{margin-top: var(--space-lg);}.visually-hidden{position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0,0,0,0);white-space: nowrap;}.toast{position: fixed;bottom: var(--space-lg);right: var(--space-lg);background: var(--color-fg);color: #fff;padding: var(--space-sm) var(--space-lg);border-radius: var(--radius-md);font-family: var(--font-heading);font-size: 0.88rem;font-weight: 500;box-shadow: var(--shadow-lg);z-index: 999;transform: translateY(100px);opacity: 0;transition: transform var(--transition-normal),opacity var(--transition-normal);}.toast.show{transform: translateY(0);opacity: 1;}.darkmode-toggle{all: unset;cursor: pointer;width: 38px;height: 38px;display: flex;align-items: center;justify-content: center;border-radius: var(--radius-md);color: var(--color-muted-fg);transition: background var(--transition-fast),color var(--transition-fast);flex-shrink: 0;}.darkmode-toggle:hover{background: var(--color-muted);color: var(--color-primary);}.icon-sun{display: none;}[data-theme="dark"] .icon-moon{display: none;}[data-theme="dark"] .icon-sun{display: block;}[data-theme="dark"]{--color-bg: #0C1A2A;--color-bg-alt: #0F2133;--color-card: #142233;--color-border: #1E3A52;--color-muted: #172D42;--color-muted-fg: #94A3B8;--color-fg: #F0F9FF;--color-fg-light: #CBD5E1;}[data-theme="dark"] .disclaimer{background: #2D1D00;border-color: #92400E;}[data-theme="dark"] .disclaimer__text{color: #FDE68A;}[data-theme="dark"] .tips-box{background: linear-gradient(135deg,#102030,#0F2133);}[data-theme="dark"] .calculator-card__header{background: linear-gradient(to right,#0F2133,#172D42);}[data-theme="dark"] thead tr{background: #1E3A52 !important;}[data-theme="dark"] tbody tr:nth-child(even){background: #172D42 !important;}