/* ==========================================================================
   name-romanizer 전용 스타일
   색상·간격·모서리 값은 css/common.css 에 정의된 변수만 사용합니다. (STYLE.md 참고)
   ========================================================================== */

/* 예시 이름 버튼 */
.sample-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.sample-row .sample-label {
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 700;
}

.sample-row .button {
  /* STYLE.md: 터치 대상 최소 44px */
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: 14px;
}

/* 안내 문구 안에 들어가는 작은 버튼 */
.inline-action {
  /* STYLE.md: 터치 대상 최소 44px */
  min-height: 44px;
  margin-left: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: 14px;
}

/* 성씨·이름 표기 선택 */
.picker-groups {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.picker .option-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.picker .option-card {
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-3);
  color: var(--color-text);
  font-size: 16px;
}

.option-tag {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.option-card:has(input:checked) .option-tag {
  color: var(--color-primary);
}

@media (max-width: 760px) {
  /* 모바일에서는 라디오 버튼이 보이므로 가로 배치로 되돌립니다. */
  .picker .option-grid {
    grid-template-columns: 1fr;
  }

  .picker .option-card {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
  }

  .picker .option-tag {
    margin-left: auto;
  }
}