/* 여행 경비 계산기 전용 CSS (2026-10-09). 기간·인원·환율·항목 줄·결과·비율 막대·예산 막대 tb-*. 공용 부품은 assets/v2.css */
.tb-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.tb-set{display:flex;flex-direction:column;gap:12px;padding:16px 18px;min-width:0}
.tb-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tb-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px 12px}
.tb-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.tb-set .v2-status:empty{display:none}
.tb-fx>.v2-label{display:block;margin-bottom:5px}
.tb-fx-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.tb-fx-1,.tb-fx-eq{font-family:var(--sans);font-weight:700;color:var(--muted)}
.tb-code{width:84px;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:700;text-transform:uppercase}
.tb-code:focus-visible,.tb-items input:focus-visible,.tb-items select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tb-rate{flex:1 1 140px;min-width:120px}
.tb-items-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--soft)}
.tb-items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tb-items li{display:grid;grid-template-columns:minmax(0,1fr) minmax(104px,1.25fr) 60px minmax(0,.9fr) 30px;gap:6px;align-items:center}
.tb-items .tb-name,.tb-items select{height:36px;min-width:0;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:13px}
.tb-items .tb-name{font-weight:650}
.tb-items .tb-amt input{height:34px;padding:0 8px;font-size:14px} /* 천 단위 쉼표가 든 값이 잘리지 않게 */
.tb-del{height:36px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--muted);font-size:16px;cursor:pointer}
.tb-del:hover{background:var(--btn);color:var(--ink)}
.tb-subt{grid-column:1/-1;margin-top:-2px;font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tb-subt:empty{display:none}
.tb-link{align-self:flex-start;border:0;background:none;padding:2px 0;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);text-decoration:underline;cursor:pointer}
.tb-link[hidden]{display:none}
.tb-head{padding:16px 18px;min-width:0;border-left:1px solid var(--soft)}
.tb-head>.v2-label{display:block;margin-bottom:6px}
.tb-big{margin:0;font-family:var(--sans);font-size:40px;font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tb-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)}
.tb-grid b{display:block;margin-top:2px;font-family:var(--sans);font-size:16px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tb-budget{margin-top:14px;padding-top:12px;border-top:1px solid var(--soft)}
.tb-budget[hidden]{display:none}
.tb-meter{height:12px;border-radius:6px;background:var(--soft);overflow:hidden;margin-bottom:6px}
.tb-meter i{display:block;height:100%;width:0;background:var(--line);border-radius:6px;transition:width .5s var(--ease,ease)}
.tb-meter i.is-over{background:var(--accent)}
.tb-box{padding:14px 18px 16px;min-width:0;border-bottom:1px solid var(--soft)}
.tb-box>.v2-label{display:block;margin-bottom:10px}
/* 항목 비율: 누적 막대 + 항목별 막대, 너비 전환(R45) */
.tb-stack{display:flex;height:18px;border-radius:9px;overflow:hidden;background:var(--soft);margin-bottom:12px}
.tb-stack b{display:block;height:100%;width:0;transition:width .45s var(--ease,ease)}
.tb-bars{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:4px 20px}
.tb-bars li{display:grid;grid-template-columns:minmax(0,110px) minmax(0,1fr) auto;gap:8px;align-items:center;font-family:var(--sans);font-size:12.5px;color:var(--ink)}
.tb-bars .nm{display:flex;align-items:center;gap:6px;min-width:0}
.tb-bars .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-bars .nm i{flex:0 0 10px;height:10px;border-radius:2px}
.tb-bars .trk{height:10px;border-radius:5px;background:var(--soft);overflow:hidden}
.tb-bars .trk b{display:block;height:100%;width:0;border-radius:5px;transition:width .45s var(--ease,ease)}
.tb-bars .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.tb-work .c0{background:var(--accent)}
.tb-work .c1{background:color-mix(in srgb,var(--accent) 55%,var(--ink))}
.tb-work .c2{background:color-mix(in srgb,var(--accent) 45%,var(--paper))}
.tb-work .c3{background:color-mix(in srgb,var(--ink) 70%,var(--paper))}
.tb-work .c4{background:color-mix(in srgb,var(--ink) 40%,var(--paper))}
.tb-work .c5{background:var(--line)}
.tb-work .c6{background:color-mix(in srgb,var(--accent) 25%,var(--ink))}
.tb-work .c7{background:color-mix(in srgb,var(--accent) 20%,var(--paper))}
.tb-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border-bottom:0}
.tb-btns{display:flex;flex-wrap:wrap;gap:6px}
@media (prefers-reduced-motion:reduce){ .tb-stack b,.tb-bars .trk b,.tb-meter i{transition:none} }
@media (max-width:720px){
  .tb-top{display:flex;flex-direction:column}
  .tb-head{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@media (max-width:560px){
  .tb-items li{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr) 30px}
  .tb-items .tb-name{grid-column:1/4}
  .tb-items .tb-del{grid-column:4;grid-row:1}
  .tb-items .tb-basis{grid-column:3/5}
}
@media (max-width:480px){
  .tb-set,.tb-head,.tb-box{padding-left:12px;padding-right:12px}
  .tb-big{font-size:32px}
  .tb-row3{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
}