/* Supplemental styles for the 보조배터리 완충 시간 계산기 page only.
   Reuses color variables and base classes from ../assets/styles.css —
   this file is additive and never overrides the shared stylesheet. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The shared .result-value clamp (2.4rem–4.1rem) is tuned for short numeric
   values like "12.75". Our result is a full "약 N시간 M분" string, which
   wraps awkwardly at that size — use a smaller, still-prominent clamp. */
.result-value-text {
  font-size: clamp(1.7rem, 5.5vw, 2.6rem);
}

.quick-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.quick-summary-label {
  display: block;
  color: var(--primary);
  font-weight: 800;
  font-size: 0.82rem;
  margin-bottom: 4px;
}
.quick-summary-grid p {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
  font-size: 0.94rem;
}

.advanced-details {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.advanced-details summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--primary);
}
.advanced-details[open] summary {
  margin-bottom: 4px;
}

.calc-summary {
  color: var(--muted);
  line-height: 1.8;
  font-size: 0.94rem;
}
.calc-summary code {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.table-wrap { overflow-x: auto; }
.example-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.example-table th, .example-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.example-table th { color: var(--muted); font-weight: 700; }

.sources-list {
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.8;
}
.sources-list a { text-decoration: underline; }

.disclosure {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

.faq-list details {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary {
  cursor: pointer;
  font-weight: 800;
}
.faq-list p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

@media (max-width: 780px) {
  .quick-summary-grid { grid-template-columns: 1fr; }
}