:root{
  --ink:#0F2A36;
  --ink-soft:#3F6472;
  --ink-faint:#4F6D79;
  --paper:#E6F7FC;
  --paper-raised:#FBFEFF;
  --paper-sunken:#D7F0F8;
  --line:#BFE6F2;
  --line-soft:#D3EEF7;
  /* ブランドの水色は飾り（カード上端の線）に使い、文字や白抜きボタンには
     背景とのコントラスト 4.5:1 以上になる濃い青を使う */
  --brand:#00AEEF;
  --accent:#006E9C;
  --accent-soft:#CDEEFA;
  --on-accent:#FFFFFF;
  --good:#2E9E8C;
  --warn:#D9603F;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#E3F6FC;
    --ink-soft:#9FD3E6;
    --ink-faint:#6A98A7;
    --paper:#04141B;
    --paper-raised:#0C232D;
    --paper-sunken:#020F15;
    --line:#12414F;
    --line-soft:#0E323D;
    --brand:#33D2FF;
    --accent:#33D2FF;
    --accent-soft:#0F3947;
    --on-accent:#02141B;
    --good:#6FD1BE;
    --warn:#F08F6E;
  }
}
*{ box-sizing:border-box; }
/* 個別の display 指定より hidden 属性を優先する */
[hidden]{ display:none !important; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease;
}
.app{ max-width:640px; margin:0 auto; padding:20px 18px 64px; }

.topbar{
  position:relative;
  margin-bottom:20px;
}
.topbar .icon-btn{
  position:absolute;
  top:0;
  right:0;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.free-tagline{
  margin:0 0 8px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink-faint);
}
.header-logo-svg{
  display:block;
  width:auto;
  height:38px;
  margin:32px 0 40px;
  color:var(--ink);
}
.title-block p{
  margin:0;
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.6;
}
.title-block .intro-message{
  margin:0 0 6px;
  font-size:14.5px;
  font-weight:700;
  color:var(--ink);
}
.title-block .intro-message strong{ color:var(--accent); }
/* 文節の途中で折り返さない */
.title-block .intro-message span{ display:inline-block; }
.icon-btn{
  flex:none;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper-raised);
  color:var(--ink);
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border-color .2s ease, transform .15s ease;
}
.icon-btn:hover{ border-color:var(--accent); }
.icon-btn:active{ transform:scale(0.94); }
.icon-btn:focus-visible, input:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

.card{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-top:5px solid var(--brand);
  border-radius:16px;
  padding:18px;
  margin-bottom:14px;
  box-shadow:0 4px 16px rgba(10,40,50,.08);
  transition:border-color .3s ease;
}
.card h2{
  margin:0 0 12px;
  font-size:18px;
  font-weight:900;
}
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.card-head h2{ margin:0; }
.reset-btn{
  flex:none;
  appearance:none;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  color:var(--ink-soft);
  background:var(--paper-sunken);
  border:1px solid var(--line);
  border-radius:10px;
  min-height:36px;
  padding:0 14px;
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease;
}
.reset-btn:hover{ color:var(--accent); border-color:var(--accent); }
.reset-btn:active{ transform:scale(0.97); }

.field-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.field-row:last-of-type{ margin-bottom:0; }
#saltLockNote{ margin-bottom:0; }
/* 料理のタイプから目標塩分％を選ぶボタン */
.preset-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
  margin:0 0 6px;
}
.preset{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  min-height:48px;
  padding:6px 4px;
  font-family:inherit;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--paper-sunken);
  color:var(--ink);
  cursor:pointer;
  touch-action:manipulation;
}
.preset-name{ font-size:12.5px; font-weight:700; line-height:1.3; }
.preset-pct{ font-size:12px; color:var(--ink-soft); }
.preset.active{
  background:var(--accent);
  border-color:transparent;
  color:var(--on-accent);
}
.preset.active .preset-pct{ color:var(--on-accent); }
.preset-note{
  margin:0 0 10px;
  font-size:12px;
  line-height:1.5;
  color:var(--ink-faint);
}

/* 「1人分の塩分量で決める」スイッチ */
.toggle-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin:4px 0 0;
  padding:12px 0 2px;
  border-top:1px dashed var(--line);
  cursor:pointer;
}
.toggle-text{
  flex:1;
  font-size:14px;
  font-weight:700;
  color:var(--ink-soft);
}
.toggle-text .sub{
  display:block;
  font-size:11.5px;
  font-weight:500;
  color:var(--ink-faint);
  margin-top:2px;
}
.toggle-row input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}
.switch{
  flex:none;
  position:relative;
  width:50px;
  height:30px;
  border-radius:999px;
  /* オフは薄い地に濃い枠とつまみ、オンは濃い青の地に白いつまみ */
  background:var(--paper-sunken);
  box-shadow:inset 0 0 0 1.5px var(--ink-faint);
  transition:background-color .2s ease;
}
.switch::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--ink-faint);
  transition:transform .2s ease, background-color .2s ease;
}
.toggle-row input:checked + .switch{ background:var(--accent); box-shadow:none; }
.toggle-row input:checked + .switch::after{ transform:translateX(20px); background:var(--on-accent); }
.toggle-row input:focus-visible + .switch{ outline:2px solid var(--accent); outline-offset:2px; }
.per-serving-fields{ margin-top:12px; }
.field-row label{
  flex:1;
  font-size:14px;
  color:var(--ink-soft);
  font-weight:700;
}
.field-row .sub{
  display:block;
  font-size:11.5px;
  font-weight:500;
  color:var(--ink-faint);
  margin-top:2px;
}
.field-row input[type="number"]{
  flex:none;
  width:96px;
  min-height:44px;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  text-align:right;
  padding:7px 10px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--paper-sunken);
  color:var(--ink);
}
.field-row .unit{ font-size:13px; color:var(--ink-soft); width:20px; }

.seasoning-target{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:0 0 12px;
  margin-bottom:4px;
  border-bottom:1px dashed var(--line);
}
.seasoning-target .label{ font-size:13px; color:var(--ink-soft); font-weight:700; }
.seasoning-target .per{ display:block; font-size:12px; font-weight:500; color:var(--ink-faint); margin-top:2px; }
.seasoning-target .value{ font-size:28px; font-weight:900; color:var(--accent); transition:color .3s ease; }

.seasoning-list{ list-style:none; margin:0; padding:0; }
.seasoning-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--line-soft);
}
.seasoning-row:last-child{ border-bottom:none; }
.seasoning-main{ flex:1; min-width:0; }
.seasoning-name{
  display:block;
  font-size:14.5px;
  font-weight:700;
  color:var(--ink);
  /* 「オイスターソー／ス」のような語の途中の改行を避け、入りきらないときだけ折り返す */
  word-break:keep-all;
  overflow-wrap:anywhere;
}
.seasoning-name.is-long{ font-size:13px; }
.seasoning-pct{
  display:block;
  margin-top:2px;
  font-size:11.5px;
  color:var(--ink-faint);
}
.amount-badge{
  display:inline-flex;
  align-items:center;
  margin-top:5px;
  font-family:"Zen Maru Gothic",sans-serif;
  font-variant-numeric:tabular-nums;
  font-size:13px;
  font-weight:900;
  color:var(--on-accent);
  background:var(--accent);
  padding:3px 11px;
  border-radius:999px;
  width:fit-content;
  transition:background .3s ease, color .3s ease;
}
.amount-badge[hidden]{ display:none; }

.mode-seg{
  flex:none;
  display:grid;
  grid-auto-flow:column;
  gap:4px;
  background:var(--paper-sunken);
  padding:3px;
  border-radius:10px;
  border:1px solid var(--line);
}
.mode-seg button{
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  color:var(--ink-soft);
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  min-height:36px;
  padding:6px 9px;
  border-radius:7px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
.mode-seg button.active{
  background:var(--accent);
  color:var(--on-accent);
}
.remove-btn{
  flex:none;
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper-sunken);
  color:var(--ink-faint);
  font-size:15px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.remove-btn:hover{ color:var(--warn); border-color:var(--warn); }

.add-row{
  display:flex;
  gap:8px;
  margin-top:12px;
}
.add-row input{
  flex:1;
  min-width:0;
  min-height:44px;
  font-family:inherit;
  font-size:16px;
  padding:7px 10px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--paper-sunken);
  color:var(--ink);
}
.add-row .add-pct{
  flex:none;
  display:flex;
  align-items:center;
  gap:4px;
}
.add-row .add-pct input{
  flex:none;
  width:64px;
}
.add-row .add-pct .unit{
  font-size:13px;
  color:var(--ink-soft);
}
.add-row input.invalid{
  border-color:var(--warn);
}
.add-row .btn{
  flex:none;
  white-space:nowrap;
}
.btn{
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  min-height:44px;
  padding:0 16px;
  border-radius:10px;
  cursor:pointer;
  border:1px solid var(--line);
  background:var(--paper-sunken);
  color:var(--ink);
}
.btn.primary{
  background:var(--accent);
  color:var(--on-accent);
  border-color:transparent;
}

.ratio-block{ margin-top:4px; }
.ratio-label{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  font-weight:700;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.ratio-label b{ color:var(--accent); }
input[type="range"]{
  width:100%;
  accent-color:var(--accent);
}
.ratio-note{
  font-size:12px;
  color:var(--ink-faint);
  margin-top:6px;
}

.empty-note{
  font-size:13.5px;
  color:var(--ink-faint);
  padding:8px 0 0;
}
.basis-note{
  font-size:12.5px;
  line-height:1.6;
  color:var(--ink-soft);
  background:var(--paper-sunken);
  border-radius:10px;
  padding:9px 12px;
  margin:10px 0 12px;
}
.basis-note strong{ color:var(--accent); }

.attention-card{
  background:var(--accent-soft);
  border:1px solid var(--line);
  border-top:5px solid var(--brand);
  border-radius:16px;
  padding:18px;
  margin-bottom:14px;
}
.attention-card h2{
  margin:0 0 12px;
  font-size:16px;
  font-weight:900;
  color:var(--ink);
}
.attention-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.attention-list li{
  font-size:13px;
  line-height:1.7;
  color:var(--ink);
}
.attention-list li b{
  display:block;
  font-weight:900;
  margin-bottom:2px;
}

.backdrop{
  position:fixed;
  inset:0;
  background:rgba(8,25,32,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:10;
}
.backdrop.open{ opacity:1; pointer-events:auto; }

.settings-panel{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:min(380px,92vw);
  background:var(--paper);
  border-left:1px solid var(--line);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .28s ease, visibility 0s linear .28s;
  z-index:11;
  display:flex;
  flex-direction:column;
  box-shadow:-12px 0 30px rgba(0,0,0,.15);
}
.settings-panel.open{ transform:translateX(0); visibility:visible; transition:transform .28s ease; }
.settings-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 18px 12px;
  border-bottom:1px solid var(--line-soft);
  flex:none;
}
.settings-head h2{
  margin:0;
  font-family:"Zen Maru Gothic",sans-serif;
  font-size:19px;
}
.settings-body{
  overflow-y:auto;
  padding:14px 18px 10px;
  flex:1;
}
.settings-body p.lead{
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.7;
  margin:0 0 16px;
}
.field{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--line-soft);
}
.field:last-child{ border-bottom:none; }
.field label{
  font-size:14px;
  color:var(--ink);
  line-height:1.5;
}
.field-input{
  flex:none;
  display:flex;
  align-items:center;
  gap:5px;
}
.field-input input{
  width:72px;
  min-height:40px;
  font-family:"Zen Maru Gothic",sans-serif;
  font-size:16px;
  text-align:right;
  padding:6px 9px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--paper-raised);
  color:var(--ink);
}
.field-input .unit{ font-size:12px; color:var(--ink-soft); width:16px; }
.settings-foot{
  flex:none;
  padding:14px 18px 18px;
  border-top:1px solid var(--line-soft);
  display:flex;
  gap:10px;
}
.settings-foot .btn{ flex:1; }

.saved-flash{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translate(-50%,12px);
  background:var(--ink);
  color:var(--paper);
  font-size:13.5px;
  font-weight:700;
  padding:9px 16px;
  border-radius:999px;
  opacity:0;
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
  z-index:40;
}
.saved-flash.show{ opacity:1; transform:translate(-50%,0); }
/* キーパッドが画面下を覆っている間は上に出す */
body.keypad-open .saved-flash{ bottom:auto; top:18px; transform:translate(-50%,-12px); }
body.keypad-open .saved-flash.show{ transform:translate(-50%,0); }

.app-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding:18px 0 10px;
}
.footer-banner{
  display:block;
  width:70%;
  margin:0 auto;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 4px 16px rgba(10,40,50,.08);
  transition:opacity .2s ease, transform .15s ease;
}
.footer-banner:hover{ opacity:.92; }
.footer-banner:active{ transform:scale(0.99); }
.footer-banner:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.footer-banner img{
  display:block;
  width:100%;
  height:auto;
}
.footer-credit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12.5px;
  color:var(--ink-faint);
}
.footer-brand{
  color:var(--ink-soft);
  font-weight:900;
  letter-spacing:.03em;
  text-decoration:none;
  padding:4px 2px;
  border-bottom:1px solid var(--line);
  transition:color .2s ease, border-color .2s ease;
}
.footer-brand:hover{ color:var(--accent); border-color:var(--accent); }
.footer-brand:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.footer-share{
  display:flex;
  justify-content:center;
  gap:10px;
}
.share-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:700;
  text-decoration:none;
  border:1px solid var(--line);
  transition:filter .2s ease, background .2s ease;
}
.share-btn svg{ width:16px; height:16px; fill:currentColor; flex:none; }
.share-btn--line{
  background:#06C755;
  color:#FFFFFF;
  border-color:#06C755;
}
.share-btn--line:hover{ filter:brightness(1.08); }
.share-btn--x{
  background:#000000;
  color:#FFFFFF;
  border-color:#000000;
}
.share-btn--x:hover{ filter:brightness(1.3); }
.share-btn--mail{
  background:var(--paper-raised);
  color:var(--ink-soft);
}
.share-btn--mail:hover{ color:var(--accent); border-color:var(--accent); }
.share-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}

/* スマホ用の数字キーパッド */
.keypad{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  max-width:640px;
  margin:0 auto;
  z-index:31;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-bottom:none;
  border-radius:18px 18px 0 0;
  box-shadow:0 -8px 24px rgba(15,42,54,.18);
  padding:12px 12px calc(12px + env(safe-area-inset-bottom));
  transform:translateY(105%);
  visibility:hidden;
  transition:transform .2s ease, visibility 0s linear .2s;
}
.keypad.open{ transform:translateY(0); visibility:visible; transition:transform .2s ease; }
.keypad-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:2px 6px 10px;
}
.keypad-label{
  font-size:13px;
  font-weight:700;
  color:var(--ink-soft);
}
.keypad-display{
  font-size:28px;
  font-weight:900;
  color:var(--accent);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.keypad-unit{
  font-size:15px;
  font-weight:700;
  color:var(--ink-soft);
  margin-left:4px;
}
.keypad-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:58px;
  gap:8px;
}
.keypad-grid button{
  font-family:inherit;
  font-size:24px;
  font-weight:700;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--paper-sunken);
  color:var(--ink);
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.keypad-grid button:active{ background:var(--accent-soft); }
.keypad-grid .fn{ font-size:20px; color:var(--ink-soft); }
.keypad-grid .zero{ grid-column:span 2; }
.keypad-grid .done{
  grid-row:span 2;
  font-size:18px;
  background:var(--accent);
  color:var(--on-accent);
  border-color:transparent;
}
/* キーパッドの裏に隠れる下端の欄までスクロールできるように余白を足す */
body.keypad-open{ padding-bottom:calc(340px + env(safe-area-inset-bottom)); }
body.keypad-open .settings-body{ padding-bottom:calc(340px + env(safe-area-inset-bottom)); }
input.keypad-active{
  outline:2px solid var(--accent);
  outline-offset:1px;
}

/* 幅の狭いスマホ（〜359px）では、調味料名を上、ボタンを下に並べて名前が細切れにならないようにする */
@media (max-width: 359px){
  .seasoning-row{ flex-wrap:wrap; row-gap:8px; }
  .seasoning-main{ flex-basis:100%; }
  .mode-seg{ flex:1; grid-auto-columns:1fr; }
  .seasoning-name.is-long{ font-size:14.5px; }
  .field-row input[type="number"]{ width:80px; }
  .preset{ padding:6px 2px; }
  .preset-name{ font-size:11px; }
  .add-row{ flex-wrap:wrap; }
  .add-row > input{ flex-basis:100%; }
  .add-row .add-pct{ flex:1; }
  .add-row .add-pct input{ flex:1; width:auto; min-width:0; }
}