/* 절약 시간 계산기 전용 CSS (2026-10-15). 2패널(습관 줄 목록 | 결과) + 시간 칸 + 목표 카드. 공용 부품은 assets/v2.css
   습관 색은 accent 대신 잉크 농도 5단계(6번째부터는 같은 농도 + 빗금). accent 는 기간 안에 닿는 가장 큰 목표 카드 한 곳.
   움직임(R45): 몫 막대는 폭 전환, 시간 칸은 새로 생긴 칸이 차례로 차오름. reduced-motion 이면 정지 */
.ts{container:tsw / inline-size}
.ts [hidden]{display:none !important}
.ts-c0{--c:color-mix(in srgb,var(--ink) 86%,var(--paper))}
.ts-c1,.ts-c6{--c:color-mix(in srgb,var(--ink) 64%,var(--paper))}
.ts-c2,.ts-c7{--c:color-mix(in srgb,var(--ink) 46%,var(--paper))}
.ts-c3,.ts-c8{--c:color-mix(in srgb,var(--ink) 32%,var(--paper))}
.ts-c4,.ts-c9{--c:color-mix(in srgb,var(--ink) 20%,var(--paper))}
.ts-c5{--c:color-mix(in srgb,var(--ink) 86%,var(--paper))}
.ts-c5,.ts-c6,.ts-c7,.ts-c8,.ts-c9{background-image:repeating-linear-gradient(135deg,transparent 0 3px,color-mix(in srgb,var(--paper) 62%,transparent) 3px 5px)}
.ts-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.ts-in{padding:16px 18px 18px;min-width:0}
.ts-listh{display:flex;align-items:baseline;gap:8px;margin:0 0 8px}
.ts-extag{font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--ink)}
.ts-extag::before{content:"· ";color:var(--muted)}
/* 습관 줄: 기본 두 줄(색 | 이름 | 지우기 / 분 | 주 며칠), 폼이 넓으면 한 줄 */
.ts-colh{display:none}
.ts-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ts-row{display:grid;grid-template-columns:10px minmax(0,1fr) minmax(0,1fr) 34px;grid-template-areas:"sw nm nm del" ". mn dy .";gap:6px;align-items:center;padding:0 0 8px;border-bottom:1px solid var(--soft)}
.ts-row:last-child{padding-bottom:0;border-bottom:0}
.ts-sw{grid-area:sw;display:block;width:10px;height:10px;border-radius:2px;background-color:var(--c)}
.ts-name{grid-area:nm}
.ts-name input{text-align:left;font-size:14.5px}
.ts-min{grid-area:mn}
.ts-min.is-invalid{border-color:var(--accent)}
.ts-sel{grid-area:dy;display:block;width:100%;min-width:0;height:var(--v2-ctl,42px);padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink)}
.ts-sel:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.ts-del{grid-area:del;height:var(--v2-ctl,42px);width:34px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.ts-del:hover{color:var(--ink);border-color:var(--ink)}
.ts-del:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@container v2in (min-width:540px){
  .ts-colh{display:grid;grid-template-columns:10px minmax(0,1.6fr) minmax(0,.9fr) minmax(0,.9fr) 34px;gap:6px;margin:0 0 5px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted)}
  .ts-row{grid-template-columns:10px minmax(0,1.6fr) minmax(0,.9fr) minmax(0,.9fr) 34px;grid-template-areas:"sw nm mn dy del";padding:0;border-bottom:0}
}
.ts-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0}
.ts-hint{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.ts-seg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:16px 0 0}
.ts-seg .v2-label{flex:0 0 auto}
.ts-acts{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 0}
.ts-save{margin:14px 0 0}
.ts-help{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--muted)}
/* 결과 */
.ts-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column}
.ts-out > .v2-label{display:block;margin-bottom:6px}
.ts-out .v2-big{flex-wrap:wrap}
.ts-out .v2-sub{overflow-wrap:anywhere}
.ts-bar{display:flex;gap:2px;height:10px;margin:14px 0 0;border-radius:5px;overflow:hidden;background:var(--soft)}
.ts-bar i{display:block;height:100%;background-color:var(--c);transition:width .6s cubic-bezier(.22,1,.36,1)}
.ts-rows{margin-top:12px}
.ts-rows li span{min-width:0}
.ts-rows li span em{display:block;font-style:normal;font-size:11.5px;color:var(--muted)}
.ts-rows li b{text-align:right;flex:0 0 auto}
.ts-outfoot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--soft)}
.ts-outfoot .v2-status{flex:1 1 160px;overflow-wrap:anywhere}
/* 시간 칸·목표 카드 */
.ts-box{padding:14px 18px 18px;border-top:1px solid var(--soft);min-width:0}
.ts-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;margin:0 0 10px}
.ts-headhint{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}
.ts-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(13px,1fr));gap:3px}
.ts-cells i{display:block;aspect-ratio:1;border-radius:2px;background-color:var(--c);animation:ts-in .45s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--k,0) * 8ms)}
.ts-cells i.is-part{background-image:linear-gradient(90deg,transparent calc(var(--f,1) * 100%),var(--soft) 0)}
@keyframes ts-in{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.ts-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--muted)}
.ts-legend{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:5px 18px;font-family:var(--sans);font-size:12.5px}
.ts-legend li{display:flex;align-items:center;gap:6px;min-width:0}
.ts-legend li i{flex:0 0 auto;width:12px;height:12px;border-radius:2px;background-color:var(--c)}
.ts-legend li span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.ts-legend li b{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.ts-ms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px}
.ts-ms li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums}
.ts-ms li b{font-size:12px;font-weight:700;color:var(--muted)}
.ts-ms li span{font-size:14.5px;font-weight:700;color:var(--ink)}
.ts-ms li em{font-style:normal;font-size:12px;color:var(--muted)}
.ts-ms li em small{display:block;font-size:11.5px}
.ts-ms li.is-top{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.ts-ms li.is-top b{color:var(--accent)}
.ts-ms li.is-out{background:none;border-style:dashed}
@media (prefers-reduced-motion:reduce){ .ts-bar i{transition:none !important} .ts-cells i{animation:none !important} }
@container tsw (max-width:620px){
  .ts-grid{grid-template-columns:minmax(0,1fr)}
  .ts-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@container tsw (max-width:400px){ .ts-in,.ts-out,.ts-box{padding-left:14px;padding-right:14px} .ts-ms{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }