/* 체성분 기록 — 지붕 base.css 위에 이 앱 것만 (csv-look app.css 꼴: 줄 대신 면 색 · 쉬는 것엔 그림자 없음 · 단추 완전 원형 · 글자 다섯 단 12 · 14 · 16 · 20 · 32)
   색은 지붕 낱말(var)만 — 선 넷: 몸무게 --acc · 체지방률 --up · 골격근량 --ok-fg · 허리 --warn-fg */
.bd-top { padding-top: 16px; padding-bottom: 12px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bd-top h1 { margin: 0; font-size: 32px; line-height: 1.2; }
.sec-gap { margin-top: 16px; }
.bd-sp { flex: 1; }
.bd-store { margin: 0; font-size: 14px; color: var(--mut); min-height: 20px; }
.bd-store.warn { background: var(--warn-bg); color: var(--warn-fg); border-radius: 12px; padding: 8px 12px; }
.bd-rawp { margin: 0; flex-basis: 100%; }
.panel { padding: 16px; }

.bd-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.bd-form label { margin: 0; }
.bd-f span { display: block; margin-bottom: 4px; }
.bd-f input { font-size: 16px; }
.bd-u { color: var(--mut); font-weight: 400; }
.bd-more { grid-column: 1 / -1; }
.bd-more summary { list-style: none; width: fit-content; }
.bd-more summary::-webkit-details-marker { display: none; }
.bd-more summary svg { width: 18px; height: 18px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.bd-morebox { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; align-items: end; }
.bd-wide { grid-column: span 2; }
.bd-msg { grid-column: 1 / -1; min-height: 0; margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.bd-msg.bad { color: var(--up); }

.bd-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--band); color: var(--fg) !important; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; margin: 0 !important; }
.bd-pill:hover { background: var(--hover); }
.bd-pill[hidden] { display: none; }
.bd-pill:focus-visible, .bd-impl:focus-within { outline: 3px solid var(--acc); outline-offset: 2px; }
.bd-pill svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bd-impl input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; min-height: 0; padding: 0; }

/* 큰 숫자 칸 — 누르면 그 선이 켜진다 · 판정 색(좋음 · 나쁨)을 안 쓴다(조언 0 · L11) */
.bd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.bd-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 12px; border: 0; border-radius: 12px; background: var(--band); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.bd-tile:hover { background: var(--hover); }
.bd-tile.on { background: var(--fg); color: var(--bg); }
.bd-tile:focus-visible, .bd-chip:focus-visible, .bd-sum:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.bd-tn { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.bd-tn::before { content: ''; width: 10px; height: 10px; flex: 0 0 10px; border-radius: 999px; background: currentColor; opacity: .3; }
.bd-tile.on .bd-tn::before { opacity: 1; }
.bd-tile.k-w.on .bd-tn::before { background: #7db4ff; }
.bd-tile.k-f.on .bd-tn::before { background: #ff9a8f; }
.bd-tile.k-m.on .bd-tn::before { background: #79d79a; }
.bd-tile.k-waist.on .bd-tn::before { background: #f2c063; }
.bd-tv { font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-td { font-size: 12px; min-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.bd-rangebar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bd-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.bd-chip { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; }
.bd-chip:hover { background: var(--hover); }
.bd-chip.on { background: var(--band); font-weight: 700; }

.bd-chart { position: relative; border-radius: 12px; background: var(--band); overflow: hidden; }
.bd-chart svg { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.bd-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; pointer-events: none; }
.bd-empty[hidden] { display: none; }
.bd-ghost { fill: none; stroke: var(--mut); stroke-opacity: .35; stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.bd-line { fill: none; stroke-width: 1; stroke-opacity: .45; stroke-linejoin: round; }
.bd-trend { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bd-dot { stroke: none; fill-opacity: .55; }
.k-w .bd-line, .k-w .bd-trend { stroke: var(--acc); } .k-w .bd-dot, .k-w .bd-turn { fill: var(--acc); }
.k-f .bd-line, .k-f .bd-trend { stroke: var(--up); } .k-f .bd-dot, .k-f .bd-turn { fill: var(--up); }
.k-m .bd-line, .k-m .bd-trend { stroke: var(--ok-fg); } .k-m .bd-dot, .k-m .bd-turn { fill: var(--ok-fg); }
.k-waist .bd-line, .k-waist .bd-trend { stroke: var(--warn-fg); } .k-waist .bd-dot, .k-waist .bd-turn { fill: var(--warn-fg); }
.bd-turn { stroke: var(--card); stroke-width: 1.5; }
.bd-band { fill: var(--fg); fill-opacity: .05; pointer-events: none; }
.bd-foldg rect { fill: var(--card); fill-opacity: .8; }
.bd-wave { fill: none; stroke: var(--mut); stroke-width: 1; }
.bd-foldt { fill: var(--mut); font-size: 12px; pointer-events: none; }
.bd-axis { fill: var(--mut); font-size: 12px; pointer-events: none; }
.bd-cur { stroke: var(--fg); stroke-width: 1; opacity: .35; pointer-events: none; }
.bd-sel { stroke: var(--fg); stroke-width: 2; pointer-events: none; }
.bd-drag { fill: var(--acc); fill-opacity: .18; pointer-events: none; }
.bd-read, .bd-peak { margin: 8px 0 0; }
.bd-read:empty, .bd-peak:empty { display: none; }

.bd-daycard { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--band); }
.bd-daycard[hidden] { display: none; }
.bd-dhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; }
.bd-dvals { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 4px 0 0; }
.bd-dvals dt { font-size: 12px; color: var(--mut); }
.bd-dvals dd { margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bd-daycard p { margin: 8px 0 0; }
.bd-dnote { font-size: 14px; overflow-wrap: anywhere; }
.bd-dacts { display: flex; gap: 8px; margin-top: 12px; }
.bd-dacts .bd-pill { background: var(--card); }

.bd-toast { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.bd-toast p { margin: 0; }
.bd-toast p:empty { display: none; }
.bd-fold-sec { padding: 0 16px; }
.bd-fold-sec[open] { padding-bottom: 16px; }
.bd-sum { display: flex; align-items: center; gap: 8px; min-height: 56px; font-size: 16px; font-weight: 700; cursor: pointer; list-style: none; }
.bd-sum::-webkit-details-marker { display: none; }
.bd-sum svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.bd-sum .mut { font-weight: 400; font-size: 14px; }
.bd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bd-list li { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--band); min-width: 0; }
.bd-list .bd-day { flex: 0 0 auto; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.bd-list .bd-vals { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.bd-list .bd-note { display: block; color: var(--mut); font-size: 12px; overflow-wrap: anywhere; }
#bd-lempty[hidden], #bd-more[hidden] { display: none; }
#bd-more { margin-top: 12px !important; }

.bd-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bd-acts + .bd-msg { margin-top: 8px; }
.bd-ic { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: 0 0 48px; padding: 0; margin: 0 !important; border: 0; border-radius: 999px; background: var(--acc); color: var(--acc-fg) !important; cursor: pointer; font-size: 20px; text-decoration: none; }
.bd-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.bd-ic.ghost { background: var(--band); color: var(--fg) !important; }
.bd-ic.bd-sm { width: 44px; height: 44px; flex-basis: 44px; }
.bd-ic:disabled { opacity: .35; cursor: default; }
.bd-big { width: 56px; height: 56px; flex-basis: 56px; }
.bd-ic:hover svg { transform: scale(1.12); }
.bd-ic:hover { filter: brightness(1.08); }
.bd-ic:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.bd-ic::after, .bd-pill[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 0; transform: translateY(4px); white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 22px; padding: 0 10px; border-radius: 999px; background: var(--fg); color: var(--bg); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 3; }
.bd-ic:hover::after, .bd-ic:focus-visible::after, .bd-pill[data-tip]:hover::after, .bd-pill[data-tip]:focus-visible::after { opacity: 1; transform: translateY(0); }
.bd-acts .bd-sp + .bd-ic::after, .bd-rangebar .bd-ic::after, .bd-go .bd-ic::after, #bd-save::after { left: auto; right: 0; }
.bd-fb { display: flex; gap: 8px; margin-top: 8px; }
.bd-fb[hidden] { display: none; }
.bd-med { margin: 16px 0 8px; }
.bd-about { font-size: 12px; color: var(--mut); }
.bd-about summary { list-style: none; width: fit-content; }
.bd-about summary::-webkit-details-marker { display: none; }
.bd-about p { margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) { .bd-ic svg, .bd-ic::after, .bd-pill[data-tip]::after { transition: none; } }
@media (max-width: 600px) {
  .bd-top h1 { font-size: 20px; }
  .bd-form { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 8px; }
  .bd-fd input { padding: 0 8px; }
  .bd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-morebox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-wide { grid-column: 1 / -1; }
  .bd-pill[data-tip]::after { display: none; }   /* 낱말이 붙어 있어 말풍선이 없어도 읽힌다 · 긴 말풍선이 가로로 넘친다(영어 +4px 실측) */
}
@media (max-width: 480px) { .bd-axis, .bd-foldt { font-size: 22px; } }