/* 스타포스 계산기 — party-split.css(입력 줄·결과 표) 위에 덧씀 */

.sf-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.sf-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sf-chips:empty{
  display: none;
}

.sf-select{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

.sf-select .mc-input{
  flex: none;
  width: auto;
  min-width: 92px;
  padding: 10px 12px;
  cursor: pointer;
}

.sf-arrow{
  color: var(--muted);
  font-weight: 700;
}

.sf-money{
  width: min(360px, 100%);
}

.sf-money .mc-input{
  padding: 10px 12px;
}

.ps-label .mc-hint{
  font-weight: 400;
  font-size: 13px;
}

/* ---------- 결과 ---------- */

.sf-summary{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sf-summary .ps-summary-box:last-child{
  border-top-color: var(--primary);
}

.sf-main-box{
  background: var(--primary-soft);
}

.sf-plan{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sf-plan-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--bg-sub);
  font-size: 14px;
  color: var(--title);
}

.sf-plan-name{
  color: var(--muted);
  font-weight: 700;
}

.sf-plan-tag,
.sf-tag{
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.sf-tag{
  margin-left: 6px;
  vertical-align: 1px;
}

.sf-tag.is-restore{
  background: rgba(102, 175, 90, 0.14);
  color: #4f9a44;
}

html[data-theme="dark"] .sf-tag.is-restore{
  color: var(--accent-green-hover);
}

.sf-sub{
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--title);
}

.sf-sub .mc-hint{
  font-weight: 400;
  font-size: 13px;
}

.sf-luck{
  display: grid;
  gap: 10px;
}

.sf-luck-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sf-luck-box{
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-sub);
  border-left: 4px solid var(--line);
}

.sf-luck-box span{
  font-size: 13px;
  color: var(--muted);
}

.sf-luck-box em{
  font-style: normal;
  font-size: 12px;
  opacity: 0.8;
}

.sf-luck-box strong{
  font-size: 18px;
  color: var(--title);
  word-break: keep-all;
}

.sf-luck-box.is-good{
  border-left-color: #66af5a;
}

.sf-luck-box.is-bad{
  border-left-color: #d0694a;
}

.sf-budget{
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--title);
  font-size: 15px;
}

.sf-step-table td:nth-child(2){
  white-space: nowrap;
}

.sf-step-table thead th:nth-child(3),
.sf-step-table thead th:nth-child(4),
.sf-rate-table thead th:not(:first-child){
  text-align: right;
}

.sf-rate-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.sf-rate-table th,
.sf-rate-table td{
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-soft);
  text-align: right;
}

.sf-rate-table th:first-child{
  text-align: left;
  color: var(--title);
}

.sf-rate-table thead th{
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 760px){
  .sf-summary{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-luck-row{
    grid-template-columns: 1fr;
  }
}

/* 좁은 화면 */
@media (max-width: 560px){
  .sf-summary .ps-summary-num{
    font-size: 17px;
  }

  .sf-rate-table th,
  .sf-rate-table td{
    padding: 5px 4px;
    font-size: 13px;
  }
}

/* ---------- 한 화면에 보이게: PC는 입력 | 결과 양옆 ---------- */

.sf-layout{
  display: grid;
  gap: 18px;
  align-items: start;
}

.sf-input{
  gap: 16px;
}

.sf-input .ps-step{
  gap: 8px;
}

.sf-input .mc-hint{
  font-size: 13px;
  line-height: 1.5;
}

.sf-pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sf-pair .mc-input{
  padding: 10px 12px;
}

.sf-input .mc-mode-btn{
  padding: 7px 13px;
}

.sf-input .ps-toggle,
.sf-input .ps-chip{
  padding: 7px 12px;
}

@media (min-width: 1000px){
  .sf-layout{
    grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  }

  .sf-layout .sf-summary{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sf-step-table th,
.sf-step-table td{
  padding-top: 7px;
  padding-bottom: 7px;
}

/* 휴대폰용 '1번 비용' 줄은 PC에선 숨김 */
.sf-cost-inline{
  display: none;
}

/* ---------- 아래 안내: 기본 접힘 ---------- */

.sf-guide{
  display: grid;
  gap: 0;
  padding-top: 6px;
  padding-bottom: 6px;
}

.sf-fold + .sf-fold{
  border-top: 1px solid var(--line-soft);
}

.sf-fold summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
}

.sf-fold summary::-webkit-details-marker{
  display: none;
}

.sf-fold summary .h2{
  margin: 0;
  font-size: 18px;
}

.sf-fold summary::after{
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s;
}

.sf-fold[open] summary::after{
  transform: rotate(-135deg) translateY(-3px);
}

.sf-fold[open]{
  padding-bottom: 14px;
}

/* ---------- 휴대폰: 별마다 비용표를 3칸 표로 짧게 ---------- */

@media (max-width: 560px){
  .sf-pair{
    grid-template-columns: 1fr;
  }

  .ps-table.sf-step-table thead{
    display: table-header-group;
  }

  .ps-table.sf-step-table tbody tr{
    display: table-row;
    padding: 0;
  }

  .ps-table.sf-step-table th,
  .ps-table.sf-step-table td,
  .ps-table.sf-step-table td[data-label]{
    display: table-cell;
    padding: 8px 4px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
    text-align: left;
  }

  .ps-table.sf-step-table .ps-num{
    text-align: right;
  }

  .ps-table.sf-step-table td[data-label]::before{
    content: none;
  }

  .ps-table.sf-step-table th:nth-child(3),
  .ps-table.sf-step-table td:nth-child(3){
    display: none;
  }

  .ps-table.sf-step-table tbody th{
    font-size: 14px;
  }

  .sf-cost-inline{
    display: block;
  }

  .sf-step-table .sf-tag{
    display: table;
    margin: 3px 0 0;
  }
}

/* 억 단위 입력칸 */
.sf-unit-input{
  display: flex;
  align-items: center;
  gap: 6px;
}

.sf-unit-input .mc-input{
  flex: 1;
  min-width: 0;
}

/* ---------- 내 기록으로 운 보기 ---------- */

.sf-me{
  display: grid;
  gap: 12px;
}

.sf-me > .h2{
  margin: 0;
}

#sfMeBody{
  display: grid;
  gap: 12px;
}

.sf-me .mc-hint{
  word-break: keep-all;
}

.sf-me-tag{
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  vertical-align: 3px;
}

.sf-me-key{
  justify-content: flex-end;
}

.sf-me-result{
  display: grid;
  gap: 12px;
}

.sf-me-headline{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--title);
  word-break: keep-all;
}

.sf-me .is-good{
  color: #4f9a44;
}

.sf-me .is-bad{
  color: #c0533a;
}

html[data-theme="dark"] .sf-me .is-good{
  color: #7bc468;
}

html[data-theme="dark"] .sf-me .is-bad{
  color: #e88a72;
}

.sf-me-badge{
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg);
  font-size: 12px;
  font-weight: 800;
  vertical-align: 3px;
  color: var(--muted);
}

.sf-me-level{
  display: block;
  margin-top: 4px;
  padding: 3px 6px;
  border-radius: 8px;
  border: 1px solid var(--primary);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.sf-me-table thead th:nth-child(n+3){
  text-align: right;
}

@media (max-width: 760px){
  .sf-me .sf-summary{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}