/* 습관 마스터 계산기 전용 CSS (2026-10-14). 입력(습관 목록·이름·시작한 날·종류·횟수·저장)·결과(진행 막대)·습관 달력(체크 칸)·자동화 곡선(선 그리기·띠) hm-*. 공용 부품은 assets/v2.css */
.hm-work{container:hm / inline-size} /* 두 열 여부는 툴 폭으로 */
.hm-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.hm-set{display:flex;flex-direction:column;gap:12px;padding:16px 18px;min-width:0}
.hm-set .v2-status:empty{display:none}
.hm-list>.v2-label,.hm-segf>.v2-label{display:block;margin-bottom:5px}
.hm-list[hidden]{display:none}
.hm-tabs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.hm-tabs button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-height:var(--v2-ctl,42px);max-width:200px;padding:4px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);text-align:left;cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.hm-tabs button:hover{background:var(--btn)}
.hm-tabs button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-wash)}
.hm-tabs button b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700}
.hm-tabs button small{font-size:11px;color:var(--muted);white-space:nowrap}
.hm-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px 12px}
.hm-row .v2-input input{text-align:left} /* 습관 이름은 글자 칸 */
.hm-date{box-sizing:border-box;width:100%;min-width:0;height:var(--v2-ctl,42px);padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums}
.hm-date:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hm-seg{display:flex;flex-wrap:wrap}
.hm-seg button{flex:1 1 auto;min-height:var(--v2-ctl,42px);height:auto}
.hm-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.hm-help:empty{display:none}
.hm-btns{display:flex;flex-wrap:wrap;gap:6px}
.hm-head{padding:16px 18px;min-width:0;border-left:1px solid var(--soft)}
.hm-head>.v2-label{display:block;margin-bottom:8px;overflow-wrap:anywhere}
.hm-big{font-size:34px;line-height:1.15;overflow-wrap:anywhere}
.hm-head .v2-sub{margin-bottom:12px}
/* 진행 막대: 오늘까지 채워짐(R45), 50%·21일 눈금 */
.hm-prog{margin:4px 0 14px}
.hm-ptrk{position:relative;height:12px;border-radius:6px;background:var(--soft);overflow:hidden}
.hm-ptrk b{display:block;height:100%;width:0;border-radius:6px;background:var(--accent);transition:width .7s cubic-bezier(.22,1,.36,1)}
.hm-ptrk i{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--paper);opacity:.85}
.hm-ptrk i[hidden]{display:none}
.hm-pcap{display:flex;justify-content:space-between;gap:10px;margin-top:5px;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.hm-pcap span:last-child{color:var(--muted);text-align:right}
.hm-rows li{flex-wrap:wrap}
.hm-rows li b{margin-left:auto;text-align:right} /* 긴 값은 다음 줄 오른쪽으로 */
.hm-box{padding:14px 18px 16px;min-width:0;border-bottom:1px solid var(--soft)}
.hm-box:last-of-type{border-bottom:0}
.hm-box>.v2-label{display:block;margin-bottom:10px}
.hm-box>.hm-help{margin-top:8px}
.hm-boxh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:10px}
.hm-calstat{font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
/* 습관 달력: 7열, 지난 날·오늘 칸만 누름. 체크하면 채움이 번짐(R45) */
.hm-cal{display:grid;gap:4px;max-width:560px}
.hm-cal [role="row"]{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.hm-wh span{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--muted);text-align:center}
.hm-c{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:38px;padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums;cursor:pointer;overflow:hidden;isolation:isolate}
span.hm-c.is-out{border:0;background:none;cursor:default}
.hm-c::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:scale(0);border-radius:50%;transition:transform .32s cubic-bezier(.22,1,.36,1),border-radius .32s}
.hm-c.is-done{color:var(--paper);border-color:var(--accent)}
.hm-c.is-done::before{transform:scale(1.5);border-radius:0}
.hm-c.is-miss{background:repeating-linear-gradient(135deg,var(--paper) 0 5px,var(--muted) 5px 6.5px);border-color:var(--line);color:var(--ink)} /* 빗금은 --muted(체크 안 한 칸과 구분, 검토 R8·2차 N10) */
.hm-c.is-future{cursor:default;color:var(--muted);background:var(--wash);border-style:dashed}
.hm-c.is-goal{border-color:var(--accent);border-width:2px}
.hm-c.is-today{outline:2px solid var(--ink);outline-offset:1px}
.hm-c:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hm-c:not(.is-future):not(.is-done):hover{background:var(--btn)}
.hm-c small{position:absolute;top:1px;left:4px;font-size:9px;font-weight:700;color:var(--muted);line-height:1.2}
.hm-c.is-done small{color:var(--paper)}
.hm-c.is-miss small{color:var(--ink)} /* 빗금(--muted) 위 달 글자 */
.hm-c i{position:absolute;top:1px;right:3px;font-style:normal;font-size:9px;font-weight:800;color:var(--accent);line-height:1.2}
.hm-c.is-done i{color:var(--paper)}
.hm-keys{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.hm-keys li{display:flex;align-items:center;gap:6px}
.hm-keys i{display:inline-block;width:14px;height:10px;border-radius:2px;box-sizing:border-box}
.hm-keys .k-done{background:var(--accent)}
.hm-keys .k-miss{background:repeating-linear-gradient(135deg,var(--paper) 0 2px,var(--muted) 2px 3.5px);border:1px solid var(--line)}
.hm-keys .k-today{border:2px solid var(--ink)}
.hm-keys .k-goal{border:2px solid var(--accent)}
.hm-keys .k-cur{height:0;border-top:3px solid var(--accent)}
.hm-keys .k-band{background:var(--accent-wash);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.hm-keys .k-ext{height:0;border-top:1.5px dashed var(--muted)}
.hm-keys .k-stage{background:linear-gradient(90deg,var(--line) 0 25%,color-mix(in srgb,var(--accent) 35%,var(--soft)) 25% 50%,color-mix(in srgb,var(--accent) 65%,var(--soft)) 50% 75%,var(--accent) 75%)}
/* 자동화 곡선: 360px 에서는 줄여 그리지 않고 가로 스크롤(R14) */
.hm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hm-chart{position:relative;min-width:600px;border-radius:var(--radius);outline:none;touch-action:pan-x pan-y}
.hm-chart:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hm-chart svg{display:block;overflow:visible;font-family:var(--sans)}
.hm-chart .gr{stroke:var(--soft);stroke-width:1}
.hm-chart .ax{fill:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums}
.hm-chart .axt{fill:var(--muted);font-size:10.5px;font-weight:600}
.hm-chart path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.hm-chart .band{fill:var(--accent-wash);stroke:color-mix(in srgb,var(--accent) 30%,transparent);stroke-width:1}
.hm-chart .ext{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 4;opacity:.75}
.hm-chart .extt{fill:var(--muted);font-size:10.5px;font-weight:600}
.hm-chart .cur{stroke:var(--accent);stroke-width:3}
.hm-chart .cur.draw{animation:hmDraw 1.1s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes hmDraw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.hm-chart .mk21{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
.hm-chart .mk95{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 3}
.hm-chart .mkt{fill:var(--muted);font-size:10.5px;font-weight:700}
.hm-chart .mkt.b{fill:var(--ink)}
.hm-chart .stg.s0{fill:var(--line)}
.hm-chart .stg.s1{fill:color-mix(in srgb,var(--accent) 35%,var(--soft))}
.hm-chart .stg.s2{fill:color-mix(in srgb,var(--accent) 65%,var(--soft))}
.hm-chart .stg.s3{fill:var(--accent)}
.hm-chart .stgt{fill:var(--ink);font-size:10.5px;font-weight:650}
.hm-chart .guide{stroke:var(--line);stroke-width:1}
.hm-chart .now{fill:var(--accent);stroke:var(--paper);stroke-width:2}
.hm-chart .nowt{fill:var(--ink);font-size:12px;font-weight:700}
.hm-chart .xh{stroke:var(--ink);stroke-width:1;opacity:.5}
.hm-chart .nowt,.hm-chart .mkt,.hm-chart .extt,.hm-chart .axt{paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}
.hm-tip{position:absolute;top:8px;z-index:2;min-width:150px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:0 4px 14px rgba(0,0,0,.12);font-family:var(--sans);font-size:12px;color:var(--muted);pointer-events:none}
.hm-tip b{display:block;margin-bottom:4px;color:var(--ink);font-size:11.5px}
.hm-tip span{display:block;white-space:nowrap;line-height:1.7}
.hm-narrow{display:none}
.hm-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@container hm (max-width:779px){
  .hm-top{grid-template-columns:minmax(0,1fr)}
  .hm-head{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@container hm (max-width:520px){
  .hm-row{grid-template-columns:minmax(0,1fr)}
  .hm-big{font-size:28px}
  .hm-set,.hm-head,.hm-box{padding-left:14px;padding-right:14px}
}
@container hm (max-width:640px){ .hm-narrow{display:block} }
@media (prefers-reduced-motion:reduce){ .hm-chart .cur.draw{animation:none;stroke-dasharray:none} .hm-ptrk b,.hm-c::before{transition:none} }