/* ArcSafe Free Tools — Shared Components
   header, card, field, badge 등 도구 간 공통으로 쓰이는 UI 조각.
   개별 도구는 이 위에 자기만의 계산 로직/결과 패널만 추가합니다. */

/* Header */
.as-header{
  display:flex; align-items:center; gap:14px; padding:22px 24px;
  border-bottom:1px solid var(--border-soft); background:rgba(255,255,255,0.01);
}
.as-header img{ height:22px; opacity:0.95; }
.as-header .as-divider{ width:1px; height:20px; background:var(--border); }
.as-header .as-title-block .as-kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; color:var(--amber); text-transform:uppercase;
}
.as-header .as-title-block h1{ font-size:16px; font-weight:600; margin-top:2px; }

/* Lead / intro block */
.as-lead{ margin-bottom:32px; }
.as-lead .as-eyebrow{
  font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:0.08em;
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.as-lead .as-eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 8px rgba(201,138,44,0.7);
}
.as-lead h2{ font-size:28px; font-weight:700; letter-spacing:-0.01em; line-height:1.3; }
.as-lead p{ color:var(--muted); margin-top:10px; font-size:14.5px; line-height:1.6; max-width:64ch; }

/* Card */
.as-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:26px; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.as-card h3{
  font-size:12px; font-family:var(--mono); letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:20px; display:flex; align-items:center; gap:8px;
}
.as-card h3 span.as-n{
  width:18px; height:18px; border-radius:5px; background:var(--panel-2); border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center; font-size:10px; color:var(--amber);
}

/* Field */
.as-field{ margin-bottom:18px; }
.as-field label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px; color:var(--text); margin-bottom:8px; font-weight:500;
}
.as-field label .as-unit{ font-family:var(--mono); font-size:11px; color:var(--muted-2); }
.as-field input[type=number]{
  width:100%; background:var(--panel-2); border:1px solid var(--border);
  color:var(--text); font-family:var(--mono); font-size:15px; padding:11px 12px;
  border-radius:10px; outline:none; transition:border-color .15s;
}
.as-field input[type=number]:focus{ border-color:var(--amber); }
.as-field .as-hint{ font-size:11.5px; color:var(--muted-2); margin-top:6px; line-height:1.5; }

/* Segmented control */
.as-seg{ display:flex; gap:8px; }
.as-seg button{
  flex:1; padding:10px 8px; border-radius:10px; border:1px solid var(--border);
  background:var(--panel-2); color:var(--muted); font-family:var(--mono); font-size:13px;
  cursor:pointer; transition:all .15s;
}
.as-seg button.active{ border-color:var(--amber); color:var(--amber); background:rgba(201,138,44,0.08); }

/* Badge */
.as-badge{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px;
  font-size:13px; font-weight:600; font-family:var(--mono);
}
.as-badge.ok{ background:rgba(14,124,74,0.1); color:var(--teal); border:1px solid rgba(14,124,74,0.3); }
.as-badge.fail{ background:rgba(220,38,38,0.1); color:var(--red); border:1px solid rgba(220,38,38,0.3); }
.as-badge.pending{ background:rgba(107,119,133,0.12); color:var(--muted); border:1px solid var(--border); }
.as-badge.caution{ background:rgba(201,138,44,0.1); color:var(--amber); border:1px solid rgba(201,138,44,0.3); }
.as-badge::before{ content:'●'; font-size:8px; }

/* Caution note (근거 미확인 등 주의 표시) */
.as-note{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px;
  background:rgba(201,138,44,0.08); border:1px solid rgba(201,138,44,0.25);
  font-size:11.5px; color:var(--amber); line-height:1.5;
}

/* Grid */
.as-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
@media (max-width: 760px){ .as-grid{ grid-template-columns: 1fr; } }