/* 컴퓨터 전기세 계산기(/tools/pc-electricity-cost/) 전용.
 * tools-bottleneck.css · tools-sensitivity.css 다음에 링크된다 — 토큰(--site-*, --bn-*)·.bn·.bn-field·.sv-field·
 * .sv-result·.sv-hero·.sv-stats·.bn-doc 를 그대로 쓴다. 색은 토큰만(hex 는 토큰 폴백 자리에서만).
 * 구조: 제목 → 입력 패널(PC·모니터·시간·일수) → 부품으로 추정(접힘) → 요금 방식 탭 → 결과(큰 금액 + 수치) → 설명.
 * 모서리: 패널 16px · 칸·탭 10px · 결과 20px(감도 변환기와 같은 단계).
 */

/* ── 입력 패널 ─────────────────────────────────────────────────── */
.el-panel {
    margin-top: 28px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
    padding: 8px; border-radius: 16px;
    background: var(--site-surface, #232323);
    border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14));
}
.el .sv-field input { padding-right: 46px; }
/* 단위(W·시간·일·kWh): 입력값 오른쪽 아래에 작게. */
.el-unit {
    position: absolute; right: 14px; bottom: 10px; pointer-events: none;
    font-size: .8125rem; font-weight: 600; color: var(--site-text-3, #949494);
}

/* ── 부품으로 추정(접힘) ───────────────────────────────────────── */
.el-est { margin-top: 10px; border-radius: 16px; background: var(--site-surface, #232323); }
.el-est > summary {
    display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 16px;
    font-size: .9375rem; font-weight: 650; color: var(--site-text-2, #b0b0b0);
    cursor: pointer; list-style: none; border-radius: 16px;
}
.el-est > summary::-webkit-details-marker { display: none; }
.el-est > summary::after {
    content: ""; margin-left: auto; width: 7px; height: 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .18s;
}
.el-est[open] > summary::after { transform: rotate(-135deg); }
.el-est > summary:hover { color: var(--site-text, #f0f0f0); }
.el-est > summary:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.el-est-body { padding: 0 8px 12px; }
.el-est-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.el-est-note { margin-top: 10px !important; padding: 0 8px; font-size: .875rem; line-height: 1.55; color: var(--site-text-2, #b0b0b0); }

/* ── 요금 방식 탭 ─────────────────────────────────────────────── */
.el-tabs {
    margin-top: 20px; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
    border-radius: 12px; background: var(--site-surface, #232323);
    border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14));
}
.el-tab {
    min-height: 40px; padding: 8px 16px; border: 1px solid transparent; border-radius: 10px;
    background: transparent; color: var(--site-text-2, #b0b0b0);
    font: 600 .9375rem/1.3 var(--bn-font); cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.el-tab:hover { color: var(--site-text, #f0f0f0); background: var(--site-surface-2, #2a2a2a); }
.el-tab[aria-selected="true"] { background: var(--site-surface-3, #333); border-color: var(--site-accent, #7aa5f2); color: var(--site-text, #f0f0f0); }
.el-tab:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.el-tab:active { transform: translateY(1px); }

.el-pane { margin-top: 10px; }
.el-pane[hidden] { display: none !important; }
.el-pane-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 640px; }
.el-pane-grid--one { grid-template-columns: minmax(0, 1fr); max-width: 316px; }
.el-field--month::after {
    content: ""; position: absolute; right: 16px; top: 29px; width: 7px; height: 7px; margin-top: -2px;
    border-right: 2px solid var(--site-text-2, #b0b0b0); border-bottom: 2px solid var(--site-text-2, #b0b0b0);
    transform: translateY(-50%) rotate(45deg); pointer-events: none; transition: transform .18s;
}
.el-pane-note { margin-top: 10px !important; max-width: 72ch; font-size: .875rem; line-height: 1.55; color: var(--site-text-2, #b0b0b0); }
.el-pane-note + .el-pane-note { margin-top: 4px !important; color: var(--site-text-3, #949494); }

/* ── 결과 ─────────────────────────────────────────────────────── */
.el-result { margin-top: 20px; }
.el .sv-hero-v { overflow-wrap: anywhere; }
.el[data-state="empty"] .sv-hero-v { color: var(--site-text-3, #949494); }
/* 탭에 따라 바뀌는 글자(제목·안내·구간 칸). */
.el[data-tab="kepco"] [data-for="rate"], .el[data-tab="rate"] [data-for="kepco"] { display: none !important; }
.el-result .sv-stats dd { font-size: 1.25rem; }
/* 큰 금액: 한글·가나가 섞여(약 ○○원) 고정폭 글꼴 대신 본문 글꼴 + 숫자만 같은 폭. */
.el-out { font-variant-numeric: tabular-nums; }

/* 문장 속 도구 링크(키보드·측정 도구와 같은 모양 — 그 CSS 를 링크하지 않아 이 페이지 범위로 둔다). */
.el .tl-in { color: var(--site-text, #f0f0f0); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.el .tl-in:hover { color: var(--site-accent, #7aa5f2); }

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .el-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .el-est-grid { grid-template-columns: minmax(0, 1fr); }
    .el-pane-grid--one { max-width: none; }
}
@media (max-width: 420px) {
    .el-result .sv-stats { grid-template-columns: minmax(0, 1fr); }
    .el-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 두 탭을 한 줄에, 긴 이름은 줄바꿈 */
    .el-tab { padding-inline: 8px; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
    .el-tab, .el-est > summary::after, .el-field--month::after { transition: none !important; }
}