:root{--ivory:#fbf6ea;--ink:#1c2230;--navy:#111a2c;--gold:#b88a3d;--gold-soft:#d9b873;--line:#d8c69d;--line-soft:#eee2c7;--muted:#7a7264;--white:#fffdf8;--danger:#9b4a3a;--serif:"Shippori Mincho", "Zen Old Mincho", serif;--sans:"Zen Kaku Gothic New", system-ui, sans-serif;--display:"Playfair Display", Georgia, serif;--figure:"Inter", "Zen Kaku Gothic New", system-ui, sans-serif;--radius:8px;--radius-sm:4px;--shadow:0 18px 38px #111a2c14;--shadow-soft:0 6px 16px #111a2c0f;--maxw:1140px}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--ivory);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-size:15px;line-height:1.7}button{font:inherit;cursor:pointer}input,select,textarea{font:inherit;color:inherit}.wrap{max-width:var(--maxw);flex-direction:column;min-height:100vh;margin:0 auto;display:flex}.hero{text-align:center;border-bottom:1px solid var(--line);padding:30px 18px 18px}.hero__brand{justify-content:center;align-items:center;gap:16px;display:flex}.hero__logo{flex-shrink:0;width:auto;height:clamp(64px,16vw,100px);display:block}.hero__title{min-width:0;font-family:var(--display);letter-spacing:.005em;color:var(--ink);text-align:left;margin:0;font-size:clamp(34px,9.5vw,60px);font-weight:700;line-height:.98}.hero__lead{max-width:620px;color:var(--muted);margin:14px auto 0;font-size:14px;line-height:1.85}.toolbar{z-index:20;background:color-mix(in srgb, var(--ivory) 88%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft);flex-wrap:wrap;justify-content:center;gap:8px;padding:12px 14px;display:flex;position:sticky;top:0}.toolbar__btn{border:1px solid var(--line);background:var(--white);min-height:42px;color:var(--ink);border-radius:var(--radius-sm);align-items:center;gap:6px;padding:0 16px;font-weight:700;transition:background .15s,color .15s,border-color .15s,transform 50ms;display:inline-flex}.toolbar__btn:hover{border-color:var(--gold);color:var(--gold)}.toolbar__btn:active{transform:translateY(1px)}.toolbar__btn--primary{background:var(--navy);color:#fff;border-color:var(--navy)}.toolbar__btn--primary:hover{color:#fff;background:#1b2740}main{flex:1;grid-template-columns:minmax(0,1fr);gap:14px;padding:16px 14px 36px;display:grid}.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.card__head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;padding:16px;display:flex}.card__title{font-family:var(--sans);letter-spacing:.02em;margin:0;font-size:20px;font-weight:700}.card__tag{color:var(--gold);white-space:nowrap;font-size:12px;font-weight:700}.card__body{padding:16px}.field-label{color:var(--muted);letter-spacing:.04em;margin-bottom:5px;font-size:12px;font-weight:700;display:block}.input{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;width:100%;min-width:0;min-height:44px;padding:10px 12px;font-weight:600;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);outline:none}textarea.input{resize:vertical;min-height:96px;font-weight:500;line-height:1.8}.base{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:14px;display:grid}.ing-head{border-bottom:1px solid var(--line);color:var(--muted);letter-spacing:.04em;grid-template-columns:minmax(0,1fr) 60px 68px 86px;gap:8px;padding:0 0 6px;font-size:11px;font-weight:700;display:grid}.ing-head span:nth-child(2),.ing-head span:nth-child(3){text-align:right}.ing-head span.is-on{color:var(--gold)}.ing-head span.is-on:after{content:" ✎";font-size:10px}.ing{border-bottom:1px solid var(--line-soft);grid-template-columns:minmax(0,1fr) 60px 68px 86px;align-items:center;gap:8px;padding:9px 0;display:grid}.ing__main{min-width:0}.ing__name{border-radius:var(--radius-sm);background:0 0;border:1px solid #0000;width:100%;min-width:0;min-height:38px;padding:4px 6px;font-weight:700}.ing__name:focus{border-color:var(--gold);background:#fff;outline:none}.ing__name::placeholder{color:#b9b1a1;font-weight:500}.ing__kind{color:var(--muted);padding:0 6px;font-size:11px;font-weight:700;display:block}.ing__num{border:1px solid var(--line);border-radius:var(--radius-sm);text-align:right;width:100%;min-width:0;min-height:38px;font-family:var(--figure);font-variant-numeric:tabular-nums;background:#fff;padding:6px 8px;font-weight:600}.ing__num:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent);outline:none}.ing__val{text-align:right;min-height:38px;font-family:var(--figure);font-variant-numeric:tabular-nums;color:var(--muted);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--line-soft) 45%, transparent);border:1px solid #0000;padding:6px 8px;font-weight:600;line-height:24px;display:block}.ing__acts{justify-content:flex-end;gap:4px;display:flex}.ing__act{border:1px solid var(--line);width:26px;height:26px;color:var(--gold);background:#fff;border-radius:50%;place-items:center;padding:0;font-size:15px;line-height:1;transition:color .15s,border-color .15s,background .15s;display:grid}.ing__act:hover{border-color:var(--gold);background:color-mix(in srgb, var(--gold) 10%, #fff)}.ing__act--drag{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.ing.is-dragging{opacity:.5}.ing.is-dragging .ing__act--drag{cursor:grabbing}.ing--drop-before,.ing--drop-after{position:relative}.ing--drop-before:before,.ing--drop-after:after{content:"";border-top:2px solid var(--gold);pointer-events:none;position:absolute;left:0;right:0}.ing--drop-before:before{top:0}.ing--drop-after:after{bottom:0}.ing__act--del{color:var(--muted)}.ing__act--del:hover{color:var(--danger);border-color:var(--danger);background:#fff}.ing-add{grid-template-columns:1fr auto;gap:8px;margin-top:12px;display:grid}.ing-add select{min-height:42px}.ing-add__btn{border:1px dashed var(--gold);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--gold) 8%, #fff);min-height:42px;color:var(--gold);padding:0 16px;font-weight:700}.ing-add__btn:hover{background:color-mix(in srgb, var(--gold) 16%, #fff)}.entry{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:10px;margin-bottom:14px;display:grid}.seg{border:1px solid var(--navy);border-radius:var(--radius-sm);background:#fff;grid-template-columns:1fr 1fr;min-height:44px;display:grid;overflow:hidden}.seg__btn{color:var(--navy);letter-spacing:.02em;background:0 0;border:0;font-weight:700;transition:background .15s,color .15s}.seg__btn+.seg__btn{border-left:1px solid var(--navy)}.seg__btn.is-on{background:var(--navy);color:#fff}.seg__btn:not(.is-on):hover{background:color-mix(in srgb, var(--navy) 6%, #fff)}.seg-print{display:none}.input--figure{font-family:var(--figure);font-variant-numeric:tabular-nums;text-align:right}.input--ro{background:color-mix(in srgb, var(--line-soft) 45%, #fff);color:var(--ink);justify-content:flex-end;align-items:baseline;gap:6px;display:flex}.input--ro strong{font-family:var(--figure);font-variant-numeric:tabular-nums;font-weight:700}.input--ro small{color:var(--muted);font-size:11px;font-weight:600}.hint--entry{grid-column:1/-1;margin:0}.warn{border:1px solid color-mix(in srgb, var(--danger) 45%, var(--line));border-radius:var(--radius-sm);background:color-mix(in srgb, var(--danger) 6%, #fff);color:var(--danger);grid-column:1/-1;margin:0;padding:8px 10px;font-size:12px;font-weight:600;line-height:1.6}.sum{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:12px;display:grid}.sum>div{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px}.sum span{color:var(--muted);letter-spacing:.06em;font-size:11px;font-weight:700;display:block}.sum strong{font-family:var(--figure);letter-spacing:-.01em;font-variant-numeric:tabular-nums;font-size:32px;font-weight:700;line-height:1.05;display:block}.sum small{color:var(--muted);font-size:12px;font-weight:600}.dims{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.answer{background:var(--navy);color:#fff;border-radius:var(--radius-sm);grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;margin-top:14px;padding:18px;display:grid}.answer__meta span{color:var(--gold-soft);font-size:11px;font-weight:700;display:block}.answer__meta small{color:#cfd6e4;font-size:12px}.answer__value{font-family:var(--figure);letter-spacing:-.02em;color:#f3d690;font-variant-numeric:tabular-nums;font-size:52px;font-weight:700;line-height:.95}.answer__unit{color:var(--gold-soft);align-self:end;padding-bottom:6px;font-size:12px;font-weight:700}.hint{color:var(--muted);margin:10px 2px 0;font-size:12px}.footer{text-align:center;border-top:1px solid var(--line-soft);color:var(--muted);letter-spacing:.06em;padding:24px 16px 32px;font-size:11px}.footer__sns{border:1px solid var(--line);width:44px;height:44px;color:var(--muted);border-radius:50%;justify-content:center;align-items:center;margin-bottom:12px;transition:color .15s,border-color .15s,background .15s,transform 50ms;display:inline-flex}.footer__sns:hover{color:var(--gold);border-color:var(--gold);background:color-mix(in srgb, var(--gold) 8%, transparent)}.footer__sns:active{transform:translateY(1px)}.footer__copy{margin:0}.modal-overlay{z-index:50;background:#111a2c6b;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.modal{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);width:100%;max-width:460px;max-height:86vh;box-shadow:var(--shadow);overflow:auto}.modal__head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:16px;display:flex}.modal__title{font-family:var(--serif);margin:0;font-size:20px;font-weight:700}.modal__close{color:var(--muted);background:0 0;border:0;font-size:24px;line-height:1}.modal__body{padding:12px 16px 18px}.saved{border-bottom:1px solid var(--line-soft);justify-content:space-between;align-items:center;gap:10px;padding:12px 4px;display:flex}.saved__name{font-weight:700}.saved__date{color:var(--muted);font-size:11px}.saved__actions{flex-shrink:0;gap:6px;display:flex}.saved__btn{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;min-height:38px;padding:0 12px;font-size:13px;font-weight:700}.saved__btn--load{background:var(--navy);color:#fff;border-color:var(--navy)}.saved__btn--del:hover{color:var(--danger);border-color:var(--danger)}.saved-empty{color:var(--muted);text-align:center;padding:24px 0}.guide-text{margin:4px 0 14px;line-height:1.8}.guide-actions{gap:8px;display:grid}.guide-actions .toolbar__btn{justify-content:center;text-decoration:none}.guide-note{color:var(--muted);margin:12px 0 0;font-size:12px;line-height:1.7}.toast-wrap{z-index:80;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast{background:var(--navy);color:#fff;box-shadow:var(--shadow);border:1px solid color-mix(in srgb, var(--gold) 40%, transparent);border-radius:999px;padding:12px 20px;font-size:14px;font-weight:700;animation:.25s toast-in}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.guide{padding:0 14px 28px}.guide summary{cursor:pointer;font-family:var(--serif);color:var(--gold);font-weight:700;list-style:none}.guide summary::-webkit-details-marker{display:none}.guide__content{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);margin-top:12px;padding:16px;font-size:13px;line-height:1.9}.guide__content h3{font-family:var(--serif);margin:12px 0 4px;font-size:15px}.guide__content h3:first-child{margin-top:0}.guide__content ol,.guide__content ul{color:var(--ink);margin:0;padding-left:1.3em}@media (width>=850px){.hero{padding:50px 28px 26px}main{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);align-items:start;padding:22px 28px 48px}.calc-card{grid-row:span 2}.memo-card,.guide{grid-column:1/-1}.guide{padding:0 28px 36px}}@media screen and (width<=400px){.calc-card .card__body{padding-inline:8px}.ing-head,.ing{column-gap:4px}.ing__name,.ing__kind{padding-inline:2px}}@media print{@page{size:A4 portrait;margin:14mm 13mm 15mm}html,body{background:#fff!important}body{color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:10.5pt}.wrap{max-width:100%;min-height:0;margin:0;padding:0;display:block}.toolbar,.ing-add,.ing__acts,.modal-overlay,.toast-wrap,.guide,.footer__sns,.no-print{display:none!important}.seg-print{font-weight:700;display:block}.entry{margin-bottom:4mm}.input--ro{justify-content:flex-start;padding:0;background:0 0!important}.warn{display:none}.hero{text-align:left;border-bottom:1.5pt solid #000;margin-bottom:5mm;padding:0 0 5mm}.hero__brand{justify-content:flex-start;gap:3mm}.hero__logo{height:16mm}.hero__title{color:#000;font-size:26pt;line-height:1}.hero__lead{color:#333;max-width:100%;margin-top:3mm;font-size:8.5pt}main{gap:0;padding:0;display:block}.card{break-inside:auto;border:.75pt solid #888;border-radius:3pt;margin-bottom:5mm;box-shadow:none!important;background:#fff!important}.vol-card,.memo-card{break-inside:avoid}.vol-card.is-none{display:none!important}.card__head{break-inside:avoid;break-after:avoid;border-bottom:.75pt solid #888;padding:3mm 4mm}.card__title{font-size:12pt}.card__tag{color:#555}.card__body{padding:3mm 4mm}.input{-webkit-text-fill-color:#000;min-height:0;padding:.5mm 0;box-shadow:none!important;color:#000!important;background:0 0!important;border:0!important}select.input{appearance:none}#recipe-name{font-size:13pt;font-weight:700}.field-label{color:#555}.base{margin-bottom:4mm}.ing-head,.ing{grid-template-columns:1fr 18mm 22mm;gap:3mm}.ing-head{border-color:#000}.ing-head span:nth-child(4){display:none}.ing{break-inside:avoid;border-bottom:.5pt solid #ccc;padding:1.5mm 0}.ing__name,.ing__num,.ing__val{-webkit-text-fill-color:#000;min-height:0;padding:0;line-height:1.5;box-shadow:none!important;color:#000!important;background:0 0!important;border:0!important}.ing-head span.is-on{color:#000}.ing-head span.is-on:after{content:none}.ing__kind{color:#777}.sum{break-inside:avoid;margin-top:4mm}.sum>div{border:.75pt solid #000}.sum strong,.sum span,.sum small{color:#000}.answer{break-inside:avoid;border:1pt solid #000;color:#000!important;background:#fff!important}.answer__meta span,.answer__meta small,.answer__unit,.answer__value{color:#000!important}.hint{color:#555}textarea.input{height:auto;min-height:0;overflow:visible}::placeholder{-webkit-text-fill-color:transparent;color:#0000!important}.footer{color:#555;text-align:left;border-top:.75pt solid #888;margin-top:4mm;padding:3mm 0 0}}