/* utility-calculator.css — 계산기 상세·목록 UI (§7.2, §7.3, §12) */

.ucalc-detail { max-width: var(--container); margin: 0 auto; padding: var(--sp-6) 0 var(--sp-8); }
.ucalc-breadcrumb { font-size: 13px; color: var(--color-text-secondary); margin-bottom: var(--sp-4); }
.ucalc-breadcrumb a { color: var(--color-text-secondary); text-decoration: none; }
.ucalc-breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; }
.ucalc-detail-head { margin-bottom: var(--sp-6); }

/* 입력/결과 2열 (데스크톱 56~60% / 40~44%) */
.ucalc-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: var(--sp-6); align-items: start; }
.ucalc-col-input, .ucalc-col-result, .ucalc-layout .ucalc-card { min-width: 0; }
.ucalc-col-result { position: sticky; top: 88px; }

/* 폼 */
.ucalc-easybar {
  margin-bottom: var(--sp-4); padding: var(--sp-4);
  background: var(--color-primary-soft); border: 1px solid #DBEAFE; border-radius: 12px;
}
.ucalc-easybar p { margin: 0; color: var(--color-text); font-size: 14px; line-height: 1.6; }
.ucalc-advanced-toggle {
  width: 100%; min-height: 44px; margin-top: var(--sp-3); padding: 8px 12px;
  border: 1px solid var(--color-border-strong); border-radius: 10px; background: var(--color-surface-soft);
  color: var(--color-text); font-size: 14px; font-weight: 650; cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.ucalc-advanced-toggle:hover { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-hover); }
.ucalc-required-note, .ucalc-help, .ucalc-money-preview, .ucalc-js-note, .ucalc-form-status {
  font-size: 14px; line-height: 1.5;
}
.ucalc-required-note { margin: 0 0 var(--sp-4); color: var(--color-text-secondary); }
.ucalc-help { margin: 6px 0 0; color: var(--color-text-secondary); }
.ucalc-money-preview { margin: 6px 0 0; color: var(--color-primary-hover); font-weight: 600; }
.ucalc-form-status { margin: 0 0 var(--sp-3); color: var(--color-text-secondary); }
.ucalc-form-status:empty { display: none; }
.ucalc-field { margin-bottom: var(--sp-4); }
.ucalc-field[hidden] { display: none; }
.ucalc-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: var(--sp-2); }
.ucalc-req { color: var(--color-error); }
.ucalc-inputwrap { position: relative; display: flex; align-items: center; }
.ucalc-input {
  width: 100%; min-height: 48px; padding: 0 var(--sp-4);
  font-size: 16px; color: var(--color-text);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-input);
  background: var(--color-surface);
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.ucalc-input:hover { border-color: #667085; }
.ucalc-input:focus { border-color: var(--color-primary) !important; box-shadow: var(--shadow-focus) !important; outline: none; }
.ucalc-money { text-align: right; }
.ucalc-input[type="date"] { cursor: pointer; color-scheme: light; }
.ucalc-input[type="date"]::-webkit-calendar-picker-indicator {
  width: 24px; height: 24px; margin-right: -6px; padding: 6px;
  border-radius: 8px; cursor: pointer; opacity: .72;
}
.ucalc-input[type="date"]:hover::-webkit-calendar-picker-indicator { background: var(--color-primary-soft); opacity: 1; }
.ucalc-unit { position: absolute; right: var(--sp-4); color: var(--color-text-secondary); font-size: 14px; pointer-events: none; }
.ucalc-inputwrap-unit .ucalc-input { padding-right: 62px; }
.ucalc-group { border: 0; padding: 0; margin: 0; }
.ucalc-group .ucalc-label { margin-bottom: var(--sp-2); }
.ucalc-radio, .ucalc-check {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  margin: 0 8px 8px 0; padding: 0 14px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-input);
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.ucalc-radio:hover, .ucalc-check:hover { border-color: var(--color-primary); }
.ucalc-radio:has(input:checked), .ucalc-check:has(input:checked) {
  border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-hover);
}
.ucalc-radio input, .ucalc-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); }
.ucalc-radio:has(input:focus-visible), .ucalc-check:has(input:focus-visible) {
  outline: 3px solid var(--color-primary); outline-offset: 2px;
}
.ucalc-radio input:focus-visible, .ucalc-check input:focus-visible { outline: none; }
.ucalc-field.has-error .ucalc-input { border-color: var(--color-error); }
.ucalc-error { color: var(--color-error); font-size: 14px; margin: 6px 0 0; }
.ucalc-quick-values { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.ucalc-quick-label { flex: 0 0 100%; color: var(--color-text-secondary); font-size: 13px; }
.ucalc-quick-btn, .ucalc-swap-btn {
  min-height: 44px; padding: 7px 12px; border: 1px solid var(--color-border); border-radius: 999px;
  background: var(--color-surface-soft); color: var(--color-text); font-size: 14px; line-height: 1.2;
  white-space: nowrap; cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.ucalc-quick-btn:hover, .ucalc-swap-btn:hover { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
.ucalc-quick-btn:active { background: #DBEAFE; }
.ucalc-quick-btn:focus-visible, .ucalc-swap-btn:focus-visible, .ucalc-advanced-toggle:focus-visible {
  outline: 3px solid var(--color-primary); outline-offset: 2px;
}
.ucalc-swap-btn { display: block; margin: 0 0 var(--sp-4); border-radius: 10px; }
.ucalc-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.ucalc-actions .ucalc-btn { flex: 1 1 0; }
.ucalc-js-note { color: var(--color-text-secondary); margin-top: var(--sp-3); }

/* 결과 */
.ucalc-card-result { min-height: 200px; background: var(--color-surface); border-color: #D7E5FB; }
.ucalc-card-result:focus { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.ucalc-result-placeholder {
  min-height: 112px; display: grid; place-items: center;
  color: var(--color-text-secondary); text-align: center;
}
.ucalc-primary {
  background: var(--color-primary-soft); border-radius: var(--radius-card);
  padding: var(--sp-6); margin-bottom: var(--sp-4);
  display: flex; flex-direction: column; gap: 4px;
}
.ucalc-primary-label { font-size: 14px; color: var(--color-text-secondary); }
.ucalc-primary-value {
  min-width: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 700; line-height: 1.15;
  color: var(--color-primary-hover); overflow-wrap: anywhere;
}
.ucalc-primary-sub { font-size: 14px; color: var(--color-text-secondary); }
.ucalc-breakdown { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-4); }
.ucalc-breakdown th, .ucalc-breakdown td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.ucalc-breakdown td { text-align: right; font-weight: 600; }
.ucalc-breakdown th { color: var(--color-text-secondary); font-weight: 400; }
.ucalc-warnings, .ucalc-rounding, .ucalc-assumptions, .ucalc-sources { font-size: 14px; margin-top: var(--sp-4); }
.ucalc-warnings { background: var(--color-warning-soft); border-radius: 10px; padding: var(--sp-3) var(--sp-4); }
.ucalc-warnings h4, .ucalc-rounding h4, .ucalc-assumptions h4, .ucalc-sources h4 { font-size: 13px; margin: 0 0 6px; }
.ucalc-warnings ul, .ucalc-rounding ul, .ucalc-assumptions ul, .ucalc-sources ul { margin: 0; padding-left: 18px; }
.ucalc-disclaimer { font-size: 14px; color: var(--color-text-secondary); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--color-border); }
.ucalc-ruleinfo { font-size: 14px; color: var(--color-text-secondary); margin-top: var(--sp-3); }
.ucalc-result-error { background: var(--color-error-soft); border-radius: 10px; padding: var(--sp-4); }
.ucalc-result-rulemissing { background: var(--color-warning-soft); border-radius: 10px; padding: var(--sp-4); }
.ucalc-result-msg { font-weight: 600; margin: 0 0 6px; }
.ucalc-errorlist { margin: 0; padding-left: 18px; font-size: 14px; }
.ucalc-schedule { margin-top: var(--sp-4); }
.ucalc-schedule summary {
  min-height: 44px; display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; font-weight: 600; color: var(--color-primary-hover);
}
.ucalc-schedule summary::after { content: '＋'; font-size: 18px; line-height: 1; }
.ucalc-schedule[open] summary::after { content: '−'; }
.ucalc-schedule summary::-webkit-details-marker { display: none; }
.ucalc-schedule-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.ucalc-schedule-table th, .ucalc-schedule-table td { padding: 6px 8px; border-bottom: 1px solid var(--color-border); text-align: right; }
.ucalc-schedule-table th { background: var(--color-surface-soft); }

/* 광고 */
.ucalc-ad { margin: var(--sp-8) 0; min-height: 100px; border: 1px dashed var(--color-border-strong); border-radius: 10px; padding: var(--sp-3); text-align: center; background: rgba(255,255,255,.45); }
.ucalc-ad-label { display: block; font-size: 11px; color: var(--color-text-secondary); margin-bottom: 4px; }

/* 목록 카드 */
.ucalc-list { max-width: var(--container); margin: 0 auto; padding: var(--sp-6) 0 var(--sp-8); }
.ucalc-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.ucalc-card-link { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: var(--sp-6); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); text-decoration: none; color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.ucalc-card-link:hover, .ucalc-card-link:focus-visible { border-color: #9EC5FE; box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.ucalc-card-name { font-size: 17px; font-weight: 600; }
.ucalc-card-desc { font-size: 14px; color: var(--color-text-secondary); }
.ucalc-card-meta { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; }
/* 분류 필터(그누보드 category_option: <li><a>) → pill 탭 */
.ucalc-filter { margin: var(--sp-4) 0px; }
.ucalc-filter-ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.ucalc-filter-ul li { margin: 0; padding: 0; }
.ucalc-filter-ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: var(--color-surface);
  border: 1px solid var(--color-border); color: var(--color-text-secondary); text-decoration: none; font-size: 14px; line-height: 1.2; }
.ucalc-filter-ul a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ucalc-filter-ul a#bo_cate_on, .ucalc-filter-ul a.bo_cate_on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.ucalc-empty { padding: var(--sp-12) 0; text-align: center; color: var(--color-text-secondary); }
.ucalc-empty-state {
  min-height: 160px; margin-top: var(--sp-4); padding: var(--sp-8) var(--sp-6);
  display: grid; place-items: center; text-align: center;
  color: var(--color-text-secondary); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.ucalc-empty-state p { margin: 0; }
.ucalc-paging { margin-top: var(--sp-8); text-align: center; }
.ucalc-related { margin-top: var(--sp-8); }

/* 가이드 목록 */
.ucalc-guide-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.ucalc-guide-row a { display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); transition: background-color var(--transition-fast); }
.ucalc-guide-row:last-child a { border-bottom: 0; }
.ucalc-guide-row a:hover, .ucalc-guide-row a:focus-visible { background: var(--color-primary-soft); }
.ucalc-guide-row a:hover .ucalc-guide-title { color: var(--color-primary); }
.ucalc-guide-title { flex: 1; font-size: 16px; font-weight: 500; }
.ucalc-guide-date { font-size: 13px; color: var(--color-text-secondary); }
.ucalc-rules-group { border-top: 1px solid var(--color-border); padding-top: var(--sp-3); margin-top: var(--sp-3); }
.ucalc-list-admin { margin: 0 0 var(--sp-6); }

/* 기준 버전 관리 표 */
.ucalc-rules-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
.ucalc-rules-table th, .ucalc-rules-table td { padding: 12px 14px; border-bottom: 1px solid var(--color-border); text-align: left; }
.ucalc-rules-table thead th { background: var(--color-surface-soft); font-weight: 600; color: var(--color-text-secondary); }
.ucalc-rules-table a { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.ucalc-rule-st { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 999px; }
.ucalc-rule-published { background: var(--color-success-soft); color: var(--color-success); }
.ucalc-rule-draft { background: var(--color-surface-soft); color: var(--color-text-secondary); }
.ucalc-rule-scheduled { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.ucalc-rule-archived { background: var(--color-error-soft); color: var(--color-error); }
.ucalc-rules-params legend { font-weight: 600; }

@media print {
  .ucalc-col-input, .ucalc-ad, .ucalc-breadcrumb, .ucalc-detail-foot, #wg_header, #ft { display: none !important; }
  .ucalc-layout { display: block; }
}

@media (max-width: 600px) {
  .ucalc-easybar { padding: var(--sp-3); }
  .ucalc-card { padding: var(--sp-4); }
  .ucalc-primary { padding: var(--sp-4); }
  .ucalc-quick-values { gap: 6px; }
  .ucalc-quick-btn { flex: 0 1 auto; padding-left: 10px; padding-right: 10px; }
  .ucalc-guide-row a { align-items: flex-start; padding: var(--sp-4); }
}