/* ===================================================================
   요약 패널 탭 — 총 합계는 머리에 고정하고, 그 아래를 탭으로 나눈다.

   옵션을 여러 개 고르면 오른쪽 요약 열이 화면보다 길어진다. aside는
   position:sticky라 위쪽만 화면에 붙고, 넘친 아래쪽(대출 월 납입금)은
   어떻게 스크롤해도 닿지 않았다.

   덩어리를 하나씩만 보여주면 열이 화면을 넘지 않는다. 대신 '안 보이는 쪽
   숫자'가 궁금해지므로 탭 라벨 자체에 각 결과값을 박아 둔다 —
   어느 탭에 있든 옵션 총합과 월 납입금은 함께 읽힌다.

   구조 조립은 summary-tabs.js. 이 파일은 페이지 인라인 CSS 뒤에 와야
   장부(Ledger) 스타일의 카드 규칙을 덮는다.
   =================================================================== */

.sum-tabs{
  display:flex; margin-top:20px;
  border-bottom:1px solid var(--line);
}
.sum-tabs button{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:4px;
  padding:11px 0 12px; margin-bottom:-1px;
  background:none; border:0; border-bottom:2px solid transparent;
  font-family:inherit; text-align:left; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.sum-tabs button:last-child{align-items:flex-end; text-align:right}
.sum-tabs .t-lbl{
  font-size:.7rem; font-weight:800; color:#8b8d94;
  letter-spacing:.1em; text-transform:uppercase;
}
.sum-tabs .t-val{
  font-size:.95rem; font-weight:800; color:#b6b6bd;
  letter-spacing:-.045em; font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
/* 카드가 셋인 단지(납부 일정이 따로 있는 곳)는 한 칸이 좁아지므로 한 단계 줄인다 */
.sum-tabs[data-count="3"] .t-lbl{font-size:.64rem; letter-spacing:.04em}
.sum-tabs[data-count="3"] .t-val{font-size:.82rem}

.sum-tabs button:hover .t-lbl{color:#5b5d64}
.sum-tabs button[aria-selected="true"]{border-bottom-color:var(--ink)}
.sum-tabs button[aria-selected="true"] .t-lbl{color:var(--ink)}
.sum-tabs button[aria-selected="true"] .t-val{color:var(--ink)}
.sum-tabs button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* 탭 안으로 들어간 덩어리 — 위에 탭 밑줄이 이미 있으니 잉크 룰과 제목은 뺀다 */
.sum-pane[data-pane="sum"] > hr:first-child{display:none}
.sum-pane[data-pane="sum"]{padding-top:4px}
.loan.sum-pane, .pay.sum-pane{margin-top:18px; border-top:0; padding-top:0}
.sum-pane > h3{display:none}

/* 한 번에 한 덩어리만 보이므로 목록에 줄 여유가 넉넉하다.
   그래도 옵션을 스무 개씩 고르면 넘치므로 여기서 한 번 더 잡아 준다. */
@media (min-width:981px){
  #pSelList{
    max-height:max(160px, calc(100vh - 450px));
    overflow-y:auto; overscroll-behavior:contain;
    padding-right:12px; margin-right:-12px;
    scrollbar-width:thin; scrollbar-color:#d3d3d8 transparent;
  }
  #pSelList::-webkit-scrollbar{width:7px}
  #pSelList::-webkit-scrollbar-track{background:transparent}
  #pSelList::-webkit-scrollbar-thumb{background:#d3d3d8; border-radius:99px}
}

/* -------------------------------------------------------------------
   첫 방문 안내 — 탭이 있다는 걸 알아채지 못할 수 있어 딱 한 번 말해 준다.
   누르거나 닫거나 14초가 지나면 거두고, 그 뒤로는 다시 뜨지 않는다.
   ------------------------------------------------------------------- */
.sum-coach{
  position:relative;
  display:flex; align-items:flex-start; gap:8px;
  margin:12px 0 0; padding:11px 10px 12px 13px;
  border:1px solid var(--accent-line); border-radius:8px;
  background:var(--accent-bg);
  font-size:.78rem; font-weight:700; line-height:1.55;
  color:var(--accent-dark); letter-spacing:-.02em;
  animation:sumCoachIn .32s cubic-bezier(.22,.61,.36,1);
}
/* 가리키는 탭의 한가운데를 향하도록 꼭지 위치를 JS가 잡아 준다 */
.sum-coach::before{
  content:""; position:absolute; top:-6px; right:var(--coach-arrow, 52px);
  width:10px; height:10px; background:var(--accent-bg);
  border-left:1px solid var(--accent-line); border-top:1px solid var(--accent-line);
  transform:rotate(45deg);
}
.sum-coach .c-x{
  flex-shrink:0; margin-left:auto; padding:0 2px;
  border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:.9rem; line-height:1.2; color:var(--accent);
  opacity:.65; transition:opacity .15s ease;
}
.sum-coach .c-x:hover{opacity:1}
.sum-coach.is-out{animation:sumCoachOut .22s ease forwards}

@keyframes sumCoachIn{
  from{opacity:0; transform:translateY(-5px)}
  to{opacity:1; transform:none}
}
@keyframes sumCoachOut{
  to{opacity:0; transform:translateY(-4px)}
}

/* 안내가 떠 있는 동안 가리키는 탭도 함께 들뜨게 — 어디를 말하는지 분명해진다 */
.sum-tabs button.coach-target .t-lbl{color:var(--accent-dark)}
.sum-tabs button.coach-target .t-val{color:var(--accent)}
.sum-tabs button.coach-target{
  border-bottom-color:var(--accent-line);
  animation:sumCoachNudge 2.2s ease-in-out infinite;
}
@keyframes sumCoachNudge{
  0%,100%{border-bottom-color:var(--accent-line)}
  50%{border-bottom-color:var(--accent)}
}

@media (prefers-reduced-motion:reduce){
  .sum-tabs button{transition:none}
  .sum-coach, .sum-coach.is-out{animation:none}
  .sum-tabs button.coach-target{animation:none; border-bottom-color:var(--accent)}
}