/* 青を主な操作、赤をブランドと見出し・削除操作、黄を試作の注意に使用。 */
.site-header { border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.wordmark { font-size: 19px; letter-spacing: .02em; }
.wordmark small, .header-note, .breadcrumb, .app-description p { color: var(--muted); }
.header-note:before { background: #1554b3; }
.prototype-banner { border-color: #d69d22; color: #513800; font-size: 13px; }
.demo-label { background: #604000; }
.market-hero { background: #1554b3; border-color: #1554b3; }
.market-hero .eyebrow { color: #ffe090; }
.market-hero h1 { color: #fff; position: relative; z-index: 1; }
.market-hero p { color: #fff; }
.market-hero .text-link { color: #ffe090; }
.deco-leaf { background: #4987ed; }
.leaf-two { background: #74b0f8; }
.deco-stem { background: #9ec5ff; }
.deco-dot { background: #ffc94a; }
.featured-app { border: 2px solid #abc4e8; }
.app-visual { background: #dceaff; }
.app-visual:before, .app-visual:after { border-color: #b0cdf5; }
.visual-spark { color: #1554b3; }
.app-description h3 { font-size: 27px; line-height: 1.6; letter-spacing: .02em; }
.app-description .app-lead { font-size: 20px; }
.tag, .preview-card>p { background: #e3eeff; color: #104798; }
.tag.outline, .demo-pill { color: #624000; border-color: #cea244; background: #fff0bf; }
.preview-meter { background: #dce6f5; }
.preview-meter i { background: #1554b3; }
.preview-top, .preview-mini strong { color: var(--ink); }
.market-principles svg { color: #1554b3; }
.market-disclaimer { background: #e6eefb; color: #354e70; }
.app-title>div:first-child { min-width: 0; }
.app-title h1 { font-size: 29px; letter-spacing: .02em; flex-wrap: wrap; gap: 9px; }
.app-title .app-name { min-width: 0; overflow-wrap: anywhere; }
.title-badge { color: #104798; background: #e3eeff; border-color: #87abe0; flex-shrink: 0; }
.title-icon { color: #1554b3; background: #dceaff; margin-left: 18px; flex-shrink: 0; }
.title-icon svg { stroke-width: 1.9; }
.app-title p { font-size: 14px; }
.app-tabs>a { color: #435b78; }
.app-tabs>a[aria-current] { background: #e4eeff; border-radius: 9px 9px 0 0; }
.count { color: #fff; background: #1554b3; }
.search-panel { border: 2px solid #aec7e8; }
.search-box { border-color: #8caedb; background: #fff; }
.search-box svg { color: #1554b3; }
.search-box input::placeholder { color: #566c86; }
select { border-color: #a9bfdc; }
.brand-chip { color: #405976; border-color: #bed0e8; background: #f1f6fe; }
.brand-chip.active { color: #fff; background: #1554b3; border-color: #1554b3; }
.brand-name { color: #1452a5; }
.menu-card, .summary-card, .meal-item, .compare-scroll { border-color: #b3c8e3; }
.card-category, .card-category span { color: #536880; }
.nutrition .salt dd { color: #1554b3; }
.compare-button { color: #1554b3; border-color: #86a8db; }
.compare-button.selected { background: #1554b3; border-color: #1554b3; color: #fff; }
.add-button { background: #1554b3; border-color: #1554b3; color: #fff; }
.add-button:hover { background: #0c3d8b; }
.button.secondary { border-color: #8caedb; }
.source-details { border-color: #bdcce0; }
.unknown, .unknown-note, .partial-note { color: #795000; }
.unknown-note { background: #fff0c6; }
.goal-picker button { color: #164784; background: #e9f1ff; border-color: #a6bfe4; }
.salt-fill { background: #1554b3; }
.salt-meter { background: #e0e9f6; }
.meter-mark { background: #718cb2; }
.uncertain .salt-fill { background: repeating-linear-gradient(135deg,#9f7522 0,#9f7522 4px,#e3c67e 4px,#e3c67e 7px); }
.goal-status { color: #0d438b; background: #e6f0ff; }
.goal-status.over { background: #ffe9c5; color: #795000; }
.uncertain-badge, .summary-demo { color: #674300; background: #fff0c6; }
.other-totals>div { border-color: #dce5f3; }
.quantity button { color: #1554b3; background: #e7f0ff; }
.compare-table thead { background: #e5efff; }
.compare-table th, .compare-table td { border-color: #c3d3e8; }
.empty-state { background: #eaf2ff; border-color: #92b2df; }
.empty-state>svg, .meal-hint svg { color: #1554b3; }
.clear-button, .remove-button { color: #803c16; border-color: #cd9774; background: #fff4e9; }
.toast { background: #123c7d; }
.how-to { background: #fff; border: 1px solid #adc7eb; border-left: 5px solid #1554b3; border-radius: 12px; padding: 21px 24px 10px; margin: 0 0 26px; }
.how-to-heading { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.how-to-heading h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; color: #124c9d; }
.how-to-heading>span { font-size: 12px; color: var(--muted); }
.how-to-steps { list-style: none; padding: 0; margin: 17px 0 12px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.how-to-steps li { display: flex; align-items: start; gap: 10px; }
.step-number { background: #1554b3; color: #fff; border-radius: 50%; min-width: 25px; height: 25px; text-align: center; font-size: 13px; line-height: 25px; font-weight: 650; }
.how-to-steps h3 { font-size: 13px; margin-bottom: 5px; }
.how-to-steps p { font-size: 12px; line-height: 1.8; color: #415c7a; }
.how-to-more { border-top: 1px solid #d4e0f1; font-size: 12px; color: #395775; }
.how-to-more summary { cursor: pointer; padding: 11px 0; min-height: 44px; font-weight: 600; }
.how-to-more>div { padding-bottom: 12px; }
.how-to-more p+p { margin-top: 10px; }
@media (max-width: 1020px) { .wordmark { font-size: 17px; } .header-note { font-size: 10px; } }
@media (max-width: 760px) {
  .site-header { padding: 17px 18px; margin-bottom: 16px; }
  .wordmark { font-size: 16px; gap: 9px; }
  .wordmark small { font-size: 9px; }
  .brand-icon { width: 34px; height: 34px; flex-shrink: 0; }
  .header-note { display: none; }
  .prototype-banner { font-size: 11px; }
  .market-hero h1 { font-size: 28px; }
  .app-description h3 { font-size: 24px; }
  .app-description .app-lead { font-size: 18px; }
  .app-title { display: block; padding-top: 12px; }
  .app-title h1 { font-size: 25px; line-height: 1.6; gap: 7px; }
  .app-title .app-name { width: 100%; }
  .app-title .app-name>span { display: block; }
  .app-title p { max-width: none; font-size: 13px; margin-top: 11px; }
  .title-icon { display: none; }
  .app-tabs { border-color: #9eb8de; }
  .app-tabs>a { font-size: 11px; }
  .app-tabs>a[aria-current] { background: #1554b3; color: #fff; border-radius: 8px; }
  .app-tabs .count { background: #ffc94a; color: #183052; font-weight: 700; }
  .how-to { padding: 16px 16px 6px; margin-bottom: 22px; border-left-width: 4px; }
  .how-to-heading { gap: 4px; flex-direction: column; align-items: start; }
  .how-to-heading h2 { font-size: 15px; }
  .how-to-heading>span { margin-left: 27px; font-size: 11px; }
  .how-to-steps { grid-template-columns: 1fr; gap: 14px; margin: 17px 0; }
  .how-to-steps h3 { font-size: 13px; margin-bottom: 2px; }
  .how-to-steps p { font-size: 12px; }
  .how-to-more { font-size: 12px; }
  .summary-note, .result-note, .source-details>div { color: #435b77; }
}
@media (max-width: 360px) { .wordmark { font-size: 14px; } .app-title h1 { font-size: 23px; } }

/* 赤は栄養値の安全・危険判定には使用しない。 */
:root { --accent-red: #c32e40; --accent-red-dark: #a71f30; --accent-rose: #fff0f2; }
.brand-icon, .app-icon { background: var(--accent-red); color: #fff; }
.app-title .eyebrow, .app-directory .eyebrow { color: var(--accent-red-dark); }
.app-directory .section-heading h2 { border-left: 4px solid var(--accent-red); padding-left: 12px; }
.title-icon { color: var(--accent-red); background: #ffe3e8; }
.title-badge { color: var(--accent-red-dark); border-color: #d7838d; background: var(--accent-rose); }
.how-to { border-left-color: var(--accent-red); }
.how-to-heading h2 { color: var(--accent-red-dark); }
.step-number { background: var(--accent-red); }
.app-tabs .count { background: var(--accent-red); color: #fff; }
.clear-button, .remove-button { color: var(--accent-red-dark); border-color: #d4818b; background: var(--accent-rose); }
.clear-button:hover:enabled, .remove-button:hover { background: #ffdee4; }

/* 選んだ食塩目標との差を表示する。疾患別の安全・危険判定ではない。 */
.goal-status.over-orange { color: #8c4000; background: #fff0d9; border: 2px solid #cd650b; }
.goal-status.over-red { color: #a1192d; background: #ffebef; border: 2px solid #c32e40; }
.goal-status.over-orange strong, .goal-status.over-red strong { font-weight: 800; font-size: 14px; }
.salt-total.over-orange>div { color: #9a4500; font-weight: 750; }
.salt-total.over-red>div { color: #b01e34; font-weight: 750; }
.salt-meter.over-orange .salt-fill { background: #cd650b; }
.salt-meter.over-red .salt-fill { background: #c32e40; }
.salt-meter.uncertain.over-orange .salt-fill { background: repeating-linear-gradient(135deg,#b95100 0,#b95100 4px,#ffc787 4px,#ffc787 7px); }
.salt-meter.uncertain.over-red .salt-fill { background: repeating-linear-gradient(135deg,#c32e40 0,#c32e40 4px,#ffadb9 4px,#ffadb9 7px); }
.goal-status.over-orange, .goal-status.over-red, .goal-status.within-goal { display: flex; align-items: center; gap: 10px; padding: 10px; }
.reaction-avatar { display: block; width: 68px; height: 68px; flex: 0 0 68px; overflow: hidden; border-radius: 50%; background: #fff; }
.goal-status .reaction-character { display: block; width: 68px; height: 68px; object-fit: cover; }
.goal-status .smile-character { transform: scale(1.65); transform-origin: 50% 12%; }
.goal-status strong { min-width: 0; overflow-wrap: anywhere; line-height: 1.8; }
.assumption-tag { display: inline-block; font-size: 10px; line-height: 1.7; font-weight: 650; padding: 2px 6px; border: 1px solid #b89150; border-radius: 5px; color: #6f490a; background: #fff2d5; }
.assumption-note { color: #715222; font-size: 11px; line-height: 1.8; padding: 8px 10px; background: #fff5e1; border-radius: 6px; margin: -4px 0 15px; }
.official-pill { display: inline-block; font-size: 10px; font-weight: 650; line-height: 1.7; padding: 2px 7px; border: 1px solid #8babd8; color: #12478d; background: #e8f1ff; border-radius: 5px; white-space: nowrap; }
.provenance { display: flex; flex-wrap: wrap; gap: 1px 9px; font-size: 10px; line-height: 1.8; margin: 10px 0 0; color: #4b617d; }
.provenance a { text-decoration: underline; text-underline-offset: 2px; }
.provenance a:first-child { width: 100%; }
.demo-warning { color: #805215; font-size: 10px; line-height: 1.8; padding: 8px; background: #fff3d4; border-radius: 6px; margin-top: 9px; }
.filter-row { grid-template-columns: 1.4fr 1fr 1fr; }
.demo-toggle { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #56677c; margin-top: 13px; cursor: pointer; min-height: 34px; }
.demo-toggle input { width: 17px; height: 17px; accent-color: #1554b3; flex-shrink: 0; }
.summary-source { font-size: 10px; color: #345985; background: #eaf2fe; border-radius: 6px; padding: 8px; margin-top: 14px; }
.subtotal-note { font-size: 11px; color: #734e17; padding: 10px; background: #fff3dc; border-radius: 6px; margin-top: 10px; line-height: 1.8; }
.source-details a { text-decoration: underline; text-underline-offset: 2px; }
.card-category { align-items: start; }
.compare-table .provenance { font-weight: 400; font-size: 10px; }
@media (max-width: 1020px) { .filter-row { grid-template-columns: 1fr 1fr; } .filter-row>label:first-child { grid-column: 1/-1; } }
@media (max-width: 760px) { .provenance { font-size: 11px; } .demo-warning,.demo-toggle,.summary-source { font-size: 11px; } .menu-card h3 { font-size: 18px; } }

/* 元絵の特徴を保つポーズ変更画像を、白い面に並べて表示する。 */
.market-hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); align-items: center; gap: 35px; }
.hero-copy { min-width: 0; }
.hero-friends { background: #fff; border-radius: 22px; padding: 20px 16px 16px; box-shadow: 0 8px 0 #0b3b893b; }
.hero-friends>p { color: #173e75; margin: 0 0 13px; text-align: center; font-size: 13px; font-weight: 650; }
.friend-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.friend-pair figure { margin: 0; text-align: center; min-width: 0; }
.friend-pair img { display: block; width: 100%; height: 215px; object-fit: contain; background: white; }
.friend-pair figcaption { display: inline-block; padding: 3px 18px; margin-top: 10px; border-radius: 20px; font-size: 12px; font-weight: 650; }
.jin-label { color: #fff; background: #1554b3; }
.zou-label { color: #533900; background: #ffda58; }
.how-to-heading { position: relative; padding-right: 130px; min-height: 65px; }
.guide-friends { position: absolute; display: flex; align-items: center; right: 0; top: -5px; gap: 4px; }
.guide-friends img { display: block; width: 60px; height: 70px; object-fit: contain; background: white; }
@media (min-width: 761px) and (max-width: 1020px) {
  .market-hero { padding: 35px; gap: 24px; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
  .market-hero h1 { font-size: 29px; }
  .market-hero p { max-width: none; }
  .friend-pair img { height: 175px; }
  .hero-friends { padding: 16px 10px 14px; }
  .hero-friends>p { font-size: 11px; }
  .friend-pair figcaption { font-size: 11px; padding: 3px 14px; }
}
@media (max-width: 760px) {
  .market-hero { grid-template-columns: 1fr; gap: 24px; padding: 28px 23px; }
  .hero-friends { padding: 14px 14px 13px; border-radius: 16px; }
  .hero-friends>p { font-size: 12px; margin-bottom: 5px; }
  .friend-pair img { height: 150px; }
  .friend-pair figcaption { font-size: 11px; margin-top: 6px; padding: 2px 15px; }
  .how-to-heading { min-height: 63px; padding-right: 105px; justify-content: center; }
  .how-to-heading>span { margin-left: 0; max-width: 180px; line-height: 1.7; }
  .guide-friends { top: -2px; gap: 2px; }
  .guide-friends img { width: 47px; height: 63px; }
}

/* 商品の情報を詰め、操作ボタンと出典は残す。 */
.filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filter-row > label:first-child { grid-column: auto; }
.salt-filter-note { font-size: 11px; line-height: 1.5; color: #4b617d; margin: 9px 0 0; }
.menu-card { padding: 16px; }
.menu-card .card-top { margin-bottom: 3px; }
.menu-card h3 { margin: 0; line-height: 1.4; }
.menu-card .card-category { margin-top: 3px; line-height: 1.4; }
.menu-card .provenance { margin-top: 5px; line-height: 1.5; }
.menu-card .configuration { margin-top: 7px; gap: 8px; }
.menu-card .configuration:empty { display: none; }
.menu-card .configuration label { gap: 2px; }
.menu-card .nutrition { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; margin: 10px 0 0; }
.menu-card .nutrition dt { font-size: 10px; line-height: 1.5; white-space: nowrap; }
.menu-card .nutrition dd { font-size: 22px; line-height: 1.3; margin-top: 2px; }
.menu-card .nutrition dd small { font-size: 10px; margin-left: 2px; }
.menu-card .nutrition .unknown { font-size: 16px; }
.menu-card .source-details { margin: 3px 0; }
.menu-card .source-details summary { padding: 7px 0; min-height: 32px; font-size: 11px; line-height: 1.5; }
.menu-card .card-actions { margin-top: 0; padding-top: 0; gap: 8px; }
.menu-card .card-actions .button { min-height: 44px; padding: 8px; }
@media (max-width: 760px) {
  .menu-grid { gap: 10px; }
  .menu-card { padding: 12px; }
  .menu-card h3 { font-size: 17px; }
  .menu-card .brand-name { font-size: 11px; }
  .menu-card .card-category { font-size: 11px; }
  .menu-card .provenance { font-size: 10px; gap: 0 8px; }
  .menu-card .configuration select { font-size: 12px; min-height: 44px; padding: 6px; }
  .menu-card .nutrition dd { font-size: 21px; }
  .menu-card .nutrition .assumption-tag { font-size: 10px; padding: 1px 3px; white-space: normal; }
  .menu-card .demo-warning { padding: 5px 7px; margin-top: 5px; line-height: 1.5; }
}

.menu-card .card-provenance a:first-child { width: auto; }

.provided-pill { display: inline-block; border: 1px solid #ad7c2d; border-radius: 5px; padding: 3px 7px; background: #fff5db; color: #714a0a; font-size: 11px; font-weight: 600; white-space: nowrap; }

.goal-intro { font-size: 12.5px; line-height: 1.8; color: #1f3d66; background: #e8f0fc; border-radius: 8px; padding: 9px 12px; margin: 0 0 12px; }
.goal-intro strong { color: #104798; }

/* カリウム早見カード(アプリ集)の見本表示：0〜1000mgのメーターに500・667mgの目盛り */
.potassium-card { margin-top: 24px; }
.preview-meter.potassium { position: relative; }
.preview-meter.potassium b { position: absolute; top: -4px; width: 2px; height: 17px; background: #718cb2; }
.preview-scale.potassium { position: relative; height: 16px; display: block; }
.preview-scale.potassium span { position: absolute; top: 0; transform: translateX(-50%); }
.preview-scale.potassium span:first-child { transform: none; }
.preview-scale.potassium span:last-child { transform: none; }

/* 見本表示：500mgを超えた例(超過100〜299mg＝オレンジ＋渋い顔のじんくん) */
.preview-card.over-orange .preview-salt strong { color: #9a4500; }
.preview-card.over-orange .preview-meter.potassium i { background: #cd650b; }
.preview-status { display: flex; align-items: center; gap: 10px; margin: 14px 0 22px; padding: 8px 10px; border: 2px solid #e8a566; border-radius: 10px; background: #fff1e0; color: #9a4500; font-size: 11px; }
.preview-status img { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #fff; }

/* 外食アプリ内の「収録データの出典・確認日」(旧アプリ集トップの注意書きを移動) */
.data-note { margin: 4px 0 16px; padding: 10px 14px; border: 1px solid #b3c8e3; border-radius: 12px; background: #f1f6fe; color: #354e70; font-size: 12px; line-height: 1.8; }
.data-note summary { cursor: pointer; font-weight: 600; color: #164784; }
.data-note p { margin: 8px 0 0; }