/* 강사료 실수령 계산기 (pay.html): inputs, one contract at a time,
   and two big numbers (한 주, 한 달). What gets deducted stays folded. */
.pay { max-width: 720px; padding-bottom: 48px; }
.pay .title-xl { margin-top: 8px; }
.pay-sub { margin-top: 10px; font-size: 18px; line-height: 1.6; color: var(--text-3); }
.pay-from { margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: var(--blue-soft); font-size: 16px; color: var(--text-2); }
.pay .label { display: block; font-size: 16px; font-weight: 600; }

.pay-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; align-items: end; }
.pay-inputs > label .label { display: flex; align-items: center; min-height: 32px; margin-bottom: 8px; }
.pay-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; min-height: 32px; }
.pay-field { position: relative; display: block; }
.pay-field .field { padding-right: 76px; font-size: 20px; font-weight: 600; text-align: right; }
.pay-field .unit { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--text-4); pointer-events: none; }

/* Segmented switch: 주당 | 한 달, 프리랜서 | 근로자 */
.pay-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--fill); }
.pay-seg button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--text-4); font-size: 14px; font-weight: 600; cursor: pointer; }
.pay-seg button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.pay-contract { margin-top: 20px; }
.pay-contract .label { margin-bottom: 8px; }
.pay-seg-lg { display: flex; }
.pay-seg-lg button { flex: 1 1 0; min-height: 48px; font-size: 16px; }
.pay-seg-lg small { font-size: 13px; font-weight: 500; color: var(--text-4); }

/* Result: 한 주 and 한 달 */
.pay-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.pay-period { padding: 22px 24px; border-radius: var(--radius); background: var(--blue-soft); }
.pay-period h2 { font-size: 16px; font-weight: 600; color: var(--text-3); }
.pay-net { margin-top: 6px; font-size: clamp(28px, 4.4vw, 36px); font-weight: 700; color: var(--blue); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pay-gross { margin-top: 4px; font-size: 15px; color: var(--text-4); font-variant-numeric: tabular-nums; }
.pay-basis, .pay-warn, .pay-detail { grid-column: 1 / -1; }
.pay-basis { font-size: 15px; color: var(--text-4); }
.pay-warn { padding: 12px 16px; border-radius: 14px; background: var(--warm-soft); font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* Folded detail */
.pay-detail { margin-top: 4px; border-top: 1px solid var(--line-strong); }
.pay-detail summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-size: 16px; font-weight: 600; color: var(--text-2); cursor: pointer; list-style: none; }
.pay-detail summary::-webkit-details-marker { display: none; }
.pay-detail summary::after { content: "펼치기 ▾"; font-size: 14px; font-weight: 500; color: var(--text-4); }
.pay-detail[open] summary::after { content: "접기 ▴"; }
.pay-lines { list-style: none; margin: 0; padding: 0; }
.pay-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pay-line-name { font-size: 16px; color: var(--text-2); }
.pay-line-value { font-size: 16px; color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
.pay-line-expr { grid-column: 1 / -1; font-size: 14px; color: var(--text-4); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pay-line.total .pay-line-name, .pay-line.total .pay-line-value { font-weight: 700; color: var(--text); }

.pay-notes { margin-top: 40px; }
.pay-notes h2 { font-size: 19px; font-weight: 700; }
.pay-notes ul { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.pay-notes li { font-size: 16px; line-height: 1.6; color: var(--text-3); }

@media (max-width: 560px) {
  .pay-inputs { grid-template-columns: minmax(0, 1fr); }
  /* One row each: 한 주 / 한 달 on the left, the amount on the right. */
  .pay-result { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pay-period { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 12px; padding: 16px 18px; }
  .pay-period .pay-net { margin-top: 0; font-size: 28px; text-align: right; white-space: nowrap; }
  .pay-period .pay-gross { grid-column: 1 / -1; text-align: right; }
}