/* 카페인 계산기 전용 CSS (2026-10-10). 입력·음료 추가·결과·한도 막대·몸속 곡선·기록 cf-*. 공용 부품은 assets/v2.css */
.cf-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.cf-set{display:flex;flex-direction:column;gap:12px;padding:16px 18px;min-width:0}
.cf-work .v2-f>span.v2-label{display:block;margin:0 0 5px}
.cf-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px 12px} /* 시각 칸 값이 잘리지 않게 좁으면 줄바꿈 */
.cf-time{display:block;width:100%;max-width:100%;height:var(--v2-ctl,42px);padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;box-sizing:border-box}
.cf-time:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cf-add>.v2-label{display:block;margin:0 0 5px}
.cf-addrow{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr) auto;gap:6px;margin-bottom:8px}
.cf-chips{margin-bottom:6px}
.cf-chips button{height:auto;min-height:30px;padding:4px 10px}
.cf-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.cf-help:empty{display:none}
.cf-btns{display:flex;flex-wrap:wrap;gap:6px}
.cf-set .v2-status:empty{display:none}
.cf-head{padding:16px 18px;min-width:0;border-left:1px solid var(--soft)}
.cf-head>.v2-label{display:block;margin-bottom:6px}
/* 한도 막대: 75% 이상 진하게, 넘으면 강조(R45 차오름) */
.cf-meter{height:12px;border-radius:6px;background:var(--soft);overflow:hidden;margin:8px 0 10px}
.cf-meter i{display:block;height:100%;width:0;background:var(--line);transition:width .6s var(--ease,ease)}
.cf-meter i.is-near{background:var(--muted)}
.cf-meter i.is-over{background:var(--accent)}
.cf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--soft)}
.cf-grid b{display:block;margin-top:2px;font-family:var(--sans);font-size:17px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.cf-box{padding:14px 18px 16px;min-width:0;border-bottom:1px solid var(--soft)}
.cf-box:last-of-type{border-bottom:0}
.cf-box>.v2-label{display:block;margin-bottom:8px}
.cf-box-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.cf-box-h b{font-family:var(--sans);font-size:13px;font-weight:750}
/* 몸속 카페인 곡선: 갱신 때 선이 그려짐 */
.cf-chart{position:relative;min-height:170px}
.cf-chart svg{display:block;overflow:visible}
.cf-chart .gr{stroke:var(--soft);stroke-width:1}
.cf-chart .ax{fill:var(--muted);font-family:var(--sans);font-size:10.5px}
.cf-chart .area{fill:var(--accent);opacity:.14}
.cf-chart .ln{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:cf-draw .9s var(--ease,ease)}
@keyframes cf-draw{from{stroke-dashoffset:1}}
.cf-chart .dot{fill:var(--paper);stroke:var(--accent);stroke-width:2}
.cf-chart .bed,.cf-chart .now{stroke-width:1.5;stroke-dasharray:4 3}
.cf-chart .bed{stroke:var(--ink)}
.cf-chart .now{stroke:var(--muted)}
.cf-chart .bedt,.cf-chart .nowt{font-family:var(--sans);font-size:10.5px;font-weight:700}
.cf-chart .bedt{fill:var(--ink)}
.cf-chart .nowt{fill:var(--muted)}
.cf-log{list-style:none;margin:0 0 10px;padding:0}
.cf-log li{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--soft);font-family:var(--sans);font-size:13px}
.cf-log li:first-child{border-top:0}
.cf-log li b{font-variant-numeric:tabular-nums}
.cf-log li span{min-width:0;color:var(--ink)}
.cf-log li .v2-btn{height:auto;min-height:28px;padding:2px 10px}
.cf-log li.none{display:block;color:var(--muted)}
@media (prefers-reduced-motion:reduce){ .cf-meter i{transition:none} .cf-chart .ln{animation:none} }
@media (max-width:720px){
  .cf-top{display:flex;flex-direction:column}
  .cf-head{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@media (max-width:480px){
  .cf-set,.cf-head,.cf-box{padding-left:12px;padding-right:12px}
  .cf-addrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cf-addrow .v2-btn{grid-column:1/-1}
}
