/* v2 도구 페이지 추가 스타일. manmul.css 위에 얹는다.
   v1에 없던 것은 결과 표(.result-table)와 기준값 블록(.tool-reference)이다. */

.tool-answers {
  font-weight: 600;
  color: var(--mm-text, #e8eaf0);
  margin: 0 0 1.5rem;
}

/* --- 입력 ------------------------------------------------------------- */

/* manmul.css의 .form-actions가 flex라 폼 전체가 한 줄로 눌리는 것을 막는다.
   입력칸은 세로로 쌓고 버튼 줄만 가로로 둔다. */
.tool-form { display: block; }
.tool-form .field { display: block; margin-bottom: 1.25rem; }
.tool-form label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.tool-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.tool-form input,
.tool-form select,
.tool-form textarea { width: 100%; }

.field-control { display: flex; align-items: stretch; gap: 0; }
.field-control input { flex: 1 1 auto; min-width: 0; }
.field-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.9rem;
  border: 1px solid var(--mm-border, #2a2f3a);
  border-left: 0;
  border-radius: 0 0.5rem 0.5rem 0;
  background: var(--mm-surface-2, #1b1f2a);
  color: var(--mm-muted, #98a0b3);
  white-space: nowrap;
}
.field-control input { border-radius: 0.5rem 0 0 0.5rem; }
.field-control:only-child input,
.field-control input:only-child { border-radius: 0.5rem; }

.field-help { font-size: 0.85rem; color: var(--mm-muted, #98a0b3); margin: 0.35rem 0 0; }
.field-error { font-size: 0.85rem; color: #ff8b8b; margin: 0.35rem 0 0; }
.field.has-error input,
.field.has-error select { border-color: #ff8b8b; }

/* --- 기준값 ----------------------------------------------------------- */

.tool-reference {
  margin: 1.5rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--mm-border, #2a2f3a);
  border-radius: 0.6rem;
  background: var(--mm-surface-2, #1b1f2a);
}
.tool-reference summary { cursor: pointer; font-weight: 600; }
.ref-list { margin: 0.8rem 0 0; padding-left: 1.1rem; }
.ref-list li { margin-bottom: 0.4rem; line-height: 1.6; }
.ref-date { color: var(--mm-muted, #98a0b3); font-size: 0.85rem; }
.ref-warn {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 0.3rem;
  background: #b4530f;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
.ref-note { font-size: 0.85rem; color: var(--mm-muted, #98a0b3); margin: 0.7rem 0 0; }

/* --- 결과 ------------------------------------------------------------- */

.result-label { color: var(--mm-muted, #98a0b3); margin: 0 0 0.2rem; font-size: 0.9rem; }
.result-value {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--mm-accent, #8ea6ff);
  overflow-wrap: anywhere;
}

.result-note {
  margin: 0 0 0.8rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.45rem;
  font-size: 0.88rem;
  line-height: 1.6;
}
.result-note-info { background: rgba(49, 87, 213, 0.15); }
.result-note-warn { background: rgba(180, 83, 15, 0.18); }
.result-error { color: #ff8b8b; margin: 0 0 0.8rem; }

/* 표는 자기 안에서만 가로 스크롤한다. 페이지 본문이 흔들리면 안 된다. */
.result-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.2rem;
}
.result-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
}
.result-table th,
.result-table td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--mm-border, #2a2f3a);
  text-align: right;
  white-space: nowrap;
}
.result-table thead th { text-align: right; color: var(--mm-muted, #98a0b3); font-weight: 600; }
.result-table th[scope='row'],
.result-table thead th:first-child { text-align: left; }
.result-table tfoot th,
.result-table tfoot td { font-weight: 700; border-top: 2px solid var(--mm-border, #2a2f3a); border-bottom: 0; }

.result-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0 0 1.2rem;
  font-variant-numeric: tabular-nums;
}
.result-details dt { color: var(--mm-muted, #98a0b3); }
.result-details dd { margin: 0; text-align: right; font-weight: 600; }

.result-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (max-width: 480px) {
  .result-table { font-size: 0.85rem; }
  .result-details { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .result-details dd { text-align: left; margin-bottom: 0.5rem; }
}

.tool-parent-link {
  margin: 1.2rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: var(--mm-surface-2, #1b1f2a);
  font-size: 0.92rem;
}

/* --- /calc/ 허브 ------------------------------------------------------- */

.calc-group { margin: 2.5rem 0; }
.calc-group h2 { display: flex; align-items: baseline; gap: 0.6rem; }
.calc-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mm-muted, #98a0b3);
  background: var(--mm-surface-2, #1b1f2a);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.calc-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
@media (min-width: 720px) { .calc-list { grid-template-columns: 1fr 1fr; } }
.calc-list a {
  display: block;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--mm-border, #2a2f3a);
  border-radius: 0.6rem;
  background: var(--mm-surface, #171b24);
  text-decoration: none;
  height: 100%;
}
.calc-list a:hover { border-color: var(--mm-accent, #8ea6ff); }
.calc-list strong { display: block; margin-bottom: 0.25rem; }
.calc-list span { display: block; font-size: 0.86rem; color: var(--mm-muted, #98a0b3); line-height: 1.5; }

.tool-children { margin: 1.8rem 0 0; }
.tool-children h2 { font-size: 1.05rem; margin: 0 0 0.7rem; }
.tool-children ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tool-children a {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--mm-border, #2a2f3a);
  border-radius: 999px;
  background: var(--mm-surface-2, #1b1f2a);
  font-size: 0.85rem;
  text-decoration: none;
}
.tool-children a:hover { border-color: var(--mm-accent, #8ea6ff); }
.children-note { font-size: 0.82rem; color: var(--mm-muted, #98a0b3); margin: 0.7rem 0 0; }

/* 허브에서 계산기 섹션으로 유도하는 블록 (v1 홈에 rewrite.js가 삽입) */
.hub-featured {
  margin: 2rem 0;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--mm-border, #2a2f3a);
  border-radius: 0.8rem;
  background: var(--mm-surface, #171b24);
}
.hub-featured h2 { margin-top: 0; }
.featured-link { font-weight: 700; }