/* 퍼센트 계산기 — 공통 도구 스타일에 없는 것만 정의한다. */

.pc-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .5rem; margin-bottom: var(--spacing-md, 1rem);
}
.pc-decimals { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }
.pc-decimals .select-tool { width: auto; min-width: 6rem; }

/* 문장처럼 읽히는 입력 줄 — "200 의 15 % 는?" */
.pc-sentence {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    font-size: var(--text-sm, .9375rem); color: var(--text-secondary, #3d4450);
}
.pc-sentence .input-tool { flex: 1 1 6rem; min-width: 0; max-width: 11rem; text-align: right; font-variant-numeric: tabular-nums; }
.pc-sentence .select-tool { width: auto; }

.pc-result {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    margin-top: var(--spacing-md, 1rem);
    padding: var(--spacing-md, 1rem);
    border: 1px solid var(--border-color, #e5e8ed);
    border-radius: var(--radius-md, 8px);
    background: var(--primary-soft, #eef3fd);
    text-align: center;
}
.pc-result-value {
    font-size: 1.6rem; font-weight: 700; line-height: 1.25;
    color: var(--primary-strong, #2c56b8);
    word-break: break-all; font-variant-numeric: tabular-nums;
}
.pc-result-formula { font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); word-break: break-all; }

.pc-card.is-up   .pc-result-value { color: #c0392b; }   /* 한국식: 오름은 빨강 */
.pc-card.is-down .pc-result-value { color: #2c6fd6; }   /* 내림은 파랑 */
.pc-card.is-error .pc-result { background: var(--bg-subtle, #f6f7f9); }
.pc-card.is-error .pc-result-value { font-size: 1.1rem; color: var(--text-muted, #626977); }

.pc-hint { margin: var(--spacing-md, 1rem) 0 0; font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }
.pc-hint i { margin-right: .25rem; }

@media (max-width: 768px) {
    .pc-sentence .input-tool { max-width: none; }
    .pc-result-value { font-size: 1.35rem; }
}